mirror of
https://gitlab.gnome.org/GNOME/gtk.git
synced 2024-11-16 21:50:34 +00:00
Adwaita: .flat button styling
This commit is contained in:
parent
ec7200797e
commit
6e7e1ebf46
@ -200,14 +200,14 @@
|
||||
transition: all 200ms ease-out;
|
||||
padding: 4px 6px;
|
||||
@include button(normal);
|
||||
&:hover {
|
||||
&:hover, &.flat:hover {
|
||||
@include button(hover);
|
||||
-gtk-image-effect: highlight;
|
||||
}
|
||||
&:active {
|
||||
&:active, &.flat:active {
|
||||
@include button(active);
|
||||
}
|
||||
&:backdrop {
|
||||
&:backdrop, &.flat:backdrop {
|
||||
@include button(backdrop);
|
||||
&:active {
|
||||
@include button(backdrop-active);
|
||||
@ -219,16 +219,19 @@
|
||||
@include button(backdrop-insensitive-active);
|
||||
}
|
||||
}
|
||||
&:selected,
|
||||
&:selected:focus {
|
||||
&:selected, &.flat:selected,
|
||||
&:selected:focus, &.flat:focus {
|
||||
@extend %selected_items;
|
||||
}
|
||||
&:insensitive {
|
||||
@include button(insensitive);
|
||||
&:active {
|
||||
&:active, &.flat:active {
|
||||
@include button(insensitive-active);
|
||||
}
|
||||
}
|
||||
&.flat, &.flat:backdrop {
|
||||
@extend %undecorated_button;
|
||||
}
|
||||
//overlay / OSD style
|
||||
.osd & {
|
||||
padding: 6px;
|
||||
@ -321,7 +324,7 @@
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
box-shadow: inset 0 1px transparentize(white,1);
|
||||
}
|
||||
|
||||
/* menu buttons */
|
||||
|
@ -212,7 +212,7 @@
|
||||
text-shadow: 0 -1px rgba(0, 0, 0, 0.81176);
|
||||
icon-shadow: 0 -1px rgba(0, 0, 0, 0.81176);
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
|
||||
.button:hover {
|
||||
.button:hover, .button.flat:hover {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
color: #eeeeec;
|
||||
@ -222,7 +222,7 @@
|
||||
icon-shadow: 0 -1px rgba(0, 0, 0, 0.77976);
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px rgba(238, 238, 236, 0.1);
|
||||
-gtk-image-effect: highlight; }
|
||||
.button:active {
|
||||
.button:active, .button.flat:active {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
color: #eeeeec;
|
||||
@ -231,7 +231,7 @@
|
||||
text-shadow: 0 -1px rgba(0, 0, 0, 0.89176);
|
||||
icon-shadow: 0 -1px rgba(0, 0, 0, 0.89176);
|
||||
box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.3), 0 1px rgba(238, 238, 236, 0.1); }
|
||||
.button:backdrop {
|
||||
.button:backdrop, .button.flat:backdrop {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
color: #c9cbc9;
|
||||
@ -240,21 +240,21 @@
|
||||
text-shadow: none;
|
||||
icon-shadow: none;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
|
||||
.button:backdrop:active {
|
||||
.button:backdrop:active, .button.flat:backdrop:active {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
color: #c9cbc9;
|
||||
border-color: #1e2222;
|
||||
background-image: linear-gradient(to bottom, #2f3434);
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
|
||||
.button:backdrop:insensitive {
|
||||
.button:backdrop:insensitive, .button.flat:backdrop:insensitive {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
color: #454c4c;
|
||||
border-color: #1e2222;
|
||||
background-image: linear-gradient(to bottom, #393f3f);
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
|
||||
.button:backdrop:insensitive:active {
|
||||
.button:backdrop:insensitive:active, .button.flat:backdrop:insensitive:active {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
color: #454c4c;
|
||||
@ -270,7 +270,7 @@
|
||||
text-shadow: none;
|
||||
icon-shadow: none;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0.1); }
|
||||
.button:insensitive:active {
|
||||
.button:insensitive:active, .button:insensitive.flat:active {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
color: #939695;
|
||||
@ -437,11 +437,11 @@
|
||||
border-radius: 3px;
|
||||
border-style: solid; }
|
||||
|
||||
.button:link, .button:visited, .button:link:hover, .button:link:active, .button:visited:hover, .button:visited:active, .button:link:backdrop, .button:visited:backdrop, .notebook tab .button, GtkCalendar.button, GtkCalendar.button:hover, GtkCalendar.button:backdrop, GtkCalendar.button:backdrop:hover {
|
||||
.button.flat, .button.flat:backdrop, .button:link, .button:visited, .button:link:hover, .button:link:active, .button:visited:hover, .button:visited:active, .button:link:backdrop, .button:visited:backdrop, .notebook tab .button, GtkCalendar.button, GtkCalendar.button:hover, GtkCalendar.button:backdrop, GtkCalendar.button:backdrop:hover {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
box-shadow: none; }
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
|
||||
|
||||
/* menu buttons */
|
||||
.menuitem.button, .menuitem.button:insensitive, .menuitem.button:active:insensitive {
|
||||
@ -2147,11 +2147,11 @@ GtkLevelBar.vertical {
|
||||
.level-bar.fill-block.empty-fill-block:backdrop {
|
||||
border-color: rgba(201, 203, 201, 0.15); }
|
||||
|
||||
.view:selected, .view:selected:focus, .view:selected:hover, .entry:selected, .entry:selected:focus, .button:selected, .button:selected:focus {
|
||||
.view:selected, .view:selected:focus, .view:selected:hover, .entry:selected, .entry:selected:focus, .button:selected, .button.flat:selected, .button:selected:focus, .button.flat:focus {
|
||||
background-color: #215d9c;
|
||||
color: white;
|
||||
outline-color: rgba(255, 255, 255, 0.3); }
|
||||
.view:backdrop:selected, .entry:backdrop:selected, .button:backdrop:selected {
|
||||
.view:backdrop:selected, .entry:backdrop:selected, .button:backdrop:selected, .button.flat:backdrop:focus {
|
||||
color: #2c2c2c; }
|
||||
|
||||
/**********
|
||||
|
@ -212,7 +212,7 @@
|
||||
text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
|
||||
icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
|
||||
box-shadow: inset 0 1px white, 0 1px white; }
|
||||
.button:hover {
|
||||
.button:hover, .button.flat:hover {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
color: #2e3436;
|
||||
@ -222,7 +222,7 @@
|
||||
icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
|
||||
box-shadow: inset 0 1px white, 0 1px white;
|
||||
-gtk-image-effect: highlight; }
|
||||
.button:active {
|
||||
.button:active, .button.flat:active {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
color: #2e3436;
|
||||
@ -231,7 +231,7 @@
|
||||
text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
|
||||
icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
|
||||
box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.3), 0 1px white; }
|
||||
.button:backdrop {
|
||||
.button:backdrop, .button.flat:backdrop {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
color: #54595a;
|
||||
@ -240,21 +240,21 @@
|
||||
text-shadow: none;
|
||||
icon-shadow: none;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
|
||||
.button:backdrop:active {
|
||||
.button:backdrop:active, .button.flat:backdrop:active {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
color: #54595a;
|
||||
border-color: #a8a8a8;
|
||||
background-image: linear-gradient(to bottom, #d4d4d4);
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
|
||||
.button:backdrop:insensitive {
|
||||
.button:backdrop:insensitive, .button.flat:backdrop:insensitive {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
color: #c7c7c7;
|
||||
border-color: #a8a8a8;
|
||||
background-image: linear-gradient(to bottom, #ededed);
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
|
||||
.button:backdrop:insensitive:active {
|
||||
.button:backdrop:insensitive:active, .button.flat:backdrop:insensitive:active {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
color: #c7c7c7;
|
||||
@ -270,7 +270,7 @@
|
||||
text-shadow: none;
|
||||
icon-shadow: none;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px white; }
|
||||
.button:insensitive:active {
|
||||
.button:insensitive:active, .button:insensitive.flat:active {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
color: #8d9091;
|
||||
@ -437,11 +437,11 @@
|
||||
border-radius: 3px;
|
||||
border-style: solid; }
|
||||
|
||||
.button:link, .button:visited, .button:link:hover, .button:link:active, .button:visited:hover, .button:visited:active, .button:link:backdrop, .button:visited:backdrop, .notebook tab .button, GtkCalendar.button, GtkCalendar.button:hover, GtkCalendar.button:backdrop, GtkCalendar.button:backdrop:hover {
|
||||
.button.flat, .button.flat:backdrop, .button:link, .button:visited, .button:link:hover, .button:link:active, .button:visited:hover, .button:visited:active, .button:link:backdrop, .button:visited:backdrop, .notebook tab .button, GtkCalendar.button, GtkCalendar.button:hover, GtkCalendar.button:backdrop, GtkCalendar.button:backdrop:hover {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
box-shadow: none; }
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
|
||||
|
||||
/* menu buttons */
|
||||
.menuitem.button, .menuitem.button:insensitive, .menuitem.button:active:insensitive {
|
||||
@ -2145,11 +2145,11 @@ GtkLevelBar.vertical {
|
||||
.level-bar.fill-block.empty-fill-block:backdrop {
|
||||
border-color: rgba(84, 89, 90, 0.15); }
|
||||
|
||||
.view:selected, .view:selected:focus, .view:selected:hover, .entry:selected, .entry:selected:focus, .button:selected, .button:selected:focus {
|
||||
.view:selected, .view:selected:focus, .view:selected:hover, .entry:selected, .entry:selected:focus, .button:selected, .button.flat:selected, .button:selected:focus, .button.flat:focus {
|
||||
background-color: #4a90d9;
|
||||
color: white;
|
||||
outline-color: rgba(255, 255, 255, 0.3); }
|
||||
.view:backdrop:selected, .entry:backdrop:selected, .button:backdrop:selected {
|
||||
.view:backdrop:selected, .entry:backdrop:selected, .button:backdrop:selected, .button.flat:backdrop:focus {
|
||||
color: #fcfcfc; }
|
||||
|
||||
/**********
|
||||
|
Loading…
Reference in New Issue
Block a user