[libadwaita/wip/exalm/stylesheet2: 75/103] stylesheet: Split menu styles into a separate files

[Alexander Mikhaylenko <alexm src gnome org>]

commit b5690f8fc498f936a225a28012365015a205c2e2
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Fri Apr 9 13:11:15 2021 +0500

    stylesheet: Split menu styles into a separate files

 src/stylesheet/_common.scss        | 169 -------------------------------------
 src/stylesheet/_widgets.scss       |   1 +
 src/stylesheet/meson.build         |   1 +
 src/stylesheet/widgets/_menus.scss | 160 +++++++++++++++++++++++++++++++++++
 4 files changed, 162 insertions(+), 169 deletions(-)
---
diff --git a/src/stylesheet/_common.scss b/src/stylesheet/_common.scss
index 5fbfb1d..314d9ce 100644
--- a/src/stylesheet/_common.scss
+++ b/src/stylesheet/_common.scss
@@ -237,175 +237,6 @@ editablelabel > stack > text {
 }
 
 
-/**********************
- * Popover Base Menus *
- **********************/
-
-$_menu-padding: 12px; //inner menuitem padding
-//global $menu-margin for outside menuitems
-
-popover.menu {
-  padding: 0;
-
-  box.inline-buttons {
-    padding: 0 $_menu-padding;
-
-    button.image-button.model {
-      @include button(undecorated);
-
-      min-height: 30px;
-      min-width: 30px;
-      padding: 0;
-      border: none;
-      outline: none;
-      transition: none;
-
-      &:selected { background: image($menu_selected_color); }
-    }
-  }
-
-  box.circular-buttons {
-    padding: $_menu-padding $_menu-padding 6px;
-
-    button.circular.image-button.model {
-      @extend %list_button;
-
-      padding: 11px;
-      &:focus {
-         background-color: $menu_selected_color;
-         border-color: $menu_selected_color;
-      }
-    }
-  }
-
-  & > arrow,
-  &.background > contents {
-    background-color: $menu_color;
-    padding: $menu-margin;
-  }
-
-  &.background separator {
-    margin: 6px 0;
-  }
-
-  accelerator {
-    color: gtkalpha(currentColor, 0.55);
-
-    &:dir(ltr) { margin-left: $_menu-padding; }
-    &:dir(rtl) { margin-right: $_menu-padding; }
-  }
-
-  check,
-  radio {
-    @include check('menu', 'transparent', $text_color);
-
-    &:hover { @include check('menu-active', 'transparent', $text_color); }
-    &:active { @include check('menu-active', 'transparent', $text_color); }
-  }
-
-  //only menu radios have a border
-  radio {
-    border-color: $borders_color;
-
-    &:active { border-color: transparentize($borders_color,0.5); }
-  }
-
-  arrow.left,
-  radio.left,
-  check.left {
-    margin-left: -2px;
-    margin-right: 6px;
-  }
-
-  arrow.right,
-  radio.right,
-  check.right {
-    margin-left: 6px;
-    margin-right: -2px;
-  }
-
-  arrow:disabled,
-  check:disabled,
-  radio:disabled { -gtk-icon-filter: opacity(0.5); }
-
-  modelbutton {
-    min-height: 30px;
-    min-width: 40px;
-    padding: 0 $_menu-padding;
-    border-radius: $menu-margin;
-
-    @extend %undecorated_button;
-
-    &:hover,
-    &:selected {
-      color: $text-color;
-      background-color: $menu_selected_color;
-
-      &:active {
-        background-color: darken($bg_color,14%); // matching buttons
-      }
-    }
-
-    &:disabled { color: $insensitive_fg_color; }
-
-    arrow {
-      background: none;
-      min-width: 16px;
-      min-height: 16px;
-      opacity: 0.3; // dim icon
-
-      &:hover { background: none; }
-
-      &.left { -gtk-icon-source: -gtk-icontheme("go-previous-symbolic"); }
-
-      &.right { -gtk-icon-source: -gtk-icontheme("go-next-symbolic"); }
-    }
-  }
-
-  label.title {
-    font-weight: bold;
-    padding: 4px ($_menu-padding + 20px); //this will fall apart with font sizing
-  }
-}
-
-/*******************
- * Popover Menubar *
- *******************/
-menubar {
-  padding: 0px;
-  box-shadow: inset 0 -1px transparentize(black, 0.9);
-
-  > item {
-    min-height: 16px;
-    padding: 4px 8px;
-
-    &:selected { //Seems like it :hover even with keyboard focus
-      box-shadow: inset 0 -3px $selected_bg_color;
-      color: $link_color;
-    }
-
-    &:disabled {
-      color: $insensitive_fg_color;
-      box-shadow: none;
-    }
-
-    popover.menu.background > contents {
-      padding: $menu-margin;
-    }
-
-    //nested submenus
-    popover.menu popover.menu {
-      padding: 0 0 4px 0;
-    }
-
-    popover.menu.background popover.menu.background > contents {
-      margin: 0;
-      border-radius: $popover_radius; //including top
-    }
-  }
-}
-
-
 /*************
  * Notebooks *
  *************/
diff --git a/src/stylesheet/_widgets.scss b/src/stylesheet/_widgets.scss
index 933dce2..b454d3d 100644
--- a/src/stylesheet/_widgets.scss
+++ b/src/stylesheet/_widgets.scss
@@ -3,6 +3,7 @@
 @import 'widgets/entries';
 @import 'widgets/header-bar';
 @import 'widgets/links';
+@import 'widgets/menus';
 @import 'widgets/popovers';
 @import 'widgets/spinner';
 @import 'widgets/spin-button';
diff --git a/src/stylesheet/meson.build b/src/stylesheet/meson.build
index 0583df7..2cd30de 100644
--- a/src/stylesheet/meson.build
+++ b/src/stylesheet/meson.build
@@ -25,6 +25,7 @@ if not fs.exists('Adwaita-light.css')
       'widgets/_entries.scss',
       'widgets/_header-bar.scss',
       'widgets/_links.scss',
+      'widgets/_menus.scss',
       'widgets/_popovers.scss',
       'widgets/_spinner.scss',
       'widgets/_spin-button.scss',
diff --git a/src/stylesheet/widgets/_menus.scss b/src/stylesheet/widgets/_menus.scss
new file mode 100644
index 0000000..8f494f7
--- /dev/null
+++ b/src/stylesheet/widgets/_menus.scss
@@ -0,0 +1,160 @@
+$_menu-padding: 12px; //inner menuitem padding
+//global $menu-margin for outside menuitems
+
+popover.menu {
+  padding: 0;
+
+  box.inline-buttons {
+    padding: 0 $_menu-padding;
+
+    button.image-button.model {
+      @include button(undecorated);
+
+      min-height: 30px;
+      min-width: 30px;
+      padding: 0;
+      border: none;
+      outline: none;
+      transition: none;
+
+      &:selected { background: image($menu_selected_color); }
+    }
+  }
+
+  box.circular-buttons {
+    padding: $_menu-padding $_menu-padding 6px;
+
+    button.circular.image-button.model {
+      @extend %list_button;
+
+      padding: 11px;
+      &:focus {
+         background-color: $menu_selected_color;
+         border-color: $menu_selected_color;
+      }
+    }
+  }
+
+  & > arrow,
+  &.background > contents {
+    background-color: $menu_color;
+    padding: $menu-margin;
+  }
+
+  &.background separator {
+    margin: 6px 0;
+  }
+
+  accelerator {
+    color: gtkalpha(currentColor, 0.55);
+
+    &:dir(ltr) { margin-left: $_menu-padding; }
+    &:dir(rtl) { margin-right: $_menu-padding; }
+  }
+
+  check,
+  radio {
+    @include check('menu', 'transparent', $text_color);
+
+    &:hover { @include check('menu-active', 'transparent', $text_color); }
+    &:active { @include check('menu-active', 'transparent', $text_color); }
+  }
+
+  //only menu radios have a border
+  radio {
+    border-color: $borders_color;
+
+    &:active { border-color: transparentize($borders_color,0.5); }
+  }
+
+  arrow.left,
+  radio.left,
+  check.left {
+    margin-left: -2px;
+    margin-right: 6px;
+  }
+
+  arrow.right,
+  radio.right,
+  check.right {
+    margin-left: 6px;
+    margin-right: -2px;
+  }
+
+  arrow:disabled,
+  check:disabled,
+  radio:disabled { -gtk-icon-filter: opacity(0.5); }
+
+  modelbutton {
+    min-height: 30px;
+    min-width: 40px;
+    padding: 0 $_menu-padding;
+    border-radius: $menu-margin;
+
+    @extend %undecorated_button;
+
+    &:hover,
+    &:selected {
+      color: $text-color;
+      background-color: $menu_selected_color;
+
+      &:active {
+        background-color: darken($bg_color,14%); // matching buttons
+      }
+    }
+
+    &:disabled { color: $insensitive_fg_color; }
+
+    arrow {
+      background: none;
+      min-width: 16px;
+      min-height: 16px;
+      opacity: 0.3; // dim icon
+
+      &:hover { background: none; }
+
+      &.left { -gtk-icon-source: -gtk-icontheme("go-previous-symbolic"); }
+
+      &.right { -gtk-icon-source: -gtk-icontheme("go-next-symbolic"); }
+    }
+  }
+
+  label.title {
+    font-weight: bold;
+    padding: 4px ($_menu-padding + 20px); //this will fall apart with font sizing
+  }
+}
+
+menubar {
+  padding: 0px;
+  box-shadow: inset 0 -1px transparentize(black, 0.9);
+
+  > item {
+    min-height: 16px;
+    padding: 4px 8px;
+
+    &:selected { //Seems like it :hover even with keyboard focus
+      box-shadow: inset 0 -3px $selected_bg_color;
+      color: $link_color;
+    }
+
+    &:disabled {
+      color: $insensitive_fg_color;
+      box-shadow: none;
+    }
+
+    popover.menu.background > contents {
+      padding: $menu-margin;
+    }
+
+    //nested submenus
+    popover.menu popover.menu {
+      padding: 0 0 4px 0;
+    }
+
+    popover.menu.background popover.menu.background > contents {
+      margin: 0;
+      border-radius: $popover_radius; //including top
+    }
+  }
+}