[libadwaita/wip/exalm/menu-checks: 4/4] stylesheet: Simplify checks and radios
- From: Alexander Mikhaylenko <alexm src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [libadwaita/wip/exalm/menu-checks: 4/4] stylesheet: Simplify checks and radios
- Date: Thu, 20 May 2021 10:34:46 +0000 (UTC)
commit 25281134728f229b8d8716306cb8c2ed0a3bf430
Author: Alexander Mikhaylenko <alexm gnome org>
Date: Wed May 19 18:19:13 2021 +0500
stylesheet: Simplify checks and radios
Use flatter checks, without borders. Use distinct enough background to make
them visible in dark.
Unify the appearance of regular and selection mode checks, at this point
selection mode is not much more than a larger variant.
Keep a border for high contrast.
Don't bother with the check() mixin, just inline the styles as they are
only used once and it's simpler that way. The number of added/removed lines
speaks for itself.
src/stylesheet/_colors.scss | 3 --
src/stylesheet/_drawing.scss | 49 -------------------
src/stylesheet/widgets/_checks.scss | 95 +++++++++++++++----------------------
src/stylesheet/widgets/_menus.scss | 20 ++++----
4 files changed, 48 insertions(+), 119 deletions(-)
---
diff --git a/src/stylesheet/_colors.scss b/src/stylesheet/_colors.scss
index 93af95e7..d06d6971 100644
--- a/src/stylesheet/_colors.scss
+++ b/src/stylesheet/_colors.scss
@@ -57,9 +57,6 @@ $suggested_bg_color: $selected_bg_color;
$suggested_border_color: $selected_borders_color;
$progress_bg_color: $selected_bg_color;
$progress_border_color: $selected_borders_color;
-$checkradio_bg_color: $selected_bg_color;
-$checkradio_fg_color: $selected_fg_color;
-$checkradio_borders_color: if($variant ==
'light',darken($selected_bg_color,10%),darken($selected_bg_color,20%));
$switch_bg_color: $selected_bg_color;
$switch_borders_color: if($variant == 'light',darken($switch_bg_color,15%),darken($switch_bg_color,30%));
$focus_border_color: if($variant == 'light', transparentize($selected_bg_color, 0.5),
transparentize($selected_bg_color, 0.3));
diff --git a/src/stylesheet/_drawing.scss b/src/stylesheet/_drawing.scss
index d6d3fae9..d34a0de3 100644
--- a/src/stylesheet/_drawing.scss
+++ b/src/stylesheet/_drawing.scss
@@ -324,52 +324,3 @@ $_default_button_c: lighten($bg_color,2%);
border: none; //
box-shadow: none; //
}
-
-/***************************
- * Check and Radio buttons *
- ***************************/
-
- @mixin check($t, $c:$checkradio_bg_color, $tc:$checkradio_fg_color, $checked: false) {
- // Check/Radio drawing function
- //
- // $t: check/radio type,
- // $c: base button color for colored* types
- // $tc: optional text color for colored* types
- // $checked: bool to chose between checked/unchecked
- //
- // possible $t values:
- // normal, hover, active, insensitive, menu
-
- $_border_color: if($c==$checkradio_bg_color, $checkradio_borders_color, $alt_borders_color);
-
- @if $t==normal {
- background-clip: if($checked, border-box, padding-box);
- background-image: linear-gradient(to bottom, lighten($c, 5%) 20%, $c 90%);
- border-color: $_border_color;
- box-shadow: 0 1px transparentize(black, 0.95);
- color: $tc;
- }
-
- @if $t==hover {
- background-image: if($c == white, image(darken($c, 5%)), linear-gradient(to bottom, lighten($c, 9%) 10%,
lighten($c, 4%) 90%));
- }
-
- @if $t==active {
- box-shadow: inset 0 1px if($variant == 'light', rgba(0, 0, 0, 0.2), black);
- background-image: if($c == white, image(darken($c, 15%)), image(darken($c, 5%)));
- }
-
- @if $t==insensitive {
- box-shadow: none;
- color: transparentize($tc, 0.3);
- }
-
- @if $t==menu {
- transform: scale(0.8);
- border-width: 1.2px;
- border-color: transparent;
- box-shadow: none;
- background-image: image(transparent);
- color: $tc;
- }
-}
diff --git a/src/stylesheet/widgets/_checks.scss b/src/stylesheet/widgets/_checks.scss
index 1ec9e8ca..c27d812d 100644
--- a/src/stylesheet/widgets/_checks.scss
+++ b/src/stylesheet/widgets/_checks.scss
@@ -15,52 +15,47 @@ 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);
- }
+ padding: 1px;
+ -gtk-icon-size: 14px;
+ background-color: transparentize($text_color, .85);
+
+ @if $contrast == "high" {
+ box-shadow: inset 0 0 0 1px $borders_color;
+ }
+
+ &:hover {
+ background-color: transparentize($text_color, .75);
+
+ &:active {
+ background-color: transparentize(black, .65);
}
}
- & {
- // 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);
- }
- }
+ &:checked,
+ &:indeterminate {
+ background-color: $selected_bg_color;
+ color: $selected_fg_color;
+
+ @if $contrast == "high" {
+ box-shadow: none;
+ }
+
+ &:hover {
+ background-color: mix($selected_bg_color, $text_color, 80%);
+
+ &:active {
+ background-color: mix($selected_bg_color, black, 60%);
}
}
}
- .osd & {
- @include button(osd);
-
- &:hover { @include button(osd); }
- &:active { @include button(osd-active); }
- &:disabled { @include button(osd-insensitive); }
+ &:disabled {
+ filter: opacity(.5);
}
}
-%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"))); }
@@ -69,10 +64,8 @@ check {
-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"))); }
@@ -82,26 +75,12 @@ radio {
}
//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),
- (':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), {
-
- .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};
- }
+.view.content-view.check:not(list),
+.content-view .tile check:not(list) {
+ margin: 4px;
+ min-width: 32px;
+ min-height: 32px;
+ border-radius: 5px;
+
+ &:checked { -gtk-icon-source: -gtk-icontheme('object-select-symbolic'); }
}
diff --git a/src/stylesheet/widgets/_menus.scss b/src/stylesheet/widgets/_menus.scss
index 0fd67a0b..4eef1d32 100644
--- a/src/stylesheet/widgets/_menus.scss
+++ b/src/stylesheet/widgets/_menus.scss
@@ -51,16 +51,18 @@ popover.menu {
check,
radio {
- &, &:hover, &:active, &:checked, &:disabled {
- @include check('menu', 'transparent', $text_color);
+ &, &:hover, &:hover:active, &:checked, &:disabled {
+ background: none;
+ color: $text_color;
+
+ transform: scale(0.8);
}
}
//only menu radios have a border
radio {
- &, &:hover, &:active, &:checked, &:disabled {
- border-color: transparentize($text_color, if($contrast == "high", 0, 0.7));
- }
+ padding: 0;
+ border: 1.2px solid transparentize($text_color, if($contrast == "high", 0, 0.7));
}
check,
@@ -75,10 +77,6 @@ popover.menu {
margin-left: 6px;
margin-right: -2px;
}
-
- &:disabled {
- filter: opacity(0.5);
- }
}
modelbutton {
@@ -109,6 +107,10 @@ popover.menu {
&:hover { background: none; }
+ &:disabled {
+ filter: opacity(0.5);
+ }
+
&.left { -gtk-icon-source: -gtk-icontheme("go-previous-symbolic"); }
&.right { -gtk-icon-source: -gtk-icontheme("go-next-symbolic"); }
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]