[gtk+] Adwaita: fix switch styling



commit 5b0a26f8a318814f2a702ceba72d4a16ddb49f98
Author: Lapo Calamandrei <calamandrei gmail com>
Date:   Fri Oct 23 17:12:01 2015 +0200

    Adwaita: fix switch styling
    
    looks like switch stare are not passed to the slider anymore so
    rewrite selectors accordingly.

 gtk/theme/Adwaita/_common.scss           |   43 +++++++++-------
 gtk/theme/Adwaita/gtk-contained-dark.css |   80 +++++++++++++++---------------
 gtk/theme/Adwaita/gtk-contained.css      |   80 +++++++++++++++---------------
 3 files changed, 104 insertions(+), 99 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index d5ba620..6a88c6b 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -2006,7 +2006,9 @@ switch {
         background-image: none;
         background-color: $insensitive_bg_color;
   }
-  & slider {
+  // slider styling
+  // switch slider doesn't respond to its own states but relies on the switch ones
+  slider {
     border: 1px solid;
     border-radius: 3px;
     @include button(normal);
@@ -2014,26 +2016,29 @@ switch {
                                transparentize(white, 0.85)),
                 inset 0 -2px transparentize($bg_color, 0.4),
                 inset 0 -1px mix($bg_color, $borders_color, 50%);
-    &:hover {
-      @include button(hover);
-      box-shadow: inset 0 1px if($variant=='light', white,
-                                 transparentize(white, 0.85)),
-                  inset 0 -2px transparentize($bg_color, 0.4),
-                  inset 0 -1px mix($bg_color, $borders_color, 50%);
-    }
-    &:active { border: 1px solid $selected_borders_color; }
-    &:insensitive { @include button(insensitive, $edge:none); }
-    &:backdrop {
+  }
+  &:hover slider {
+    @include button(hover);
+    box-shadow: inset 0 1px if($variant=='light', white,
+                               transparentize(white, 0.85)),
+                inset 0 -2px transparentize($bg_color, 0.4),
+                inset 0 -1px mix($bg_color, $borders_color, 50%);
+  }
+  &:active slider { border: 1px solid $selected_borders_color; }
+
+  &:insensitive slider { @include button(insensitive, $edge:none); }
+
+  &:backdrop {
+    slider {
       @include button(backdrop);
       box-shadow: none;
-      &:active{
-        border-color: if($variant == 'light', $selected_bg_color,
-                                              $selected_borders_color);
-      }
-      &:insensitive {
-        @include button(backdrop-insensitive);
-        box-shadow: none;
-      }
+    }
+
+    &:active slider { border-color: if($variant == 'light', $selected_bg_color, $selected_borders_color); }
+
+    &:insensitive slider {
+      @include button(backdrop-insensitive);
+      box-shadow: none;
     }
   }
   .list-row:selected & {
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index e550622..fdfe5ca 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -2474,46 +2474,46 @@ switch {
     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);
     box-shadow: inset 0 1px rgba(255, 255, 255, 0.15), inset 0 -2px rgba(57, 63, 63, 0.6), inset 0 -1px 
#2b2f2f; }
-    switch slider:hover {
-      color: #eeeeec;
-      outline-color: rgba(238, 238, 236, 0.3);
-      border-color: #1c1f1f;
-      background-image: linear-gradient(to bottom, #5b6464, #434a4a 40%, #393f3f);
-      text-shadow: 0 -1px rgba(0, 0, 0, 0.77976);
-      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);
-      box-shadow: inset 0 1px rgba(255, 255, 255, 0.15), inset 0 -2px rgba(57, 63, 63, 0.6), inset 0 -1px 
#2b2f2f; }
-    switch slider:active {
-      border: 1px solid #0f2b48; }
-    switch slider:insensitive {
-      color: #949796;
-      border-color: #1c1f1f;
-      background-image: linear-gradient(to bottom, #333636);
-      text-shadow: none;
-      icon-shadow: none;
-      box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
-      switch slider:insensitive > .label {
-        color: inherit; }
-    switch slider:backdrop {
-      color: #949796;
-      border-color: #1f2222;
-      background-image: linear-gradient(to bottom, #393f3f);
-      text-shadow: none;
-      icon-shadow: none;
-      box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0);
-      box-shadow: none; }
-      switch slider:backdrop:active {
-        border-color: #0f2b48; }
-      switch slider:backdrop:insensitive {
-        color: #5d6767;
-        border-color: #1f2222;
-        background-image: linear-gradient(to bottom, #333636);
-        text-shadow: none;
-        icon-shadow: none;
-        box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0);
-        box-shadow: none; }
-        switch slider:backdrop:insensitive > .label {
-          color: inherit; }
+  switch:hover slider {
+    color: #eeeeec;
+    outline-color: rgba(238, 238, 236, 0.3);
+    border-color: #1c1f1f;
+    background-image: linear-gradient(to bottom, #5b6464, #434a4a 40%, #393f3f);
+    text-shadow: 0 -1px rgba(0, 0, 0, 0.77976);
+    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);
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0.15), inset 0 -2px rgba(57, 63, 63, 0.6), inset 0 -1px 
#2b2f2f; }
+  switch:active slider {
+    border: 1px solid #0f2b48; }
+  switch:insensitive slider {
+    color: #949796;
+    border-color: #1c1f1f;
+    background-image: linear-gradient(to bottom, #333636);
+    text-shadow: none;
+    icon-shadow: none;
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+    switch:insensitive slider > .label {
+      color: inherit; }
+  switch:backdrop slider {
+    color: #949796;
+    border-color: #1f2222;
+    background-image: linear-gradient(to bottom, #393f3f);
+    text-shadow: none;
+    icon-shadow: none;
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0);
+    box-shadow: none; }
+  switch:backdrop:active slider {
+    border-color: #0f2b48; }
+  switch:backdrop:insensitive slider {
+    color: #5d6767;
+    border-color: #1f2222;
+    background-image: linear-gradient(to bottom, #333636);
+    text-shadow: none;
+    icon-shadow: none;
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0);
+    box-shadow: none; }
+    switch:backdrop:insensitive slider > .label {
+      color: inherit; }
 
 /*************************
  * Check and Radio items *
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index edd406d..31ada6a 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -2481,46 +2481,46 @@ switch {
     icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
     box-shadow: inset 0 1px white, 0 1px white;
     box-shadow: inset 0 1px white, inset 0 -2px rgba(237, 237, 237, 0.6), inset 0 -1px #c7c7c7; }
-    switch slider:hover {
-      color: #2e3436;
-      outline-color: rgba(46, 52, 54, 0.3);
-      border-color: #a1a1a1;
-      background-image: linear-gradient(to bottom, white, #f7f7f7 40%, #ededed);
-      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;
-      box-shadow: inset 0 1px white, inset 0 -2px rgba(237, 237, 237, 0.6), inset 0 -1px #c7c7c7; }
-    switch slider:active {
-      border: 1px solid #184472; }
-    switch slider:insensitive {
-      color: #8e9192;
-      border-color: #a1a1a1;
-      background-image: linear-gradient(to bottom, #f4f4f4);
-      text-shadow: none;
-      icon-shadow: none;
-      box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
-      switch slider:insensitive > .label {
-        color: inherit; }
-    switch slider:backdrop {
-      color: #8e9192;
-      border-color: darkgray;
-      background-image: linear-gradient(to bottom, #ededed);
-      text-shadow: none;
-      icon-shadow: none;
-      box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
-      box-shadow: none; }
-      switch slider:backdrop:active {
-        border-color: #4a90d9; }
-      switch slider:backdrop:insensitive {
-        color: #c7c7c7;
-        border-color: darkgray;
-        background-image: linear-gradient(to bottom, #f4f4f4);
-        text-shadow: none;
-        icon-shadow: none;
-        box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
-        box-shadow: none; }
-        switch slider:backdrop:insensitive > .label {
-          color: inherit; }
+  switch:hover slider {
+    color: #2e3436;
+    outline-color: rgba(46, 52, 54, 0.3);
+    border-color: #a1a1a1;
+    background-image: linear-gradient(to bottom, white, #f7f7f7 40%, #ededed);
+    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;
+    box-shadow: inset 0 1px white, inset 0 -2px rgba(237, 237, 237, 0.6), inset 0 -1px #c7c7c7; }
+  switch:active slider {
+    border: 1px solid #184472; }
+  switch:insensitive slider {
+    color: #8e9192;
+    border-color: #a1a1a1;
+    background-image: linear-gradient(to bottom, #f4f4f4);
+    text-shadow: none;
+    icon-shadow: none;
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+    switch:insensitive slider > .label {
+      color: inherit; }
+  switch:backdrop slider {
+    color: #8e9192;
+    border-color: darkgray;
+    background-image: linear-gradient(to bottom, #ededed);
+    text-shadow: none;
+    icon-shadow: none;
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
+    box-shadow: none; }
+  switch:backdrop:active slider {
+    border-color: #4a90d9; }
+  switch:backdrop:insensitive slider {
+    color: #c7c7c7;
+    border-color: darkgray;
+    background-image: linear-gradient(to bottom, #f4f4f4);
+    text-shadow: none;
+    icon-shadow: none;
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
+    box-shadow: none; }
+    switch:backdrop:insensitive slider > .label {
+      color: inherit; }
   .list-row:selected switch {
     box-shadow: none;
     border-color: #184472; }


[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]