Adwaita: undershoot simplification and tweaks

This commit is contained in:
Lapo Calamandrei 2015-01-29 10:49:59 +01:00
parent 99b17488dd
commit c6eb926e4a
4 changed files with 31 additions and 53 deletions

View File

@ -3298,8 +3298,4 @@ GtkVolumeButton.button { padding: 8px; }
&.right {
@include undershoot(right);
}
&.sidebar {
background-color: transparent; // otherwise it get inherited
}
}

View File

@ -589,12 +589,11 @@
// top, bottom, right, left
//
$_undershoot_color: transparentize($fg_color, 0.6);
$_undershoot_base: transparentize($base_color, 0.5);
$_undershoot_color_dark: transparentize(black, 0.8);
$_undershoot_color_light: transparentize(white, 0.8);
$_gradient_dir: left;
$_dash_bg_size: 10px 1px;
$_base_bg_size: 10px 1px;
$_gradient_repeat: repeat-x;
$_bg_pos: center $p;
@ -603,22 +602,17 @@
@if ($p == left) or ($p == right) {
$_gradient_dir: top;
$_dash_bg_size: 1px 10px;
$_base_bg_size: 1px 10px;
$_gradient_repeat: repeat-y;
$_bg_pos: $p center;
}
background-image: linear-gradient(to $_gradient_dir, // this is the dash
$_undershoot_color 50%,
transparentize($_undershoot_color, 1) 50%),
linear-gradient(to $_gradient_dir, // this is the dash base
$_undershoot_base 50%,
transparentize($_undershoot_base, 1) 50%);
background-image: linear-gradient(to $_gradient_dir, // this is the dashed line
$_undershoot_color_light 50%,
$_undershoot_color_dark 50%);
border-#{$p}: 1px solid transparent;
padding-#{$p}: 1px;
background-size: $_dash_bg_size, $_base_bg_size;
background-size: $_dash_bg_size;
background-repeat: $_gradient_repeat;
background-origin: content-box, padding-box;
background-origin: content-box;
background-position: $_bg_pos;
}

View File

@ -4415,42 +4415,36 @@ GtkVolumeButton.button, .header-bar GtkVolumeButton.button.titlebutton,
.undershoot.top {
background-color: transparent;
background-image: linear-gradient(to left, rgba(238, 238, 236, 0.4) 50%, rgba(238, 238, 236, 0) 50%), linear-gradient(to left, rgba(41, 41, 41, 0.5) 50%, rgba(41, 41, 41, 0) 50%);
border-top: 1px solid transparent;
background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
padding-top: 1px;
background-size: 10px 1px, 10px 1px;
background-size: 10px 1px;
background-repeat: repeat-x;
background-origin: content-box, padding-box;
background-origin: content-box;
background-position: center top; }
.undershoot.bottom {
background-color: transparent;
background-image: linear-gradient(to left, rgba(238, 238, 236, 0.4) 50%, rgba(238, 238, 236, 0) 50%), linear-gradient(to left, rgba(41, 41, 41, 0.5) 50%, rgba(41, 41, 41, 0) 50%);
border-bottom: 1px solid transparent;
background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
padding-bottom: 1px;
background-size: 10px 1px, 10px 1px;
background-size: 10px 1px;
background-repeat: repeat-x;
background-origin: content-box, padding-box;
background-origin: content-box;
background-position: center bottom; }
.undershoot.left {
background-color: transparent;
background-image: linear-gradient(to top, rgba(238, 238, 236, 0.4) 50%, rgba(238, 238, 236, 0) 50%), linear-gradient(to top, rgba(41, 41, 41, 0.5) 50%, rgba(41, 41, 41, 0) 50%);
border-left: 1px solid transparent;
background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
padding-left: 1px;
background-size: 1px 10px, 1px 10px;
background-size: 1px 10px;
background-repeat: repeat-y;
background-origin: content-box, padding-box;
background-origin: content-box;
background-position: left center; }
.undershoot.right {
background-color: transparent;
background-image: linear-gradient(to top, rgba(238, 238, 236, 0.4) 50%, rgba(238, 238, 236, 0) 50%), linear-gradient(to top, rgba(41, 41, 41, 0.5) 50%, rgba(41, 41, 41, 0) 50%);
border-right: 1px solid transparent;
background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
padding-right: 1px;
background-size: 1px 10px, 1px 10px;
background-size: 1px 10px;
background-repeat: repeat-y;
background-origin: content-box, padding-box;
background-origin: content-box;
background-position: right center; }
.undershoot.sidebar {
background-color: transparent; }
/* GTK NAMED COLORS
----------------

View File

@ -4588,42 +4588,36 @@ GtkVolumeButton.button, .header-bar GtkVolumeButton.button.titlebutton,
.undershoot.top {
background-color: transparent;
background-image: linear-gradient(to left, rgba(46, 52, 54, 0.4) 50%, rgba(46, 52, 54, 0) 50%), linear-gradient(to left, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%);
border-top: 1px solid transparent;
background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
padding-top: 1px;
background-size: 10px 1px, 10px 1px;
background-size: 10px 1px;
background-repeat: repeat-x;
background-origin: content-box, padding-box;
background-origin: content-box;
background-position: center top; }
.undershoot.bottom {
background-color: transparent;
background-image: linear-gradient(to left, rgba(46, 52, 54, 0.4) 50%, rgba(46, 52, 54, 0) 50%), linear-gradient(to left, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%);
border-bottom: 1px solid transparent;
background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
padding-bottom: 1px;
background-size: 10px 1px, 10px 1px;
background-size: 10px 1px;
background-repeat: repeat-x;
background-origin: content-box, padding-box;
background-origin: content-box;
background-position: center bottom; }
.undershoot.left {
background-color: transparent;
background-image: linear-gradient(to top, rgba(46, 52, 54, 0.4) 50%, rgba(46, 52, 54, 0) 50%), linear-gradient(to top, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%);
border-left: 1px solid transparent;
background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
padding-left: 1px;
background-size: 1px 10px, 1px 10px;
background-size: 1px 10px;
background-repeat: repeat-y;
background-origin: content-box, padding-box;
background-origin: content-box;
background-position: left center; }
.undershoot.right {
background-color: transparent;
background-image: linear-gradient(to top, rgba(46, 52, 54, 0.4) 50%, rgba(46, 52, 54, 0) 50%), linear-gradient(to top, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%);
border-right: 1px solid transparent;
background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
padding-right: 1px;
background-size: 1px 10px, 1px 10px;
background-size: 1px 10px;
background-repeat: repeat-y;
background-origin: content-box, padding-box;
background-origin: content-box;
background-position: right center; }
.undershoot.sidebar {
background-color: transparent; }
/* GTK NAMED COLORS
----------------