[gnome-themes-standard/wip/sass] notebook: style close buttons and reorderable tabs

[Jakub Steiner <jimmac src gnome org>]

commit 53e590b89d278f4a7cdfec5f8a31fca5a8efc5f4
Author: Jakub Steiner <jimmac gmail com>
Date:   Wed May 28 14:17:15 2014 +0200

    notebook: style close buttons and reorderable tabs

 themes/Adwaita/gtk-3.0/_common.scss           |   16 +++++++++++++-
 themes/Adwaita/gtk-3.0/gtk-contained-dark.css |   28 +++++++++++++++++++++++++
 themes/Adwaita/gtk-3.0/gtk-contained.css      |   28 +++++++++++++++++++++++++
 3 files changed, 71 insertions(+), 1 deletions(-)
---
diff --git a/themes/Adwaita/gtk-3.0/_common.scss b/themes/Adwaita/gtk-3.0/_common.scss
index b7af275..a2b34be 100644
--- a/themes/Adwaita/gtk-3.0/_common.scss
+++ b/themes/Adwaita/gtk-3.0/_common.scss
@@ -651,13 +651,27 @@ GtkPopover {
     &.left:hover { box-shadow: inset (-$tab_indicator_size) 0 $prelight_tab_indicator; };
     &.left:active { box-shadow: inset (-$tab_indicator_size) 0 $active_tab_indicator; };
     //FIXME: with backdrop in the mix this will explode we need smarter code
-
+    &.reorderable-page:active {
+      border-width: 0 1px 0 1px;
+      background-color: transparentize($bg_color, .5); ;// darken($bg_color,3%);
+      border-color: mix($borders_color,$bg_color, 50%);
+    }
     GtkLabel { //tab text
       font-weight: bold;
       color: lighten($fg_color,30%); //FIXME
       &.active-page { color: $fg_color; } //active tab text
       &.prelight-page { color: lighten($fg_color,15%); } //prelight tab text
     }
+    
+    .button {
+      padding: 0 6px; //FIXME not really doing anything
+      border: 1px solid transparent; //avoid jumping around
+      box-shadow: none; //FIXME glitch in the transition
+      background-image: linear-gradient(to bottom, transparent);
+      color: transparentize($fg_color, .5);
+      &:hover { @include button(normal); }
+      &:active { @include button(active); }
+    }
   }
 }
 
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained-dark.css b/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
index 6dac86d..371eb53 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
+++ b/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
@@ -742,6 +742,10 @@ GtkPopover {
       box-shadow: inset -2px 0 #1c1f1f; }
     .notebook tab.left:active {
       box-shadow: inset -2px 0 #2a76c6; }
+    .notebook tab.reorderable-page:active {
+      border-width: 0 1px 0 1px;
+      background-color: rgba(57, 63, 63, 0.5);
+      border-color: #2a2f2f; }
     .notebook tab GtkLabel {
       font-weight: bold;
       color: white; }
@@ -749,6 +753,30 @@ GtkPopover {
         color: #eeeeec; }
       .notebook tab GtkLabel.prelight-page {
         color: white; }
+    .notebook tab .button {
+      padding: 0 6px;
+      border: 1px solid transparent;
+      box-shadow: none;
+      background-image: linear-gradient(to bottom, transparent);
+      color: rgba(238, 238, 236, 0.5); }
+      .notebook tab .button:hover {
+        border-width: 1px;
+        border-style: solid;
+        color: #eeeeec;
+        background-image: linear-gradient(to bottom, #454c4c, #393f3f 40%, #2d3232);
+        border-color: #1c1f1f;
+        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); }
+      .notebook tab .button:active {
+        border-width: 1px;
+        border-style: solid;
+        color: #eeeeec;
+        border-color: #1c1f1f;
+        background-image: linear-gradient(to bottom, #212424, #2d3232 3%);
+        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); }
 
 /**************
  * Scrollbars *
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained.css b/themes/Adwaita/gtk-3.0/gtk-contained.css
index a712c47..0bf3bc6 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained.css
+++ b/themes/Adwaita/gtk-3.0/gtk-contained.css
@@ -742,6 +742,10 @@ GtkPopover {
       box-shadow: inset -2px 0 #a1a1a1; }
     .notebook tab.left:active {
       box-shadow: inset -2px 0 #4a90d9; }
+    .notebook tab.reorderable-page:active {
+      border-width: 0 1px 0 1px;
+      background-color: rgba(237, 237, 237, 0.5);
+      border-color: #c7c7c7; }
     .notebook tab GtkLabel {
       font-weight: bold;
       color: #748489; }
@@ -749,6 +753,30 @@ GtkPopover {
         color: #2e3436; }
       .notebook tab GtkLabel.prelight-page {
         color: #515c5f; }
+    .notebook tab .button {
+      padding: 0 6px;
+      border: 1px solid transparent;
+      box-shadow: none;
+      background-image: linear-gradient(to bottom, transparent);
+      color: rgba(46, 52, 54, 0.5); }
+      .notebook tab .button:hover {
+        border-width: 1px;
+        border-style: solid;
+        color: #2e3436;
+        background-image: linear-gradient(to bottom, white, #ededed 40%, lightgray);
+        border-color: #a1a1a1;
+        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; }
+      .notebook tab .button:active {
+        border-width: 1px;
+        border-style: solid;
+        color: #2e3436;
+        border-color: #a1a1a1;
+        background-image: linear-gradient(to bottom, #c7c7c7, #d1d1d1 3%, lightgray);
+        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; }
 
 /**************
  * Scrollbars *