[libadwaita/wip/exalm/borderless: 6/7] 123

[Alexander Mikhaylenko <alexm src gnome org>]

commit 85034c0f2a5d2a008e7f83f5eb4ba1a640da249b
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Tue Jun 29 18:50:18 2021 +0500

    123

 src/stylesheet/widgets/_buttons.scss    |  4 ---
 src/stylesheet/widgets/_header-bar.scss | 57 ++++++++++++---------------------
 src/stylesheet/widgets/_linked.scss     | 40 +++++++++++++++++++++--
 src/stylesheet/widgets/_toolbars.scss   | 50 +++++++++++++++++++++++++----
 4 files changed, 100 insertions(+), 51 deletions(-)
---
diff --git a/src/stylesheet/widgets/_buttons.scss b/src/stylesheet/widgets/_buttons.scss
index dd21e2c1..3473f248 100644
--- a/src/stylesheet/widgets/_buttons.scss
+++ b/src/stylesheet/widgets/_buttons.scss
@@ -286,10 +286,6 @@ button {
 
 %undecorated_button {
   background-color: transparent;
-  background-image: none;
-  border-color: transparent;
-  box-shadow: inset 0 1px transparentize(white, 1),
-              0 1px transparentize(white, 1);
 }
 
 button.color {
diff --git a/src/stylesheet/widgets/_header-bar.scss b/src/stylesheet/widgets/_header-bar.scss
index b19f9c2a..c960b91b 100644
--- a/src/stylesheet/widgets/_header-bar.scss
+++ b/src/stylesheet/widgets/_header-bar.scss
@@ -5,6 +5,8 @@ headerbar {
   border-color: $alt_borders_color;
   background-color: $headerbar_bg_color;
 
+  @extend %toolbar;
+
   > windowhandle > box {
     padding: 0 6px;
 
@@ -38,15 +40,7 @@ headerbar {
     }
 
     windowcontrols {
-      button,
-      menubutton {
-        min-height: 28px;
-        min-width: 28px;
-        margin: 0;
-        padding: 0;
-      }
-
-      menubutton button {
+      button {
         min-height: 22px;
         min-width: 22px;
         margin: 0;
@@ -64,27 +58,6 @@ headerbar {
       }
     }
   }
-
-  // add vertical margins to common widget on the headerbar to avoid them spanning the whole height
-  entry,
-  spinbutton,
-  separator:not(.sidebar),
-  button,
-  menubutton {
-    margin-top: 6px;
-    margin-bottom: 6px;
-  }
-
-  // Reset margins for buttons inside menubutton
-  menubutton > button {
-    margin-top: 0px;
-    margin-bottom: 0px;
-  }
-
-  switch {
-    margin-top: 10px;
-    margin-bottom: 10px;
-  }
 }
 
 .titlebar:not(headerbar) {
@@ -96,16 +69,26 @@ headerbar {
  *********************/
 
 windowcontrols {
-  border-spacing: 6px;
+  border-spacing: 3px;
 
   button {
-    @extend %button_basic_flat;
+    min-width: 24px;
+    padding: 5px;
+    margin: 0;
+
+    > image {
+      background-color: $button_color;
+      border-radius: 100%;
+      padding: 2px;
+      transition: $button_transition;
+    }
+
+    &, &:hover, &:active {
+      background: none;
+    }
 
-    border-radius: 9999px;
-    padding: 7px;
-    margin: 0 2px;
-    min-width: 0;
-    min-height: 0;
+    &:hover > image { background-color: $button_hover_color; }
+    &:hover:active > image { background-color: $button_active_color; }
   }
 }
 
diff --git a/src/stylesheet/widgets/_linked.scss b/src/stylesheet/widgets/_linked.scss
index a319feff..25cf2677 100644
--- a/src/stylesheet/widgets/_linked.scss
+++ b/src/stylesheet/widgets/_linked.scss
@@ -1,15 +1,20 @@
 // .linked >        element            child
-$_linked_widgets: ("%button",          ""),
+$_linked_buttons: ("%button",          ""),
                   ("button",           ""),
                   ("menubutton",       "> button"),
                   ("dropdown",         "> button"),
                   ("colorbutton",      "> button"),
                   ("fontbutton",       "> button"),
+                  ("scalebutton",      "> button"),
                   ("combobox",         "> box > button.combo"),
-                  ("appchooserbutton", "> combobox > box > button.combo"),
-                  ("%entry",           ""),
+                  ("appchooserbutton", "> combobox > box > button.combo");
+
+$_linked_entries: ("%entry",           ""),
                   ("entry",            "");
 
+
+$_linked_widgets: join($_linked_buttons, $_linked_entries);
+
 .linked {
   border-spacing: 2px;
 }
@@ -45,3 +50,32 @@ $_linked_widgets: ("%button",          ""),
     }
   }
 }
+
+.linked2 {
+  border-radius: $button_radius;
+  transition: $button_transition;
+  transition-property: background-color;
+
+  &:hover,
+  &:active {
+    background-color: $view_hover_color;
+  }
+
+  button {
+    @extend %button_basic_flat;
+  }
+
+  @each $widget, $child in $_linked_buttons {
+    #{$widget}:not(:first-child) #{$child} {
+      border-image: linear-gradient(to top,
+        transparent    7px,
+        $borders_color 7px,
+        $borders_color calc(100% - 7px),
+        transparent    calc(100% - 7px)
+      ) 1;
+      border-image-width: 0 0 0 1px;
+      margin-left: -1px;
+    }
+  }
+}
+
diff --git a/src/stylesheet/widgets/_toolbars.scss b/src/stylesheet/widgets/_toolbars.scss
index cc7a2067..7387a4c2 100644
--- a/src/stylesheet/widgets/_toolbars.scss
+++ b/src/stylesheet/widgets/_toolbars.scss
@@ -1,11 +1,50 @@
+%toolbar {
+  button.image-button,
+  button.arrow-button {
+    @extend %button_basic_flat;
+  }
+
+  button.raised,
+  menubutton.raised > button,
+  .linked button {
+    &.image-button,
+    &.arrow-button {
+      @extend %button;
+    }
+  }
+
+  // add vertical margins to common widgets on toolbars to avoid them spanning
+  // the whole height
+  entry,
+  spinbutton,
+  separator:not(.sidebar),
+  button,
+  .linked2 {
+    margin-top: 6px;
+    margin-bottom: 6px;
+  }
+
+  .linked2 button {
+    margin-top: 0px;
+    margin-bottom: 0px;
+  }
+
+  switch {
+    margin-top: 10px;
+    margin-bottom: 10px;
+  }
+}
+
 .toolbar {
-  padding: 5px;
-  border-spacing: 5px;
+  padding: 0 6px;
+  border-spacing: 6px;
   background-color: $bg_color;
 
   // on OSD
   .osd & { background-color: transparent; }
 
+  @extend %toolbar;
+
   // stand-alone OSD toolbars
   &.osd {
     padding: 14px;
@@ -22,10 +61,6 @@
   // toolbar separators
   &.horizontal > separator { margin: 5px 0; }
   &.vertical > separator { margin: 0 5px; }
-
-  button {
-    @extend %button_basic_flat;
-  }
 }
 
 /****************
@@ -56,8 +91,9 @@ searchbar > revealer > box {
  ****************/
 
 actionbar > revealer > box {
-  padding: 6px;
+  padding: 0 6px;
   border-top: 1px solid $borders_color;
+  @extend %toolbar;
 
   &, > box.start, > box.end {
     border-spacing: 6px;