Iterate on editor controls styling

maghoff · Aug 20, 2018 · c94bf91 · c94bf91
1 parent b93c79c
commit c94bf91
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 6 deletions.
diff --git a/assets/style.css b/assets/style.css
@@ -305,11 +305,15 @@ h1>input {
     bottom: 0;
     left: 0;
 
+    box-sizing: border-box;
+
+    text-align: right;
+
     box-shadow: 0px 5px 20px rgba(0,0,0, 0.2);
 
     background: var(--theme-main);
     color: var(--theme-text);
-    padding: 10px 20px;
+    padding: 10px 10px;
 
     transform: translate(0, 65px);
     transition: transform 100ms;
@@ -321,13 +325,52 @@ h1>input {
     transition-timing-function: cubic-bezier(.17,.84,.44,1);
 }
 
+.button {
+    box-shadow: 0px 2px 5px rgba(0,0,0, 0.2);
+    border-radius: 2px;
+
+    display: inline-block;
+    width: 120px;
+    text-align: center;
+    border: none;
+
+    cursor: pointer;
+
+    font-family: -apple-system, BlinkMacSystemFont,
+        "Segoe UI", "Roboto", "Oxygen",
+        "Ubuntu", "Cantarell", "Fira Sans",
+        "Droid Sans", "Helvetica Neue", sans-serif;
+    font-size: 16px;
+    line-height: 20px;
+
+    padding: 10px 0px;
+    margin-left: 10px;
+}
+.button:hover {
+    text-decoration: none;
+}
+
+.button-cancel {
+    background: white;
+    color: var(--theme-main);
+}
+.button-cancel:hover {
+    background: #f0f0f0;
+}
+
+.button-default {
+    background: var(--theme-main);
+    color: var(--theme-text);
+}
+
 @media (min-width: 630px) {
     .editor-controls {
         position: fixed;
         left: calc(50vw + 320px);
-        width: 120px;
-        top: calc(50vh - 40px);
-        height: 80px;
+        width: 160px;
+        top: calc(50vh - 65px);
+        height: 130px;
+        padding: 20px;
 
         transform: translate(20px, 0);
         opacity: 0;
@@ -476,6 +519,11 @@ input[type="search"]::placeholder {
     .search.focus .live-results {
         max-height: 500px;
     }
+
+    .button {
+        margin: 0;
+        margin-bottom: 10px;
+    }
 }
 
 .diff {

diff --git a/templates/article.html b/templates/article.html
@@ -26,9 +26,9 @@ <h1><input autocomplete=off type=text name=title value="{{title}}" placeholder="
 
 <div class="editor-controls">
 {{#cancel_url}}
-    <a class="cancel" href="{{.}}">Cancel</a>
+    <a class="button button-cancel cancel" href="{{.}}">Cancel</a>
 {{/cancel_url}}
-    <button type=submit>Save</button>
+    <button class="button button-default" type=submit>Save</button>
 </div>
 </form>