From e5210a8410933614c0c0ee74b9d03723151736c5 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Tue, 22 Dec 2015 10:02:09 +0100
Subject: [PATCH] Move button styling into its own stylesheet

---
 sass/ascribe_button.scss       | 164 +++++++++++++++++++++++++++++++++
 sass/ascribe_custom_style.scss | 164 ---------------------------------
 sass/main.scss                 |   1 +
 3 files changed, 165 insertions(+), 164 deletions(-)
 create mode 100644 sass/ascribe_button.scss

diff --git a/sass/ascribe_button.scss b/sass/ascribe_button.scss
new file mode 100644
index 00000000..b7943bd5
--- /dev/null
+++ b/sass/ascribe_button.scss
@@ -0,0 +1,164 @@
+// buttons!
+// thought of the day:
+// "every great atrocity is the result of people just following orders"
+
+.btn {
+    font-weight: $ascribe--font-weight-light;
+}
+
+.btn-default {
+    background-color: $ascribe--button-default-color;
+    border-color: $ascribe--button-default-color;
+
+    &:hover,
+    &:active,
+    &:focus,
+    &:active:hover,
+    &:active:focus,
+    &:active.focus,
+    &.active:hover,
+    &.active:focus,
+    &.active.focus {
+        background-color: lighten($ascribe--button-default-color, 20%);
+        border-color: lighten($ascribe--button-default-color, 20%);
+    }
+}
+
+// disabled buttons
+.btn-default.disabled,
+.btn-default.disabled:hover,
+.btn-default.disabled:focus,
+.btn-default.disabled.focus,
+.btn-default.disabled:active,
+.btn-default.disabled.active,
+.btn-default[disabled],
+.btn-default[disabled]:hover,
+.btn-default[disabled]:focus,
+.btn-default[disabled].focus,
+.btn-default[disabled]:active,
+.btn-default[disabled].active,
+fieldset[disabled] .btn-default,
+fieldset[disabled] .btn-default:hover,
+fieldset[disabled] .btn-default:focus,
+fieldset[disabled] .btn-default.focus,
+fieldset[disabled] .btn-default:active,
+fieldset[disabled] .btn-default.active {
+    background-color: darken($ascribe--button-default-color, 20%);
+    border-color: darken($ascribe--button-default-color, 20%);
+}
+
+.btn-secondary {
+    background-color: $ascribe--button-secondary-bg-color;
+    border-color: $ascribe--button-secondary-fg-color;
+    color: $ascribe--button-secondary-fg-color;
+
+    &:hover,
+    &:active,
+    &:focus,
+    &:active:hover,
+    &:active:focus,
+    &:active.focus,
+    &.active:hover,
+    &.active:focus,
+    &.active.focus {
+        background-color: $ascribe--button-secondary-fg-color;
+        border-color: $ascribe--button-secondary-bg-color;
+        color: $ascribe--button-secondary-bg-color;
+    }
+}
+
+// disabled buttons
+.btn-secondary.disabled,
+.btn-secondary.disabled:hover,
+.btn-secondary.disabled:focus,
+.btn-secondary.disabled.focus,
+.btn-secondary.disabled:active,
+.btn-secondary.disabled.active,
+.btn-secondary[disabled],
+.btn-secondary[disabled]:hover,
+.btn-secondary[disabled]:focus,
+.btn-secondary[disabled].focus,
+.btn-secondary[disabled]:active,
+.btn-secondary[disabled].active,
+fieldset[disabled] .btn-secondary,
+fieldset[disabled] .btn-secondary:hover,
+fieldset[disabled] .btn-secondary:focus,
+fieldset[disabled] .btn-secondary.focus,
+fieldset[disabled] .btn-secondary:active,
+fieldset[disabled] .btn-secondary.active {
+    background-color: darken($ascribe--button-secondary-bg-color, 20%);
+    border-color: darken($ascribe--button-secondary-fg-color, 20%);
+    color: darken($ascribe--button-secondary-fg-color, 20%);
+}
+
+.btn-tertiary {
+    background-color: transparent;
+    border-color: transparent;
+    color: $ascribe-dark-blue;
+
+    &:focus,
+    &:active:focus,
+    &:active.focus {
+        background-color: transparent;
+        border-color: transparent;
+        color: $ascribe-dark-blue;
+    }
+
+    &:hover,
+    &:active,
+    &:active:hover,
+    &.active:hover{
+        background-color: $ascribe-pink;
+        border-color: $ascribe-pink;
+        color: $ascribe-white;
+    }
+}
+
+.btn-wide {
+    font-weight: $ascribe--font-weight-light;
+}
+
+.btn-spinner, .btn-spinner:hover {
+    background-color: $ascribe--button-default-color;
+    border-color: $ascribe--button-default-color;
+    [class^="spinner-wrapper-"] {
+        color: white;
+        .spinner-circle {
+            border-color: white;
+        }
+    }
+}
+
+.btn-secondary .spinner-wrapper {
+    .spinner-circle,
+    .spinner-inner {
+        border-color: $ascribe--button-secondary-fg-color;
+        color: $ascribe--button-secondary-fg-color;
+    }
+}
+
+.btn-ascribe-add {
+    width: 30px;
+    height: 30px;
+    background-color: transparent !important;
+    border: 1px solid $ascribe-dark-blue;
+    border-radius: 50%;
+
+    &:hover {
+        border-color: white!important;
+        background-color: $ascribe-dark-blue!important;
+    }
+
+    > span {
+        position: absolute;
+        left: 0;
+        top: 2px;
+        width: 30px;
+        height: 30px;
+        color: $ascribe-dark-blue;
+        padding: 0.4em;
+        &:hover {
+            color: white;
+        }
+    }
+}
diff --git a/sass/ascribe_custom_style.scss b/sass/ascribe_custom_style.scss
index 96b97783..94dc9374 100644
--- a/sass/ascribe_custom_style.scss
+++ b/sass/ascribe_custom_style.scss
@@ -233,147 +233,6 @@ hr {
     }
 }
 
-.btn-ascribe-add {
-    width: 30px;
-    height: 30px;
-    background-color: transparent !important;
-    border: 1px solid $ascribe-dark-blue;
-    border-radius: 50%;
-
-    &:hover {
-        border-color: white!important;
-        background-color: $ascribe-dark-blue!important;
-    }
-
-    > span {
-        position: absolute;
-        left: 0;
-        top: 2px;
-        width: 30px;
-        height: 30px;
-        color: $ascribe-dark-blue;
-        padding: 0.4em;
-        &:hover {
-            color: white;
-        }
-    }
-}
-// buttons!
-// thought of the day:
-// "every great atrocity is the result of people just following orders"
-
-.btn {
-    font-weight: $ascribe--font-weight-light;
-}
-
-.btn-default {
-    background-color: $ascribe--button-default-color;
-    border-color: $ascribe--button-default-color;
-
-    &:hover,
-    &:active,
-    &:focus,
-    &:active:hover,
-    &:active:focus,
-    &:active.focus,
-    &.active:hover,
-    &.active:focus,
-    &.active.focus {
-        background-color: lighten($ascribe--button-default-color, 20%);
-        border-color: lighten($ascribe--button-default-color, 20%);
-    }
-}
-
-// disabled buttons
-.btn-default.disabled,
-.btn-default.disabled:hover,
-.btn-default.disabled:focus,
-.btn-default.disabled.focus,
-.btn-default.disabled:active,
-.btn-default.disabled.active,
-.btn-default[disabled],
-.btn-default[disabled]:hover,
-.btn-default[disabled]:focus,
-.btn-default[disabled].focus,
-.btn-default[disabled]:active,
-.btn-default[disabled].active,
-fieldset[disabled] .btn-default,
-fieldset[disabled] .btn-default:hover,
-fieldset[disabled] .btn-default:focus,
-fieldset[disabled] .btn-default.focus,
-fieldset[disabled] .btn-default:active,
-fieldset[disabled] .btn-default.active {
-    background-color: darken($ascribe--button-default-color, 20%);
-    border-color: darken($ascribe--button-default-color, 20%);
-}
-
-.btn-secondary {
-    background-color: $ascribe--button-secondary-bg-color;
-    border-color: $ascribe--button-secondary-fg-color;
-    color: $ascribe--button-secondary-fg-color;
-
-    &:hover,
-    &:active,
-    &:focus,
-    &:active:hover,
-    &:active:focus,
-    &:active.focus,
-    &.active:hover,
-    &.active:focus,
-    &.active.focus {
-        background-color: $ascribe--button-secondary-fg-color;
-        border-color: $ascribe--button-secondary-bg-color;
-        color: $ascribe--button-secondary-bg-color;
-    }
-}
-
-// disabled buttons
-.btn-secondary.disabled,
-.btn-secondary.disabled:hover,
-.btn-secondary.disabled:focus,
-.btn-secondary.disabled.focus,
-.btn-secondary.disabled:active,
-.btn-secondary.disabled.active,
-.btn-secondary[disabled],
-.btn-secondary[disabled]:hover,
-.btn-secondary[disabled]:focus,
-.btn-secondary[disabled].focus,
-.btn-secondary[disabled]:active,
-.btn-secondary[disabled].active,
-fieldset[disabled] .btn-secondary,
-fieldset[disabled] .btn-secondary:hover,
-fieldset[disabled] .btn-secondary:focus,
-fieldset[disabled] .btn-secondary.focus,
-fieldset[disabled] .btn-secondary:active,
-fieldset[disabled] .btn-secondary.active {
-    background-color: darken($ascribe--button-secondary-bg-color, 20%);
-    border-color: darken($ascribe--button-secondary-fg-color, 20%);
-    color: darken($ascribe--button-secondary-fg-color, 20%);
-}
-
-.btn-tertiary {
-    background-color: transparent;
-    border-color: transparent;
-    color: $ascribe-dark-blue;
-
-    &:focus,
-    &:active:focus,
-    &:active.focus {
-        background-color: transparent;
-        border-color: transparent;
-        color: $ascribe-dark-blue;
-    }
-
-    &:hover,
-    &:active,
-    &:active:hover,
-    &.active:hover{
-        background-color: $ascribe-pink;
-        border-color: $ascribe-pink;
-        color: $ascribe-white;
-    }
-}
-
 .ascribe-piece-list-toolbar-filter-widget button {
     background-color: transparent;
     border: 1px solid transparent;
@@ -387,29 +246,6 @@ fieldset[disabled] .btn-secondary.active {
     }
 }
 
-.btn-wide {
-    font-weight: $ascribe--font-weight-light;
-}
-
-.btn-spinner, .btn-spinner:hover {
-    background-color: $ascribe--button-default-color;
-    border-color: $ascribe--button-default-color;
-    [class^="spinner-wrapper-"] {
-        color: white;
-        .spinner-circle {
-            border-color: white;
-        }
-    }
-}
-
-.btn-secondary .spinner-wrapper {
-    .spinner-circle,
-    .spinner-inner {
-        border-color: $ascribe--button-secondary-fg-color;
-        color: $ascribe--button-secondary-fg-color;
-    }
-}
-
 .open > .btn-default.dropdown-toggle:hover,
 .open > .btn-default.dropdown-toggle:focus,
 .open > .btn-default.dropdown-toggle.focus,
diff --git a/sass/main.scss b/sass/main.scss
index 900df4a0..a7049c17 100644
--- a/sass/main.scss
+++ b/sass/main.scss
@@ -40,6 +40,7 @@ $BASE_URL: '<%= BASE_URL %>';
 @import 'lib/buttons';
 @import 'lib/modals';
 @import 'ascribe_custom_style';
+@import 'ascribe_button';
 @import 'ascribe_spinner';
 
 @import 'whitelabel/index';