Port/convert BS mixins/vars - strip unneeded variations

core/client/assets/sass/helpers/mixins.scss

@@ -4,4 +4,24 @@
 
 @mixin baseline {
     margin: 1.6em 0;
-}
+}
+
+// User select
+// For selecting text on the page
+
+@mixin user-select($select) {
+  -webkit-user-select: $select;
+     -moz-user-select: $select;
+      -ms-user-select: $select; // IE10+
+          user-select: $select;
+}
+
+// WebKit-style focus
+
+@mixin tab-focus() {
+  // Default
+  outline: thin dotted;
+  // WebKit
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}

core/client/assets/sass/helpers/variables.scss

@@ -32,7 +32,7 @@ $list-colours:
 // Styles
 // --------------------------------------------------
 
-$rounded: 2px;
+$rounded: 3px;
 $shadow: rgba(0,0,0,0.05) 0 1px 5px;
 $default-transition-duration: 0.3s;
 

core/client/assets/sass/patterns/buttons.scss

@@ -9,14 +9,17 @@
 .btn {
     display: inline-block;
     margin-bottom: 0; // For input.btn
-    font-weight: $btn-font-weight;
+    padding: 6px 12px;
+    font-size: 1.4rem;
+    line-height: 1.428571429;
+    font-weight: normal;
     text-align: center;
     vertical-align: middle;
     cursor: pointer;
     background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
     border: 1px solid transparent;
     white-space: nowrap;
-    @include button-size($padding-base-vertical, $padding-base-horizontal, $font-size-base, $line-height-base, $border-radius-base);
+    border-radius: $rounded;
     @include user-select(none);
 
     &,
@@ -29,7 +32,7 @@
 
     &:hover,
     &:focus {
-        color: $btn-default-color;
+        color: $blue;
         text-decoration: none;
     }
 
@@ -37,7 +40,7 @@
     &.active {
         outline: 0;
         background-image: none;
-        @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
+        box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
     }
 
     &.disabled,
@@ -45,8 +48,8 @@
     fieldset[disabled] & {
         cursor: not-allowed;
         pointer-events: none; // Future-proof disabling of clicks
-        @include opacity(.65);
-        @include box-shadow(none);
+        opacity: 0.65;
+        box-shadow: none;
     }
 }
 
@@ -54,27 +57,57 @@
 // Alternate buttons
 // --------------------------------------------------
 
+@mixin button-style($color, $background, $border) {
+    color: $color;
+    background-color: $background;
+    border-color: $border;
+
+    &:hover,
+    &:focus,
+    &:active,
+    &.active,
+    .open > &.dropdown-toggle {
+        color: $color;
+        background-color: darken($background, 10%);
+        border-color: darken($border, 12%);
+    }
+    &:active,
+    &.active,
+    .open > &.dropdown-toggle {
+        background-image: none;
+    }
+    &.disabled,
+    &[disabled],
+    fieldset[disabled] & {
+        &,
+        &:hover,
+        &:focus,
+        &:active,
+        &.active {
+            background-color: $background;
+            border-color: $border;
+        }
+    }
+
+    .badge {
+        color: $background;
+        background-color: $color;
+    }
+}
+
 .btn-default {
-    @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
+    @include button-style($darkgrey, #fff, lighten($midgrey, 10%));
 }
 .btn-primary {
-    @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
+    @include button-style(#fff, $blue, darken($blue, 5%));
 }
 // Success appears as green
 .btn-success {
-    @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
-}
-// Info appears as blue-green
-.btn-info {
-    @include button-variant($btn-info-color, $btn-info-bg, $btn-info-border);
-}
-// Warning appears as orange
-.btn-warning {
-    @include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
+    @include button-style(#fff, $green, darken($green, 5%));
 }
 // Danger and error appear as red
 .btn-danger {
-    @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
+    @include button-style(#fff, $red, darken($red, 5%));
 }
 
 
@@ -83,7 +116,7 @@
 
 // Make a button look and behave like a link
 .btn-link {
-    color: $link-color;
+    color: $blue;
     font-weight: normal;
     cursor: pointer;
     border-radius: 0;
@@ -93,7 +126,7 @@
     &[disabled],
     fieldset[disabled] & {
         background-color: transparent;
-        @include box-shadow(none);
+        box-shadow: none;
     }
     &,
     &:hover,
@@ -103,7 +136,6 @@
     }
     &:hover,
     &:focus {
-        color: $link-hover-color;
         text-decoration: underline;
         background-color: transparent;
     }
@@ -111,7 +143,7 @@
     fieldset[disabled] & {
         &:hover,
         &:focus {
-            color: $btn-link-disabled-color;
+            color: $midgrey;
             text-decoration: none;
         }
     }
@@ -122,15 +154,17 @@
 // --------------------------------------------------
 
 .btn-lg {
-  // line-height: ensure even-numbered height of button next to large input
-    @include button-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $border-radius-large);
+    padding: 10px 16px;
+    font-size: 1.8rem;
+    line-height: 1.33;
+    border-radius: 4px;
 }
+
 .btn-sm {
-  // line-height: ensure proper height of button next to small input
-    @include button-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $border-radius-small);
-}
-.btn-xs {
-    @include button-size($padding-xs-vertical, $padding-xs-horizontal, $font-size-small, $line-height-small, $border-radius-small);
+    padding: 5px 10px;
+    font-size: 1.2rem;
+    line-height: 1.5;
+    border-radius: 2px;
 }
 
 

core/client/docs/buttons.html

@@ -19,8 +19,6 @@ title: Ghost UI · Making publishing beautiful.
     <button type="button" class="btn btn-default">Default</button>
     <button type="button" class="btn btn-primary">Primary</button>
     <button type="button" class="btn btn-success">Success</button>
-    <button type="button" class="btn btn-info">Info</button>
-    <button type="button" class="btn btn-warning">Warning</button>
     <button type="button" class="btn btn-danger">Danger</button>
     <button type="button" class="btn btn-link">Link</button>
   </div>
@@ -34,12 +32,6 @@ title: Ghost UI &middot; Making publishing beautiful.
 <!-- Indicates a successful or positive action -->
 <button type="button" class="btn btn-success">Success</button>
 
-<!-- Contextual button for informational alert messages -->
-<button type="button" class="btn btn-info">Info</button>
-
-<!-- Indicates caution should be taken with this action -->
-<button type="button" class="btn btn-warning">Warning</button>
-
 <!-- Indicates a dangerous or potentially negative action -->
 <button type="button" class="btn btn-danger">Danger</button>
 
@@ -62,10 +54,6 @@ title: Ghost UI &middot; Making publishing beautiful.
       <button type="button" class="btn btn-primary btn-sm">Small button</button>
       <button type="button" class="btn btn-default btn-sm">Small button</button>
     </p>
-    <p>
-      <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
-      <button type="button" class="btn btn-default btn-xs">Extra small button</button>
-    </p>
   </div>
 {% highlight html %}
 <p>
@@ -80,10 +68,6 @@ title: Ghost UI &middot; Making publishing beautiful.
   <button type="button" class="btn btn-primary btn-sm">Small button</button>
   <button type="button" class="btn btn-default btn-sm">Small button</button>
 </p>
-<p>
-  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
-  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
-</p>
 {% endhighlight %}
 
   <p>Create block level buttons&mdash;those that span the full width of a parent&mdash; by adding <code>.btn-block</code>.</p>