Adwaita: better switch on selected list-rows

This commit is contained in:
Lapo Calamandrei 2014-09-06 17:02:20 +02:00
parent e5eb59a2f8
commit c6f5ad8855
3 changed files with 45 additions and 33 deletions

View File

@ -1670,6 +1670,7 @@ GtkSwitch {
// similar to the .scale
border: 1px solid $borders_color;
border-radius: 3px;
color: $fg_color;
background-image: linear-gradient(to bottom,
mix($bg_color,$borders_color,60%));
text-shadow: 0 1px transparentize(black, 0.9);
@ -1678,7 +1679,6 @@ GtkSwitch {
color: white;
border-color: $selected_borders_color;
box-shadow: _widget_edge();
//text-shadow: 0 1px transparentize($selected_borders_color,0.5);
text-shadow: 0 1px transparentize($selected_borders_color,0.5),
0 0 2px transparentize(white,0.4);
}
@ -1711,12 +1711,7 @@ GtkSwitch {
}
}
}
.list-row:selected & {
box-shadow: 0 0 0 1px $selected_fg_color;
&:backdrop { box-shadow: 0 0 0 1px $backdrop_base_color; }
}
&.slider,
.list-row:selected &.slider {
&.slider {
border: 1px solid;
border-radius: 3px;
@include button(normal);
@ -1746,6 +1741,18 @@ GtkSwitch {
}
}
}
.list-row:selected & {
@if $variant == 'light' {
box-shadow: none;
border-color: $selected_borders_color;
&:backdrop { border-color: $selected_borders_color; }
&.slider:dir(rtl) { border-left-color: $borders_color; }
&.slider:dir(ltr) { border-right-color: $borders_color; }
&.slider,
&.slider:active { border-color: $selected_borders_color; }
}
}
}
/*************************

View File

@ -2305,6 +2305,7 @@ GtkSwitch {
GtkSwitch.trough {
border: 1px solid #1c1f1f;
border-radius: 3px;
color: #eeeeec;
background-image: linear-gradient(to bottom, #2d3232);
text-shadow: 0 1px rgba(0, 0, 0, 0.1); }
GtkSwitch.trough:active {
@ -2335,11 +2336,7 @@ GtkSwitch {
border-color: #1e2222;
background-image: none;
background-color: #323636; }
.list-row:selected GtkSwitch {
box-shadow: 0 0 0 1px #ffffff; }
.list-row:selected GtkSwitch:backdrop {
box-shadow: 0 0 0 1px #2c2c2c; }
GtkSwitch.slider, .list-row:selected GtkSwitch.slider {
GtkSwitch.slider {
border: 1px solid;
border-radius: 3px;
color: #eeeeec;
@ -2350,7 +2347,7 @@ GtkSwitch {
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 #2a2f2f; }
GtkSwitch.slider:hover, .list-row:selected GtkSwitch.slider:hover {
GtkSwitch.slider:hover {
color: #eeeeec;
outline-color: rgba(238, 238, 236, 0.3);
border-color: #1c1f1f;
@ -2359,18 +2356,18 @@ GtkSwitch {
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 #2a2f2f; }
GtkSwitch.slider:active, .list-row:selected GtkSwitch.slider:active {
GtkSwitch.slider:active {
border: 1px solid #0f2b48; }
GtkSwitch.slider:insensitive, .list-row:selected GtkSwitch.slider:insensitive {
GtkSwitch.slider:insensitive {
color: #939695;
border-color: #1c1f1f;
background-image: linear-gradient(to bottom, #323636);
text-shadow: none;
icon-shadow: none;
box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
GtkSwitch.slider:insensitive > GtkLabel, .list-row:selected GtkSwitch.slider:insensitive > GtkLabel {
GtkSwitch.slider:insensitive > GtkLabel {
color: inherit; }
GtkSwitch.slider:backdrop, .list-row:selected GtkSwitch.slider:backdrop {
GtkSwitch.slider:backdrop {
color: #c9cbc9;
border-color: #1e2222;
background-image: linear-gradient(to bottom, #393f3f);
@ -2378,9 +2375,9 @@ GtkSwitch {
icon-shadow: none;
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0);
box-shadow: none; }
GtkSwitch.slider:backdrop:active, .list-row:selected GtkSwitch.slider:backdrop:active {
GtkSwitch.slider:backdrop:active {
border-color: #0f2b48; }
GtkSwitch.slider:backdrop:insensitive, .list-row:selected GtkSwitch.slider:backdrop:insensitive {
GtkSwitch.slider:backdrop:insensitive {
color: #5d6767;
border-color: #1e2222;
background-image: linear-gradient(to bottom, #323636);
@ -2388,7 +2385,7 @@ GtkSwitch {
icon-shadow: none;
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0);
box-shadow: none; }
GtkSwitch.slider:backdrop:insensitive > GtkLabel, .list-row:selected GtkSwitch.slider:backdrop:insensitive > GtkLabel {
GtkSwitch.slider:backdrop:insensitive > GtkLabel {
color: inherit; }
/*************************

View File

@ -2299,6 +2299,7 @@ GtkSwitch {
GtkSwitch.trough {
border: 1px solid #a1a1a1;
border-radius: 3px;
color: #2e3436;
background-image: linear-gradient(to bottom, #cecece);
text-shadow: 0 1px rgba(0, 0, 0, 0.1); }
GtkSwitch.trough:active {
@ -2330,11 +2331,7 @@ GtkSwitch {
border-color: #a8a8a8;
background-image: none;
background-color: #f4f4f4; }
.list-row:selected GtkSwitch {
box-shadow: 0 0 0 1px #ffffff; }
.list-row:selected GtkSwitch:backdrop {
box-shadow: 0 0 0 1px #fcfcfc; }
GtkSwitch.slider, .list-row:selected GtkSwitch.slider {
GtkSwitch.slider {
border: 1px solid;
border-radius: 3px;
color: #2e3436;
@ -2345,7 +2342,7 @@ GtkSwitch {
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; }
GtkSwitch.slider:hover, .list-row:selected GtkSwitch.slider:hover {
GtkSwitch.slider:hover {
color: #2e3436;
outline-color: rgba(46, 52, 54, 0.3);
border-color: #a1a1a1;
@ -2354,18 +2351,18 @@ GtkSwitch {
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; }
GtkSwitch.slider:active, .list-row:selected GtkSwitch.slider:active {
GtkSwitch.slider:active {
border: 1px solid #184472; }
GtkSwitch.slider:insensitive, .list-row:selected GtkSwitch.slider:insensitive {
GtkSwitch.slider:insensitive {
color: #8d9091;
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); }
GtkSwitch.slider:insensitive > GtkLabel, .list-row:selected GtkSwitch.slider:insensitive > GtkLabel {
GtkSwitch.slider:insensitive > GtkLabel {
color: inherit; }
GtkSwitch.slider:backdrop, .list-row:selected GtkSwitch.slider:backdrop {
GtkSwitch.slider:backdrop {
color: #54595a;
border-color: #a8a8a8;
background-image: linear-gradient(to bottom, #ededed);
@ -2373,9 +2370,9 @@ GtkSwitch {
icon-shadow: none;
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
box-shadow: none; }
GtkSwitch.slider:backdrop:active, .list-row:selected GtkSwitch.slider:backdrop:active {
GtkSwitch.slider:backdrop:active {
border-color: #4a90d9; }
GtkSwitch.slider:backdrop:insensitive, .list-row:selected GtkSwitch.slider:backdrop:insensitive {
GtkSwitch.slider:backdrop:insensitive {
color: #c7c7c7;
border-color: #a8a8a8;
background-image: linear-gradient(to bottom, #f4f4f4);
@ -2383,8 +2380,19 @@ GtkSwitch {
icon-shadow: none;
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
box-shadow: none; }
GtkSwitch.slider:backdrop:insensitive > GtkLabel, .list-row:selected GtkSwitch.slider:backdrop:insensitive > GtkLabel {
GtkSwitch.slider:backdrop:insensitive > GtkLabel {
color: inherit; }
.list-row:selected GtkSwitch {
box-shadow: none;
border-color: #184472; }
.list-row:selected GtkSwitch:backdrop {
border-color: #184472; }
.list-row:selected GtkSwitch.slider:dir(rtl) {
border-left-color: #a1a1a1; }
.list-row:selected GtkSwitch.slider:dir(ltr) {
border-right-color: #a1a1a1; }
.list-row:selected GtkSwitch.slider, .list-row:selected GtkSwitch.slider:active {
border-color: #184472; }
/*************************
* Check and Radio items *