[libadwaita/wip/exalm/stylesheet2: 99/103] stylesheet: Split view switcher styles into a separate file
- From: Alexander Mikhaylenko <alexm src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [libadwaita/wip/exalm/stylesheet2: 99/103] stylesheet: Split view switcher styles into a separate file
- Date: Fri, 16 Apr 2021 22:38:47 +0000 (UTC)
commit d0b154514a94d2bff4a5d16c1ad36d36c9a5cca2
Author: Alexander Mikhaylenko <alexm gnome org>
Date: Fri Apr 9 16:44:39 2021 +0500
stylesheet: Split view switcher styles into a separate file
src/stylesheet/_custom.scss | 149 ----------------------------
src/stylesheet/_widgets.scss | 1 +
src/stylesheet/meson.build | 1 +
src/stylesheet/widgets/_view-switcher.scss | 150 +++++++++++++++++++++++++++++
4 files changed, 152 insertions(+), 149 deletions(-)
---
diff --git a/src/stylesheet/_custom.scss b/src/stylesheet/_custom.scss
index 882de72..f9cec07 100644
--- a/src/stylesheet/_custom.scss
+++ b/src/stylesheet/_custom.scss
@@ -9,155 +9,6 @@ $leaflet_outline: rgba(255, 255, 255, if($variant == 'light', 0.2, 0.05));
$leaflet_outline: transparent;
}
-// AdwViewSwitcher
-
-viewswitcher {
- &, & button {
- margin: 0;
- padding: 0;
- }
-
- button {
- border-radius: 0;
- border-top: 0;
- border-bottom: 0;
- box-shadow: none;
- font-size: 1rem;
-
- &:not(:checked):not(:hover) {
- background: transparent;
- }
-
- &:not(:only-child):not(:last-child) {
- border-right-width: 0px;
- }
-
- &:not(only-child):first-child:not(:checked):not(:hover),
- &:not(:checked):not(:hover) + button:not(:checked):not(:hover) {
- border-left-color: transparent;
- }
-
- &:not(only-child):last-child:not(:checked):not(:hover) {
- border-right-color: transparent;
- }
-
- &:not(:checked):hover:not(:backdrop) {
- background-image: image(lighter($bg_color));
- }
-
- &:not(only-child):first-child:not(:checked):hover,
- &:not(:checked):hover + button:not(:checked):not(:hover),
- &:not(:checked):not(:hover) + button:not(:checked):hover {
- border-left-color: shade($borders_color, 1.15);
- }
-
- &:not(only-child):last-child:not(:checked):hover {
- border-right-color: shade($borders_color, 1.15);
- }
-
- &:not(:checked):hover:backdrop {
- background-image: image($bg_color);
- }
-
- // View switcher in a header bar
- headerbar &:not(:checked) {
- &:hover:not(:backdrop) {
- // Reimplementation of $button_fill from Adwaita. The colors are made
- // only 70% visible to avoid the highlight to be too strong.
- $c: transparentize($bg_color, 0.3);
- $button_fill: if($variant == 'light', linear-gradient(to top, shade($c, 0.96) 2px, $c),
- linear-gradient(to top, shade($c, 0.99) 2px, $c)) !global;
- background-image: $button_fill;
- }
-
- &:not(only-child):first-child:hover,
- &:hover + button:not(:checked):not(:hover),
- &:not(:hover) + button:not(:checked):hover {
- border-left-color: $borders_color;
- }
-
- &:not(only-child):last-child:hover {
- border-right-color: $borders_color;
- }
-
- &:hover:backdrop {
- background-image: image($bg_color);
- }
- }
-
- // View switcher button
- > stack > box {
- &.narrow {
- font-size: 0.75rem;
- padding-top: 7px;
- padding-bottom: 5px;
-
- image,
- label {
- padding-left: 8px;
- padding-right: 8px;
- }
- }
-
- &.wide {
- padding: 8px 12px;
-
- label {
- &:dir(ltr) {
- padding-right: 7px;
- }
-
- &:dir(rtl) {
- padding-left: 7px;
- }
- }
- }
-
- label.active {
- font-weight: bold;
- }
- }
-
- &.needs-attention {
- &:active > stack > box label,
- &:checked > stack > box label {
- animation: none;
- background-image: none;
- }
-
- > stack > box label {
- animation: needs_attention 150ms ease-in;
- background-image: radial-gradient(#3584e4 50%, transparent),
- radial-gradient(rgba(255, 255, 255, 0.769231) 50%, transparent);
- background-size: 6px 6px, 6px 6px;
- background-repeat: no-repeat;
- background-position: right 0px, right 1px;
-
- &:backdrop {
- background-size: 6px 6px, 0 0;
- }
-
- &:dir(rtl) {
- background-position: left 0px, left 1px;
- }
- }
- }
- }
-}
-
-// AdwViewSwitcherBar
-
-viewswitcherbar actionbar > revealer > box {
- padding: 0;
-}
-
-// AdwViewSwitcherTitle
-
-viewswitchertitle viewswitcher {
- margin-left: 12px;
- margin-right: 12px;
-}
-
// AdwStatusPage
statuspage > scrolledwindow > viewport > box {
diff --git a/src/stylesheet/_widgets.scss b/src/stylesheet/_widgets.scss
index 26057c3..5ce5d4b 100644
--- a/src/stylesheet/_widgets.scss
+++ b/src/stylesheet/_widgets.scss
@@ -31,4 +31,5 @@
@import 'widgets/tooltip';
@import 'widgets/trees';
@import 'widgets/views';
+@import 'widgets/view-switcher';
@import 'widgets/window';
diff --git a/src/stylesheet/meson.build b/src/stylesheet/meson.build
index d1b6915..ddcde35 100644
--- a/src/stylesheet/meson.build
+++ b/src/stylesheet/meson.build
@@ -53,6 +53,7 @@ if not fs.exists('Adwaita-light.css')
'widgets/_tooltip.scss',
'widgets/_trees.scss',
'widgets/_views.scss',
+ 'widgets/_view-switcher.scss',
'widgets/_window.scss',
])
diff --git a/src/stylesheet/widgets/_view-switcher.scss b/src/stylesheet/widgets/_view-switcher.scss
new file mode 100644
index 0000000..a0c67aa
--- /dev/null
+++ b/src/stylesheet/widgets/_view-switcher.scss
@@ -0,0 +1,150 @@
+viewswitcher {
+ &, & button {
+ margin: 0;
+ padding: 0;
+ }
+
+ button {
+ border-radius: 0;
+ border-top: 0;
+ border-bottom: 0;
+ box-shadow: none;
+ font-size: 1rem;
+
+ &:not(:checked):not(:hover) {
+ background: transparent;
+ }
+
+ &:not(:only-child):not(:last-child) {
+ border-right-width: 0px;
+ }
+
+ &:not(only-child):first-child:not(:checked):not(:hover),
+ &:not(:checked):not(:hover) + button:not(:checked):not(:hover) {
+ border-left-color: transparent;
+ }
+
+ &:not(only-child):last-child:not(:checked):not(:hover) {
+ border-right-color: transparent;
+ }
+
+ &:not(:checked):hover:not(:backdrop) {
+ background-image: image(lighter($bg_color));
+ }
+
+ &:not(only-child):first-child:not(:checked):hover,
+ &:not(:checked):hover + button:not(:checked):not(:hover),
+ &:not(:checked):not(:hover) + button:not(:checked):hover {
+ border-left-color: shade($borders_color, 1.15);
+ }
+
+ &:not(only-child):last-child:not(:checked):hover {
+ border-right-color: shade($borders_color, 1.15);
+ }
+
+ &:not(:checked):hover:backdrop {
+ background-image: image($bg_color);
+ }
+
+ // View switcher in a header bar
+ headerbar &:not(:checked) {
+ &:hover:not(:backdrop) {
+ // Reimplementation of $button_fill from Adwaita. The colors are made
+ // only 70% visible to avoid the highlight to be too strong.
+ $c: transparentize($bg_color, 0.3);
+ $button_fill: if($variant == 'light', linear-gradient(to top, shade($c, 0.96) 2px, $c),
+ linear-gradient(to top, shade($c, 0.99) 2px, $c));
+ background-image: $button_fill;
+ }
+
+ &:not(only-child):first-child:hover,
+ &:hover + button:not(:checked):not(:hover),
+ &:not(:hover) + button:not(:checked):hover {
+ border-left-color: $borders_color;
+ }
+
+ &:not(only-child):last-child:hover {
+ border-right-color: $borders_color;
+ }
+
+ &:hover:backdrop {
+ background-image: image($bg_color);
+ }
+ }
+
+ // View switcher button
+ > stack > box {
+ &.narrow {
+ font-size: 0.75rem;
+ padding-top: 7px;
+ padding-bottom: 5px;
+
+ image,
+ label {
+ padding-left: 8px;
+ padding-right: 8px;
+ }
+ }
+
+ &.wide {
+ padding: 8px 12px;
+
+ label {
+ &:dir(ltr) {
+ padding-right: 7px;
+ }
+
+ &:dir(rtl) {
+ padding-left: 7px;
+ }
+ }
+ }
+
+ label.active {
+ font-weight: bold;
+ }
+ }
+
+ &.needs-attention {
+ &:active > stack > box label,
+ &:checked > stack > box label {
+ animation: none;
+ background-image: none;
+ }
+
+ > stack > box label {
+ animation: needs_attention 150ms ease-in;
+ background-image: radial-gradient(#3584e4 50%, transparent),
+ radial-gradient(rgba(255, 255, 255, 0.769231) 50%, transparent);
+ background-size: 6px 6px, 6px 6px;
+ background-repeat: no-repeat;
+ background-position: right 0px, right 1px;
+
+ &:backdrop {
+ background-size: 6px 6px, 0 0;
+ }
+
+ &:dir(rtl) {
+ background-position: left 0px, left 1px;
+ }
+ }
+ }
+ }
+}
+
+/**********************
+ * AdwViewSwitcherBar *
+ **********************/
+
+viewswitcherbar actionbar > revealer > box {
+ padding: 0;
+}
+
+/************************
+ * AdwViewSwitcherTitle *
+ ************************/
+
+viewswitchertitle viewswitcher {
+ margin-left: 12px;
+ margin-right: 12px;
+}
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]