From 443cef6b150f14712f3d7e54d774e642fc9dee53 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Wed, 14 Apr 2021 15:45:14 +0200
Subject: [PATCH] Add buttons_mixins.scss for sharing SCSS across components

---
 ts/editor-toolbar/LabelButton.svelte  | 16 +++++++---------
 ts/editor-toolbar/SquareButton.svelte | 10 +++++-----
 ts/sass/BUILD.bazel                   |  8 ++++++++
 ts/sass/button_mixins.scss            |  8 ++++++++
 4 files changed, 28 insertions(+), 14 deletions(-)
 create mode 100644 ts/sass/button_mixins.scss

diff --git a/ts/editor-toolbar/LabelButton.svelte b/ts/editor-toolbar/LabelButton.svelte
index 41e43c11a..e919acab7 100644
--- a/ts/editor-toolbar/LabelButton.svelte
+++ b/ts/editor-toolbar/LabelButton.svelte
@@ -32,27 +32,25 @@
 </script>
 
 <style lang="scss">
+    @use "ts/sass/button_mixins" as button;
+
     button {
         display: inline-block;
-        vertical-align: middle;
-        width: auto;
-        height: var(--toolbar-size);
+        padding: 0 calc(var(--toolbar-size) / 3);
 
         font-size: calc(var(--toolbar-size) / 2.3);
-        padding: 0 calc(var(--toolbar-size) / 3);
+        width: auto;
+        height: var(--toolbar-size);
 
         border-radius: 0;
         border-color: var(--faint-border);
 
-        &:focus {
+        &:hover {
             box-shadow: 0 0 calc(var(--toolbar-size) / 2.5)
                 calc(var(--toolbar-size) / 7.5) rgb(255 255 255 / 0.5);
         }
 
-        &[disabled] {
-            opacity: 0.4;
-            cursor: not-allowed;
-
+        @include button.disabled {
             border-color: var(--faint-border);
         }
     }
diff --git a/ts/editor-toolbar/SquareButton.svelte b/ts/editor-toolbar/SquareButton.svelte
index 2cde3fd3e..0aeaa27d7 100644
--- a/ts/editor-toolbar/SquareButton.svelte
+++ b/ts/editor-toolbar/SquareButton.svelte
@@ -29,6 +29,8 @@
 </script>
 
 <style lang="scss">
+    @use "ts/sass/button_mixins" as button;
+
     button {
         display: inline-block;
         padding: 0;
@@ -36,7 +38,8 @@
         background-color: white;
 
         &:hover {
-            background-color: #eee;
+            box-shadow: 0 0 calc(var(--toolbar-size) / 2.5)
+                calc(var(--toolbar-size) / 7.5) rgb(255 255 255 / 0.5);
         }
 
         &:active,
@@ -51,10 +54,7 @@
             border-color: var(--border);
         }
 
-        &[disabled] {
-            opacity: 0.4;
-            cursor: not-allowed;
-
+        @include button.disabled {
             &:hover {
                 background-color: white;
             }
diff --git a/ts/sass/BUILD.bazel b/ts/sass/BUILD.bazel
index f9bf6b465..4249d64a2 100644
--- a/ts/sass/BUILD.bazel
+++ b/ts/sass/BUILD.bazel
@@ -44,6 +44,14 @@ sass_library(
     visibility = ["//visibility:public"],
 )
 
+sass_library(
+    name = "button_mixins_lib",
+    srcs = [
+        "button_mixins.scss",
+    ],
+    visibility = ["//visibility:public"],
+)
+
 # qt package extracts colours from source file
 exports_files(
     ["_vars.scss"],
diff --git a/ts/sass/button_mixins.scss b/ts/sass/button_mixins.scss
new file mode 100644
index 000000000..41b559f6c
--- /dev/null
+++ b/ts/sass/button_mixins.scss
@@ -0,0 +1,8 @@
+@mixin disabled {
+    &[disabled] {
+        opacity: 0.4;
+        cursor: not-allowed;
+
+        @content;
+    }
+}