Adwaita: flatten entries and similar widgets

This commit is contained in:
Lapo Calamandrei 2016-04-16 13:35:48 +02:00
parent 2184c910eb
commit b744c07b44
4 changed files with 37 additions and 54 deletions

View File

@ -294,7 +294,7 @@ entry {
&:focus, & {
min-height: 0;
padding: 2px;
background-image: none;
background-color: transparent;
border-color: transparent;
border-radius: 0;
}
@ -387,19 +387,15 @@ entry {
&:not(:disabled) + entry:not(:disabled),
&:not(:disabled) + %entry:not(:disabled) {
border-top-color: mix($borders_color, $base_color, 30%);
background-image: linear-gradient(to bottom, $base_color);
&:backdrop {
border-top-color: mix($backdrop_borders_color, $backdrop_base_color, 30%);
background-image: linear-gradient(to bottom, $backdrop_base_color);
}
&:backdrop { border-top-color: mix($backdrop_borders_color, $backdrop_base_color, 30%); }
}
// brighter border between linked insensitive entries
&:disabled + %entry:disabled,
&:disabled + entry:disabled { border-top-color: mix($borders_color, $base_color, 30%); }
// color back the top border of a linked focused entry following another entry and add back the focus shadow.
// color back the top border of a linked focused entry following another entry.
// :not(:only-child) is a specificity bump hack.
+ %entry:focus:not(:only-child),
+ entry:focus:not(:only-child) { border-top-color: entry_focus_border(); }

View File

@ -29,15 +29,6 @@
@return inset 0 0 0 1px $fc;
}
@function entry_gradient($c) {
@if $variant=='light' { @return linear-gradient(to bottom, mix($borders_color, $c, 45%),
mix($borders_color, $c, 3%) 2px,
$c 90%); }
@else { @return linear-gradient(to bottom, mix($borders_color, $c, 95%),
mix($borders_color, $c, 40%) 3px,
$c 90%); }
}
@mixin entry($t, $fc:$selected_bg_color, $edge: none) {
//
// Entries drawing function
@ -57,7 +48,7 @@
@if $t==normal {
color: $text_color;
border-color: $borders_color;
background-image: entry_gradient($base_color);
background-color: $base_color;
@include _shadows(entry_focus_shadow(transparentize($fc, 1)), $_entry_edge);
// for the transition to work the number of shadows in different states needs to match, hence the transparent shadow here.
}
@ -68,25 +59,25 @@
@if $t==insensitive {
color: $insensitive_fg_color;
border-color: $borders_color;
background-image: linear-gradient(to bottom, $insensitive_bg_color);
background-color: $insensitive_bg_color;
box-shadow: $_entry_edge;
}
@if $t==backdrop {
color: $backdrop_text_color;
border-color: $backdrop_borders_color;
background-image: linear-gradient(to bottom, $backdrop_base_color);
background-color: $backdrop_base_color;
box-shadow: $_blank_edge;
}
@if $t==backdrop-insensitive {
color: $backdrop_insensitive_color;
border-color: $backdrop_borders_color;
background-image: linear-gradient(to bottom, $insensitive_bg_color);
background-color: $insensitive_bg_color;
box-shadow: $_blank_edge;
}
@if $t==osd {
color: $osd_text_color;
border-color: $osd_borders_color;
background-image: linear-gradient(to bottom, transparentize(opacify($osd_borders_color, 1), 0.5));
background-color: transparentize(opacify($osd_borders_color, 1), 0.5);
background-clip: padding-box;
box-shadow: none;
text-shadow: 0 1px black;
@ -95,7 +86,7 @@
@if $t==osd-focus {
color: $osd_text_color;
border-color: $selected_bg_color;
background-image: linear-gradient(to bottom, transparentize(opacify($osd_borders_color, 1), 0.5));
background-color: transparentize(opacify($osd_borders_color, 1), 0.5);
background-clip: padding-box;
box-shadow: entry_focus_shadow($fc);
text-shadow: 0 1px black;
@ -104,7 +95,7 @@
@if $t==osd-insensitive {
color: $osd_insensitive_fg_color;
border-color: $osd_borders_color;
background-image: linear-gradient(to bottom, $osd_insensitive_bg_color);
background-color: $osd_insensitive_bg_color;
background-clip: padding-box;
box-shadow: none;
text-shadow: none;
@ -113,7 +104,7 @@
@if $t==osd-backdrop {
color: $osd_text_color;
border-color: $osd_borders_color;
background-image: linear-gradient(to bottom, transparentize(opacify($osd_borders_color, 1), 0.5));
background-color: transparentize(opacify($osd_borders_color, 1), 0.5);
background-clip: padding-box;
box-shadow: none;
text-shadow: none;

View File

@ -182,7 +182,7 @@ entry {
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
color: white;
border-color: #1c1f1f;
background-image: linear-gradient(to bottom, #1d2020, #242525 3px, #292929 90%);
background-color: #292929;
box-shadow: inset 0 0 0 1px rgba(33, 93, 156, 0); }
spinbutton:not(.vertical) image.left,
entry image.left {
@ -219,7 +219,7 @@ entry {
entry.flat {
min-height: 0;
padding: 2px;
background-image: none;
background-color: transparent;
border-color: transparent;
border-radius: 0; }
spinbutton:focus:not(.vertical),
@ -230,20 +230,20 @@ entry {
entry:disabled {
color: #949796;
border-color: #1c1f1f;
background-image: linear-gradient(to bottom, #333636);
background-color: #333636;
box-shadow: none; }
spinbutton:backdrop:not(.vertical),
entry:backdrop {
color: #d5d5d5;
border-color: #1f2222;
background-image: linear-gradient(to bottom, #2c2c2c);
background-color: #2c2c2c;
box-shadow: none;
transition: 200ms ease-out; }
spinbutton:backdrop:disabled:not(.vertical),
entry:backdrop:disabled {
color: #5d6767;
border-color: #1f2222;
background-image: linear-gradient(to bottom, #333636);
background-color: #333636;
box-shadow: none; }
spinbutton.error:not(.vertical),
entry.error {
@ -290,7 +290,7 @@ entry {
entry {
color: white;
border-color: rgba(0, 0, 0, 0.7);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5));
background-color: rgba(0, 0, 0, 0.5);
background-clip: padding-box;
box-shadow: none;
text-shadow: 0 1px black;
@ -299,7 +299,7 @@ entry {
entry:focus {
color: white;
border-color: #215d9c;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5));
background-color: rgba(0, 0, 0, 0.5);
background-clip: padding-box;
box-shadow: inset 0 0 0 1px #215d9c;
text-shadow: 0 1px black;
@ -308,7 +308,7 @@ entry {
entry:backdrop {
color: white;
border-color: rgba(0, 0, 0, 0.7);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5));
background-color: rgba(0, 0, 0, 0.5);
background-clip: padding-box;
box-shadow: none;
text-shadow: none;
@ -317,7 +317,7 @@ entry {
entry:disabled {
color: #878a89;
border-color: rgba(0, 0, 0, 0.7);
background-image: linear-gradient(to bottom, rgba(53, 57, 58, 0.5));
background-color: rgba(53, 57, 58, 0.5);
background-clip: padding-box;
box-shadow: none;
text-shadow: none;
@ -354,13 +354,11 @@ entry {
.linked.vertical > spinbutton:not(:disabled):not(.vertical) + entry:not(:disabled), .linked.vertical > spinbutton:not(:disabled):not(.vertical) + spinbutton:not(:disabled):not(.vertical), .linked.vertical >
entry:not(:disabled) + entry:not(:disabled), .linked.vertical >
entry:not(:disabled) + spinbutton:not(:disabled):not(.vertical) {
border-top-color: #252626;
background-image: linear-gradient(to bottom, #292929); }
border-top-color: #252626; }
.linked.vertical > spinbutton:not(:disabled):not(.vertical) + entry:not(:disabled):backdrop, .linked.vertical > spinbutton:not(:disabled):not(.vertical) + spinbutton:not(:disabled):backdrop:not(.vertical), .linked.vertical >
entry:not(:disabled) + entry:not(:disabled):backdrop, .linked.vertical >
entry:not(:disabled) + spinbutton:not(:disabled):backdrop:not(.vertical) {
border-top-color: #282929;
background-image: linear-gradient(to bottom, #2c2c2c); }
border-top-color: #282929; }
.linked.vertical > spinbutton:disabled:not(.vertical) + spinbutton:disabled:not(.vertical), .linked.vertical > spinbutton:disabled:not(.vertical) + entry:disabled, .linked.vertical >
entry:disabled + spinbutton:disabled:not(.vertical), .linked.vertical >
entry:disabled + entry:disabled {
@ -3616,12 +3614,12 @@ levelbar trough {
border-radius: 3px;
color: white;
border-color: #1c1f1f;
background-image: linear-gradient(to bottom, #1d2020, #242525 3px, #292929 90%);
background-color: #292929;
box-shadow: inset 0 0 0 1px rgba(33, 93, 156, 0); }
levelbar trough:backdrop {
color: #d5d5d5;
border-color: #1f2222;
background-image: linear-gradient(to bottom, #2c2c2c);
background-color: #2c2c2c;
box-shadow: none; }
levelbar.horizontal.discrete block {
margin: 0 1px; }

View File

@ -182,7 +182,7 @@ entry {
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
color: black;
border-color: #9d9d99;
background-image: linear-gradient(to bottom, #d3d3d1, #fcfcfc 2px, #ffffff 90%);
background-color: #ffffff;
box-shadow: inset 0 0 0 1px rgba(74, 144, 217, 0); }
spinbutton:not(.vertical) image.left,
entry image.left {
@ -219,7 +219,7 @@ entry {
entry.flat {
min-height: 0;
padding: 2px;
background-image: none;
background-color: transparent;
border-color: transparent;
border-radius: 0; }
spinbutton:focus:not(.vertical),
@ -230,20 +230,20 @@ entry {
entry:disabled {
color: #8b8e8f;
border-color: #9d9d99;
background-image: linear-gradient(to bottom, #f1f1f1);
background-color: #f1f1f1;
box-shadow: none; }
spinbutton:backdrop:not(.vertical),
entry:backdrop {
color: #323232;
border-color: #a5a5a1;
background-image: linear-gradient(to bottom, #fcfcfc);
background-color: #fcfcfc;
box-shadow: none;
transition: 200ms ease-out; }
spinbutton:backdrop:disabled:not(.vertical),
entry:backdrop:disabled {
color: #c3c3c0;
border-color: #a5a5a1;
background-image: linear-gradient(to bottom, #f1f1f1);
background-color: #f1f1f1;
box-shadow: none; }
spinbutton.error:not(.vertical),
entry.error {
@ -290,7 +290,7 @@ entry {
entry {
color: white;
border-color: rgba(0, 0, 0, 0.7);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5));
background-color: rgba(0, 0, 0, 0.5);
background-clip: padding-box;
box-shadow: none;
text-shadow: 0 1px black;
@ -299,7 +299,7 @@ entry {
entry:focus {
color: white;
border-color: #4a90d9;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5));
background-color: rgba(0, 0, 0, 0.5);
background-clip: padding-box;
box-shadow: inset 0 0 0 1px #4a90d9;
text-shadow: 0 1px black;
@ -308,7 +308,7 @@ entry {
entry:backdrop {
color: white;
border-color: rgba(0, 0, 0, 0.7);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5));
background-color: rgba(0, 0, 0, 0.5);
background-clip: padding-box;
box-shadow: none;
text-shadow: none;
@ -317,7 +317,7 @@ entry {
entry:disabled {
color: #878a89;
border-color: rgba(0, 0, 0, 0.7);
background-image: linear-gradient(to bottom, rgba(53, 57, 58, 0.5));
background-color: rgba(53, 57, 58, 0.5);
background-clip: padding-box;
box-shadow: none;
text-shadow: none;
@ -354,13 +354,11 @@ entry {
.linked.vertical > spinbutton:not(:disabled):not(.vertical) + entry:not(:disabled), .linked.vertical > spinbutton:not(:disabled):not(.vertical) + spinbutton:not(:disabled):not(.vertical), .linked.vertical >
entry:not(:disabled) + entry:not(:disabled), .linked.vertical >
entry:not(:disabled) + spinbutton:not(:disabled):not(.vertical) {
border-top-color: #e2e2e0;
background-image: linear-gradient(to bottom, #ffffff); }
border-top-color: #e2e2e0; }
.linked.vertical > spinbutton:not(:disabled):not(.vertical) + entry:not(:disabled):backdrop, .linked.vertical > spinbutton:not(:disabled):not(.vertical) + spinbutton:not(:disabled):backdrop:not(.vertical), .linked.vertical >
entry:not(:disabled) + entry:not(:disabled):backdrop, .linked.vertical >
entry:not(:disabled) + spinbutton:not(:disabled):backdrop:not(.vertical) {
border-top-color: #e2e2e1;
background-image: linear-gradient(to bottom, #fcfcfc); }
border-top-color: #e2e2e1; }
.linked.vertical > spinbutton:disabled:not(.vertical) + spinbutton:disabled:not(.vertical), .linked.vertical > spinbutton:disabled:not(.vertical) + entry:disabled, .linked.vertical >
entry:disabled + spinbutton:disabled:not(.vertical), .linked.vertical >
entry:disabled + entry:disabled {
@ -3645,12 +3643,12 @@ levelbar trough {
border-radius: 3px;
color: black;
border-color: #9d9d99;
background-image: linear-gradient(to bottom, #d3d3d1, #fcfcfc 2px, #ffffff 90%);
background-color: #ffffff;
box-shadow: inset 0 0 0 1px rgba(74, 144, 217, 0); }
levelbar trough:backdrop {
color: #323232;
border-color: #a5a5a1;
background-image: linear-gradient(to bottom, #fcfcfc);
background-color: #fcfcfc;
box-shadow: none; }
levelbar.horizontal.discrete block {
margin: 0 1px; }