isa/gnome-shell
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: CSS follow ups for quicksettings

Browse Source 
- some padding adjustments
- add proper focus style for :checked buttons
- popover radii adjustments

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2401>
This commit is contained in:
Sam Hewitt 2022-08-04 12:04:12 -02:30 committed by Jakub Steiner
parent a52da04803
commit 5de3491df3
3 changed files with 13 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
data/theme/gnome-shell-sass/_drawing.scss
View File

@ -200,7 +200,7 @@
background-color: $selected_bg_color;
color: $selected_fg_color;
&:focus {
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4);
box-shadow: inset 0 0 0 2px lighten($selected_bg_color, 10%);
}
&:hover, &:focus {
background-color: lighten($selected_bg_color, 5%);

4
data/theme/gnome-shell-sass/widgets/_popovers.scss
View File

@ -19,7 +19,7 @@
// popover content
.popup-menu-content {
padding: $base_padding;
border-radius: $modal_radius - 2px;
border-radius: $modal_radius*1.25;
border: 1px solid $borders_edge;
box-shadow: 0 2px 4px 0 $shadow_color;
background-color: $bg_color;
@ -28,7 +28,7 @@
// menu items
.popup-menu-item {
padding: $base_padding*1.5 $base_padding*2;
border-radius: $base_border_radius;
border-radius: $base_border_radius*1.5;
spacing: $base_padding;
transition-duration: 100ms;
background-color: transparent;

16
data/theme/gnome-shell-sass/widgets/_quick-settings.scss
View File

@ -11,7 +11,7 @@
border-radius: 99px;
min-width: 11.5em;
max-width: 11.5em;
min-height: 48px;
min-height: 44px;
&:checked { @include button(default); }
@ -40,7 +40,9 @@
}
.quick-slider {
padding: $base_padding;
padding: 0 $base_padding;
& > StBoxLayout { spacing: $base_padding; }
.slider-bin {
&:focus {@include button(focus);}
@ -53,16 +55,18 @@
}
.quick-toggle-menu {
@include card();
padding: 1.5 * $base_padding;
background-color: $card_bg_color;
border-radius: $base_border_radius*2.75;
padding: $base_padding*2.75;
margin: 0 $base_padding*2.75;
& .header {
spacing-rows: 0.5 * $base_padding;
spacing-columns: $base_padding;
spacing-columns: $base_padding*2;
padding-bottom: 2 * $base_padding;
& .icon {
icon-size: $large_icon_size;
icon-size: $base_icon_size*1.5; // a non-standard symbolic size but ok
border-radius: 999px;
padding: 1.5 * $base_padding;
background-color: lighten($bg_color, 10%);