GNOME.org
 

[gnome-themes-standard/wip/sass] :selected state for checkboxes and radios

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]