[libadwaita/wip/exalm/buttons-v2] stylesheet: Split all linked styles into a separate file

[Alexander Mikhaylenko <alexm src gnome org>]

commit f21aec17bef56172719e30932df93bf3d5c7f3bc
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Sun May 23 16:28:50 2021 +0500

    stylesheet: Split all linked styles into a separate file

 src/stylesheet/_widgets.scss           |   1 +
 src/stylesheet/meson.build             |   1 +
 src/stylesheet/widgets/_buttons.scss   |  69 --------------
 src/stylesheet/widgets/_dropdowns.scss |  44 ---------
 src/stylesheet/widgets/_entries.scss   |  43 ---------
 src/stylesheet/widgets/_linked.scss    | 164 +++++++++++++++++++++++++++++++++
 6 files changed, 166 insertions(+), 156 deletions(-)
---
diff --git a/src/stylesheet/_widgets.scss b/src/stylesheet/_widgets.scss
index 315dc720..ae2a0206 100644
--- a/src/stylesheet/_widgets.scss
+++ b/src/stylesheet/_widgets.scss
@@ -11,6 +11,7 @@
 @import 'widgets/header-bar';
 @import 'widgets/labels';
 @import 'widgets/level-bar';
+@import 'widgets/linked';
 @import 'widgets/links';
 @import 'widgets/lists';
 @import 'widgets/menus';
diff --git a/src/stylesheet/meson.build b/src/stylesheet/meson.build
index 932172aa..7accf415 100644
--- a/src/stylesheet/meson.build
+++ b/src/stylesheet/meson.build
@@ -33,6 +33,7 @@ if not fs.exists('Adwaita-light.css')
       'widgets/_header-bar.scss',
       'widgets/_labels.scss',
       'widgets/_level-bar.scss',
+      'widgets/_linked.scss',
       'widgets/_links.scss',
       'widgets/_lists.scss',
       'widgets/_menus.scss',
diff --git a/src/stylesheet/widgets/_buttons.scss b/src/stylesheet/widgets/_buttons.scss
index c24000bd..9f73c252 100644
--- a/src/stylesheet/widgets/_buttons.scss
+++ b/src/stylesheet/widgets/_buttons.scss
@@ -249,10 +249,6 @@ button {
     > box > box > label { font-weight: bold; }
   }
 
-  .linked:not(.vertical) > & { @extend %linked; }
-
-  .linked.vertical > & { @extend %linked_vertical; }
-
   menubutton.circular &,
   &.circular { // force circular button shape
     min-width: 32px;
@@ -284,48 +280,6 @@ button {
   }
 }
 
-
-%linked_not_left {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-%linked_not_right {
-  border-right-style: none;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-// 1st/last child are at text start/end
-%linked {
-  &:dir(ltr) {
-    &:not(:first-child) { @extend %linked_not_left; }
-    &:not(:last-child) { @extend %linked_not_right; }
-  }
-
-  &:dir(rtl) {
-    &:not(:first-child) { @extend %linked_not_right; }
-    &:not(:last-child) { @extend %linked_not_left; }
-  }
-}
-
-%linked_not_top {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-
-%linked_not_bottom {
-  border-bottom-style: none;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-%linked_vertical {
-  &:not(:first-child) { @extend %linked_not_top; }
-
-  &:not(:last-child) { @extend %linked_not_bottom; }
-}
-
 %undecorated_button {
   background-color: transparent;
   background-image: none;
@@ -334,29 +288,6 @@ button {
               0 1px transparentize(white, 1);
 }
 
-.linked:not(.vertical) > menubutton,
-.linked:not(.vertical) > dropdown,
-.linked:not(.vertical) > colorbutton,
-.linked:not(.vertical) > fontbutton {
-  &:dir(ltr) {
-    &:not(:first-child) > button { @extend %linked_not_left; }
-    &:not(:last-child) > button { @extend %linked_not_right; }
-  }
-
-  &:dir(rtl) {
-    &:not(:first-child) > button { @extend %linked_not_right; }
-    &:not(:last-child) > button { @extend %linked_not_left; }
-  }
-}
-
-.linked.vertical > menubutton,
-.linked.vertical > dropdown,
-.linked.vertical > colorbutton,
-.linked.vertical > fontbutton {
-  &:not(:first-child) > button { @extend %linked_not_top; }
-  &:not(:last-child) > button { @extend %linked_not_bottom; }
-}
-
 button.color {
   padding: 4px;
 
diff --git a/src/stylesheet/widgets/_dropdowns.scss b/src/stylesheet/widgets/_dropdowns.scss
index f5a1d988..2ca81c91 100644
--- a/src/stylesheet/widgets/_dropdowns.scss
+++ b/src/stylesheet/widgets/_dropdowns.scss
@@ -22,13 +22,6 @@ combobox {
     padding-right: 9px;
   }
 
-  &.linked {
-    button:nth-child(2) {
-      &:dir(ltr) { @extend %linked_not_left; }
-      &:dir(rtl) { @extend %linked_not_right; }
-    }
-  }
-
   &:drop(active) { // FIXME: untested
     box-shadow: none;
 
@@ -56,40 +49,3 @@ combobox {
   }
 }
 
-// the combo is a composite widget so the way we do button linking doesn't
-// work, special case needed. See
-// https://bugzilla.gnome.org/show_bug.cgi?id=733979
-
-.linked:not(.vertical) > combobox {
-  &:dir(ltr) {
-    &:not(:first-child) > box > button.combo { @extend %linked_not_left; }
-    &:not(:last-child) > box > button.combo { @extend %linked_not_right; }
-  }
-
-  &:dir(rtl) {
-    &:not(:first-child) > box > button.combo { @extend %linked_not_right; }
-    &:not(:last-child) > box > button.combo { @extend %linked_not_left; }
-  }
-}
-
-.linked.vertical > combobox {
-  &:not(:first-child) > box > button.combo { @extend %linked_not_top; }
-  &:not(:last-child) > box > button.combo { @extend %linked_not_bottom; }
-}
-
-.linked:not(.vertical) > appchooserbutton {
-  &:dir(ltr) {
-    &:not(:first-child) > combobox > box > button.combo { @extend %linked_not_left; }
-    &:not(:last-child) > combobox > box > button.combo { @extend %linked_not_right; }
-  }
-
-  &:dir(rtl) {
-    &:not(:first-child) > combobox > box > button.combo { @extend %linked_not_right; }
-    &:not(:last-child) > combobox > box > button.combo { @extend %linked_not_left; }
-  }
-}
-
-.linked.vertical > appchooserbutton {
-  &:not(:first-child) > combobox > box > button.combo { @extend %linked_not_top; }
-  &:not(:last-child) > combobox > box > button.combo { @extend %linked_not_bottom; }
-}
diff --git a/src/stylesheet/widgets/_entries.scss b/src/stylesheet/widgets/_entries.scss
index 57be96b4..095de974 100644
--- a/src/stylesheet/widgets/_entries.scss
+++ b/src/stylesheet/widgets/_entries.scss
@@ -95,49 +95,6 @@ entry {
       box-shadow: none;
     }
   }
-
-   // linked entries
-  .linked:not(.vertical) > & { @extend %linked; }
-
-  .linked:not(.vertical) > &:drop(active) + &,
-  .linked:not(.vertical) > &:drop(active) + button,
-  .linked:not(.vertical) > &:drop(active) + menubutton > button,
-  .linked:not(.vertical) > &:drop(active) + dropdown > button,
-  .linked:not(.vertical) > &:drop(active) + colorbutton > button,
-  .linked:not(.vertical) > &:drop(active) + fontbutton > button,
-  .linked:not(.vertical) > &:drop(active) + appchooserbutton > combobox > box > button.combo,
-  .linked:not(.vertical) > &:drop(active) + combobox > box > button.combo { border-left-color: 
$drop_target_color; }
-
-  // Vertically linked entries
-  // FIXME: take care of "colored" entries
-  .linked.vertical > & {
-    @extend %linked_vertical;
-
-    // brighter border between linked entries
-    &:not(:disabled) + entry:not(:disabled),
-    &:not(:disabled) + %entry:not(:disabled) {
-      border-top-color: mix($borders_color, $base_color, 30%);
-    }
-
-    // brighter border between linked insensitive entries
-    &:disabled + %entry:disabled,
-    &:disabled + entry:disabled { border-top-color: mix($borders_color, $base_color, 30%); }
-
-    + %entry:drop(active):not(:only-child),
-    + entry:drop(active):not(:only-child) { border-top-color: $drop_target_color; }
-
-    &:drop(active):not(:only-child) {
-      + %entry,
-      + entry,
-      + button,
-      + menubutton > button,
-      + dropdown > button,
-      + colorbutton > button,
-      + fontbutton > button,
-      + appchooserbutton > combobox > box > button.combo,
-      + combobox > box > button.combo { border-top-color: $drop_target_color; }
-    }
-  }
 }
 
 treeview entry {
diff --git a/src/stylesheet/widgets/_linked.scss b/src/stylesheet/widgets/_linked.scss
new file mode 100644
index 00000000..3d94caf8
--- /dev/null
+++ b/src/stylesheet/widgets/_linked.scss
@@ -0,0 +1,164 @@
+%linked_not_left {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+%linked_not_right {
+  border-right-style: none;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+%linked_not_top {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+%linked_not_bottom {
+  border-bottom-style: none;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+// 1st/last child are at text start/end
+%linked {
+  &:dir(ltr) {
+    &:not(:first-child) { @extend %linked_not_left; }
+    &:not(:last-child) { @extend %linked_not_right; }
+  }
+
+  &:dir(rtl) {
+    &:not(:first-child) { @extend %linked_not_right; }
+    &:not(:last-child) { @extend %linked_not_left; }
+  }
+}
+
+%linked_vertical {
+  &:not(:first-child) { @extend %linked_not_top; }
+
+  &:not(:last-child) { @extend %linked_not_bottom; }
+}
+
+%button,
+button {
+  .linked:not(.vertical) > & { @extend %linked; }
+
+  .linked.vertical > & { @extend %linked_vertical; }
+}
+
+.linked:not(.vertical) > menubutton,
+.linked:not(.vertical) > dropdown,
+.linked:not(.vertical) > colorbutton,
+.linked:not(.vertical) > fontbutton {
+  &:dir(ltr) {
+    &:not(:first-child) > button { @extend %linked_not_left; }
+    &:not(:last-child) > button { @extend %linked_not_right; }
+  }
+
+  &:dir(rtl) {
+    &:not(:first-child) > button { @extend %linked_not_right; }
+    &:not(:last-child) > button { @extend %linked_not_left; }
+  }
+}
+
+.linked.vertical > menubutton,
+.linked.vertical > dropdown,
+.linked.vertical > colorbutton,
+.linked.vertical > fontbutton {
+  &:not(:first-child) > button { @extend %linked_not_top; }
+  &:not(:last-child) > button { @extend %linked_not_bottom; }
+}
+
+// the combo is a composite widget so the way we do button linking doesn't
+// work, special case needed. See
+// https://bugzilla.gnome.org/show_bug.cgi?id=733979
+
+.linked:not(.vertical) > combobox {
+  &:dir(ltr) {
+    &:not(:first-child) > box > button.combo { @extend %linked_not_left; }
+    &:not(:last-child) > box > button.combo { @extend %linked_not_right; }
+  }
+
+  &:dir(rtl) {
+    &:not(:first-child) > box > button.combo { @extend %linked_not_right; }
+    &:not(:last-child) > box > button.combo { @extend %linked_not_left; }
+  }
+}
+
+.linked.vertical > combobox {
+  &:not(:first-child) > box > button.combo { @extend %linked_not_top; }
+  &:not(:last-child) > box > button.combo { @extend %linked_not_bottom; }
+}
+
+.linked:not(.vertical) > appchooserbutton {
+  &:dir(ltr) {
+    &:not(:first-child) > combobox > box > button.combo { @extend %linked_not_left; }
+    &:not(:last-child) > combobox > box > button.combo { @extend %linked_not_right; }
+  }
+
+  &:dir(rtl) {
+    &:not(:first-child) > combobox > box > button.combo { @extend %linked_not_right; }
+    &:not(:last-child) > combobox > box > button.combo { @extend %linked_not_left; }
+  }
+}
+
+.linked.vertical > appchooserbutton {
+  &:not(:first-child) > combobox > box > button.combo { @extend %linked_not_top; }
+  &:not(:last-child) > combobox > box > button.combo { @extend %linked_not_bottom; }
+}
+
+dropdown,
+combobox {
+  &.linked {
+    button:nth-child(2) {
+      &:dir(ltr) { @extend %linked_not_left; }
+      &:dir(rtl) { @extend %linked_not_right; }
+    }
+  }
+}
+
+%entry,
+entry {
+   // linked entries
+  .linked:not(.vertical) > & { @extend %linked; }
+
+  .linked:not(.vertical) > &:drop(active) + &,
+  .linked:not(.vertical) > &:drop(active) + button,
+  .linked:not(.vertical) > &:drop(active) + menubutton > button,
+  .linked:not(.vertical) > &:drop(active) + dropdown > button,
+  .linked:not(.vertical) > &:drop(active) + colorbutton > button,
+  .linked:not(.vertical) > &:drop(active) + fontbutton > button,
+  .linked:not(.vertical) > &:drop(active) + appchooserbutton > combobox > box > button.combo,
+  .linked:not(.vertical) > &:drop(active) + combobox > box > button.combo { border-left-color: 
$drop_target_color; }
+
+  // Vertically linked entries
+  // FIXME: take care of "colored" entries
+  .linked.vertical > & {
+    @extend %linked_vertical;
+
+    // brighter border between linked entries
+    &:not(:disabled) + entry:not(:disabled),
+    &:not(:disabled) + %entry:not(:disabled) {
+      border-top-color: mix($borders_color, $base_color, 30%);
+    }
+
+    // brighter border between linked insensitive entries
+    &:disabled + %entry:disabled,
+    &:disabled + entry:disabled { border-top-color: mix($borders_color, $base_color, 30%); }
+
+    + %entry:drop(active):not(:only-child),
+    + entry:drop(active):not(:only-child) { border-top-color: $drop_target_color; }
+
+    &:drop(active):not(:only-child) {
+      + %entry,
+      + entry,
+      + button,
+      + menubutton > button,
+      + dropdown > button,
+      + colorbutton > button,
+      + fontbutton > button,
+      + appchooserbutton > combobox > box > button.combo,
+      + combobox > box > button.combo { border-top-color: $drop_target_color; }
+    }
+  }
+}