style: Use unlinked rounded buttons for notifications
Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3427>
This commit is contained in:
parent
ff4b9fdb08
commit
a32f735ec0
@ -39,6 +39,9 @@ $forced_circular_radius: 999px;
|
||||
// radii of things that display over other things, e.g. popovers
|
||||
$modal_radius: $base_border_radius * 2;
|
||||
|
||||
// radii of dialogs
|
||||
$alert_radius: 18px;
|
||||
|
||||
// Chroma key to flag when a background-color is always occluded, not visible.
|
||||
// This allows any box-shadow behind it to be rendered more efficiently by
|
||||
// omitting the middle rectangle.
|
||||
@ -204,49 +207,18 @@ stage {
|
||||
&:insensitive { @include button(insensitive, $style: notification);}
|
||||
}
|
||||
|
||||
|
||||
// buttons in dialogs
|
||||
// use a linked style
|
||||
%dialog_button {
|
||||
padding: $base_padding * 2;
|
||||
font-weight: bold;
|
||||
padding: $base_padding * 2;
|
||||
border-radius: $base_border_radius * 1.5;
|
||||
|
||||
&:ltr {margin-right: 1px;}
|
||||
&:rtl {margin-left: 1px;}
|
||||
|
||||
@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);}
|
||||
|
||||
// needs a 1px adjustment to fit exactly into the outer radius
|
||||
$dialog_button_radius: $modal_radius - 1px;
|
||||
|
||||
&:first-child:ltr {
|
||||
border-radius: 0 0 0 $dialog_button_radius;
|
||||
}
|
||||
|
||||
&:last-child:ltr {
|
||||
border-radius: 0 0 $dialog_button_radius;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
&:first-child:rtl {
|
||||
border-radius: 0 0 $dialog_button_radius;
|
||||
}
|
||||
|
||||
&:last-child:rtl {
|
||||
border-radius: 0 0 0 $dialog_button_radius;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
&:first-child:last-child {
|
||||
border-radius: 0 0 $dialog_button_radius $dialog_button_radius;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
@include button(normal, $style: dialog);
|
||||
&:focus { @include button(focus, $style: dialog);}
|
||||
&:hover { @include button(hover, $style: dialog);}
|
||||
&:active { @include button(active, $style: dialog);}
|
||||
&:checked { @include button(checked, $style: dialog);}
|
||||
&:insensitive { @include button(insensitive, $style: dialog);}
|
||||
}
|
||||
|
||||
// tooltip
|
||||
|
@ -160,7 +160,7 @@
|
||||
// - normal, focus, hover, active, checked, insensitive, default, undecorated
|
||||
// $c: button bg color, derived from bg_color
|
||||
// $tc: button text color, derived from fg_color
|
||||
// $style: button style, possible values: card, bubble, flat, default
|
||||
// $style: button style, possible values: card, notification, dialog, flat, default
|
||||
// $always_dark: override the light theme check to use dark colors, true or false
|
||||
//
|
||||
|
||||
@ -211,7 +211,7 @@
|
||||
|
||||
// background color override for buttons that use transparency
|
||||
// styles: dialogs bubbles, lockscreen
|
||||
@if $style == 'bubble' or $style == 'lockscreen' {
|
||||
@if $style == 'dialog' or $style == 'lockscreen' {
|
||||
$button_bg_color: transparentize($tc, .9);
|
||||
$hover_button_bg_color: transparentize($tc, .87);
|
||||
$active_button_bg_color: transparentize($tc, .84);
|
||||
|
@ -6,12 +6,14 @@
|
||||
|
||||
.modal-dialog {
|
||||
background-color: $bg_color;
|
||||
border-radius: $modal_radius;
|
||||
border-radius: $alert_radius;
|
||||
box-shadow: inset 0 0 0 1px $outer_borders_color;
|
||||
padding: $base_padding * 4;
|
||||
|
||||
.modal-dialog-content-box {
|
||||
margin: $base_margin * 8 $base_margin * 10;
|
||||
spacing: $base_margin * 8;
|
||||
margin-top: $base_margin * 2;
|
||||
margin-bottom: $base_margin * 4;
|
||||
max-width: 28em;
|
||||
}
|
||||
|
||||
@ -22,7 +24,7 @@
|
||||
|
||||
/* End Session Dialog */
|
||||
.end-session-dialog {
|
||||
width: 30em;
|
||||
width: 24em;
|
||||
|
||||
.end-session-dialog-battery-warning,
|
||||
.dialog-list-title {
|
||||
|
@ -56,7 +56,10 @@ class Dialog extends St.Widget {
|
||||
this._dialog.add_child(this.contentLayout);
|
||||
|
||||
this.buttonLayout = new St.Widget({
|
||||
layout_manager: new Clutter.BoxLayout({homogeneous: true}),
|
||||
layout_manager: new Clutter.BoxLayout({
|
||||
spacing: 12,
|
||||
homogeneous: true,
|
||||
}),
|
||||
});
|
||||
this._dialog.add_child(this.buttonLayout);
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user