Adwaita: .flat button styling

This commit is contained in:
Lapo Calamandrei 2014-06-27 13:15:54 +02:00
parent ec7200797e
commit 6e7e1ebf46
3 changed files with 32 additions and 29 deletions

View File

@ -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 */

View File

@ -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; }
/**********

View File

@ -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; }
/**********