cf89a6d01e
Menu toggles are currently regular toggles with an additional arrow button. This allows for a simpler implementation, but has downsides with regards to keyboard navigation and hover feedback. To make it more obvious that the two parts of the menu toggle perform different actions, change the overall structure of the toggle to *contain* a regular toggle and the menu button. That way each element uses its own hover effect, and shows up in the keynav focus chain. https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/5964 Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2632>
139 lines
3.0 KiB
SCSS
139 lines
3.0 KiB
SCSS
.quick-settings {
|
|
padding: $base_padding*3;
|
|
border-radius: $modal_radius*2.25;
|
|
|
|
.icon-button, .button {
|
|
padding: $base_padding*1.75;
|
|
}
|
|
}
|
|
|
|
.quick-settings-grid {
|
|
spacing-rows: $base_padding*2;
|
|
spacing-columns: $base_padding*2;
|
|
}
|
|
|
|
.quick-toggle, .quick-menu-toggle {
|
|
border-radius: 99px;
|
|
min-width: 12em;
|
|
max-width: 12em;
|
|
min-height: 48px;
|
|
border:none;
|
|
}
|
|
|
|
.quick-toggle {
|
|
&:checked { @include button(default, $c:$selected_bg_color); }
|
|
|
|
& > StBoxLayout { spacing: $base_padding*1.5; }
|
|
|
|
/* Move padding into the box; this is to allow menu arrows
|
|
to extend to the border */
|
|
&.button { padding: 0; }
|
|
& > StBoxLayout { padding: 0 $base_padding*2; }
|
|
&:ltr > StBoxLayout { padding-left: $base_padding*2.5; }
|
|
&:rtl > StBoxLayout { padding-right: $base_padding*2.5; }
|
|
|
|
.quick-toggle-title { font-weight: bold; }
|
|
|
|
& StBoxLayout > .quick-toggle-subtitle {
|
|
font-weight: normal;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.quick-toggle-icon { icon-size: $base_icon_size; }
|
|
}
|
|
|
|
.quick-menu-toggle {
|
|
& .quick-toggle {
|
|
min-width: auto;
|
|
max-width: auto;
|
|
|
|
&:ltr { border-radius: 99px 0 0 99px; }
|
|
&:rtl { border-radius: 0 99px 99px 0; }
|
|
|
|
&:ltr:last-child { border-radius: 99px; }
|
|
&:rtl:last-child { border-radius: 99px; }
|
|
}
|
|
|
|
& .quick-toggle-arrow {
|
|
padding: $base_padding $base_padding*1.75;
|
|
border: none;
|
|
|
|
&:checked { @include button(default, $c:$selected_bg_color); }
|
|
|
|
&:ltr { border-radius: 0 99px 99px 0; }
|
|
&:rtl { border-radius: 99px 0 0 99px; }
|
|
}
|
|
}
|
|
|
|
.quick-slider {
|
|
& > StBoxLayout { spacing: $base_padding; }
|
|
|
|
.slider-bin {
|
|
&:focus {@include button(focus);}
|
|
min-height: 16px; // slider size
|
|
padding: $base_padding;
|
|
border-radius: 99px;
|
|
}
|
|
.quick-toggle-icon {
|
|
icon-size: $base_icon_size;
|
|
|
|
&:ltr { margin-left: $base_padding; }
|
|
&:rtl { margin-right: $base_padding; }
|
|
}
|
|
}
|
|
|
|
.quick-toggle-menu {
|
|
@include card;
|
|
border-radius: $base_border_radius*3;
|
|
padding: $base_padding*2;
|
|
margin: $base_padding*2 $base_padding*3 0;
|
|
|
|
.popup-menu-item > StIcon { -st-icon-style: symbolic; }
|
|
|
|
& .header {
|
|
spacing-rows: 0.5 * $base_padding;
|
|
spacing-columns: $base_padding*2;
|
|
padding-bottom: 2 * $base_padding;
|
|
|
|
& .icon {
|
|
icon-size: $base_icon_size*1.5; // a non-standard symbolic size but ok
|
|
border-radius: 999px;
|
|
padding: 1.5 * $base_padding;
|
|
background-color: transparentize($fg_color, 0.8);
|
|
|
|
&.active { background-color: $selected_bg_color;}
|
|
}
|
|
|
|
& .title {
|
|
@extend %title_3;
|
|
}
|
|
|
|
& .subtitle {
|
|
@extend %caption_heading;
|
|
}
|
|
}
|
|
}
|
|
|
|
.quick-toggle-menu-container {
|
|
}
|
|
|
|
.quick-settings-system-item {
|
|
& > StBoxLayout { spacing: 2 * $base_padding; }
|
|
|
|
& .power-item {
|
|
min-height: 0;
|
|
min-width: 0;
|
|
|
|
&:insensitive {
|
|
@include button(normal);
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
}
|
|
|
|
.nm-network-item {
|
|
.wireless-secure-icon { icon-size: 0.5 * $base_icon_size; }
|
|
}
|
|
|
|
.device-subtitle { color: transparentize($fg_color, 0.5); }
|