[gnome-themes-standard/wip/sass] :selected state for checkboxes and radios
- From: Jakub Steiner <jimmac src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-themes-standard/wip/sass] :selected state for checkboxes and radios
- Date: Tue, 3 Jun 2014 15:55:08 +0000 (UTC)
commit db5519305f46f3e4a3262c2b5d63ee764eb53903
Author: Jakub Steiner <jimmac gmail com>
Date: Tue Jun 3 17:54:34 2014 +0200
:selected state for checkboxes and radios
- all fine and great... except none of this works.
themes/Adwaita/gtk-3.0/_common.scss | 35 +++++++++++-------
themes/Adwaita/gtk-3.0/assets.txt | 12 ++++++
themes/Adwaita/gtk-3.0/gtk-contained-dark.css | 46 ++++++++++++++++++++-----
themes/Adwaita/gtk-3.0/gtk-contained.css | 46 ++++++++++++++++++++-----
4 files changed, 107 insertions(+), 32 deletions(-)
---
diff --git a/themes/Adwaita/gtk-3.0/_common.scss b/themes/Adwaita/gtk-3.0/_common.scss
index e256e64..bcff96c 100644
--- a/themes/Adwaita/gtk-3.0/_common.scss
+++ b/themes/Adwaita/gtk-3.0/_common.scss
@@ -69,16 +69,6 @@
Everytime a wildcard is used a kitten dies, painfully.
*/
-*:selected,
-*:selected:focus {
- background-color: $selected_bg_color;
- color: $selected_fg_color;
-}
-
-*:selected:backdrop {
- background-color: $selected_bg_color;
- color: $selected_fg_color;
-}
*:insensitive {
@@ -154,6 +144,11 @@
background-color: $selected_bg_color;
color: $selected_fg_color;
}
+ &:selected,
+ &:selected:focus,
+ &:selected:backdrop {
+ @extend %selected_items;
+ }
&.progressbar {
margin: 1px;
border-radius: 0;
@@ -178,7 +173,6 @@
}
}
-
/***********
* Buttons *
***********/
@@ -206,6 +200,11 @@
@include button(backdrop-insensitive-active);
}
}
+ &:selected,
+ &:selected:focus,
+ &:selected:backdrop {
+ @extend %selected_items;
+ }
&:insensitive {
@include button(insensitive);
&:active {
@@ -939,16 +938,19 @@ $asset_suffix: if($variant=='dark', '-dark', '');
('radio','radio') {
@each $s,$as in ('','-unchecked'),
(':hover', '-unchecked-hover'),
+ (':selected', '-unchecked-active'),
(':insensitive','-unchecked-insensitive'),
(':backdrop', '-unchecked-backdrop'),
(':backdrop:insensitive', '-unchecked-backdrop-insensitive'),
(':inconsistent', '-mixed'),
+ (':inconsistent:selected', '-mixed-active'),
(':inconsistent:backdrop', '-mixed-backdrop'),
(':inconsistent:insensitive', '-mixed-insensitive'),
(':inconsistent:insensitive:backdrop', '-mixed-backdrop-insensitive'),
(':active', '-checked'),
(':active:insensitive','-checked-insensitive'),
(':hover:active', '-checked-hover'),
+ (':active:selected', '-checked-active'),
(':backdrop:active', '-checked-backdrop'),
(':backdrop:active:insensitive', '-checked-backdrop-insensitive') {
.#{$w}#{$s} {
@@ -958,6 +960,7 @@ $asset_suffix: if($variant=='dark', '-dark', '');
background-position: center;
}
}
+
// menu and popover; FIXME: treeview
GtkPopover GtkModelButton.button.#{$w},
.menuitem.#{$w} {
@@ -974,8 +977,7 @@ $asset_suffix: if($variant=='dark', '-dark', '');
}
}
-// FIXME mousedown / active state is blue for some reason.
-// I thought we don't have that state as :active is used for checked states
+GtkCheckButton.text-button:selected { background-color: transparent; }
/************
* GtkScale *
@@ -1103,7 +1105,6 @@ GtkProgressBar.trough {
* Level Bar *
****************/
-
GtkLevelBar {
-GtkLevelBar-min-block-width: 34;
-GtkLevelBar-min-block-height: 3;
@@ -1153,6 +1154,12 @@ GtkLevelBar.vertical {
}
}
+// catch all extend :)
+
+%selected_items {
+ background-color: $selected_bg_color;
+ color: $selected_fg_color;
+}
/**********
* Frames *
diff --git a/themes/Adwaita/gtk-3.0/assets.txt b/themes/Adwaita/gtk-3.0/assets.txt
index a7c2157..d110503 100644
--- a/themes/Adwaita/gtk-3.0/assets.txt
+++ b/themes/Adwaita/gtk-3.0/assets.txt
@@ -1,60 +1,72 @@
checkbox-checked
checkbox-checked-hover
+checkbox-checked-active
checkbox-checked-insensitive
checkbox-checked-backdrop
checkbox-checked-backdrop-insensitive
checkbox-unchecked
checkbox-unchecked-hover
+checkbox-unchecked-active
checkbox-unchecked-insensitive
checkbox-unchecked-backdrop
checkbox-unchecked-backdrop-insensitive
checkbox-mixed
checkbox-mixed-hover
+checkbox-mixed-active
checkbox-mixed-insensitive
checkbox-mixed-backdrop
checkbox-mixed-backdrop-insensitive
radio-checked
radio-checked-hover
+radio-checked-active
radio-checked-insensitive
radio-checked-backdrop
radio-checked-backdrop-insensitive
radio-unchecked
radio-unchecked-hover
+radio-unchecked-active
radio-unchecked-insensitive
radio-unchecked-backdrop
radio-unchecked-backdrop-insensitive
radio-mixed
radio-mixed-hover
+radio-mixed-active
radio-mixed-insensitive
radio-mixed-backdrop
radio-mixed-backdrop-insensitive
checkbox-checked-dark
checkbox-checked-hover-dark
+checkbox-checked-active-dark
checkbox-checked-insensitive-dark
checkbox-checked-backdrop-dark
checkbox-checked-backdrop-insensitive-dark
checkbox-unchecked-dark
checkbox-unchecked-hover-dark
+checkbox-unchecked-active-dark
checkbox-unchecked-insensitive-dark
checkbox-unchecked-backdrop-dark
checkbox-unchecked-backdrop-insensitive-dark
checkbox-mixed-dark
checkbox-mixed-hover-dark
+checkbox-mixed-active-dark
checkbox-mixed-insensitive-dark
checkbox-mixed-backdrop-dark
checkbox-mixed-backdrop-insensitive-dark
radio-checked-dark
radio-checked-hover-dark
+radio-checked-active-dark
radio-checked-insensitive-dark
radio-checked-backdrop-dark
radio-checked-backdrop-insensitive-dark
radio-unchecked-dark
radio-unchecked-hover-dark
+radio-unchecked-active-dark
radio-unchecked-insensitive-dark
radio-unchecked-backdrop-dark
radio-unchecked-backdrop-insensitive-dark
radio-mixed-dark
radio-mixed-hover-dark
+radio-mixed-active-dark
radio-mixed-insensitive-dark
radio-mixed-backdrop-dark
radio-mixed-backdrop-insensitive-dark
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained-dark.css b/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
index 1f63f7e..d1cb15b 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
+++ b/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
@@ -46,15 +46,6 @@
or better, just don't.
Everytime a wildcard is used a kitten dies, painfully.
*/
-*:selected,
-*:selected:focus {
- background-color: #215d9c;
- color: white; }
-
-*:selected:backdrop {
- background-color: #215d9c;
- color: white; }
-
*:insensitive {
-gtk-image-effect: dim; }
@@ -957,6 +948,11 @@ GtkSwitch {
background-repeat: no-repeat;
background-position: center; }
+.check:selected {
+ background-image: -gtk-scaled(url("assets/checkbox-unchecked-active-dark.png"),
url("assets/checkbox-unchecked-active-dark 2 png"));
+ background-repeat: no-repeat;
+ background-position: center; }
+
.check:insensitive {
background-image: -gtk-scaled(url("assets/checkbox-unchecked-insensitive-dark.png"),
url("assets/checkbox-unchecked-insensitive-dark 2 png"));
background-repeat: no-repeat;
@@ -977,6 +973,11 @@ GtkSwitch {
background-repeat: no-repeat;
background-position: center; }
+.check:inconsistent:selected {
+ background-image: -gtk-scaled(url("assets/checkbox-mixed-active-dark.png"),
url("assets/checkbox-mixed-active-dark 2 png"));
+ background-repeat: no-repeat;
+ background-position: center; }
+
.check:inconsistent:backdrop {
background-image: -gtk-scaled(url("assets/checkbox-mixed-backdrop-dark.png"),
url("assets/checkbox-mixed-backdrop-dark 2 png"));
background-repeat: no-repeat;
@@ -1007,6 +1008,11 @@ GtkSwitch {
background-repeat: no-repeat;
background-position: center; }
+.check:active:selected {
+ background-image: -gtk-scaled(url("assets/checkbox-checked-active-dark.png"),
url("assets/checkbox-checked-active-dark 2 png"));
+ background-repeat: no-repeat;
+ background-position: center; }
+
.check:backdrop:active {
background-image: -gtk-scaled(url("assets/checkbox-checked-backdrop-dark.png"),
url("assets/checkbox-checked-backdrop-dark 2 png"));
background-repeat: no-repeat;
@@ -1045,6 +1051,11 @@ GtkPopover GtkModelButton.button.check:hover, GtkPopover GtkModelButton.button.c
background-repeat: no-repeat;
background-position: center; }
+.radio:selected {
+ background-image: -gtk-scaled(url("assets/radio-unchecked-active-dark.png"),
url("assets/radio-unchecked-active-dark 2 png"));
+ background-repeat: no-repeat;
+ background-position: center; }
+
.radio:insensitive {
background-image: -gtk-scaled(url("assets/radio-unchecked-insensitive-dark.png"),
url("assets/radio-unchecked-insensitive-dark 2 png"));
background-repeat: no-repeat;
@@ -1065,6 +1076,11 @@ GtkPopover GtkModelButton.button.check:hover, GtkPopover GtkModelButton.button.c
background-repeat: no-repeat;
background-position: center; }
+.radio:inconsistent:selected {
+ background-image: -gtk-scaled(url("assets/radio-mixed-active-dark.png"),
url("assets/radio-mixed-active-dark 2 png"));
+ background-repeat: no-repeat;
+ background-position: center; }
+
.radio:inconsistent:backdrop {
background-image: -gtk-scaled(url("assets/radio-mixed-backdrop-dark.png"),
url("assets/radio-mixed-backdrop-dark 2 png"));
background-repeat: no-repeat;
@@ -1095,6 +1111,11 @@ GtkPopover GtkModelButton.button.check:hover, GtkPopover GtkModelButton.button.c
background-repeat: no-repeat;
background-position: center; }
+.radio:active:selected {
+ background-image: -gtk-scaled(url("assets/radio-checked-active-dark.png"),
url("assets/radio-checked-active-dark 2 png"));
+ background-repeat: no-repeat;
+ background-position: center; }
+
.radio:backdrop:active {
background-image: -gtk-scaled(url("assets/radio-checked-backdrop-dark.png"),
url("assets/radio-checked-backdrop-dark 2 png"));
background-repeat: no-repeat;
@@ -1123,6 +1144,9 @@ GtkPopover GtkModelButton.button.radio,
GtkPopover GtkModelButton.button.radio:hover, GtkPopover GtkModelButton.button.radio:active:hover {
color: #eeeeec; }
+GtkCheckButton.text-button:selected {
+ background-color: transparent; }
+
/************
* GtkScale *
************/
@@ -1266,6 +1290,10 @@ GtkLevelBar.vertical {
background-color: transparent;
border-color: rgba(28, 31, 31, 0.2); }
+.entry:selected, .entry:selected:focus, .entry:selected:backdrop, .button:selected, .button:selected:focus,
.button:selected:backdrop {
+ background-color: #215d9c;
+ color: white; }
+
/**********
* Frames *
**********/
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained.css b/themes/Adwaita/gtk-3.0/gtk-contained.css
index b9fb830..b88820e 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained.css
+++ b/themes/Adwaita/gtk-3.0/gtk-contained.css
@@ -46,15 +46,6 @@
or better, just don't.
Everytime a wildcard is used a kitten dies, painfully.
*/
-*:selected,
-*:selected:focus {
- background-color: #4a90d9;
- color: white; }
-
-*:selected:backdrop {
- background-color: #4a90d9;
- color: white; }
-
*:insensitive {
-gtk-image-effect: dim; }
@@ -957,6 +948,11 @@ GtkSwitch {
background-repeat: no-repeat;
background-position: center; }
+.check:selected {
+ background-image: -gtk-scaled(url("assets/checkbox-unchecked-active.png"),
url("assets/checkbox-unchecked-active 2 png"));
+ background-repeat: no-repeat;
+ background-position: center; }
+
.check:insensitive {
background-image: -gtk-scaled(url("assets/checkbox-unchecked-insensitive.png"),
url("assets/checkbox-unchecked-insensitive 2 png"));
background-repeat: no-repeat;
@@ -977,6 +973,11 @@ GtkSwitch {
background-repeat: no-repeat;
background-position: center; }
+.check:inconsistent:selected {
+ background-image: -gtk-scaled(url("assets/checkbox-mixed-active.png"), url("assets/checkbox-mixed-active 2
png"));
+ background-repeat: no-repeat;
+ background-position: center; }
+
.check:inconsistent:backdrop {
background-image: -gtk-scaled(url("assets/checkbox-mixed-backdrop.png"),
url("assets/checkbox-mixed-backdrop 2 png"));
background-repeat: no-repeat;
@@ -1007,6 +1008,11 @@ GtkSwitch {
background-repeat: no-repeat;
background-position: center; }
+.check:active:selected {
+ background-image: -gtk-scaled(url("assets/checkbox-checked-active.png"),
url("assets/checkbox-checked-active 2 png"));
+ background-repeat: no-repeat;
+ background-position: center; }
+
.check:backdrop:active {
background-image: -gtk-scaled(url("assets/checkbox-checked-backdrop.png"),
url("assets/checkbox-checked-backdrop 2 png"));
background-repeat: no-repeat;
@@ -1045,6 +1051,11 @@ GtkPopover GtkModelButton.button.check:hover, GtkPopover GtkModelButton.button.c
background-repeat: no-repeat;
background-position: center; }
+.radio:selected {
+ background-image: -gtk-scaled(url("assets/radio-unchecked-active.png"), url("assets/radio-unchecked-active
2 png"));
+ background-repeat: no-repeat;
+ background-position: center; }
+
.radio:insensitive {
background-image: -gtk-scaled(url("assets/radio-unchecked-insensitive.png"),
url("assets/radio-unchecked-insensitive 2 png"));
background-repeat: no-repeat;
@@ -1065,6 +1076,11 @@ GtkPopover GtkModelButton.button.check:hover, GtkPopover GtkModelButton.button.c
background-repeat: no-repeat;
background-position: center; }
+.radio:inconsistent:selected {
+ background-image: -gtk-scaled(url("assets/radio-mixed-active.png"), url("assets/radio-mixed-active 2
png"));
+ background-repeat: no-repeat;
+ background-position: center; }
+
.radio:inconsistent:backdrop {
background-image: -gtk-scaled(url("assets/radio-mixed-backdrop.png"), url("assets/radio-mixed-backdrop 2
png"));
background-repeat: no-repeat;
@@ -1095,6 +1111,11 @@ GtkPopover GtkModelButton.button.check:hover, GtkPopover GtkModelButton.button.c
background-repeat: no-repeat;
background-position: center; }
+.radio:active:selected {
+ background-image: -gtk-scaled(url("assets/radio-checked-active.png"), url("assets/radio-checked-active 2
png"));
+ background-repeat: no-repeat;
+ background-position: center; }
+
.radio:backdrop:active {
background-image: -gtk-scaled(url("assets/radio-checked-backdrop.png"), url("assets/radio-checked-backdrop
2 png"));
background-repeat: no-repeat;
@@ -1123,6 +1144,9 @@ GtkPopover GtkModelButton.button.radio,
GtkPopover GtkModelButton.button.radio:hover, GtkPopover GtkModelButton.button.radio:active:hover {
color: #2e3436; }
+GtkCheckButton.text-button:selected {
+ background-color: transparent; }
+
/************
* GtkScale *
************/
@@ -1266,6 +1290,10 @@ GtkLevelBar.vertical {
background-color: transparent;
border-color: rgba(161, 161, 161, 0.2); }
+.entry:selected, .entry:selected:focus, .entry:selected:backdrop, .button:selected, .button:selected:focus,
.button:selected:backdrop {
+ background-color: #4a90d9;
+ color: white; }
+
/**********
* Frames *
**********/
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]