[gnome-themes-standard/wip/sass] scrollbars

[Jakub Steiner <jimmac src gnome org>]

commit f694ee969643838df0dda210c7af1ff99ec46547
Author: Jakub Steiner <jimmac gmail com>
Date:   Fri May 23 11:28:47 2014 +0200

    scrollbars

 themes/Adwaita/gtk-3.0/_common.scss            |   78 +++++++++++++++++++-----
 themes/Adwaita/gtk-3.0/gtk-contained-dark.css  |   35 +++++++++++
 themes/Adwaita/gtk-3.0/gtk-contained-dark.scss |    8 +-
 themes/Adwaita/gtk-3.0/gtk-contained.css       |   35 +++++++++++
 themes/Adwaita/gtk-3.0/gtk-contained.scss      |    8 +-
 5 files changed, 140 insertions(+), 24 deletions(-)
---
diff --git a/themes/Adwaita/gtk-3.0/_common.scss b/themes/Adwaita/gtk-3.0/_common.scss
index 491b59e..321a5e5 100644
--- a/themes/Adwaita/gtk-3.0/_common.scss
+++ b/themes/Adwaita/gtk-3.0/_common.scss
@@ -68,13 +68,13 @@
 
 *:selected,
 *:selected:focus {
-    background-color: $theme_selected_bg_color;
-    color: $theme_selected_fg_color;
+    background-color: $selected_bg_color;
+    color: $selected_fg_color;
 }
 
 *:selected:backdrop {
-    background-color: $theme_selected_bg_color;
-    color: $theme_selected_fg_color;
+    background-color: $selected_bg_color;
+    color: $selected_fg_color;
 }
 
 
@@ -107,8 +107,8 @@
 }
 
 .gtkstyle-fallback:selected {
-    background-color: $theme_selected_bg_color;
-    color: $theme_selected_fg_color;
+    background-color: $selected_bg_color;
+    color: $selected_fg_color;
 }
 
 GtkImage,
@@ -170,14 +170,14 @@ GtkGrid:insensitive {
     box-shadow: 0 1px $borders_edge; /* not working */
   }
   &:focus {
-    border-color: $theme_selected_bg_color;
+    border-color: $selected_bg_color;
     box-shadow: inset 0 2px 2px -2px transparentize(black,0.6),
                 // focus indicator
-                inset 0 0 2px 1px transparentize($theme_selected_bg_color, 0.5),                0 1px 
$borders_edge; /* not working */
+                inset 0 0 2px 1px transparentize($selected_bg_color, 0.5),                0 1px 
$borders_edge; /* not working */
   }
   &:selected, &:backdrop:selected { 
-    color: $theme_selected_fg_color;
-    background-color: $theme_selected_bg_color;
+    color: $selected_fg_color;
+    background-color: $selected_bg_color;
   }
   &:backdrop {
     color: $_backdrop_fg_color;
@@ -194,7 +194,7 @@ GtkGrid:insensitive {
     margin: 1px;
     border-radius: 0;
     border-width: 0 0 2px;
-    border-color: $theme_selected_bg_color;
+    border-color: $selected_bg_color;
     border-style: solid;
     background-image: none;
     box-shadow: none;
@@ -253,7 +253,7 @@ GtkGrid:insensitive {
   }
   
   // Suggested and Destructive Action buttons
-  @each $b_type, $b_color in (suggested-action, $theme_selected_bg_color), 
+  @each $b_type, $b_color in (suggested-action, $selected_bg_color), 
                               (destructive-action, $destructive_color) {
     &.#{$b_type} {
       @include button(normal,$b_color, white, true); //FIXME: perhaps we should derive from bg color?
@@ -489,11 +489,11 @@ GtkComboBox {
     }
   }
   &.selection-mode {
-    color: darken($theme_selected_bg_color, 15%);
+    color: darken($selected_bg_color, 15%);
     text-shadow: 0 1px $theme_shade;
     background-image: linear-gradient(to bottom,
-                                    lighten($theme_selected_bg_color,5%),
-                                    lighten($theme_selected_bg_color,2%));
+                                    lighten($selected_bg_color,5%),
+                                    lighten($selected_bg_color,2%));
   }
 }
 
@@ -599,7 +599,7 @@ GtkPopover {
 .notebook tab { //tab indicator
 
   $tab_indicator_size: 2px;
-  $active_tab_indicator: $theme_selected_bg_color;
+  $active_tab_indicator: $selected_bg_color;
   $prelight_tab_indicator: $borders_color;
 
   &.top:hover { box-shadow: inset 0 (-$tab_indicator_size) $prelight_tab_indicator; };
@@ -614,6 +614,52 @@ GtkPopover {
 
 }
 
+/**************
+ * Scrollbars *
+ **************/
+
+.scrollbar {
+  background-image: none;
+  border-style: solid;
+  -GtkRange-trough-border: 0;
+  -GtkScrollbar-has-backward-stepper: false;
+  -GtkScrollbar-has-forward-stepper: false;
+  -GtkRange-slider-width: 13;
+  -GtkScrollbar-min-slider-length: 42; /* minimum size for the slider. sadly can't be in '.slider' where it 
belongs */
+
+  -GtkRange-stepper-spacing: 0;
+  -GtkRange-trough-under-steppers: 1;
+  .button {
+    border: none;
+  }
+  &.trough {
+    background-color: darken($theme_bg_color, 5%);
+    &:backdrop {
+      background-color: transparent;
+    }
+  }
+  &.slider {
+    border-radius: 20px;
+    border: 3px solid transparent; //margin :/
+    background-color: darken($theme_bg_color, 30%);
+    &:backdrop, &:insensitive {
+      background-color: darken($theme_bg_color, 20%);
+    }
+    &:hover {
+      background-color: darken($theme_bg_color, 40%);
+    }
+    &:prelight:active {
+      background-color: $selected_bg_color;
+    }
+    &.fine-tune {
+      border-width: 5px;
+      &:prelight:active {
+        background-color: $selected_bg_color;
+      }
+    }
+  }
+}
+
 /**********************
  * Window Decorations *
  *********************/
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained-dark.css b/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
index 2e5ed3b..83192e6 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
+++ b/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
@@ -586,6 +586,41 @@ GtkPopover {
 .notebook tab.left:active {
   box-shadow: inset -2px 0 #2a76c6; }
 
+/**************
+ * Scrollbars *
+ **************/
+.scrollbar {
+  background-image: none;
+  border-style: solid;
+  -GtkRange-trough-border: 0;
+  -GtkScrollbar-has-backward-stepper: false;
+  -GtkScrollbar-has-forward-stepper: false;
+  -GtkRange-slider-width: 13;
+  -GtkScrollbar-min-slider-length: 42;
+  /* minimum size for the slider. sadly can't be in '.slider' where it belongs */
+  -GtkRange-stepper-spacing: 0;
+  -GtkRange-trough-under-steppers: 1; }
+  .scrollbar .button {
+    border: none; }
+  .scrollbar.trough {
+    background-color: #2d3232; }
+    .scrollbar.trough:backdrop {
+      background-color: transparent; }
+  .scrollbar.slider {
+    border-radius: 20px;
+    border: 3px solid transparent;
+    background-color: black; }
+    .scrollbar.slider:backdrop, .scrollbar.slider:insensitive {
+      background-color: #090909; }
+    .scrollbar.slider:hover {
+      background-color: black; }
+    .scrollbar.slider:prelight:active {
+      background-color: #2a76c6; }
+    .scrollbar.slider.fine-tune {
+      border-width: 5px; }
+      .scrollbar.slider.fine-tune:prelight:active {
+        background-color: #2a76c6; }
+
 /**********************
  * Window Decorations *
  *********************/
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained-dark.scss b/themes/Adwaita/gtk-3.0/gtk-contained-dark.scss
index 3b8a544..56b54fa 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained-dark.scss
+++ b/themes/Adwaita/gtk-3.0/gtk-contained-dark.scss
@@ -5,8 +5,8 @@ $theme_base_color: #333;
 $theme_bg_color: #393f3f;
 $theme_fg_color: #eeeeec;
 
-$theme_selected_fg_color: lighten($theme_fg_color,10%);
-$theme_selected_bg_color: darken(#4a90d9,10%); //tango too light
+$selected_fg_color: lighten($theme_fg_color,10%);
+$selected_bg_color: darken(#4a90d9,10%); //tango too light
 
 $borders_color: darken($theme_bg_color,12%);
 $borders_edge: transparentize($theme_fg_color,.9);
@@ -14,11 +14,11 @@ $borders_edge: transparentize($theme_fg_color,.9);
 $theme_shade: rgba(0,0,0,.6); //shadow seems to be a reserved word
 $wm_shadow: transparentize(black, 0.15);
 
-$link_color: lighten($theme_selected_bg_color,10%);
+$link_color: lighten($selected_bg_color,10%);
 
 $warning_color: #f57900;
 $error_color: #cc0000;
-$success_color: $theme_selected_bg_color;
+$success_color: $selected_bg_color;
 $destructive_color: darken(#ef2929,10%);
 
 $_insensitive_fg_color: lighten($theme_fg_color, 10%);
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained.css b/themes/Adwaita/gtk-3.0/gtk-contained.css
index 8aa533d..f91e9c4 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained.css
+++ b/themes/Adwaita/gtk-3.0/gtk-contained.css
@@ -586,6 +586,41 @@ GtkPopover {
 .notebook tab.left:active {
   box-shadow: inset -2px 0 #729fcf; }
 
+/**************
+ * Scrollbars *
+ **************/
+.scrollbar {
+  background-image: none;
+  border-style: solid;
+  -GtkRange-trough-border: 0;
+  -GtkScrollbar-has-backward-stepper: false;
+  -GtkScrollbar-has-forward-stepper: false;
+  -GtkRange-slider-width: 13;
+  -GtkScrollbar-min-slider-length: 42;
+  /* minimum size for the slider. sadly can't be in '.slider' where it belongs */
+  -GtkRange-stepper-spacing: 0;
+  -GtkRange-trough-under-steppers: 1; }
+  .scrollbar .button {
+    border: none; }
+  .scrollbar.trough {
+    background-color: #e0e0e0; }
+    .scrollbar.trough:backdrop {
+      background-color: transparent; }
+  .scrollbar.slider {
+    border-radius: 20px;
+    border: 3px solid transparent;
+    background-color: #a1a1a1; }
+    .scrollbar.slider:backdrop, .scrollbar.slider:insensitive {
+      background-color: #bababa; }
+    .scrollbar.slider:hover {
+      background-color: #878787; }
+    .scrollbar.slider:prelight:active {
+      background-color: #729fcf; }
+    .scrollbar.slider.fine-tune {
+      border-width: 5px; }
+      .scrollbar.slider.fine-tune:prelight:active {
+        background-color: #729fcf; }
+
 /**********************
  * Window Decorations *
  *********************/
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained.scss b/themes/Adwaita/gtk-3.0/gtk-contained.scss
index 1e3004a..855cf3c 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained.scss
+++ b/themes/Adwaita/gtk-3.0/gtk-contained.scss
@@ -11,8 +11,8 @@ $theme_base_color: #ffffff;
 $theme_bg_color: #ededed;
 $theme_fg_color: #2e3436;
 
-$theme_selected_fg_color: #ffffff;
-$theme_selected_bg_color: #729fcf;
+$selected_fg_color: #ffffff;
+$selected_bg_color: #729fcf;
 
 $borders_color: darken($theme_bg_color,30%);
 $borders_edge: transparentize($theme_base_color,0.95);
@@ -20,11 +20,11 @@ $borders_edge: transparentize($theme_base_color,0.95);
 $theme_shade: rgba(0,0,0,.5); //shadow seems to be a reserved word
 $wm_shadow: transparentize(black, 0.25);
 
-$link_color: lighten($theme_selected_bg_color,10%);
+$link_color: lighten($selected_bg_color,10%);
 
 $warning_color: #f57900;
 $error_color: #cc0000;
-$success_color: $theme_selected_bg_color;
+$success_color: $selected_bg_color;
 $destructive_color: #ef2929;
 
 //insensitive state derived colors