Button refactor

Refs #3101 & #916
TryGhost · Jul 15, 2014 · b070d61 · b070d61
1 parent 1fead26
commit b070d61
Show file tree

Hide file tree

Showing 9 changed files with 46 additions and 37 deletions.
diff --git a/core/client/assets/sass/layouts/editor.scss b/core/client/assets/sass/layouts/editor.scss
@@ -464,7 +464,7 @@ body.zen {
         right: -3px;
     }
 
-    button {
+    .button-save {
         min-height: 30px;
         height: 30px;
         line-height: 12px;
@@ -473,15 +473,12 @@ body.zen {
         border-top: rgba(255,255,255,0.4) 1px solid;
     }
 
-    .button-link {
-        border-top: none;
-    }
-
     .options {
         width: 30px;
         min-height: 30px;
         height: 30px;
         margin-top: 5px;
+        border-top: rgba(255,255,255,0.4) 1px solid;
     }
 
     .splitbutton-save,

diff --git a/core/client/assets/sass/layouts/modals.scss b/core/client/assets/sass/layouts/modals.scss
@@ -38,4 +38,10 @@
         line-height: 16px;
     }
 
+}
+
+.modal-footer {
+    .reject-button-class {
+        @extend .button;
+    }
 }
diff --git a/core/client/assets/sass/layouts/post-settings-menu.scss b/core/client/assets/sass/layouts/post-settings-menu.scss
@@ -18,7 +18,6 @@
     @include transition;
     position: relative;
     top: 1px;
-    cursor: pointer;
 
     &:hover,
     &.active {
@@ -160,7 +159,8 @@
     .delete {
         display: block;
         padding: 10px 15px;
-        cursor: pointer;
+        width: 100%;
+        text-align: left;
         @include icon($i-trash) {
             position: relative;
             top: -1px;

diff --git a/core/client/assets/sass/layouts/users.scss b/core/client/assets/sass/layouts/users.scss
@@ -271,7 +271,6 @@
         border-radius: 100%;
         overflow: hidden;
         padding: 3px;
-        // border: 5px solid #fff;
         background: #fff;
         z-index: 2;
 
@@ -304,6 +303,7 @@
     .edit-user-image {
         @include position(absolute, 3px 3px 3px 3px);
         border-radius: 100%;
+        width: calc(100% - 6px);
         background: rgba(0,0,0,0.5);
         opacity: 0;
         color: #fff;

diff --git a/core/client/assets/sass/modules/buttons.scss b/core/client/assets/sass/modules/buttons.scss
@@ -3,11 +3,24 @@
  *
  * Table of Contents
  *
+ * Button Reset
  * Buttons
  * Split Buttons
  */
 
 
+ /* ==========================================================================
+   Button Reset
+   ========================================================================== */
+
+button {
+    border: 0;
+    padding: 0;
+    background: transparent;
+    @include transition(all 0.15s ease-in-out);
+}
+
+
  /* ==========================================================================
    Buttons
    ========================================================================== */
@@ -18,8 +31,6 @@
     display: inline-block;
     padding: 0.9em 1.37em;
 
-    cursor: pointer;
-
     text-decoration: none;
     color: #fff;
     font-size: 11px; // Hack because Firefox sucks.
@@ -109,9 +120,9 @@
 
 
 // This is the default button style
-.button,
-button,
-input[type="button"] {
+.button {
+// button,
+// input[type="button"] {
     @extend %btn;
     color:#777;
     font-weight: normal;
@@ -138,9 +149,9 @@ input[type="button"] {
 }
 
 // Button for save/next/continue/confirm actions
-.button-save,
-button[type="submit"],
-input[type="submit"] {
+.button-save {
+// button[type="submit"],
+// input[type="submit"] {
     @extend %btn;
     background: $blue;
     box-shadow: none;
@@ -151,9 +162,9 @@ input[type="submit"] {
 }
 
 // Button for actions which add stuff
-.button-add,
-button[type="submit"].button-add,
-input[type="submit"].button-add {
+.button-add {
+// button[type="submit"].button-add,
+// input[type="submit"].button-add {
     @extend %btn;
     background: $green;
     &:hover,
@@ -163,9 +174,9 @@ input[type="submit"].button-add {
 }
 
 // Button for deleting/removing stuff
-.button-delete,
-button[type="reset"],
-input[type="reset"] {
+.button-delete {
+// button[type="reset"],
+// input[type="reset"] {
     @extend %btn;
     background: $red;
     box-shadow: none;

diff --git a/core/client/assets/sass/modules/dropdowns.scss b/core/client/assets/sass/modules/dropdowns.scss
@@ -27,11 +27,6 @@
 
 } // .dropdown
 
-a.dropdown,
-button.dropdown {
-    cursor: pointer;
-}
-
 
  /* ==========================================================================
    Dropdown Show & Hide

diff --git a/core/client/assets/sass/modules/floatingheaders.scss b/core/client/assets/sass/modules/floatingheaders.scss
@@ -25,7 +25,7 @@
     //Transparent gradient to make bg fade out as it goes out the top.
     @include linear-gradient(top, white 0%, white 25%, rgba(255,255,255,0.9) 100%, $fallback: transparent);
 
-    button,
+    // button,
     .button {
         display: inline-block;
         font-size: 10px;
@@ -60,7 +60,8 @@
         font-size: 0.85em;
     }
 
-    a {
+    a,
+    button {
         color: $brown;
         &:hover {
             color: $darkgrey;

diff --git a/core/client/assets/sass/modules/notifications.scss b/core/client/assets/sass/modules/notifications.scss
@@ -76,7 +76,6 @@
             right: 9px;
         };
         color: rgba(255,255,255,0.6);
-        cursor: pointer;
         &:hover {
             color: #fff;
         }

diff --git a/core/client/docs/dist/css/ghost-ui.min.css b/core/client/docs/dist/css/ghost-ui.min.css