Move Granite specific button styles to Granite Dir (#872)

Author: wpkelso

lib/Styles/Common/_controls.scss

@@ -60,3 +60,20 @@
         background-color: scale-color($trough-color, $alpha: -10%);
     }
 }
+
+%raised {
+    @include control;
+    @include border-interactive-roundrect;
+
+    &:active,
+    &:checked {
+        @include control-active;
+        filter: brightness(95%);
+        transform: none;
+    }
+
+    &:disabled {
+        @include control-disabled;
+    }
+
+}

lib/Styles/Granite/Button.scss

@@ -0,0 +1,74 @@
+button {
+
+    .linked &,
+    .linked &.image-button,
+    .linked &.image-button.toggle {
+        @extend %raised; 
+
+        // I don't know why this needs to be reiterated, but it doesn't work
+        // properly without it
+        &:active,
+        &:checked {
+            @include control-active;
+            color: $fg-color;
+            transform: none;
+        }
+    }
+
+    &.osd {
+        @include control;
+        @include border-interactive-roundrect;
+
+        // This stacks with the other shadows,
+        // so reduce it's alpha by the sum of other shadows
+        $shadow-border-color: scale-color($border-color, $alpha: -50%);
+        @if $color-scheme == "dark" {
+            $shadow-border-color: transparent
+        }
+
+        background-image: none;
+        border: none;
+        box-shadow:
+            highlight(),
+            // Intentionally not in ems since it's used as a stroke
+            0 0 0 1px $shadow-border-color,
+            shadow(2);
+        color: $fg-color;
+        margin: 0;
+        padding: $button-spacing;
+
+        transition:
+            background duration("expand") easing(),
+            transform duration("expand") easing("ease-out-back");
+
+        &:active {
+            transition:
+            background duration("collapse") easing(),
+            transform duration("collapse") easing();
+        }
+
+        &:disabled {
+            @include control-disabled;
+
+            box-shadow:
+            highlight(),
+            // Intentionally not in ems since it's used as a stroke
+            0 0 0 1px $shadow-border-color,
+            shadow(1);
+        }
+
+        .linked & {
+            transition: none;
+            transform: none;
+        }
+
+        .linked &.vertical &:first-child {
+            box-shadow:
+            highlight("top"),
+            // Intentionally not in ems since it's used as a stroke
+            0 0 0 1px $shadow-border-color,
+            shadow(2);
+        }
+    }
+
+}

lib/Styles/Granite/Index.scss

@@ -1,5 +1,6 @@
 @import '_classes.scss';
 @import 'Box.scss';
+@import 'Button.scss';
 @import 'Dialog.scss';
 @import 'Header.scss';
 @import 'ListItem.scss';

lib/Styles/Gtk/Button.scss

@@ -1,9 +1,5 @@
 button {
 
-    &.text-button {
-        padding: rem(2px) rem(4px);
-    }
-
     &.image-button {
         @extend .circular;
 
@@ -31,87 +27,12 @@ button {
         }
     }
 
-    .linked &,
-    .linked &.image-button,
-    .linked &.image-button.toggle,
     &.text-button {
-        @include control;
-        @include border-interactive-roundrect;
-
-        &:active,
-        &:checked {
-            @include control-active;
-            transform: none;
-        }
-
-        &:active {
-            filter: brightness(95%);
-        }
+        @extend %raised;
 
-        &:disabled {
-            @include control-disabled;
-        }
-
-        &:hover {
-            filter: brightness(105%);
-        }
+        padding: rem(2px) rem(4px);
     }
 
-    &.osd {
-        @include control;
-        @include border-interactive-roundrect;
-
-        // This stacks with the other shadows,
-        // so reduce it's alpha by the sum of other shadows
-        $shadow-border-color: scale-color($border-color, $alpha: -50%);
-        @if $color-scheme == "dark" {
-            $shadow-border-color: transparent
-        }
-
-        background-image: none;
-        border: none;
-        box-shadow:
-            highlight(),
-            // Intentionally not in ems since it's used as a stroke
-            0 0 0 1px $shadow-border-color,
-            shadow(2);
-        color: $fg-color;
-        margin: 0;
-        padding: $button-spacing;
-
-        transition:
-            background duration("expand") easing(),
-            transform duration("expand") easing("ease-out-back");
-
-        &:active {
-            transition:
-                background duration("collapse") easing(),
-                transform duration("collapse") easing();
-        }
-
-        &:disabled {
-            @include control-disabled;
-
-            box-shadow:
-                highlight(),
-                // Intentionally not in ems since it's used as a stroke
-                0 0 0 1px $shadow-border-color,
-                shadow(1);
-        }
-
-        .linked & {
-            transition: none;
-            transform: none;
-        }
-
-        .linked &.vertical &:first-child {
-            box-shadow:
-                highlight("top"),
-                // Intentionally not in ems since it's used as a stroke
-                0 0 0 1px $shadow-border-color,
-                shadow(2);
-        }
-    }
 
     // Almost certainly a button with text and image
     > box.horizontal {