Fix scrollbars

pull/224/head
Satyajit Sahoo 2015-05-31 22:26:05 +05:30
parent 0edb0d13e4
commit f30b5ec971
2 changed files with 81 additions and 61 deletions

View File

@ -2,6 +2,8 @@
! Buttons ! Buttons
**********/ **********/
$shadow_strength: .3;
@include exports("button_extends") { @include exports("button_extends") {
%button { %button {
padding: $spacing ($spacing + 2px); padding: $spacing ($spacing + 2px);
@ -73,16 +75,13 @@
} }
@mixin linked_button($bg) { @mixin linked_button($bg) {
$border_strength: if(lightness($bg) > 50, 0, .1);
$shadow_strength: if(lightness($bg) > 50, 0, .1);
@extend %linked_button; @extend %linked_button;
box-shadow: inset -1px 0 border_normal(rgba(0,0,0,.12 + $border_strength)), box-shadow: inset -1px 0 border_normal(rgba(0,0,0,.12)),
0 1px 2px -1px alpha($dark_shadow, .12 + $shadow_strength); 0 1px 2px -1px alpha($dark_shadow, .12 + $shadow_strength);
&:focus, &:hover { &:focus, &:hover {
box-shadow: inset -1px 0 border_focus(rgba(0,0,0,.12 + $border_strength)), box-shadow: inset -1px 0 border_focus(rgba(0,0,0,.12)),
0 1px 2px -1px alpha($dark_shadow, .32 + $shadow_strength); 0 1px 2px -1px alpha($dark_shadow, .32 + $shadow_strength);
} }
@ -90,7 +89,7 @@
&:active:focus, &:active:hover:focus, &:active:focus, &:active:hover:focus,
&:checked, &:checked:hover, &:checked, &:checked:hover,
&:checked:focus, &:checked:hover:focus { &:checked:focus, &:checked:hover:focus {
box-shadow: inset -1px 0 border_active(rgba(0,0,0,.12 + $border_strength)), box-shadow: inset -1px 0 border_active(rgba(0,0,0,.12)),
inset 0 1px alpha($dark_shadow, .07), inset 0 1px alpha($dark_shadow, .07),
inset 0 -1px alpha($dark_shadow, .05); inset 0 -1px alpha($dark_shadow, .05);
} }
@ -120,28 +119,26 @@
} }
@mixin button($bg, $fg) { @mixin button($bg, $fg) {
$border_strength: if(lightness($bg) > 50, 0, .1);
$shadow_strength: if(lightness($bg) > 50, 0, .1);
@extend %button; @extend %button;
@include linear-gradient(shade($bg, 1.2)); @include linear-gradient(shade($bg, 1.3));
@include border(rgba(0,0,0,.12 + $border_strength)); @include border(rgba(0,0,0,.12));
color: $fg; color: $fg;
box-shadow: 0 1px 2px -1px alpha($dark_shadow, .12 + $shadow_strength); box-shadow: 0 1px 2px -1px alpha($dark_shadow, .12 + $shadow_strength);
border-color: alpha($bg, 0);
&.flat { &.flat {
border-color: transparent; border-color: alpha($bg, 0);
background-color: transparent; background-color: alpha($bg, 0);
background-image: none; background-image: none;
box-shadow: none; box-shadow: none;
} }
&, &.flat { &, &.flat {
&:focus, &:hover { &:focus, &:hover {
@include linear-gradient(shade($bg, 1.2)); @include linear-gradient(shade($bg, 1.4));
@include border(rgba(0,0,0,.2 + $border_strength));
border-color: alpha($bg, 0);
box-shadow: 0 1px 2px -1px alpha($dark_shadow, .32 + $shadow_strength); box-shadow: 0 1px 2px -1px alpha($dark_shadow, .32 + $shadow_strength);
} }

View File

@ -6,7 +6,7 @@
* { * {
-GtkRange-slider-width: 8; -GtkRange-slider-width: 8;
-GtkRange-stepper-spacing: 0; -GtkRange-stepper-spacing: 0;
-GtkRange-trough-border: $spacing; -GtkRange-trough-border: 2;
-GtkRange-trough-under-steppers: 1; -GtkRange-trough-under-steppers: 1;
-GtkScrollbar-has-backward-stepper: false; -GtkScrollbar-has-backward-stepper: false;
-GtkScrollbar-has-forward-stepper: false; -GtkScrollbar-has-forward-stepper: false;
@ -16,7 +16,7 @@
} }
.scrollbar { .scrollbar {
border: none; border: 0;
padding: 0; padding: 0;
&.button { &.button {
@ -25,32 +25,55 @@
border-radius: 0; border-radius: 0;
background-color: transparent; background-color: transparent;
background-image: none; background-image: none;
color: shade($bg_color, 0.6); color: alpha($fg_color, 0.5);
} }
} }
&.slider, &.slider.vertical { &.slider, &.slider.vertical {
border: none; border: 0;
border-radius: $roundness; border-radius: $roundness;
background-color: mix($bg_color, $fg_color, 0.21); background-color: shade($bg_color, 0.5);
&:hover { background-color: $selected_bg_color; } &:hover { background-color: shade($bg_color, 0.3); }
&:active { background-color: shade($selected_bg_color, .9); } &:active { background-color: $selected_bg_color; }
&.fine-tune:prelight:active { border: 2px solid transparent; } &.fine-tune:prelight:active { border: 2px solid transparent; }
} }
// overlay scrolling indicator
&.overlay-indicator {
&:not(.dragging):not(.hovering) {
opacity: 0.5;
-GtkRange-slider-width: 4px;
.slider {
margin: 0;
background-color: $fg_color;
background-clip: padding-box;
}
.trough {
border-style: none;
background-color: transparent;
}
}
&.dragging, &.hovering { opacity: 0.7; }
}
} }
.scrollbars-junction, .scrollbars-junction,
.scrollbars-junction.frame,
.scrollbar.trough { .scrollbar.trough {
border: none; border: 0;
border-radius: 0; border-radius: 0;
background-color: $bg_color; background-color: $bg_color;
background-image: none; background-image: none;
} }
/* overlay scrollbar */ // ubuntu overlay scrollbars
OsThumb, OsScrollbar { OsThumb, OsScrollbar {
color: shade($bg_color, 0.7); color: shade($bg_color, 0.7);