AuroraMiddleware/gtk2
1
0
Fork 0
forked from AuroraMiddleware/gtk
Code Issues Pull Requests Projects Releases Wiki Activity

Adwaita: overshoot styling

Browse Source
This commit is contained in:
Lapo Calamandrei 2014-11-13 18:31:18 +01:00
parent 8a5092d1d9
commit 360b516ef4
4 changed files with 151 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
gtk/resources/theme/Adwaita/_common.scss
View File

@ -122,24 +122,20 @@ $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
// This is used by GtkScrolledWindow, when content is touch-dragged past boundaries.
.overshoot {
&.top {
background: linear-gradient(to top, transparentize($selected_bg_color,1), transparentize($selected_bg_color,0.8));
background-size: auto 100px;
background-position: center 100%;
@include overshoot(top);
&:backdrop { @include overshoot(top, backdrop); }
}
&.bottom {
background: linear-gradient(to bottom, transparentize($selected_bg_color,1), transparentize($selected_bg_color,0.8));
background-size: auto 100px;
background-position: center 0%;
@include overshoot(bottom);
&:backdrop { @include overshoot(bottom, backdrop); }
}
&.left {
background: linear-gradient(to left, transparentize($selected_bg_color,1), transparentize($selected_bg_color,0.8));
background-size: 100px auto;
background-position: 100% center;
@include overshoot(left);
&:backdrop { @include overshoot(left, backdrop); }
}
&.right {
background: linear-gradient(to right, transparentize($selected_bg_color,1), transparentize($selected_bg_color,0.8));
background-size: 100px auto;
background-position: 0% center;
@include overshoot(right);
&:backdrop { @include overshoot(right, backdrop); }
}
}

71
gtk/resources/theme/Adwaita/_drawing.scss
View File

@ -498,3 +498,74 @@
inset 0 1px $hc; // top highlight
}
@mixin overshoot($p, $t:normal, $c:$borders_color) {
//
// overshoot
//
// $p: position
// $t: type
// $c: base color
//
// possible $p values:
// top, bottom, right, left
//
// possible $t values:
// normal, backdrop
//
$_radial_gradient_length: 4%;
$_linear_gradient_length: 70%;
$_position: center top;
$_linear_gradient_direction: to bottom;
$_radial_gradient_size: 100% $_radial_gradient_length;
$_linear_gradient_size: 100% $_linear_gradient_length;
@if $p==bottom {
$_position: center bottom;
$_linear_gradient_direction: to top;
}
@else if $p==right {
$_position: right center;
$_linear_gradient_direction: to left;
$_radial_gradient_size: $_radial_gradient_length 100%;
$_linear_gradient_size: $_linear_gradient_length 100%;
}
@else if $p==left {
$_position: left center;
$_linear_gradient_direction: to right;
$_radial_gradient_size: $_radial_gradient_length 100%;
$_linear_gradient_size: $_linear_gradient_length 100%;
}
$_color: $c;
@if $t==backdrop {
$_color: if($c==$borders_color, $backdrop_borders_color, $c);
}
$_radial_gradient: -gtk-gradient(radial,
$_position, 0,
$_position, 0.5,
to($_color),
to(transparentize($_color, 1)));
$_linear_gradient: linear-gradient($_linear_gradient_direction, transparentize($_color, 0.85),
transparentize($_color, 1));
@if $t==normal {
background-image: $_radial_gradient, $_linear_gradient;
background-size: $_radial_gradient_size, $_linear_gradient_size;
}
@else if $t==backdrop {
background-image: $_radial_gradient;
background-size: $_radial_gradient_size;
}
background-repeat: no-repeat;
background-position: $_position;
}

48
gtk/resources/theme/Adwaita/gtk-contained-dark.css
View File

@ -74,21 +74,45 @@
background-color: rgba(33, 93, 156, 0.2); }
.overshoot.top {
background: linear-gradient(to top, rgba(33, 93, 156, 0), rgba(33, 93, 156, 0.2));
background-size: auto 100px;
background-position: center 100%; }
background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#1c1f1f), to(rgba(28, 31, 31, 0))), linear-gradient(to bottom, rgba(28, 31, 31, 0.15), rgba(28, 31, 31, 0));
background-size: 100% 4%, 100% 70%;
background-repeat: no-repeat;
background-position: center top; }
.overshoot.top:backdrop {
background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#1e2222), to(rgba(30, 34, 34, 0)));
background-size: 100% 4%;
background-repeat: no-repeat;
background-position: center top; }
.overshoot.bottom {
background: linear-gradient(to bottom, rgba(33, 93, 156, 0), rgba(33, 93, 156, 0.2));
background-size: auto 100px;
background-position: center 0%; }
background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#1c1f1f), to(rgba(28, 31, 31, 0))), linear-gradient(to top, rgba(28, 31, 31, 0.15), rgba(28, 31, 31, 0));
background-size: 100% 4%, 100% 70%;
background-repeat: no-repeat;
background-position: center bottom; }
.overshoot.bottom:backdrop {
background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#1e2222), to(rgba(30, 34, 34, 0)));
background-size: 100% 4%;
background-repeat: no-repeat;
background-position: center bottom; }
.overshoot.left {
background: linear-gradient(to left, rgba(33, 93, 156, 0), rgba(33, 93, 156, 0.2));
background-size: 100px auto;
background-position: 100% center; }
background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#1c1f1f), to(rgba(28, 31, 31, 0))), linear-gradient(to right, rgba(28, 31, 31, 0.15), rgba(28, 31, 31, 0));
background-size: 4% 100%, 70% 100%;
background-repeat: no-repeat;
background-position: left center; }
.overshoot.left:backdrop {
background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#1e2222), to(rgba(30, 34, 34, 0)));
background-size: 4% 100%;
background-repeat: no-repeat;
background-position: left center; }
.overshoot.right {
background: linear-gradient(to right, rgba(33, 93, 156, 0), rgba(33, 93, 156, 0.2));
background-size: 100px auto;
background-position: 0% center; }
background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#1c1f1f), to(rgba(28, 31, 31, 0))), linear-gradient(to left, rgba(28, 31, 31, 0.15), rgba(28, 31, 31, 0));
background-size: 4% 100%, 70% 100%;
background-repeat: no-repeat;
background-position: right center; }
.overshoot.right:backdrop {
background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#1e2222), to(rgba(30, 34, 34, 0)));
background-size: 4% 100%;
background-repeat: no-repeat;
background-position: right center; }
.label.separator, GtkPlacesSidebar.sidebar .view .label.separator {
color: #eeeeec; }

48
gtk/resources/theme/Adwaita/gtk-contained.css
View File

@ -74,21 +74,45 @@
background-color: rgba(74, 144, 217, 0.2); }
.overshoot.top {
background: linear-gradient(to top, rgba(74, 144, 217, 0), rgba(74, 144, 217, 0.2));
background-size: auto 100px;
background-position: center 100%; }
background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#a1a1a1), to(rgba(161, 161, 161, 0))), linear-gradient(to bottom, rgba(161, 161, 161, 0.15), rgba(161, 161, 161, 0));
background-size: 100% 4%, 100% 70%;
background-repeat: no-repeat;
background-position: center top; }
.overshoot.top:backdrop {
background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#a8a8a8), to(rgba(168, 168, 168, 0)));
background-size: 100% 4%;
background-repeat: no-repeat;
background-position: center top; }
.overshoot.bottom {
background: linear-gradient(to bottom, rgba(74, 144, 217, 0), rgba(74, 144, 217, 0.2));
background-size: auto 100px;
background-position: center 0%; }
background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#a1a1a1), to(rgba(161, 161, 161, 0))), linear-gradient(to top, rgba(161, 161, 161, 0.15), rgba(161, 161, 161, 0));
background-size: 100% 4%, 100% 70%;
background-repeat: no-repeat;
background-position: center bottom; }
.overshoot.bottom:backdrop {
background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#a8a8a8), to(rgba(168, 168, 168, 0)));
background-size: 100% 4%;
background-repeat: no-repeat;
background-position: center bottom; }
.overshoot.left {
background: linear-gradient(to left, rgba(74, 144, 217, 0), rgba(74, 144, 217, 0.2));
background-size: 100px auto;
background-position: 100% center; }
background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#a1a1a1), to(rgba(161, 161, 161, 0))), linear-gradient(to right, rgba(161, 161, 161, 0.15), rgba(161, 161, 161, 0));
background-size: 4% 100%, 70% 100%;
background-repeat: no-repeat;
background-position: left center; }
.overshoot.left:backdrop {
background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#a8a8a8), to(rgba(168, 168, 168, 0)));
background-size: 4% 100%;
background-repeat: no-repeat;
background-position: left center; }
.overshoot.right {
background: linear-gradient(to right, rgba(74, 144, 217, 0), rgba(74, 144, 217, 0.2));
background-size: 100px auto;
background-position: 0% center; }
background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#a1a1a1), to(rgba(161, 161, 161, 0))), linear-gradient(to left, rgba(161, 161, 161, 0.15), rgba(161, 161, 161, 0));
background-size: 4% 100%, 70% 100%;
background-repeat: no-repeat;
background-position: right center; }
.overshoot.right:backdrop {
background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#a8a8a8), to(rgba(168, 168, 168, 0)));
background-size: 4% 100%;
background-repeat: no-repeat;
background-position: right center; }
.label.separator, GtkPlacesSidebar.sidebar .view .label.separator {
color: #2e3436; }