[libadwaita/wip/exalm/stylesheet2: 66/103] stylesheet: Split entry styles into a separate file

[Alexander Mikhaylenko <alexm src gnome org>]

commit 67a3e8318457e1b9e55f92c187a0710254ca87c2
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Fri Apr 9 12:43:19 2021 +0500

    stylesheet: Split entry styles into a separate file

 src/stylesheet/_common.scss          | 165 -----------------------------------
 src/stylesheet/_widgets.scss         |   1 +
 src/stylesheet/meson.build           |   1 +
 src/stylesheet/widgets/_entries.scss | 160 +++++++++++++++++++++++++++++++++
 4 files changed, 162 insertions(+), 165 deletions(-)
---
diff --git a/src/stylesheet/_common.scss b/src/stylesheet/_common.scss
index 88743be..93e34ef 100644
--- a/src/stylesheet/_common.scss
+++ b/src/stylesheet/_common.scss
@@ -226,171 +226,6 @@ window.aboutdialog image.large-icons {
    font-size: 9pt;
 }
 
-/****************
- * Text Entries *
- ****************/
-
-%entry,
-entry {
-  %entry_basic, & {
-    min-height: 32px;
-    padding-left: 8px;
-    padding-right: 8px;
-    border: 1px solid;
-    border-radius: $button_radius;
-    border-spacing: 6px;
-    transition: all 200ms $ease-out-quad;
-
-    @include entry(normal);
-
-    @include focus-ring($focus-state: 'focus-within');
-
-    > text {
-      > placeholder {
-        @extend .dim-label;
-      }
-
-      > block-cursor {
-        @include entry(block_cursor);
-      }
-
-      > selection {
-        @extend %selected_items;
-      }
-    }
-
-    &.flat {
-      &:focus-within, &:backdrop, &:disabled, &:backdrop:disabled, & {
-        min-height: 0;
-        padding: 2px;
-        background-color: transparent;
-        border-color: transparent;
-        border-radius: 0;
-      }
-    }
-
-    &:disabled { @include entry(insensitive); }
-
-    // entry error and warning style
-    @each $e_type, $e_color in (error, $error_color),
-                               (warning, $warning_color) {
-      &.#{$e_type} {
-        color: $e_color;
-
-        @include focus-ring($focus-state: 'focus-within', $fc: transparentize($e_color, 0.5));
-
-        > selection { background-color: $e_color; }
-      }
-    }
-
-    > image { // icons inside the entry
-      color: mix($fg_color, $base_color, 80%);
-
-      &:hover { color: $fg_color; }
-
-      &:active { color: $selected_bg_color; }
-
-      &.left { margin-right: 6px; }
-      &.right { margin-left: 6px; }
-    }
-
-    &.password image.caps-lock-indicator {
-      color: mix($backdrop_fg_color, $backdrop_base_color, 80%);
-    }
-
-    &:drop(active) {
-      &:focus-within, & {
-        border-color: $drop_target_color;
-        box-shadow: inset 0 0 0 1px $drop_target_color;
-      }
-    }
-
-    .osd & {
-      @include entry(osd);
-
-      &:focus-within { @include entry(osd-focus); }
-
-      &:disabled { @include entry(osd-insensitive); }
-    }
-  }
-
-  > progress {
-    margin-bottom: 2px;
-
-    > trough > progress {
-      background-color: transparent;
-      background-image: none;
-      border-radius: 0;
-      border-width: 0 0 2px;
-      border-color: $selected_bg_color;
-      border-style: solid;
-      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; }
-    }
-  }
-
-  &.error { color: $error_color; }
-}
-
-treeview entry {
-  &:focus-within {
-    &:dir(rtl), &:dir(ltr) { // specificity bump hack
-      background-color: $base_color;
-      transition-property: color, background;
-    }
-  }
-
-  &.flat, & {
-    border-radius: 0;
-    background-image: none;
-    background-color: $base_color;
-
-    &:focus-within { border-color: $selected_bg_color; }
-  }
-}
-
 /*******************
  * Editable Labels *
  *******************/
diff --git a/src/stylesheet/_widgets.scss b/src/stylesheet/_widgets.scss
index b343707..c0481d2 100644
--- a/src/stylesheet/_widgets.scss
+++ b/src/stylesheet/_widgets.scss
@@ -1,2 +1,3 @@
 @import 'widgets/buttons';
+@import 'widgets/entries';
 @import 'widgets/spinner';
diff --git a/src/stylesheet/meson.build b/src/stylesheet/meson.build
index a512ff7..bf07737 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/_entries.scss',
       'widgets/_spinner.scss',
     ])
 
diff --git a/src/stylesheet/widgets/_entries.scss b/src/stylesheet/widgets/_entries.scss
new file mode 100644
index 0000000..52cca6c
--- /dev/null
+++ b/src/stylesheet/widgets/_entries.scss
@@ -0,0 +1,160 @@
+%entry,
+entry {
+  %entry_basic, & {
+    min-height: 32px;
+    padding-left: 8px;
+    padding-right: 8px;
+    border: 1px solid;
+    border-radius: $button_radius;
+    border-spacing: 6px;
+    transition: all 200ms $ease-out-quad;
+
+    @include entry(normal);
+
+    @include focus-ring($focus-state: 'focus-within');
+
+    > text {
+      > placeholder {
+        @extend .dim-label;
+      }
+
+      > block-cursor {
+        @include entry(block_cursor);
+      }
+
+      > selection {
+        @extend %selected_items;
+      }
+    }
+
+    &.flat {
+      &:focus-within, &:backdrop, &:disabled, &:backdrop:disabled, & {
+        min-height: 0;
+        padding: 2px;
+        background-color: transparent;
+        border-color: transparent;
+        border-radius: 0;
+      }
+    }
+
+    &:disabled { @include entry(insensitive); }
+
+    // entry error and warning style
+    @each $e_type, $e_color in (error, $error_color),
+                               (warning, $warning_color) {
+      &.#{$e_type} {
+        color: $e_color;
+
+        @include focus-ring($focus-state: 'focus-within', $fc: transparentize($e_color, 0.5));
+
+        > selection { background-color: $e_color; }
+      }
+    }
+
+    > image { // icons inside the entry
+      color: mix($fg_color, $base_color, 80%);
+
+      &:hover { color: $fg_color; }
+
+      &:active { color: $selected_bg_color; }
+
+      &.left { margin-right: 6px; }
+      &.right { margin-left: 6px; }
+    }
+
+    &.password image.caps-lock-indicator {
+      color: mix($backdrop_fg_color, $backdrop_base_color, 80%);
+    }
+
+    &:drop(active) {
+      &:focus-within, & {
+        border-color: $drop_target_color;
+        box-shadow: inset 0 0 0 1px $drop_target_color;
+      }
+    }
+
+    .osd & {
+      @include entry(osd);
+
+      &:focus-within { @include entry(osd-focus); }
+
+      &:disabled { @include entry(osd-insensitive); }
+    }
+  }
+
+  > progress {
+    margin-bottom: 2px;
+
+    > trough > progress {
+      background-color: transparent;
+      background-image: none;
+      border-radius: 0;
+      border-width: 0 0 2px;
+      border-color: $selected_bg_color;
+      border-style: solid;
+      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; }
+    }
+  }
+
+  &.error { color: $error_color; }
+}
+
+treeview entry {
+  &:focus-within {
+    &:dir(rtl), &:dir(ltr) { // specificity bump hack
+      background-color: $base_color;
+      transition-property: color, background;
+    }
+  }
+
+  &.flat, & {
+    border-radius: 0;
+    background-image: none;
+    background-color: $base_color;
+
+    &:focus-within { border-color: $selected_bg_color; }
+  }
+}