[libadwaita/wip/exalm/stylesheet2: 71/103] stylesheet: Split header bar styles into a separate file

[Alexander Mikhaylenko <alexm src gnome org>]

commit f36e45cd281e5a800a0f9e1ccef6c1f00a7cf491
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Fri Apr 9 12:56:33 2021 +0500

    stylesheet: Split header bar styles into a separate file

 src/stylesheet/_common.scss             | 192 -----------------------------
 src/stylesheet/_custom.scss             |  17 ---
 src/stylesheet/_widgets.scss            |   1 +
 src/stylesheet/meson.build              |   1 +
 src/stylesheet/widgets/_header-bar.scss | 206 ++++++++++++++++++++++++++++++++
 5 files changed, 208 insertions(+), 209 deletions(-)
---
diff --git a/src/stylesheet/_common.scss b/src/stylesheet/_common.scss
index f154449..5992961 100644
--- a/src/stylesheet/_common.scss
+++ b/src/stylesheet/_common.scss
@@ -234,198 +234,6 @@ editablelabel > stack > text {
 }
 
 
-/*****************
- * Title buttons *
- *****************/
-
-windowcontrols {
-  border-spacing: 6px;
-
-  &:not(.empty) {
-    &.start:dir(ltr),
-    &.end:dir(rtl) {
-      margin-right: 7px;
-    }
-
-    &.start:dir(rtl),
-    &.end:dir(ltr) {
-      margin-left: 7px;
-    }
-  }
-
-  button {
-    @extend %button_basic;
-    @extend %button_basic_flat;
-
-    border-radius: 9999px;
-    padding: 6px;
-    margin: 0 2px;
-    min-width: 0;
-    min-height: 0;
-  }
-}
-
-// special case hover colors inside a headerbar
-headerbar windowcontrols button {
-  &:hover {
-    @include button(undecorated-hover,$c:darken($headerbar_bg_color,6%));
-  }
-  &:active,
-  &:checked { @include button(undecorated-active,$c:darken($headerbar_bg_color,10%)); }
-}
-
-/***************
- * Header bars *
- ***************/
-headerbar {
-  padding: 0 6px;
-  min-height: 46px;
-  border-width: 0 0 1px;
-  border-style: solid;
-  border-color: $alt_borders_color;
-  border-radius: 0;
-
-  > windowhandle > box {
-    &,
-    > box.start,
-    > box.end {
-      border-spacing: 6px;
-    }
-  }
-
-  @include headerbar_fill(darken($bg_color, 10%));
-
-  &:backdrop {
-    border-color: $backdrop_borders_color;
-    background-color: $bg_color;
-    background-image: none;
-
-    transition: $backdrop_transition;
-  }
-
-  .title {
-    padding-left: 12px;
-    padding-right: 12px;
-    font-weight: bold;
-  }
-
-  .subtitle {
-    font-size: smaller;
-    padding-left: 12px;
-    padding-right: 12px;
-
-    @extend .dim-label;
-  }
-
-  /* Darken switchbuttons for headerbars. issue #1588 */
-  stackswitcher > button:checked,
-  button.toggle:checked {
-
-    background: if($variant == 'light', image(darken($bg_color, 17%)), image(darken($bg_color, 9%)));
-    border-color: darken($borders_color, 3%);
-    border-top-color: darken($borders_color, 8%);
-    &:backdrop {
-      @include button(backdrop-active);
-    }
-  }
-
-  // squared corners when the window is maximized, tiled, or fullscreen
-  .tiled &,
-  .tiled-top &,
-  .tiled-left &,
-  .tiled-right &,
-  .tiled-bottom &,
-  .maximized &,
-  .fullscreen & {
-    &:backdrop, & {
-      border-radius: 0;
-    }
-  }
-
-  &.default-decoration {
-    min-height: 28px;
-    padding: 4px;
-
-    windowcontrols {
-      button,
-      menubutton {
-        min-height: 26px;
-        min-width: 26px;
-        margin: 0;
-        padding: 0;
-      }
-
-      menubutton button {
-        min-height: 20px;
-        min-width: 20px;
-        margin: 0;
-        padding: 4px;
-      }
-    }
-  }
-
-  .solid-csd & {
-    &:backdrop, & {
-      &:dir(rtl), &:dir(ltr) { // specificity bump
-        margin-left: -1px;
-        margin-right: -1px;
-        margin-top: -1px;
-        border-radius: 0;
-        box-shadow: none;
-      }
-    }
-  }
-
-  // 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) {
-  separator { background-color: $borders_color; }  // FIXME: use darker border?
-}
-
-// Development versions of apps to use a differently styled headerbar
-
-window.devel {
-  headerbar {
-    $c: darken($bg_color, 10%);
-    $gradient: cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px 
no-repeat,
-               linear-gradient(to right, transparent 65%, transparentize($selected_bg_color, 0.8)),
-               linear-gradient(to top, darken($c, 3%), $c 3px, lighten($c, 6%));
-    @if $variant == 'dark' {
-      $gradient: cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px 
no-repeat,
-                 linear-gradient(to right, transparent 65%, transparentize($selected_bg_color, 0.9)),
-                 linear-gradient(to top, lighten($c, 3%) 3px, lighten($c, 5%));
-    }
-
-    background: $bg_color $gradient;
-
-    &:backdrop {
-      background: $bg_color cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 
0/256px 256px no-repeat,
-                  image($bg_color); /* background-color would flash */
-    }
-  }
-}
-
-
 /**************
  * Tree Views *
  **************/
diff --git a/src/stylesheet/_custom.scss b/src/stylesheet/_custom.scss
index 76dddde..ce1266e 100644
--- a/src/stylesheet/_custom.scss
+++ b/src/stylesheet/_custom.scss
@@ -526,20 +526,3 @@ preferencesgroup > box {
     margin-top: 12px;
   }
 }
-
-// AdwWindowTitle
-
-windowtitle {
-  .title {
-    padding-left: 12px;
-    padding-right: 12px;
-    font-weight: bold;
-  }
-
-  .subtitle {
-    font-size: smaller;
-    padding-left: 12px;
-    padding-right: 12px;
-    @extend .dim-label;
-  }
-}
diff --git a/src/stylesheet/_widgets.scss b/src/stylesheet/_widgets.scss
index 41b308c..809c3da 100644
--- a/src/stylesheet/_widgets.scss
+++ b/src/stylesheet/_widgets.scss
@@ -1,6 +1,7 @@
 @import 'widgets/buttons';
 @import 'widgets/dropdowns';
 @import 'widgets/entries';
+@import 'widgets/header-bar';
 @import 'widgets/links';
 @import 'widgets/spinner';
 @import 'widgets/spin-button';
diff --git a/src/stylesheet/meson.build b/src/stylesheet/meson.build
index da96c6f..1c8c21a 100644
--- a/src/stylesheet/meson.build
+++ b/src/stylesheet/meson.build
@@ -23,6 +23,7 @@ if not fs.exists('Adwaita-light.css')
       'widgets/_buttons.scss',
       'widgets/_dropdowns.scss',
       'widgets/_entries.scss',
+      'widgets/_header-bar.scss',
       'widgets/_links.scss',
       'widgets/_spinner.scss',
       'widgets/_spin-button.scss',
diff --git a/src/stylesheet/widgets/_header-bar.scss b/src/stylesheet/widgets/_header-bar.scss
new file mode 100644
index 0000000..70b0108
--- /dev/null
+++ b/src/stylesheet/widgets/_header-bar.scss
@@ -0,0 +1,206 @@
+headerbar {
+  padding: 0 6px;
+  min-height: 46px;
+  border-width: 0 0 1px;
+  border-style: solid;
+  border-color: $alt_borders_color;
+  border-radius: 0;
+
+  > windowhandle > box {
+    &,
+    > box.start,
+    > box.end {
+      border-spacing: 6px;
+    }
+  }
+
+  @include headerbar_fill(darken($bg_color, 10%));
+
+  &:backdrop {
+    border-color: $backdrop_borders_color;
+    background-color: $bg_color;
+    background-image: none;
+
+    transition: $backdrop_transition;
+  }
+
+  .title {
+    padding-left: 12px;
+    padding-right: 12px;
+    font-weight: bold;
+  }
+
+  .subtitle {
+    font-size: smaller;
+    padding-left: 12px;
+    padding-right: 12px;
+
+    @extend .dim-label;
+  }
+
+  /* Darken switchbuttons for headerbars. issue #1588 */
+  stackswitcher > button:checked,
+  button.toggle:checked {
+
+    background: if($variant == 'light', image(darken($bg_color, 17%)), image(darken($bg_color, 9%)));
+    border-color: darken($borders_color, 3%);
+    border-top-color: darken($borders_color, 8%);
+    &:backdrop {
+      @include button(backdrop-active);
+    }
+  }
+
+  // squared corners when the window is maximized, tiled, or fullscreen
+  .tiled &,
+  .tiled-top &,
+  .tiled-left &,
+  .tiled-right &,
+  .tiled-bottom &,
+  .maximized &,
+  .fullscreen & {
+    &:backdrop, & {
+      border-radius: 0;
+    }
+  }
+
+  &.default-decoration {
+    min-height: 28px;
+    padding: 4px;
+
+    windowcontrols {
+      button,
+      menubutton {
+        min-height: 26px;
+        min-width: 26px;
+        margin: 0;
+        padding: 0;
+      }
+
+      menubutton button {
+        min-height: 20px;
+        min-width: 20px;
+        margin: 0;
+        padding: 4px;
+      }
+    }
+  }
+
+  .solid-csd & {
+    &:backdrop, & {
+      &:dir(rtl), &:dir(ltr) { // specificity bump
+        margin-left: -1px;
+        margin-right: -1px;
+        margin-top: -1px;
+        border-radius: 0;
+        box-shadow: none;
+      }
+    }
+  }
+
+  // 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) {
+  separator { background-color: $borders_color; }  // FIXME: use darker border?
+}
+
+/*********************
+ * GtkWindowControls *
+ *********************/
+
+windowcontrols {
+  border-spacing: 6px;
+
+  &:not(.empty) {
+    &.start:dir(ltr),
+    &.end:dir(rtl) {
+      margin-right: 7px;
+    }
+
+    &.start:dir(rtl),
+    &.end:dir(ltr) {
+      margin-left: 7px;
+    }
+  }
+
+  button {
+    @extend %button_basic;
+    @extend %button_basic_flat;
+
+    border-radius: 9999px;
+    padding: 6px;
+    margin: 0 2px;
+    min-width: 0;
+    min-height: 0;
+  }
+}
+
+// special case hover colors inside a headerbar
+headerbar windowcontrols button {
+  &:hover {
+    @include button(undecorated-hover,$c:darken($headerbar_bg_color,6%));
+  }
+  &:active,
+  &:checked { @include button(undecorated-active,$c:darken($headerbar_bg_color,10%)); }
+}
+
+/******************
+ * AdwWindowTitle *
+ ******************/
+
+windowtitle {
+  .title {
+    padding-left: 12px;
+    padding-right: 12px;
+    font-weight: bold;
+  }
+
+  .subtitle {
+    font-size: smaller;
+    padding-left: 12px;
+    padding-right: 12px;
+    @extend .dim-label;
+  }
+}
+
+// Development versions of apps to use a differently styled headerbar
+
+window.devel {
+  headerbar {
+    $c: darken($bg_color, 10%);
+    $gradient: cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px 
no-repeat,
+               linear-gradient(to right, transparent 65%, transparentize($selected_bg_color, 0.8)),
+               linear-gradient(to top, darken($c, 3%), $c 3px, lighten($c, 6%));
+    @if $variant == 'dark' {
+      $gradient: cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px 
no-repeat,
+                 linear-gradient(to right, transparent 65%, transparentize($selected_bg_color, 0.9)),
+                 linear-gradient(to top, lighten($c, 3%) 3px, lighten($c, 5%));
+    }
+
+    background: $bg_color $gradient;
+
+    &:backdrop {
+      background: $bg_color cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 
0/256px 256px no-repeat,
+                  image($bg_color); /* background-color would flash */
+    }
+  }
+}