[libadwaita/wip/exalm/stylesheet2: 70/97] stylesheet: Split notebook styles into a separate file

[Alexander Mikhaylenko <alexm src gnome org>]

commit 3df7fc60afb269c21bf49cf5249d1aedd5542b8a
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Fri Apr 9 13:18:59 2021 +0500

    stylesheet: Split notebook styles into a separate file

 src/stylesheet/_common.scss           | 245 ----------------------------------
 src/stylesheet/_widgets.scss          |   1 +
 src/stylesheet/meson.build            |   1 +
 src/stylesheet/widgets/_notebook.scss | 240 +++++++++++++++++++++++++++++++++
 4 files changed, 242 insertions(+), 245 deletions(-)
---
diff --git a/src/stylesheet/_common.scss b/src/stylesheet/_common.scss
index 314d9ce..c113806 100644
--- a/src/stylesheet/_common.scss
+++ b/src/stylesheet/_common.scss
@@ -237,251 +237,6 @@ editablelabel > stack > text {
 }
 
 
-/*************
- * Notebooks *
- *************/
-notebook {
-  @include focus-ring("> header > tabs > tab:checked", $offset: -2px, $focus-state: 'focus:focus-visible');
-
-  > header {
-    padding: 1px;
-    border-color: $borders_color;
-    border-width: 1px;
-    background-color: $dark_fill;
-
-    > tabs { margin: -1px; }
-
-    &.top {
-      border-bottom-style: solid;
-      > tabs {
-        margin-bottom: -2px;
-        > tab {
-          &:hover { box-shadow: inset 0 -4px $borders_color; }
-
-
-          &:checked { box-shadow: inset 0 -4px $selected_bg_color; }
-        }
-      }
-    }
-
-    &.bottom {
-      border-top-style: solid;
-      > tabs {
-        margin-top: -2px;
-        > tab {
-          &:hover { box-shadow: inset 0 4px $borders_color; }
-
-          &:checked { box-shadow: inset 0 4px $selected_bg_color; }
-        }
-      }
-    }
-
-    &.left {
-      border-right-style: solid;
-      > tabs {
-        margin-right: -2px;
-        > tab {
-          &:hover { box-shadow: inset -4px 0 $borders_color; }
-
-          &:checked { box-shadow: inset -4px 0 $selected_bg_color; }
-        }
-      }
-    }
-
-    &.right {
-      border-left-style: solid;
-      > tabs {
-        margin-left: -2px;
-        > tab {
-          &:hover { box-shadow: inset 4px 0 $borders_color; }
-
-          &:checked { box-shadow: inset 4px 0 $selected_bg_color; }
-        }
-      }
-    }
-
-    &.top > tabs > arrow {
-      @extend %notebook_vert_arrows;
-
-      border-top-style: none;
-    }
-
-    &.bottom > tabs > arrow {
-      @extend %notebook_vert_arrows;
-
-      border-bottom-style: none;
-    }
-
-    @at-root %notebook_vert_arrows {
-      margin-left: -5px;
-      margin-right: -5px;
-      padding-left: 4px;
-      padding-right: 4px;
-
-      &.down { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
-
-      &.up { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
-    }
-
-    &.left > tabs > arrow {
-      @extend %notebook_horz_arrows;
-
-      border-left-style: none;
-    }
-
-    &.right > tabs > arrow {
-      @extend %notebook_horz_arrows;
-
-      border-right-style: none;
-    }
-
-    @at-root %notebook_horz_arrows {
-      margin-top: -5px;
-      margin-bottom: -5px;
-      padding-top: 4px;
-      padding-bottom: 4px;
-
-      &.down { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
-
-      &.up { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
-    }
-
-    > tabs > arrow {
-      @extend %button_basic;
-
-      @extend %button_basic_flat;
-
-      min-height: 16px;
-      min-width: 16px;
-      border-radius: 0;
-
-      &:hover:not(:active):not(:backdrop) {
-        background-clip: padding-box;
-        background-image: none;
-        background-color: transparentize(white, 0.7);
-        border-color: transparent;
-        box-shadow: none;
-      }
-
-      &:disabled { @include button(undecorated); }
-    }
-
-    > tabs > tab {
-      transition: $focus_transition;
-      min-height: 30px;
-      min-width: 30px;
-      padding: 3px 12px;
-
-      color: $fg_color;
-      font-weight: normal;
-
-      border-width: 1px;         // for reorderable tabs
-      border-color: transparent; //
-
-      &:hover {
-        color: $fg_color;
-        background-color: darken($dark_fill,4%);
-
-        &.reorderable-page {
-          border-color: transparentize($borders_color, 0.7);
-          background-color: transparentize($bg_color, 0.8);
-        }
-      }
-
-      &:not(:checked) {
-        outline-color: transparent;
-      }
-
-      &:checked {
-        color: $fg_color;
-        &.reorderable-page {
-          border-color: transparentize($borders_color, 0.5);
-          background-color: transparentize($bg_color, 0.5);
-
-          &:hover { background-color: transparentize($bg_color, 0.3); }
-        }
-      }
-
-      // colors the button like the label, overridden otherwise
-      button.flat {
-        color: gtkalpha(currentColor, 0.3);
-        &:hover { color: currentColor; }
-
-        padding: 0;
-        margin-top: 4px;
-        margin-bottom: 4px;
-        // FIXME: generalize .small-button?
-        min-width: 20px;
-        min-height: 20px;
-
-        &:last-child {
-          margin-left: 4px;
-          margin-right: -4px;
-        }
-
-        &:first-child {
-          margin-left: -4px;
-          margin-right: 4px;
-        }
-      }
-    }
-
-    &.top,
-    &.bottom {
-      > tabs {
-        padding-left: 4px;
-        padding-right: 4px;
-
-        &:not(:only-child) {
-          margin-left: 3px;
-          margin-right: 3px;
-
-          &:first-child { margin-left: -1px; }
-          &:last-child { margin-right: -1px; }
-        }
-
-        > tab {
-          margin-left: 4px;
-          margin-right: 4px;
-
-          &.reorderable-page { border-style: none solid; }
-        }
-      }
-    }
-
-    &.left,
-    &.right {
-      > tabs {
-        padding-top: 4px;
-        padding-bottom: 4px;
-
-        &:not(:only-child) {
-          margin-top: 3px;
-          margin-bottom: 3px;
-
-          &:first-child { margin-top: -1px; }
-          &:last-child { margin-bottom: -1px; }
-        }
-
-        > tab {
-          margin-top: 4px;
-          margin-bottom: 4px;
-
-          &.reorderable-page { border-style: solid none; }
-        }
-      }
-    }
-
-    &.top > tabs > tab { padding-bottom: 4px; }
-    &.bottom > tabs > tab { padding-top: 4px; }
-  }
-
-  > stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
-    background-color: $base_color;
-  }
-}
-
-
 /*************
  * Scrolling *
  *************/
diff --git a/src/stylesheet/_widgets.scss b/src/stylesheet/_widgets.scss
index b454d3d..822a612 100644
--- a/src/stylesheet/_widgets.scss
+++ b/src/stylesheet/_widgets.scss
@@ -4,6 +4,7 @@
 @import 'widgets/header-bar';
 @import 'widgets/links';
 @import 'widgets/menus';
+@import 'widgets/notebook';
 @import 'widgets/popovers';
 @import 'widgets/spinner';
 @import 'widgets/spin-button';
diff --git a/src/stylesheet/meson.build b/src/stylesheet/meson.build
index 2cd30de..e66c5cc 100644
--- a/src/stylesheet/meson.build
+++ b/src/stylesheet/meson.build
@@ -26,6 +26,7 @@ if not fs.exists('Adwaita-light.css')
       'widgets/_header-bar.scss',
       'widgets/_links.scss',
       'widgets/_menus.scss',
+      'widgets/_notebook.scss',
       'widgets/_popovers.scss',
       'widgets/_spinner.scss',
       'widgets/_spin-button.scss',
diff --git a/src/stylesheet/widgets/_notebook.scss b/src/stylesheet/widgets/_notebook.scss
new file mode 100644
index 0000000..a075628
--- /dev/null
+++ b/src/stylesheet/widgets/_notebook.scss
@@ -0,0 +1,240 @@
+notebook {
+  @include focus-ring("> header > tabs > tab:checked", $offset: -2px, $focus-state: 'focus:focus-visible');
+
+  > header {
+    padding: 1px;
+    border-color: $borders_color;
+    border-width: 1px;
+    background-color: $dark_fill;
+
+    > tabs { margin: -1px; }
+
+    &.top {
+      border-bottom-style: solid;
+      > tabs {
+        margin-bottom: -2px;
+        > tab {
+          &:hover { box-shadow: inset 0 -4px $borders_color; }
+
+
+          &:checked { box-shadow: inset 0 -4px $selected_bg_color; }
+        }
+      }
+    }
+
+    &.bottom {
+      border-top-style: solid;
+      > tabs {
+        margin-top: -2px;
+        > tab {
+          &:hover { box-shadow: inset 0 4px $borders_color; }
+
+          &:checked { box-shadow: inset 0 4px $selected_bg_color; }
+        }
+      }
+    }
+
+    &.left {
+      border-right-style: solid;
+      > tabs {
+        margin-right: -2px;
+        > tab {
+          &:hover { box-shadow: inset -4px 0 $borders_color; }
+
+          &:checked { box-shadow: inset -4px 0 $selected_bg_color; }
+        }
+      }
+    }
+
+    &.right {
+      border-left-style: solid;
+      > tabs {
+        margin-left: -2px;
+        > tab {
+          &:hover { box-shadow: inset 4px 0 $borders_color; }
+
+          &:checked { box-shadow: inset 4px 0 $selected_bg_color; }
+        }
+      }
+    }
+
+    &.top > tabs > arrow {
+      @extend %notebook_vert_arrows;
+
+      border-top-style: none;
+    }
+
+    &.bottom > tabs > arrow {
+      @extend %notebook_vert_arrows;
+
+      border-bottom-style: none;
+    }
+
+    @at-root %notebook_vert_arrows {
+      margin-left: -5px;
+      margin-right: -5px;
+      padding-left: 4px;
+      padding-right: 4px;
+
+      &.down { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
+
+      &.up { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
+    }
+
+    &.left > tabs > arrow {
+      @extend %notebook_horz_arrows;
+
+      border-left-style: none;
+    }
+
+    &.right > tabs > arrow {
+      @extend %notebook_horz_arrows;
+
+      border-right-style: none;
+    }
+
+    @at-root %notebook_horz_arrows {
+      margin-top: -5px;
+      margin-bottom: -5px;
+      padding-top: 4px;
+      padding-bottom: 4px;
+
+      &.down { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
+
+      &.up { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
+    }
+
+    > tabs > arrow {
+      @extend %button_basic;
+
+      @extend %button_basic_flat;
+
+      min-height: 16px;
+      min-width: 16px;
+      border-radius: 0;
+
+      &:hover:not(:active):not(:backdrop) {
+        background-clip: padding-box;
+        background-image: none;
+        background-color: transparentize(white, 0.7);
+        border-color: transparent;
+        box-shadow: none;
+      }
+
+      &:disabled { @include button(undecorated); }
+    }
+
+    > tabs > tab {
+      transition: $focus_transition;
+      min-height: 30px;
+      min-width: 30px;
+      padding: 3px 12px;
+
+      color: $fg_color;
+      font-weight: normal;
+
+      border-width: 1px;         // for reorderable tabs
+      border-color: transparent; //
+
+      &:hover {
+        color: $fg_color;
+        background-color: darken($dark_fill,4%);
+
+        &.reorderable-page {
+          border-color: transparentize($borders_color, 0.7);
+          background-color: transparentize($bg_color, 0.8);
+        }
+      }
+
+      &:not(:checked) {
+        outline-color: transparent;
+      }
+
+      &:checked {
+        color: $fg_color;
+        &.reorderable-page {
+          border-color: transparentize($borders_color, 0.5);
+          background-color: transparentize($bg_color, 0.5);
+
+          &:hover { background-color: transparentize($bg_color, 0.3); }
+        }
+      }
+
+      // colors the button like the label, overridden otherwise
+      button.flat {
+        color: gtkalpha(currentColor, 0.3);
+        &:hover { color: currentColor; }
+
+        padding: 0;
+        margin-top: 4px;
+        margin-bottom: 4px;
+        // FIXME: generalize .small-button?
+        min-width: 20px;
+        min-height: 20px;
+
+        &:last-child {
+          margin-left: 4px;
+          margin-right: -4px;
+        }
+
+        &:first-child {
+          margin-left: -4px;
+          margin-right: 4px;
+        }
+      }
+    }
+
+    &.top,
+    &.bottom {
+      > tabs {
+        padding-left: 4px;
+        padding-right: 4px;
+
+        &:not(:only-child) {
+          margin-left: 3px;
+          margin-right: 3px;
+
+          &:first-child { margin-left: -1px; }
+          &:last-child { margin-right: -1px; }
+        }
+
+        > tab {
+          margin-left: 4px;
+          margin-right: 4px;
+
+          &.reorderable-page { border-style: none solid; }
+        }
+      }
+    }
+
+    &.left,
+    &.right {
+      > tabs {
+        padding-top: 4px;
+        padding-bottom: 4px;
+
+        &:not(:only-child) {
+          margin-top: 3px;
+          margin-bottom: 3px;
+
+          &:first-child { margin-top: -1px; }
+          &:last-child { margin-bottom: -1px; }
+        }
+
+        > tab {
+          margin-top: 4px;
+          margin-bottom: 4px;
+
+          &.reorderable-page { border-style: solid none; }
+        }
+      }
+    }
+
+    &.top > tabs > tab { padding-bottom: 4px; }
+    &.bottom > tabs > tab { padding-top: 4px; }
+  }
+
+  > stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
+    background-color: $base_color;
+  }
+}