[Gtk-3.22] Redesign-Buttons (Phase1)
Darker color, lighter button color for hover & focus state. Disabled shadows.pull/614/merge
parent
2363312450
commit
9e4844a70b
|
@ -3,7 +3,7 @@
|
|||
@import "functions";
|
||||
|
||||
// default color scheme
|
||||
$bg_color: if($variant == "dark", #444, #eee);
|
||||
$bg_color: if($variant == "dark", #444, #dedede);
|
||||
$fg_color: if($variant == "dark", #ddd, #555);
|
||||
$base_color: if($variant == "dark", #333, #fff);
|
||||
$text_color: if($variant == "dark", #eee, #333);
|
||||
|
|
|
@ -273,14 +273,19 @@
|
|||
$border_strength: if(lightness($bg) > 50, 0, .1);
|
||||
$shadow_strength: if(lightness($bg) > 50, 0, .1);
|
||||
|
||||
$button_bg: if(hue($bg) == 0deg, shade($bg, 1.08), $bg);
|
||||
$button_bg: if(lightness($bg) > 50, shade($bg, 1.08), shade($bg, 1.2));
|
||||
|
||||
@extend %button;
|
||||
@include linear-gradient($button_bg);
|
||||
border-color: border_normal($button_bg);
|
||||
|
||||
@if (lightness($button_bg) > 50) {
|
||||
border-color: border_normal($button_bg);
|
||||
@include linear-gradient($button_bg, 1.08);
|
||||
} @else {
|
||||
@include linear-gradient($button_bg);
|
||||
@include border(rgba(0, 0, 0, .12 + $border_strength));
|
||||
}
|
||||
|
||||
color: $fg;
|
||||
//box-shadow: 0 1px 2px -1px alpha($dark_shadow, .12 + $shadow_strength); //making it flatter
|
||||
|
||||
|
||||
&.flat {
|
||||
border-color: alpha($button_bg, 0);
|
||||
|
@ -291,24 +296,24 @@
|
|||
|
||||
&, &.flat {
|
||||
&:focus, &:hover {
|
||||
@include linear-gradient(shade($button_bg, 1.2));
|
||||
@include border(rgba(0, 0, 0, .25 + $border_strength));
|
||||
@if (lightness($button_bg) > 50) {
|
||||
border-color: border_active($button_bg);
|
||||
@include linear-gradient(shade($button_bg, 1.10));
|
||||
} @else {
|
||||
@include linear-gradient(shade($button_bg, 1.2));
|
||||
@include border(rgba(0, 0, 0, .2 + $border_strength));
|
||||
}
|
||||
|
||||
box-shadow: 0 1px 2px -1px alpha($dark_shadow, .32 + $shadow_strength);
|
||||
|
||||
}
|
||||
|
||||
|
||||
&:checked, &:active {
|
||||
@include linear-gradient(shade($button_bg, .7), to top);
|
||||
|
||||
color: $white;
|
||||
box-shadow: inset 1px 0 alpha($dark_shadow, .06),
|
||||
inset 0 1px alpha($dark_shadow, .07),
|
||||
inset -1px 0 alpha($dark_shadow, .06),
|
||||
inset 0 -1px alpha($dark_shadow, .05);
|
||||
|
||||
&:focus, &:hover {
|
||||
@include linear-gradient(shade($button_bg, .65), to top);
|
||||
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -50,11 +50,12 @@
|
|||
}
|
||||
|
||||
@mixin inline-toolbar($bg, $fg) {
|
||||
background-image: none;
|
||||
padding: 1px;
|
||||
border-width: 0 1px 1px;
|
||||
border-style: solid;
|
||||
border-color: $borders_color;
|
||||
background-color: mix($borders_color, $bg_color, .7);
|
||||
background-color: shade($bg, 1.08);
|
||||
background-image: none;
|
||||
|
||||
&:backdrop {
|
||||
border-color: $backdrop_borders_color;
|
||||
|
|
Loading…
Reference in New Issue