diff options
author | Sam Hewitt <sam@snwh.org> | 2022-10-13 14:21:17 -0230 |
---|---|---|
committer | Florian Müllner <fmuellner@gnome.org> | 2022-10-22 18:08:48 +0200 |
commit | 4650eb5d9201318b6aa54aace7d374eae520a8a2 (patch) | |
tree | 6477db39d6968cc4e4d8f0cfdf6f755b3b642c1d | |
parent | 18acfc0f6785c4bde925ae8e2f83f8df10565eea (diff) | |
download | gnome-shell-sass-4650eb5d9201318b6aa54aace7d374eae520a8a2.tar.gz |
css/quick-settings: Update icon-button styles
- add an entire flat style to button drawing function
- clean up the icon button css in quick settings
- adjust padding in QS sliders
- fixes #5918
Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2510>
-rw-r--r-- | _common.scss | 29 | ||||
-rw-r--r-- | _drawing.scss | 5 | ||||
-rw-r--r-- | widgets/_buttons.scss | 13 | ||||
-rw-r--r-- | widgets/_quick-settings.scss | 12 |
4 files changed, 31 insertions, 28 deletions
diff --git a/_common.scss b/_common.scss index f2fe78a..9ca89d1 100644 --- a/_common.scss +++ b/_common.scss @@ -105,24 +105,15 @@ stage { &:insensitive { @include button(insensitive);} &:active { @include button(active);} &:checked { @include button(checked);} -} - -// normal icon-only button -%icon_button { - border-radius: 99px; - border-style: solid; - border-width: 1px; - font-weight: bold; - padding: $base_padding*2; - - @include button(normal); - &:focus { @include button(focus);} - &:hover { @include button(hover);} - &:insensitive { @include button(insensitive);} - &:active { @include button(active);} - &:checked { @include button(checked);} - & > StIcon { icon-size: $base_icon_size; } + &.flat { + @include button(normal, $flat:true); + &:focus { @include button(focus, $flat:true);} + &:hover { @include button(hover, $flat:true);} + &:insensitive { @include button(insensitive, $flat:true);} + &:active { @include button(active, $flat:true);} + &:checked { @include button(checked, $flat:true);} + } } // buttons in dialogs/notifications @@ -143,9 +134,9 @@ $bubble_button_radius:$base_border_radius*1.25; &:hover { @include button(hover, $c:$bubble_buttons_color);} &:active { @include button(active, $c:$bubble_buttons_color);} &:checked { @include button(checked, $c:$bubble_buttons_color);} - + &:first-child:ltr { - border-radius: 0 0 0 $bubble_button_radius; + border-radius: 0 0 0 $bubble_button_radius; } &:last-child:ltr { diff --git a/_drawing.scss b/_drawing.scss index 0e51f93..7c8959e 100644 --- a/_drawing.scss +++ b/_drawing.scss @@ -143,7 +143,7 @@ // // since buttons are all flat an borderless now the mixin is simpler -@mixin button($t, $tc:$fg_color, $c:$bg_color) { +@mixin button($t, $tc:$fg_color, $c:$bg_color, $flat: false) { $button_bg_color: mix($tc, $c, $button_mix_factor); transition-duration: 100ms; @@ -152,6 +152,9 @@ @if $t==normal { color: $tc; background-color: $button_bg_color; + @if $flat { + background-color: transparent; + } @if $is_highcontrast == "true" { box-shadow: inset 0 0 0 1px $button_inset_color; } diff --git a/widgets/_buttons.scss b/widgets/_buttons.scss index df99524..def96fe 100644 --- a/widgets/_buttons.scss +++ b/widgets/_buttons.scss @@ -6,5 +6,14 @@ } .icon-button { - @extend %icon_button; // that's it -} + @extend .button; // same style as buttons + + border-radius: 99px; + padding: $base_padding*2; + min-height: 16px; + + StIcon { + icon-size: $base_icon_size; + -st-icon-style: symbolic; + } +}
\ No newline at end of file diff --git a/widgets/_quick-settings.scss b/widgets/_quick-settings.scss index 4e84cdf..b429a2d 100644 --- a/widgets/_quick-settings.scss +++ b/widgets/_quick-settings.scss @@ -48,8 +48,6 @@ } .quick-slider { - padding: 0 $base_padding; - & > StBoxLayout { spacing: $base_padding; } .slider-bin { @@ -58,8 +56,12 @@ padding: $base_padding; border-radius: 99px; } - .quick-toggle-icon { icon-size: $base_icon_size; } - .icon-button { background-color: transparent; } + .quick-toggle-icon { + icon-size: $base_icon_size; + + &:ltr { margin-left: $base_padding; } + &:rtl { margin-right: $base_padding; } + } } .quick-toggle-menu { @@ -100,8 +102,6 @@ .quick-settings-system-item { & > StBoxLayout { spacing: 2 * $base_padding; } - .icon-button > StIcon { -st-icon-style: symbolic; } - & .power-item { min-height: 0; min-width: 0; |