[libadwaita/wip/exalm/stylesheet2: 79/103] stylesheet: Split check and radio styles into a separate file

[Alexander Mikhaylenko <alexm src gnome org>]

commit 7151244d774cd55afaa45019173d37de348cabdc
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Fri Apr 9 13:26:57 2021 +0500

    stylesheet: Split check and radio styles into a separate file

 src/stylesheet/_common.scss         | 137 ------------------------------------
 src/stylesheet/_widgets.scss        |   1 +
 src/stylesheet/meson.build          |   1 +
 src/stylesheet/widgets/_checks.scss | 131 ++++++++++++++++++++++++++++++++++
 4 files changed, 133 insertions(+), 137 deletions(-)
---
diff --git a/src/stylesheet/_common.scss b/src/stylesheet/_common.scss
index b97fdcc..cbb9d74 100644
--- a/src/stylesheet/_common.scss
+++ b/src/stylesheet/_common.scss
@@ -237,143 +237,6 @@ editablelabel > stack > text {
 }
 
 
-/*************************
- * Check and Radio items *
- *************************/
-// draw regular check and radio items using our PNG assets
-// all assets are rendered from assets.svg. never add pngs directly
-
-
-//selection-mode
-@each $check_state, $check_icon, $check_color, $check_background in
-  ('', 'none', 'transparent', $checkradio_bg_color),
-  (':hover', 'none', 'transparent', $checkradio_bg_color),
-  (':active', 'none', 'transparent', $checkradio_bg_color),
-  (':backdrop', 'none', 'transparent', '#{desaturate($checkradio_bg_color, 100%)}'),
-  (':checked', '-gtk-icontheme(\'object-select-symbolic\')', $osd_fg_color, $checkradio_bg_color),
-  (':checked:hover', '-gtk-icontheme(\'object-select-symbolic\')', $osd_fg_color, $checkradio_bg_color),
-  (':checked:active', '-gtk-icontheme(\'object-select-symbolic\')', $osd_fg_color, $checkradio_bg_color),
-  (':backdrop:checked', '-gtk-icontheme(\'object-select-symbolic\')', '#{transparentize($osd_fg_color, 
0.2)}', '#{desaturate($checkradio_bg_color, 100%)}'), {
-
-  .view.content-view.check#{$check_state}:not(list),
-  .content-view .tile check#{$check_state}:not(list) {
-    margin: 4px;
-    min-width: 32px;
-    min-height: 32px;
-    color: #{$check_color};
-    background-color: #{$check_background};
-    border-radius: 5px;
-    background-image: none;
-    transition: 200ms;
-    box-shadow: none;
-    border-width: 0;
-    -gtk-icon-source: #{$check_icon};
-  }
-}
-
-checkbutton {
-  border-spacing: 4px;
-  border-radius: $button_radius;
-  transition: $focus_transition;
-
-  @include focus-ring();
-
-  &.text-button {
-    // this is for a nice focus on check and radios text
-    padding: 4px;
-  }
-}
-
-check,
-radio {
-  min-height: 14px;
-  min-width: 14px;
-  border: 1px solid;
-  -gtk-icon-source: none;
-
-  & {
-    // for unchecked
-    $_c: if($variant=='light', white, $bg_color);
-
-    @each $state, $t in ("", "normal"),
-                        (":hover", "hover"),
-                        (":active", "active"),
-                        (":disabled", "insensitive") {
-      &#{$state} {
-        @include check($t, $_c);
-      }
-    }
-  }
-
-  & {
-    // for checked
-    @each $t in (':checked'), (':indeterminate') {
-      &#{$t} {
-        @each $state, $t in ("", "normal"),
-                            (":hover", "hover"),
-                            (":active", "active"),
-                            (":disabled", "insensitive") {
-          &#{$state} {
-            @include check($t, $checkradio_bg_color, $checkradio_fg_color, $checked: true);
-          }
-        }
-      }
-    }
-  }
-
-  @if $variant == 'light' {
-    // the borders of the light variant versions of checks and radios are too similar in luminosity to the 
selected background
-    // color, hence we need special casing.
-    row:selected & { border-color: $checkradio_borders_color; }
-  }
-
-  .osd & {
-    @include button(osd);
-
-    &:hover { @include button(osd); }
-    &:active { @include button(osd-active); }
-    &:disabled { @include button(osd-insensitive); }
-  }
-}
-
-%check,
-check {
-  border-radius: 3px;
-  -gtk-icon-size: 14px;
-
-  &:checked { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("#{$assets}/check-symbolic.symbolic.png")),
-                                            -gtk-recolor(url("#{$assets}/check 2-symbolic symbolic png"))); }
-
-  &:indeterminate { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("#{$assets}/dash-symbolic.symbolic.png")),
-                                                  -gtk-recolor(url("#{$assets}/dash 2-symbolic symbolic 
png"))); }
-}
-
-%radio,
-radio {
-  border-radius: 100%;
-  -gtk-icon-size: 14px;
-
-  &:checked { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("#{$assets}/bullet-symbolic.symbolic.png")),
-                                            -gtk-recolor(url("#{$assets}/bullet 2-symbolic symbolic png"))); 
}
-
-  &:indeterminate { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("#{$assets}/dash-symbolic.symbolic.png")),
-                                                  -gtk-recolor(url("#{$assets}/dash 2-symbolic symbolic 
png"))); }
-}
-
-treeview.view check,
-treeview.view radio {
-  &:selected {
-    &:focus, & {
-      color: $checkradio_fg_color;
-
-      @if $variant == 'light' { border-color: $selected_borders_color; }
-    }
-  }
-}
-
-treeview.view radio:selected { &:focus, & { @extend %radio; }} // This is a workaround
-
-
 /************
  * GtkScale *
  ************/
diff --git a/src/stylesheet/_widgets.scss b/src/stylesheet/_widgets.scss
index 5d86f17..595f8c4 100644
--- a/src/stylesheet/_widgets.scss
+++ b/src/stylesheet/_widgets.scss
@@ -1,4 +1,5 @@
 @import 'widgets/buttons';
+@import 'widgets/checks';
 @import 'widgets/dropdowns';
 @import 'widgets/entries';
 @import 'widgets/header-bar';
diff --git a/src/stylesheet/meson.build b/src/stylesheet/meson.build
index 5269f18..ee98cdd 100644
--- a/src/stylesheet/meson.build
+++ b/src/stylesheet/meson.build
@@ -21,6 +21,7 @@ if not fs.exists('Adwaita-light.css')
       '_widgets.scss',
 
       'widgets/_buttons.scss',
+      'widgets/_checks.scss',
       'widgets/_dropdowns.scss',
       'widgets/_entries.scss',
       'widgets/_header-bar.scss',
diff --git a/src/stylesheet/widgets/_checks.scss b/src/stylesheet/widgets/_checks.scss
new file mode 100644
index 0000000..0967a76
--- /dev/null
+++ b/src/stylesheet/widgets/_checks.scss
@@ -0,0 +1,131 @@
+checkbutton {
+  border-spacing: 4px;
+  border-radius: $button_radius;
+  transition: $focus_transition;
+
+  @include focus-ring();
+
+  &.text-button {
+    // this is for a nice focus on check and radios text
+    padding: 4px;
+  }
+}
+
+check,
+radio {
+  min-height: 14px;
+  min-width: 14px;
+  border: 1px solid;
+  -gtk-icon-source: none;
+
+  & {
+    // for unchecked
+    $_c: if($variant=='light', white, $bg_color);
+
+    @each $state, $t in ("", "normal"),
+                        (":hover", "hover"),
+                        (":active", "active"),
+                        (":disabled", "insensitive") {
+      &#{$state} {
+        @include check($t, $_c);
+      }
+    }
+  }
+
+  & {
+    // for checked
+    @each $t in (':checked'), (':indeterminate') {
+      &#{$t} {
+        @each $state, $t in ("", "normal"),
+                            (":hover", "hover"),
+                            (":active", "active"),
+                            (":disabled", "insensitive") {
+          &#{$state} {
+            @include check($t, $checkradio_bg_color, $checkradio_fg_color, $checked: true);
+          }
+        }
+      }
+    }
+  }
+
+  @if $variant == 'light' {
+    // the borders of the light variant versions of checks and radios are too similar in luminosity to the 
selected background
+    // color, hence we need special casing.
+    row:selected & { border-color: $checkradio_borders_color; }
+  }
+
+  .osd & {
+    @include button(osd);
+
+    &:hover { @include button(osd); }
+    &:active { @include button(osd-active); }
+    &:disabled { @include button(osd-insensitive); }
+  }
+}
+
+// draw regular check and radio items using our PNG assets
+// all assets are rendered from assets.svg. never add pngs directly
+
+%check,
+check {
+  border-radius: 3px;
+  -gtk-icon-size: 14px;
+
+  &:checked { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("#{$assets}/check-symbolic.symbolic.png")),
+                                            -gtk-recolor(url("#{$assets}/check 2-symbolic symbolic png"))); }
+
+  &:indeterminate { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("#{$assets}/dash-symbolic.symbolic.png")),
+                                                  -gtk-recolor(url("#{$assets}/dash 2-symbolic symbolic 
png"))); }
+}
+
+%radio,
+radio {
+  border-radius: 100%;
+  -gtk-icon-size: 14px;
+
+  &:checked { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("#{$assets}/bullet-symbolic.symbolic.png")),
+                                            -gtk-recolor(url("#{$assets}/bullet 2-symbolic symbolic png"))); 
}
+
+  &:indeterminate { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("#{$assets}/dash-symbolic.symbolic.png")),
+                                                  -gtk-recolor(url("#{$assets}/dash 2-symbolic symbolic 
png"))); }
+}
+
+treeview.view check,
+treeview.view radio {
+  &:selected {
+    &:focus, & {
+      color: $checkradio_fg_color;
+
+      @if $variant == 'light' { border-color: $selected_borders_color; }
+    }
+  }
+}
+
+treeview.view radio:selected { &:focus, & { @extend %radio; }} // This is a workaround
+
+//selection-mode
+@each $check_state, $check_icon, $check_color, $check_background in
+  ('', 'none', 'transparent', $checkradio_bg_color),
+  (':hover', 'none', 'transparent', $checkradio_bg_color),
+  (':active', 'none', 'transparent', $checkradio_bg_color),
+  (':backdrop', 'none', 'transparent', '#{desaturate($checkradio_bg_color, 100%)}'),
+  (':checked', '-gtk-icontheme(\'object-select-symbolic\')', $osd_fg_color, $checkradio_bg_color),
+  (':checked:hover', '-gtk-icontheme(\'object-select-symbolic\')', $osd_fg_color, $checkradio_bg_color),
+  (':checked:active', '-gtk-icontheme(\'object-select-symbolic\')', $osd_fg_color, $checkradio_bg_color),
+  (':backdrop:checked', '-gtk-icontheme(\'object-select-symbolic\')', '#{transparentize($osd_fg_color, 
0.2)}', '#{desaturate($checkradio_bg_color, 100%)}'), {
+
+  .view.content-view.check#{$check_state}:not(list),
+  .content-view .tile check#{$check_state}:not(list) {
+    margin: 4px;
+    min-width: 32px;
+    min-height: 32px;
+    color: #{$check_color};
+    background-color: #{$check_background};
+    border-radius: 5px;
+    background-image: none;
+    transition: 200ms;
+    box-shadow: none;
+    border-width: 0;
+    -gtk-icon-source: #{$check_icon};
+  }
+}