Adwaita: fix selected colorswatch white border

This commit is contained in:
Lapo Calamandrei 2014-10-29 19:50:58 +01:00
parent bfd4933aa3
commit 43a2676c3f
3 changed files with 36 additions and 26 deletions

View File

@ -2924,7 +2924,20 @@ GtkColorSwatch {
// is GtkColorSwatch .overlay {}, GtkColorSwatch has the programmatically set background, so most of the style
// is applied to the overlay box.
box-shadow: inset 0 1px transparentize(black, 0.9), _widget_edge();
$_colorswatch_shadow: inset 0 1px transparentize(black, 0.9), _widget_edge();
box-shadow: $_colorswatch_shadow;
// take care of colorswatches on selected elements
:selected & {
box-shadow: none;
&.overlay, &.overlay:hover {
border-color: $selected_fg_color;
}
}
// we need to re-set the shadow here since it get axed by the previous bit
&:selected { box-shadow: $_colorswatch_shadow; }
// border rounding
&.top {
@ -2949,7 +2962,8 @@ GtkColorSwatch {
// nth-child works just on the custom colors row
// hover effect
&:hover {
&:hover,
&:hover:selected {
background-image: linear-gradient(135deg, transparentize(white, 0.3),
transparentize(white, 1) 50%);
box-shadow: inset 0 1px transparentize(white, 0.6),
@ -2983,7 +2997,8 @@ GtkColorSwatch {
}
// border color
&.overlay {
&.overlay,
&.overlay:selected {
border: 1px solid if($variant == 'light', transparentize(black, 0.7), $borders_color);
&:hover { border-color: if($variant == 'light', transparentize(black, 0.5), black); }
}
@ -2997,15 +3012,6 @@ GtkColorSwatch {
&:backdrop { @include button(backdrop); }
.overlay { @include button(undecorated); } // reset the overlay to not cover the button style underneat
}
// take care of colorswatches on selected elements
:selected & {
box-shadow: none;
&.overlay {
border-color: $selected_fg_color;
}
}
}

View File

@ -4354,6 +4354,12 @@ GtkInfoBar {
*****************/
GtkColorSwatch {
box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
:selected GtkColorSwatch {
box-shadow: none; }
:selected GtkColorSwatch.overlay, :selected GtkColorSwatch.overlay:hover {
border-color: #ffffff; }
GtkColorSwatch:selected {
box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
GtkColorSwatch.top {
border-top-left-radius: 5px;
border-top-right-radius: 5px; }
@ -4368,7 +4374,7 @@ GtkColorSwatch {
border-bottom-right-radius: 5px; }
GtkColorSwatch:only-child, GtkColorSwatch:only-child .overlay {
border-radius: 5px; }
GtkColorSwatch:hover {
GtkColorSwatch:hover, GtkColorSwatch:hover:selected {
background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 50%);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), inset 0 -1px rgba(0, 0, 0, 0.4); }
GtkColorSwatch:backdrop {
@ -4391,9 +4397,9 @@ GtkColorSwatch {
outline-color: rgba(255, 255, 255, 0.5); }
GtkColorSwatch.color-light:backdrop {
color: rgba(0, 0, 0, 0.3); }
GtkColorSwatch.overlay {
GtkColorSwatch.overlay, GtkColorSwatch.overlay:selected {
border: 1px solid #1c1f1f; }
GtkColorSwatch.overlay:hover {
GtkColorSwatch.overlay:hover, GtkColorSwatch.overlay:selected:hover {
border-color: black; }
GtkColorSwatch#add-color-button {
border-style: solid;
@ -4427,10 +4433,6 @@ GtkColorSwatch {
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0);
text-shadow: none;
icon-shadow: none; }
:selected GtkColorSwatch {
box-shadow: none; }
:selected GtkColorSwatch.overlay {
border-color: #ffffff; }
/********
* Misc *

View File

@ -4515,6 +4515,12 @@ GtkInfoBar {
*****************/
GtkColorSwatch {
box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px white; }
:selected GtkColorSwatch {
box-shadow: none; }
:selected GtkColorSwatch.overlay, :selected GtkColorSwatch.overlay:hover {
border-color: #ffffff; }
GtkColorSwatch:selected {
box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px white; }
GtkColorSwatch.top {
border-top-left-radius: 5px;
border-top-right-radius: 5px; }
@ -4529,7 +4535,7 @@ GtkColorSwatch {
border-bottom-right-radius: 5px; }
GtkColorSwatch:only-child, GtkColorSwatch:only-child .overlay {
border-radius: 5px; }
GtkColorSwatch:hover {
GtkColorSwatch:hover, GtkColorSwatch:hover:selected {
background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 50%);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), inset 0 -1px rgba(0, 0, 0, 0.1); }
GtkColorSwatch:backdrop {
@ -4552,9 +4558,9 @@ GtkColorSwatch {
outline-color: rgba(255, 255, 255, 0.5); }
GtkColorSwatch.color-light:backdrop {
color: rgba(0, 0, 0, 0.3); }
GtkColorSwatch.overlay {
GtkColorSwatch.overlay, GtkColorSwatch.overlay:selected {
border: 1px solid rgba(0, 0, 0, 0.3); }
GtkColorSwatch.overlay:hover {
GtkColorSwatch.overlay:hover, GtkColorSwatch.overlay:selected:hover {
border-color: rgba(0, 0, 0, 0.5); }
GtkColorSwatch#add-color-button {
border-style: solid;
@ -4588,10 +4594,6 @@ GtkColorSwatch {
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
text-shadow: none;
icon-shadow: none; }
:selected GtkColorSwatch {
box-shadow: none; }
:selected GtkColorSwatch.overlay {
border-color: #ffffff; }
/********
* Misc *