AuroraMiddleware/gtk
1
0
Fork 1
mirror of https://gitlab.gnome.org/GNOME/gtk.git synced 2024-11-14 12:41:07 +00:00
Code Issues Projects Releases Wiki Activity

HighContrast: Fix undershoot in sidebars

Browse Source 
This was just not implemented, and the sidebars solid white
background color was inherited by undershoot rectangle.

https://bugzilla.gnome.org/show_bug.cgi?id=753391
This commit is contained in:
Matthias Clasen 2015-08-08 22:27:29 +02:00
parent d6f51ef7b2
commit b54fab2b89
3 changed files with 91 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
gtk/theme/HighContrast/_common.scss
View File

@ -2601,3 +2601,22 @@ GtkColorSwatch {
} }
} }
// Overflow indication, works similarly to the overshoot, the size if fixed tho.
.undershoot {
&.top {
@include undershoot(top);
}
&.bottom {
@include undershoot(bottom);
}
&.left {
@include undershoot(left);
}
&.right {
@include undershoot(right);
}
}

39
gtk/theme/HighContrast/_drawing.scss
View File

@ -337,3 +337,42 @@
border: none; // border: none; //
box-shadow: none; // box-shadow: none; //
} }
@mixin undershoot($p) {
//
// undershoot
//
// $p: position
//
// possible $p values:
// top, bottom, right, left
//
$_undershoot_color_dark: transparentize(black, 0.8);
$_undershoot_color_light: transparentize(white, 0.8);
$_gradient_dir: left;
$_dash_bg_size: 10px 1px;
$_gradient_repeat: repeat-x;
$_bg_pos: center $p;
background-color: transparent; // shouldn't be needed, but better to be sure;
@if ($p == left) or ($p == right) {
$_gradient_dir: top;
$_dash_bg_size: 1px 10px;
$_gradient_repeat: repeat-y;
$_bg_pos: $p center;
}
background-image: linear-gradient(to $_gradient_dir, // this is the dashed line
$_undershoot_color_light 50%,
$_undershoot_color_dark 50%);
padding-#{$p}: 1px;
background-size: $_dash_bg_size;
background-repeat: $_gradient_repeat;
background-origin: content-box;
background-position: $_bg_pos;
}

33
gtk/theme/HighContrast/gtk.css
View File

@ -2959,3 +2959,36 @@ GtkColorSwatch {
.touch-selection .radio:backdrop:checked { .touch-selection .radio:backdrop:checked {
icon-shadow: none; icon-shadow: none;
color: #fff; } color: #fff; }
.undershoot.top {
background-color: 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;
background-repeat: repeat-x;
background-origin: content-box;
background-position: center top; }
.undershoot.bottom {
background-color: 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;
background-repeat: repeat-x;
background-origin: content-box;
background-position: center bottom; }
.undershoot.left {
background-color: 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;
background-repeat: repeat-y;
background-origin: content-box;
background-position: left center; }
.undershoot.right {
background-color: 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;
background-repeat: repeat-y;
background-origin: content-box;
background-position: right center; }