mirror of
https://github.com/edu4rdshl/gnome-shell.git
synced 2026-07-17 23:24:51 +00:00
style: Refactor the button and entry drawing css
- use a single button mixin for all buttons with a saner 'style' parameter - rework the entry mixins to be similar to the buttons' - clear out all unused or deprecated mixins - create some drawing functions for focus ring and high contrast inset - replace instances of old mixins with the new Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3109>
This commit is contained in:
Sam Hewitt
Marge Bot
parent
76abf806e4
commit
a917644fad
21 changed files with 436 additions and 469 deletions
|
|
@ -25,7 +25,7 @@ $cakeisalie: "This stylesheet is generated, DO NOT EDIT";
|
|||
|
||||
/* Global Values */
|
||||
|
||||
// Base values of elemetns of the shell in their smallest "unit".
|
||||
// Base values of elements of the shell in their smallest "unit".
|
||||
// These are used in calculations elsewhere to have elements in proportion
|
||||
$base_font_size: 11pt; // font size
|
||||
$base_padding: 6px; // internal padding of elements
|
||||
|
|
@ -58,6 +58,8 @@ $scalable_icon_size: to_em(16px);
|
|||
$medium_scalable_icon_size: $scalable_icon_size * 1.5;
|
||||
$large_scalable_icon_size: $scalable_icon_size * 2;
|
||||
|
||||
// animation definition
|
||||
$ease_out_quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
|
||||
// Stage
|
||||
stage {
|
||||
|
|
@ -72,26 +74,17 @@ stage {
|
|||
border-radius: $base_border_radius * 2;
|
||||
padding: $base_padding;
|
||||
spacing: $base_padding;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
border-color:transparent;
|
||||
transition-duration: 200ms;
|
||||
text-align: center;
|
||||
color: inherit;
|
||||
|
||||
@if $contrast == 'high' {
|
||||
border-color: $hc_inset_color;
|
||||
}
|
||||
transition-duration: 100ms;
|
||||
}
|
||||
|
||||
// common button styling
|
||||
%button_common {
|
||||
border-radius: $base_border_radius;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
font-weight: bold;
|
||||
padding: $base_padding * .5 $base_padding * 4;
|
||||
transition-duration: 100ms;
|
||||
font-weight: bold;
|
||||
transition: border-width 300ms $ease_out_quad,
|
||||
box-shadow 300ms $ease_out_quad;
|
||||
}
|
||||
|
||||
%button {
|
||||
|
|
@ -103,22 +96,36 @@ stage {
|
|||
&:selected,
|
||||
&:active { @include button(active);}
|
||||
&:checked { @include button(checked);}
|
||||
&.default { @include button(default);}
|
||||
}
|
||||
|
||||
&.flat {
|
||||
@include button(normal, $flat:true);
|
||||
&:focus { @include button(focus, $flat:true);}
|
||||
&:hover { @include button(hover, $flat:true);}
|
||||
&:insensitive { @include button(insensitive, $flat:true);}
|
||||
&:selected,
|
||||
&:active { @include button(active, $flat:true);}
|
||||
&:checked { @include button(checked, $flat:true);}
|
||||
&.default { @include button(default, $flat:false);}
|
||||
}
|
||||
%flat_button {
|
||||
@include button(normal, $style: flat);
|
||||
&:focus { @include button(focus, $style: flat);}
|
||||
&:hover { @include button(hover, $style: flat);}
|
||||
&:insensitive { @include button(insensitive, $style: flat);}
|
||||
&:selected,
|
||||
&:active { @include button(active, $style: flat);}
|
||||
&:checked { @include button(checked, $style: flat);}
|
||||
}
|
||||
|
||||
%default_button {
|
||||
@include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);
|
||||
&:focus { @include button(focus, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);}
|
||||
&:hover { @include button(hover, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);}
|
||||
&:insensitive { @include button(insensitive, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);}
|
||||
&:active { @include button(active, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);}
|
||||
}
|
||||
|
||||
// items in popover menus
|
||||
%menuitem {
|
||||
font-weight: normal;
|
||||
spacing: $base_padding;
|
||||
transition-duration: 100ms;
|
||||
padding: $base_padding * 1.5 $base_padding * 2;
|
||||
}
|
||||
|
||||
// common style for card elements
|
||||
%card {
|
||||
%card_common {
|
||||
border-radius: $base_border_radius * 1.5;
|
||||
padding: $scaled_padding * 2;
|
||||
margin: $base_margin;
|
||||
|
|
@ -126,6 +133,29 @@ stage {
|
|||
box-shadow: 0 1px 2px 0 $card_shadow_color;
|
||||
// bit of a hack here with border since we can't have double box-shadow
|
||||
border: 1px solid $card_shadow_border_color;
|
||||
|
||||
@if $contrast == 'high' {
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
%card {
|
||||
@extend %card_common;
|
||||
@include button(normal, $style: card);
|
||||
&:hover { @include button(hover, $style: card);}
|
||||
&:active { @include button(active, $style: card);}
|
||||
&:focus { @include button(focus, $style: card);}
|
||||
&:insensitive { @include button(insensitive, $style: card);}
|
||||
}
|
||||
|
||||
%card_flat {
|
||||
@extend %card_common;
|
||||
@include button(undecorated, $style: flat);
|
||||
&:hover { @include button(hover, $style: flat);}
|
||||
&:active { @include button(active, $style: flat);}
|
||||
&:focus { @include button(focus, $style: card);}
|
||||
&:insensitive { @include button(insensitive, $style: card);}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -139,10 +169,10 @@ stage {
|
|||
|
||||
%entry {
|
||||
@extend %entry_common;
|
||||
@include entry(normal, $c:$fg_color);
|
||||
&:hover { @include entry(hover, $c:$fg_color);}
|
||||
&:focus { @include entry(focus, $c:$fg_color);}
|
||||
&:insensitive { @include entry(insensitive, $c:$fg_color);}
|
||||
@include entry(normal);
|
||||
&:hover { @include entry(hover);}
|
||||
&:focus { @include entry(focus);}
|
||||
&:insensitive { @include entry(insensitive);}
|
||||
|
||||
StLabel.hint-text {
|
||||
color: transparentize($fg_color, 0.3);
|
||||
|
|
@ -155,36 +185,36 @@ stage {
|
|||
padding: $base_padding * 2;
|
||||
font-weight: bold !important;
|
||||
|
||||
&:ltr {margin-right: 1px;}
|
||||
&:rtl {margin-left: 1px;}
|
||||
// needs a 1px adjustment to fit exactly into the outer radius
|
||||
$bubble_button_radius: $modal_radius - 1px;
|
||||
|
||||
@include button(normal, $c:$bubble_buttons_color);
|
||||
&:insensitive { @include button(insensitive, $c:$bubble_buttons_color);}
|
||||
&:focus { @include button(focus, $c:$bubble_buttons_color);}
|
||||
&:hover { @include button(hover, $c:$bubble_buttons_color);}
|
||||
&:active { @include button(active, $c:$bubble_buttons_color);}
|
||||
&:checked { @include button(checked, $c:$bubble_buttons_color);}
|
||||
@include button(normal, $style: bubble);
|
||||
&:focus { @include button(focus, $style: bubble);}
|
||||
&:hover { @include button(hover, $style: bubble);}
|
||||
&:active { @include button(active, $style: bubble);}
|
||||
&:checked { @include button(checked, $style: bubble);}
|
||||
&:insensitive { @include button(insensitive, $style: bubble);}
|
||||
|
||||
&:first-child:ltr {
|
||||
border-radius: 0 0 0 $modal_radius;
|
||||
border-radius: 0 0 0 $bubble_button_radius;
|
||||
}
|
||||
|
||||
&:last-child:ltr {
|
||||
border-radius: 0 0 $modal_radius;
|
||||
border-radius: 0 0 $bubble_button_radius;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
&:first-child:rtl {
|
||||
border-radius: 0 0 $modal_radius;
|
||||
border-radius: 0 0 $bubble_button_radius;
|
||||
}
|
||||
|
||||
&:last-child:rtl {
|
||||
border-radius: 0 0 0 $modal_radius;
|
||||
border-radius: 0 0 0 $bubble_button_radius;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
&:first-child:last-child {
|
||||
border-radius: 0 0 $modal_radius $modal_radius;
|
||||
border-radius: 0 0 $bubble_button_radius $bubble_button_radius;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
|
@ -263,20 +293,18 @@ stage {
|
|||
border: 1px solid $osd_outer_borders_color;
|
||||
border-radius: $forced_circular_radius;
|
||||
padding: $base_padding * 2;
|
||||
border: 2px solid transparent;
|
||||
|
||||
@if $contrast == 'high' {
|
||||
border-color: $hc_inset_color;
|
||||
@include draw_hc_inset($width: 2px,$border: true);
|
||||
}
|
||||
}
|
||||
|
||||
// entries
|
||||
%osd_entry {
|
||||
@extend %entry_common;
|
||||
@include entry(normal, $c:$osd_fg_color,);
|
||||
&:hover { @include entry(hover, $c:$osd_fg_color);}
|
||||
&:focus { @include entry(focus, $c:$osd_fg_color);}
|
||||
&:insensitive { @include entry(insensitive, $c:$osd_fg_color);}
|
||||
@include entry(normal, $c:$osd_fg_color, $bc:$osd_bg_color, $always_dark: true);
|
||||
&:hover { @include entry(hover, $c:$osd_fg_color, $bc:$osd_bg_color, $always_dark: true);}
|
||||
&:focus { @include entry(focus, $c:$osd_fg_color, $bc:$osd_bg_color, $always_dark: true);}
|
||||
&:insensitive { @include entry(insensitive, $c:$osd_fg_color, $bc:$osd_bg_color, $always_dark: true);}
|
||||
|
||||
StLabel.hint-text {color: transparentize($osd_fg_color, 0.3); }
|
||||
}
|
||||
|
|
@ -284,18 +312,22 @@ stage {
|
|||
// buttons on OSD elements
|
||||
%osd_button {
|
||||
@extend %button_common;
|
||||
@include button(normal, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);
|
||||
&:insensitive { @include button(insensitive, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);}
|
||||
&:focus { @include button(focus, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);}
|
||||
&:hover { @include button(hover, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);}
|
||||
&:active { @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);}
|
||||
&:outlined,&:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);}
|
||||
@include button(normal, $tc:$osd_fg_color, $c:$osd_bg_color);
|
||||
&:focus { @include button(focus, $tc:$osd_fg_color, $c:$osd_bg_color);}
|
||||
&:hover { @include button(hover, $tc:$osd_fg_color, $c:$osd_bg_color);}
|
||||
&:active { @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color);}
|
||||
&:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color);}
|
||||
&:insensitive { @include button(insensitive, $tc:$osd_fg_color, $c:$osd_bg_color);}
|
||||
}
|
||||
|
||||
%osd_button_flat {
|
||||
@extend %osd_button;
|
||||
@include button(undecorated, $osd:true);
|
||||
&:insensitive { @include button(undecorated, $tc:$osd_fg_color, $c:$osd_bg_color, $osd:true);}
|
||||
@extend %button_common;
|
||||
@include button(normal, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat);
|
||||
&:focus { @include button(focus, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat);}
|
||||
&:hover { @include button(hover, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat);}
|
||||
&:active { @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat);}
|
||||
&:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat);}
|
||||
&:insensitive { @include button(insensitive, $tc:$osd_fg_color, $c:$osd_bg_color, $style: flat);}
|
||||
}
|
||||
|
||||
/* System Elements */
|
||||
|
|
@ -303,15 +335,14 @@ stage {
|
|||
// entries
|
||||
%system_entry {
|
||||
@extend %entry_common;
|
||||
@include entry(normal, $c:$system_fg_color,);
|
||||
&:hover { @include entry(hover, $c:$system_fg_color);}
|
||||
&:focus { @include entry(focus, $c:$system_fg_color, $fc:$selected_bg_color);}
|
||||
&:insensitive { @include entry(insensitive, $c:$system_fg_color);}
|
||||
@include entry(normal, $c:$system_fg_color, $bc:$system_bg_color, $always_dark: true);
|
||||
&:hover { @include entry(hover, $c:$system_fg_color, $bc:$system_bg_color, $always_dark: true);}
|
||||
&:focus { @include entry(focus, $c:$system_fg_color, $bc:$system_bg_color, $always_dark: true);}
|
||||
&:insensitive { @include entry(insensitive, $c:$system_fg_color, $bc:$system_bg_color, $always_dark: true);}
|
||||
|
||||
StLabel.hint-text { color: transparentize($system_fg_color, 0.3);}
|
||||
}
|
||||
|
||||
|
||||
// buttons
|
||||
%system_button {
|
||||
@include button(normal, $tc:$system_fg_color, $c:$system_bg_color);
|
||||
|
|
@ -319,5 +350,5 @@ stage {
|
|||
&:focus { @include button(focus, $tc:$system_fg_color, $c:$system_bg_color);}
|
||||
&:hover { @include button(hover, $tc:$system_fg_color, $c:$system_bg_color);}
|
||||
&:active { @include button(active, $tc:$system_fg_color, $c:$system_bg_color);}
|
||||
&:outlined,&:checked { @include button(checked, $tc:$system_fg_color, $c:$system_bg_color);}
|
||||
&:checked { @include button(checked, $tc:$system_fg_color, $c:$system_bg_color);}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue