[gtk+] Adwaita: drop active style fixes

[Lapo Calamandrei <lapo src gnome org>]

commit e8c5db0425bb58a965a7d46f1d40d16fec2de40b
Author: Lapo Calamandrei <calamandrei gmail com>
Date:   Fri Mar 11 14:42:49 2016 +0100

    Adwaita: drop active style fixes
    
    taking care of:
    * entries
    * buttons (misses some linking logic still)
    * comboboxes (untested)
    * spinbuttons

 gtk/theme/Adwaita/_colors.scss           |    2 +
 gtk/theme/Adwaita/_common.scss           |   48 +++++++++++++++++++++++++++--
 gtk/theme/Adwaita/gtk-contained-dark.css |   29 ++++++++++++++++++
 gtk/theme/Adwaita/gtk-contained.css      |   29 ++++++++++++++++++
 4 files changed, 104 insertions(+), 4 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_colors.scss b/gtk/theme/Adwaita/_colors.scss
index 17f7498..2edb2ae 100644
--- a/gtk/theme/Adwaita/_colors.scss
+++ b/gtk/theme/Adwaita/_colors.scss
@@ -44,6 +44,8 @@ $base_hover_color: transparentize($fg_color, 0.95);
 $tooltip_borders_color: transparentize(white, 0.9);
 $shadow_color: transparentize(black, 0.9);
 
+$drop_target_color: black; // FIXME: we need something different than black here...
+
 //insensitive state derived colors
 $insensitive_fg_color: mix($fg_color, $bg_color, 50%);
 $insensitive_bg_color: mix($bg_color, $base_color, 60%);
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 2e058f5..feb229d 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -273,6 +273,7 @@ entry {
     background-image: none;
     background-color: transparent;
     box-shadow: none;
+
     &:backdrop { background-color: transparent; }
   }
 
@@ -281,6 +282,10 @@ entry {
   .linked:not(.vertical) > &:focus + button,
   .linked:not(.vertical) > &:focus + combobox > box > button.combo { border-left-color: 
entry_focus_border(); }
 
+  .linked:not(.vertical) > &:drop(active) + entry,
+  .linked:not(.vertical) > &:drop(active) + button,
+  .linked:not(.vertical) > &:drop(active) + combobox > box > button.combo { border-left-color: 
$drop_target_color; }
+
   // entry error and warning style
   @each $e_type, $e_color in (error, $error_color),
                              (warning, $warning_color) {
@@ -313,6 +318,13 @@ entry {
 
     &:disabled { @include entry(osd-insensitive); }
   }
+
+  &:drop(active) {
+    &:focus, & {
+      border-color: $drop_target_color;
+      box-shadow: inset 0 0 0 1px $drop_target_color;
+    }
+  }
 }
 
 // Vertically linked entries
@@ -326,6 +338,8 @@ entry {
   // add back the focus shadow
   > entry:focus:not(:last-child) { box-shadow: entry_focus_shadow(); }
 
+  > entry:drop(active):not(:last-child) { box-shadow: inset 0 0 0 1px $drop_target_color; }
+
   // brighter border between linked entries
   > entry:not(:disabled) + entry:not(:disabled) {
     border-top-color: mix($borders_color, $base_color, 30%);
@@ -346,17 +360,26 @@ entry {
     box-shadow: entry_focus_shadow();
   }
 
+  > entry + entry:drop(active):not(:last-child) {
+    border-top-color: $drop_target_color;
+    box-shadow: inset 0 0 0 1px $drop_target_color;
+  }
+
   // just recolor the top border on the last focused entry, since we don't reset the shadow here letting 
that be
   // inherited by the entry styling.
-  > entry + entry:focus:last-child {
-    border-top-color: entry_focus_border();
-  }
+  > entry + entry:focus:last-child { border-top-color: entry_focus_border(); }
+
+  > entry + entry:drop(active):last-child { border-top-color: $drop_target_color; }
 
   // this takes care of coloring the top border of the focused entry subsequent widget.
   // :not(:only-child) is a specificity bump hack.
   > entry:focus:not(:only-child) + entry,
   > entry:focus:not(:only-child) + button,
   > entry:focus:not(:only-child) + combobox > box > button.combo { border-top-color: entry_focus_border(); }
+
+  > entry:drop(active):not(:only-child) + entry,
+  > entry:drop(active):not(:only-child) + button,
+  > entry:drop(active):not(:only-child) + combobox > box > button.combo { border-top-color: 
$drop_target_color; }
 }
 
 
@@ -464,6 +487,11 @@ button {
         padding-right: 8px;
       }
     }
+
+    &:drop(active) {
+      border-color: $drop_target_color;
+      box-shadow: inset 0 0 0 1px $drop_target_color;
+    }
   }
 
   // big standalone buttons like in Documents pager
@@ -1015,6 +1043,11 @@ spinbutton {
     &:disabled { color: $insensitive_fg_color; }
     &:backdrop:disabled { color: $backdrop_insensitive_color; }
 
+    &:drop(active) {
+      border-color: transparent;
+      box-shadow: none;
+    }
+
     entry {
       min-height: 32px;
       min-width: 32px;
@@ -1045,6 +1078,7 @@ spinbutton {
   // OSD vertical
   .osd &.vertical button:first-child {
     @include button(osd);
+
     &:hover { @include button(osd-hover);}
 
     &:active { @include button(osd-active); }
@@ -1084,6 +1118,12 @@ combobox {
       &:dir(rtl) { @extend %linked:first-child; }
     }
   }
+
+  &:drop(active) { // FIXME: untested
+    box-shadow: none;
+
+    button.combo { @extend button:drop(active); }
+  }
 }
 
 .linked > combobox > box > button.combo {
@@ -3975,7 +4015,7 @@ button.circular { // FIXME: aggregate to buttons
 }
 
 *:drop(active):focus,
-*:drop(active) { // FIXME figure out a proper color
+*:drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
   border-color: black;
   box-shadow: inset 0 0 0 1px black;
 }
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index d4f31eb..7bee821 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -235,6 +235,8 @@ entry, spinbutton:not(.vertical) {
       background-color: transparent; }
   .linked:not(.vertical) > entry:focus + entry, .linked:not(.vertical) > spinbutton:focus:not(.vertical) + 
entry, .linked:not(.vertical) > entry:focus + spinbutton:not(.vertical), .linked:not(.vertical) > 
spinbutton:focus:not(.vertical) + spinbutton:not(.vertical), .linked:not(.vertical) > entry:focus + button, 
.linked:not(.vertical) > spinbutton:focus:not(.vertical) + button, .linked:not(.vertical) > entry:focus + 
combobox > box > button.combo, .linked:not(.vertical) > spinbutton:focus:not(.vertical) + combobox > box > 
button.combo {
     border-left-color: #0f2b48; }
+  .linked:not(.vertical) > entry:drop(active) + entry, .linked:not(.vertical) > 
spinbutton:drop(active):not(.vertical) + entry, .linked:not(.vertical) > entry:drop(active) + 
spinbutton:not(.vertical), .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + 
spinbutton:not(.vertical), .linked:not(.vertical) > entry:drop(active) + button, .linked:not(.vertical) > 
spinbutton:drop(active):not(.vertical) + button, .linked:not(.vertical) > entry:drop(active) + combobox > box 
> button.combo, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + combobox > box > 
button.combo {
+    border-left-color: black; }
   entry.error, spinbutton.error:not(.vertical) {
     color: #cc0000;
     border-color: #1a0000; }
@@ -303,11 +305,16 @@ entry, spinbutton:not(.vertical) {
       box-shadow: none;
       text-shadow: none;
       -gtk-icon-shadow: none; }
+  entry:drop(active):focus, spinbutton:drop(active):focus:not(.vertical), entry:drop(active), 
spinbutton:drop(active):not(.vertical) {
+    border-color: black;
+    box-shadow: inset 0 0 0 1px black; }
 
 .linked.vertical > entry:not(:last-child), .linked.vertical > spinbutton:not(:last-child):not(.vertical) {
   box-shadow: none; }
 .linked.vertical > entry:focus:not(:last-child), .linked.vertical > 
spinbutton:focus:not(:last-child):not(.vertical) {
   box-shadow: inset 0 0 0 1px #215d9c; }
+.linked.vertical > entry:drop(active):not(:last-child), .linked.vertical > 
spinbutton:drop(active):not(:last-child):not(.vertical) {
+  box-shadow: inset 0 0 0 1px black; }
 .linked.vertical > entry:not(:disabled) + entry:not(:disabled), .linked.vertical > 
spinbutton:not(:disabled):not(.vertical) + entry:not(:disabled), .linked.vertical > entry:not(:disabled) + 
spinbutton:not(:disabled):not(.vertical), .linked.vertical > spinbutton:not(:disabled):not(.vertical) + 
spinbutton:not(:disabled):not(.vertical) {
   border-top-color: #252626;
   background-image: linear-gradient(to bottom, #292929); }
@@ -319,14 +326,25 @@ entry, spinbutton:not(.vertical) {
 .linked.vertical > entry + entry:focus:not(:last-child), .linked.vertical > spinbutton:not(.vertical) + 
entry:focus:not(:last-child), .linked.vertical > entry + spinbutton:focus:not(:last-child):not(.vertical), 
.linked.vertical > spinbutton:not(.vertical) + spinbutton:focus:not(:last-child):not(.vertical) {
   border-top-color: #0f2b48;
   box-shadow: inset 0 0 0 1px #215d9c; }
+.linked.vertical > entry + entry:drop(active):not(:last-child), .linked.vertical > spinbutton:not(.vertical) 
+ entry:drop(active):not(:last-child), .linked.vertical > entry + 
spinbutton:drop(active):not(:last-child):not(.vertical), .linked.vertical > spinbutton:not(.vertical) + 
spinbutton:drop(active):not(:last-child):not(.vertical) {
+  border-top-color: black;
+  box-shadow: inset 0 0 0 1px black; }
 .linked.vertical > entry + entry:focus:last-child, .linked.vertical > spinbutton:not(.vertical) + 
entry:focus:last-child, .linked.vertical > entry + spinbutton:focus:last-child:not(.vertical), 
.linked.vertical > spinbutton:not(.vertical) + spinbutton:focus:last-child:not(.vertical) {
   border-top-color: #0f2b48; }
+.linked.vertical > entry + entry:drop(active):last-child, .linked.vertical > spinbutton:not(.vertical) + 
entry:drop(active):last-child, .linked.vertical > entry + spinbutton:drop(active):last-child:not(.vertical), 
.linked.vertical > spinbutton:not(.vertical) + spinbutton:drop(active):last-child:not(.vertical) {
+  border-top-color: black; }
 .linked.vertical > entry:focus:not(:only-child) + entry, .linked.vertical > 
spinbutton:focus:not(:only-child):not(.vertical) + entry, .linked.vertical > entry:focus:not(:only-child) + 
spinbutton:not(.vertical), .linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + 
spinbutton:not(.vertical),
 .linked.vertical > entry:focus:not(:only-child) + button,
 .linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + button,
 .linked.vertical > entry:focus:not(:only-child) + combobox > box > button.combo,
 .linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + combobox > box > button.combo {
   border-top-color: #0f2b48; }
+.linked.vertical > entry:drop(active):not(:only-child) + entry, .linked.vertical > 
spinbutton:drop(active):not(:only-child):not(.vertical) + entry, .linked.vertical > 
entry:drop(active):not(:only-child) + spinbutton:not(.vertical), .linked.vertical > 
spinbutton:drop(active):not(:only-child):not(.vertical) + spinbutton:not(.vertical),
+.linked.vertical > entry:drop(active):not(:only-child) + button,
+.linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + button,
+.linked.vertical > entry:drop(active):not(:only-child) + combobox > box > button.combo,
+.linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + combobox > box > button.combo {
+  border-top-color: black; }
 
 /***********
  * Buttons *
@@ -491,6 +509,12 @@ notebook > header > tabs > arrow, headerbar button.titlebutton,
     .titlebar button.text-button.image-button.titlebutton label, button.text-button.image-button label {
       padding-left: 8px;
       padding-right: 8px; }
+  notebook > header > tabs > arrow:drop(active), headerbar button.titlebutton:drop(active), headerbar 
combobox:drop(active) button.titlebutton.combo, combobox:drop(active) headerbar button.titlebutton.combo,
+  .titlebar button.titlebutton:drop(active),
+  .titlebar combobox:drop(active) button.titlebutton.combo,
+  combobox:drop(active) .titlebar button.titlebutton.combo, button:drop(active), combobox:drop(active) 
button.combo {
+    border-color: black;
+    box-shadow: inset 0 0 0 1px black; }
 button.osd {
   color: #eeeeec;
   border-radius: 5px;
@@ -1320,6 +1344,9 @@ spinbutton.vertical:disabled {
   color: #949796; }
 spinbutton.vertical:backdrop:disabled {
   color: #5d6767; }
+spinbutton.vertical:drop(active) {
+  border-color: transparent;
+  box-shadow: none; }
 spinbutton.vertical entry, spinbutton.vertical spinbutton:not(.vertical) {
   min-height: 32px;
   min-width: 32px;
@@ -1394,6 +1421,8 @@ combobox arrow {
   -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
   min-height: 16px;
   min-width: 16px; }
+combobox:drop(active) {
+  box-shadow: none; }
 
 /************
  * Toolbars *
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index e40c9dc..c37b744 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -235,6 +235,8 @@ entry, spinbutton:not(.vertical) {
       background-color: transparent; }
   .linked:not(.vertical) > entry:focus + entry, .linked:not(.vertical) > spinbutton:focus:not(.vertical) + 
entry, .linked:not(.vertical) > entry:focus + spinbutton:not(.vertical), .linked:not(.vertical) > 
spinbutton:focus:not(.vertical) + spinbutton:not(.vertical), .linked:not(.vertical) > entry:focus + button, 
.linked:not(.vertical) > spinbutton:focus:not(.vertical) + button, .linked:not(.vertical) > entry:focus + 
combobox > box > button.combo, .linked:not(.vertical) > spinbutton:focus:not(.vertical) + combobox > box > 
button.combo {
     border-left-color: #4a90d9; }
+  .linked:not(.vertical) > entry:drop(active) + entry, .linked:not(.vertical) > 
spinbutton:drop(active):not(.vertical) + entry, .linked:not(.vertical) > entry:drop(active) + 
spinbutton:not(.vertical), .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + 
spinbutton:not(.vertical), .linked:not(.vertical) > entry:drop(active) + button, .linked:not(.vertical) > 
spinbutton:drop(active):not(.vertical) + button, .linked:not(.vertical) > entry:drop(active) + combobox > box 
> button.combo, .linked:not(.vertical) > spinbutton:drop(active):not(.vertical) + combobox > box > 
button.combo {
+    border-left-color: black; }
   entry.error, spinbutton.error:not(.vertical) {
     color: #cc0000;
     border-color: #cc0000; }
@@ -303,11 +305,16 @@ entry, spinbutton:not(.vertical) {
       box-shadow: none;
       text-shadow: none;
       -gtk-icon-shadow: none; }
+  entry:drop(active):focus, spinbutton:drop(active):focus:not(.vertical), entry:drop(active), 
spinbutton:drop(active):not(.vertical) {
+    border-color: black;
+    box-shadow: inset 0 0 0 1px black; }
 
 .linked.vertical > entry:not(:last-child), .linked.vertical > spinbutton:not(:last-child):not(.vertical) {
   box-shadow: none; }
 .linked.vertical > entry:focus:not(:last-child), .linked.vertical > 
spinbutton:focus:not(:last-child):not(.vertical) {
   box-shadow: inset 0 0 0 1px #4a90d9; }
+.linked.vertical > entry:drop(active):not(:last-child), .linked.vertical > 
spinbutton:drop(active):not(:last-child):not(.vertical) {
+  box-shadow: inset 0 0 0 1px black; }
 .linked.vertical > entry:not(:disabled) + entry:not(:disabled), .linked.vertical > 
spinbutton:not(:disabled):not(.vertical) + entry:not(:disabled), .linked.vertical > entry:not(:disabled) + 
spinbutton:not(:disabled):not(.vertical), .linked.vertical > spinbutton:not(:disabled):not(.vertical) + 
spinbutton:not(:disabled):not(.vertical) {
   border-top-color: #e2e2e0;
   background-image: linear-gradient(to bottom, #ffffff); }
@@ -319,14 +326,25 @@ entry, spinbutton:not(.vertical) {
 .linked.vertical > entry + entry:focus:not(:last-child), .linked.vertical > spinbutton:not(.vertical) + 
entry:focus:not(:last-child), .linked.vertical > entry + spinbutton:focus:not(:last-child):not(.vertical), 
.linked.vertical > spinbutton:not(.vertical) + spinbutton:focus:not(:last-child):not(.vertical) {
   border-top-color: #4a90d9;
   box-shadow: inset 0 0 0 1px #4a90d9; }
+.linked.vertical > entry + entry:drop(active):not(:last-child), .linked.vertical > spinbutton:not(.vertical) 
+ entry:drop(active):not(:last-child), .linked.vertical > entry + 
spinbutton:drop(active):not(:last-child):not(.vertical), .linked.vertical > spinbutton:not(.vertical) + 
spinbutton:drop(active):not(:last-child):not(.vertical) {
+  border-top-color: black;
+  box-shadow: inset 0 0 0 1px black; }
 .linked.vertical > entry + entry:focus:last-child, .linked.vertical > spinbutton:not(.vertical) + 
entry:focus:last-child, .linked.vertical > entry + spinbutton:focus:last-child:not(.vertical), 
.linked.vertical > spinbutton:not(.vertical) + spinbutton:focus:last-child:not(.vertical) {
   border-top-color: #4a90d9; }
+.linked.vertical > entry + entry:drop(active):last-child, .linked.vertical > spinbutton:not(.vertical) + 
entry:drop(active):last-child, .linked.vertical > entry + spinbutton:drop(active):last-child:not(.vertical), 
.linked.vertical > spinbutton:not(.vertical) + spinbutton:drop(active):last-child:not(.vertical) {
+  border-top-color: black; }
 .linked.vertical > entry:focus:not(:only-child) + entry, .linked.vertical > 
spinbutton:focus:not(:only-child):not(.vertical) + entry, .linked.vertical > entry:focus:not(:only-child) + 
spinbutton:not(.vertical), .linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + 
spinbutton:not(.vertical),
 .linked.vertical > entry:focus:not(:only-child) + button,
 .linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + button,
 .linked.vertical > entry:focus:not(:only-child) + combobox > box > button.combo,
 .linked.vertical > spinbutton:focus:not(:only-child):not(.vertical) + combobox > box > button.combo {
   border-top-color: #4a90d9; }
+.linked.vertical > entry:drop(active):not(:only-child) + entry, .linked.vertical > 
spinbutton:drop(active):not(:only-child):not(.vertical) + entry, .linked.vertical > 
entry:drop(active):not(:only-child) + spinbutton:not(.vertical), .linked.vertical > 
spinbutton:drop(active):not(:only-child):not(.vertical) + spinbutton:not(.vertical),
+.linked.vertical > entry:drop(active):not(:only-child) + button,
+.linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + button,
+.linked.vertical > entry:drop(active):not(:only-child) + combobox > box > button.combo,
+.linked.vertical > spinbutton:drop(active):not(:only-child):not(.vertical) + combobox > box > button.combo {
+  border-top-color: black; }
 
 /***********
  * Buttons *
@@ -491,6 +509,12 @@ notebook > header > tabs > arrow, headerbar button.titlebutton,
     .titlebar button.text-button.image-button.titlebutton label, button.text-button.image-button label {
       padding-left: 8px;
       padding-right: 8px; }
+  notebook > header > tabs > arrow:drop(active), headerbar button.titlebutton:drop(active), headerbar 
combobox:drop(active) button.titlebutton.combo, combobox:drop(active) headerbar button.titlebutton.combo,
+  .titlebar button.titlebutton:drop(active),
+  .titlebar combobox:drop(active) button.titlebutton.combo,
+  combobox:drop(active) .titlebar button.titlebutton.combo, button:drop(active), combobox:drop(active) 
button.combo {
+    border-color: black;
+    box-shadow: inset 0 0 0 1px black; }
 button.osd {
   color: #eeeeec;
   border-radius: 5px;
@@ -1324,6 +1348,9 @@ spinbutton.vertical:disabled {
   color: #8b8e8f; }
 spinbutton.vertical:backdrop:disabled {
   color: #c3c3c0; }
+spinbutton.vertical:drop(active) {
+  border-color: transparent;
+  box-shadow: none; }
 spinbutton.vertical entry, spinbutton.vertical spinbutton:not(.vertical) {
   min-height: 32px;
   min-width: 32px;
@@ -1398,6 +1425,8 @@ combobox arrow {
   -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
   min-height: 16px;
   min-width: 16px; }
+combobox:drop(active) {
+  box-shadow: none; }
 
 /************
  * Toolbars *