From 98d87cfa267c016310bce320c70c2059aff6e26d Mon Sep 17 00:00:00 2001
From: John O'Nolan <john@ghost.org>
Date: Wed, 30 Jul 2014 07:47:54 +0300
Subject: [PATCH] Buttons

---
 ghost/admin/assets/sass/patterns/buttons.scss | 415 ++++++++++++++++++
 1 file changed, 415 insertions(+)
 create mode 100644 ghost/admin/assets/sass/patterns/buttons.scss

diff --git a/ghost/admin/assets/sass/patterns/buttons.scss b/ghost/admin/assets/sass/patterns/buttons.scss
new file mode 100644
index 0000000000..e12572771d
--- /dev/null
+++ b/ghost/admin/assets/sass/patterns/buttons.scss
@@ -0,0 +1,415 @@
+//
+// Button Reset
+// --------------------------------------------------
+
+button {
+    border: 0;
+    padding: 0;
+    background: transparent;
+    @include transition(all 0.15s ease-in-out);
+}
+
+
+//
+// Base Button
+// --------------------------------------------------
+
+%btn {
+    min-height: 35px;
+    width: auto;
+    display: inline-block;
+    padding: 0.9em 1.37em;
+
+    text-decoration: none;
+    color: #fff;
+    font-size: 11px; // Hack because Firefox sucks.
+    line-height: 13px; // Hack because Firefox sucks.
+    font-weight: 300;
+    text-align: center;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+
+    text-shadow: none;
+    border-radius: 0.2em;
+    border: rgba(0,0,0,0.05) 0.1em solid;
+
+    @include transition(background 0.3s ease, border-color 0.3s ease);
+
+    &:hover,
+    &.hover,
+    &:focus {
+        will-change: border-color, background;
+        border-color: transparent;
+        background: #f8f8f8;
+        text-decoration: none;
+    }
+
+    &:active {
+        box-shadow: rgba(0,0,0,0.3) 0 1px 3px inset;
+    }
+
+    &:disabled {
+        opacity: 0.5;
+    }
+
+    &.large {
+        padding: 1em 1.8em;
+        font-size: 14px;
+        line-height: 16px;
+    }
+
+    // Styling for buttons with icons in them
+    &[class*='icon-'] {
+        position: relative;
+        padding-left: calc(1.37em + 36px);
+        &:before {
+            position: absolute;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            width: 35px;
+            font-size: 13px;
+            line-height: 35px;
+            border-right: 1px solid rgba($darkgrey, 0.1);
+            opacity: 0.95;
+        }
+
+        &.large {
+            padding-left: calc(1.8em + 46px);
+            &:before {
+                width: 46px;
+                line-height: 46px;
+                font-size: 17px;
+            }
+        }
+
+    }
+
+}
+
+
+// TODO: Find a better way of doing this?
+[class*='button'] {
+    &[class*='has-icon'] {
+        padding-left: 0;
+        [class*='icon-'] {
+             margin-left: 11px;
+            margin-right: 4px;
+            &:before {
+                font-size: 0.9rem;
+            }
+        }
+    }
+    &.only-has-icon {
+        padding-right: 0;
+        [class*='icon-'] {
+            margin-right: 11px;
+        }
+    }
+}
+
+
+//
+// The Buttons
+// --------------------------------------------------
+
+.button {
+// button,
+// input[type="button"] {
+    @extend %btn;
+    color:#777;
+    font-weight: normal;
+    background: #eee;
+    box-shadow: none;
+    &:hover,
+    &:focus {
+        border-color: rgba(0,0,0,0.1);
+    }
+}
+
+.button-dark {
+    @extend %btn;
+    color: #fff;
+    font-weight: normal;
+    background: #A1ADB3;
+    box-shadow: none;
+    border-color: #A1ADB3;
+    &:hover,
+    &:focus {
+        border-color: darken(#A1ADB3, 10%);
+        background: darken(#A1ADB3, 10%);
+    }
+}
+
+// Button for save/next/continue/confirm actions
+.button-save {
+// button[type="submit"],
+// input[type="submit"] {
+    @extend %btn;
+    background: $blue;
+    box-shadow: none;
+    &:hover,
+    &:focus {
+        background: darken($blue, 10%);
+    }
+}
+
+// Button for actions which add stuff
+.button-add {
+// button[type="submit"].button-add,
+// input[type="submit"].button-add {
+    @extend %btn;
+    background: $green;
+    &:hover,
+    &:focus {
+        background: darken($green, 8%);
+    }
+}
+
+// Button for deleting/removing stuff
+.button-delete {
+// button[type="reset"],
+// input[type="reset"] {
+    @extend %btn;
+    background: $red;
+    box-shadow: none;
+    &:hover,
+    &:focus {
+        background: darken($red, 10%);
+    }
+}
+
+// Alternative button with more visual attention, 
+// but no extra semantic meaning
+.button-alt {
+    @extend %btn;
+    background: lighten($darkgrey, 10%);
+    &:hover,
+    &:focus {
+        background: $darkgrey;
+    }
+    &[class*='icon-']:before {
+        border-right-color: lighten($darkgrey, 10%);
+    }
+}
+
+// Alternative button with more visual attention, but no extra semantic meaning
+.button-info {
+    @extend %btn;
+    background: #A1ADB3;
+    &:hover,
+    &:focus {
+        background: lighten(#A1ADB3, 10%);
+    }
+}
+
+// This applies normal link styles to de-emphasise a button
+.button-link {
+    @extend %btn;
+    color: $blue;
+    background: transparent;
+    border: none;
+    &:hover,
+    &:focus {
+        background: transparent;
+        text-decoration: underline;
+    }
+}
+
+// Back button for pane animations
+.button-back {
+    @extend %btn;
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    margin-right: 30px;
+    padding: 0.5em 1.37em 0.5em 1.10em;
+    display: none;
+    color: #fff;
+    background: $blue;
+    border: none;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+
+    &:before {
+        content: ' ';
+        position: absolute;
+        top: 0;
+        left: -10px;
+        width: 0;
+        height: 0;
+        border-width: 18px 10px 18px 0;
+        border-color: transparent $blue transparent transparent;
+        border-style: solid solid solid none;
+        @include transform(scale(0.9999));
+        @include transition(border-color 0.3s ease);
+    }
+
+    &:hover,
+    &:focus {
+        color: #fff;
+        background: darken($blue, 10%);
+        border-color: darken($blue, 10%);
+        &:before {
+            border-right-color: darken($blue, 10%);
+        }
+    }
+
+}
+
+
+//
+// Base Splitbutton
+// --------------------------------------------------
+
+%splitbtn {
+    display: inline-block;
+    position: relative;
+    font-size: 0; // hack to stop space after button
+    white-space: nowrap;
+
+    button {
+        font-size: 11px; // hack to restore font size
+        @include border-right-radius(0);
+    }
+
+    // This is the additional dropdown arrow, to the right of the button.
+    .options {
+        display: inline-block;
+        position:relative;
+        width: 35px;
+        height: 35px;
+        margin-left: -1px;
+        vertical-align: top;
+        text-align: center;
+        color: #fff;
+        background: #e5e5e5;
+        border-radius: 0 2px 2px 0;
+        border-left: 0;
+        box-shadow:
+            rgba(0,0,0,0.02) 0 1px 0 inset,
+            rgba(0,0,0,0.02) -1px 0 0 inset,
+            rgba(0,0,0,0.02) 0 -1px 0 inset;
+
+        @include icon($i-chevron-down, 9px) {
+            position: absolute;
+            top: 50%;
+            right: 50%;
+            margin-top: -3px;
+            margin-right: -5px;
+            @include transition(margin-top 0.3s ease);
+            /* Transition of transform properties are split out due to a
+                defect in the vendor prefixing of transform transitions.
+                See: http://github.com/thoughtbot/bourbon/pull/86 */
+            @include transition-property(transform);
+            @include transition-duration(0.3);
+            @include transition-timing-function(ease);
+        };
+
+        @include transition(background-color 0.3s linear);
+
+        // Keep the arrow spun when the associated menu is open
+        &.active:before {
+            @include transform(rotate(360deg));
+        }
+
+        &.up.active:before {
+            margin-top:-4px;
+            @include transform(rotate(540deg));
+        }
+
+        // Spin the arrow on hover and while menu is open
+        &:hover,
+        &:focus {
+            will-change: box-shadow, background;
+            box-shadow: none;
+            background: #f8f8f8;
+            @include icon($i-chevron-down) {
+                will-change: transform;
+                @include transform(rotate(360deg));
+            };
+        }
+
+        // If it has a class of "up" spin it an extra 180degress to point up
+        &.up:hover,
+        &.up:focus {
+            @include icon($i-chevron-down) {
+                margin-top:-4px;
+                @include transform(rotate(540deg));
+                @include transition-property(transform);
+                @include transition-duration(0.6);
+                @include transition-timing-function(ease);
+            };
+        }
+    }
+}
+
+
+//
+// The Splitbuttons
+// --------------------------------------------------
+
+// The default splitbutton
+.splitbutton {
+    @extend %splitbtn;
+    .options {
+        color:#777;
+        &:hover,
+        &:focus {
+            box-shadow:
+                rgba(0,0,0,0.07) 0 1px 0 inset,
+                rgba(0,0,0,0.07) -1px 0 0 inset,
+                rgba(0,0,0,0.07) 0 -1px 0 inset;
+        }
+    }
+}
+
+// For save/next/continue/confirm actions
+.splitbutton-save {
+    @extend %splitbtn;
+    .options {
+        background: darken($blue, 5%);
+        &:hover,
+        &.active,
+        &:focus {
+            background: darken($blue, 10%);
+        }
+    }
+}
+
+// For actions which add something
+.splitbutton-add {
+    @extend %splitbtn;
+    .options {
+        background: darken($green, 6%);
+        &:hover,
+        &:focus {
+            background: darken($green, 8%);
+        }
+    }
+}
+
+// For actions which delete something
+.splitbutton-delete {
+    @extend %splitbtn;
+    .options {
+        background: darken($red, 6%);
+        &:hover,
+        &:focus {
+            background: darken($red, 10%);
+        }
+    }
+}
+
+// Alternative style with more visual attention, 
+// but no extra semantic meaning
+.splitbutton-alt {
+    @extend %splitbtn;
+    .options {
+        background: lighten($darkgrey, 4%);
+        &:hover,
+        &:focus {
+            background: $darkgrey;
+        }
+    }
+}
\ No newline at end of file