[gtk+] Adwaita: .flat button styling
- From: Lapo Calamandrei <lapo src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gtk+] Adwaita: .flat button styling
- Date: Fri, 27 Jun 2014 11:16:24 +0000 (UTC)
commit 6e7e1ebf46ff24681ee4e0050f3da1a2becd861a
Author: Lapo Calamandrei <calamandrei gmail com>
Date: Fri Jun 27 13:15:54 2014 +0200
Adwaita: .flat button styling
gtk/resources/theme/Adwaita/_common.scss | 17 +++++++++------
gtk/resources/theme/Adwaita/gtk-contained-dark.css | 22 ++++++++++----------
gtk/resources/theme/Adwaita/gtk-contained.css | 22 ++++++++++----------
3 files changed, 32 insertions(+), 29 deletions(-)
---
diff --git a/gtk/resources/theme/Adwaita/_common.scss b/gtk/resources/theme/Adwaita/_common.scss
index c54144a..5ac4a7f 100644
--- a/gtk/resources/theme/Adwaita/_common.scss
+++ b/gtk/resources/theme/Adwaita/_common.scss
@@ -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 */
diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css
b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
index d217bb3..fbb4fe7 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
@@ -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; }
/**********
diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css
index 3e9b16d..2df5e80 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained.css
@@ -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; }
/**********
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]