[Gtk-3.22][Button-Redesign] Spinbutton: Fixing color and entry border
parent
8670cc05f0
commit
85138a0fff
|
@ -273,12 +273,12 @@
|
||||||
$border_strength: if(lightness($bg) > 50, 0, .1);
|
$border_strength: if(lightness($bg) > 50, 0, .1);
|
||||||
$shadow_strength: if(lightness($bg) > 50, 0, .1);
|
$shadow_strength: if(lightness($bg) > 50, 0, .1);
|
||||||
|
|
||||||
$button_bg: if(lightness($bg) > 50, shade($bg, 1.08), shade($bg, 1.2));
|
$button_bg: if(lightness($bg) > 50, $bg, shade($bg, 1.2));
|
||||||
|
|
||||||
@extend %button;
|
@extend %button;
|
||||||
@if (lightness($button_bg) > 50) {
|
@if (lightness($button_bg) > 50) {
|
||||||
border-color: border_normal($button_bg);
|
border-color: border_normal($button_bg);
|
||||||
@include linear-gradient($button_bg, 1.08);
|
@include linear-gradient(shade($button_bg, 1.08));
|
||||||
} @else {
|
} @else {
|
||||||
@include linear-gradient($button_bg);
|
@include linear-gradient($button_bg);
|
||||||
@include border(rgba(0, 0, 0, .12 + $border_strength));
|
@include border(rgba(0, 0, 0, .12 + $border_strength));
|
||||||
|
@ -298,7 +298,7 @@
|
||||||
&:focus, &:hover {
|
&:focus, &:hover {
|
||||||
@if (lightness($button_bg) > 50) {
|
@if (lightness($button_bg) > 50) {
|
||||||
border-color: border_active($button_bg);
|
border-color: border_active($button_bg);
|
||||||
@include linear-gradient(shade($button_bg, 1.10));
|
@include linear-gradient(shade($button_bg, 1.11));
|
||||||
} @else {
|
} @else {
|
||||||
@include linear-gradient(shade($button_bg, 1.2));
|
@include linear-gradient(shade($button_bg, 1.2));
|
||||||
@include border(rgba(0, 0, 0, .2 + $border_strength));
|
@include border(rgba(0, 0, 0, .2 + $border_strength));
|
||||||
|
@ -417,9 +417,16 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(.vertical) {
|
&:not(.vertical) {
|
||||||
|
@if (lightness($bg_color) > 50) {
|
||||||
|
border: 1px solid border_normal($bg_color);
|
||||||
|
background-color: transparent;
|
||||||
|
background-image: none;
|
||||||
|
box-shadow: inset 1px 0 shade($base_color, .9);
|
||||||
|
} @else {
|
||||||
@extend %entry;
|
@extend %entry;
|
||||||
@include linear-gradient($base_color, to top);
|
@include linear-gradient($base_color, to top);
|
||||||
border-color: border_normal($base_color);
|
@include border($base_color);
|
||||||
|
}
|
||||||
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
|
@ -444,11 +451,18 @@
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
border-color: alpha($borders_color, .8);
|
border-color: alpha($borders_color, .8);
|
||||||
border-style: none none none solid;
|
border-style: none none none solid;
|
||||||
background-color: shade($bg_color, 1.08);
|
|
||||||
background-image: none;
|
background-image: none;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
|
|
||||||
&:hover { background-color: shade($bg_color, 1.2); }
|
@if (lightness($bg_color) > 50) {
|
||||||
|
background-color: shade($bg_color, 1.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
@if (lightness($bg_color) > 50) {
|
||||||
|
background-color: shade($bg_color, 1.11);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&:dir(rtl) { border-style: none solid none none; }
|
&:dir(rtl) { border-style: none solid none none; }
|
||||||
|
|
||||||
|
|
|
@ -90,11 +90,16 @@
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-radius: $roundness;
|
border-radius: $roundness;
|
||||||
transition: border 150ms ease;
|
border-color: border_normal($bg_color);
|
||||||
box-shadow: inset 1px 1px alpha($dark_shadow, .06),
|
transition: border 100ms ease-out;
|
||||||
inset -1px 0 alpha($dark_shadow, .06);
|
&:focus, &:hover, &:active { transition: border 100ms ease-in; }
|
||||||
|
|
||||||
|
box-shadow: inset 1px 0 alpha($dark_shadow, 0.10),
|
||||||
|
inset 0 1px alpha($dark_shadow, 0.12),
|
||||||
|
inset -1px 0 alpha($dark_shadow, 0.10),
|
||||||
|
inset 0 -1px alpha($dark_shadow, 0.05);
|
||||||
|
|
||||||
|
|
||||||
&:focus, &:hover, &:active { transition: none; }
|
|
||||||
|
|
||||||
&:selected {
|
&:selected {
|
||||||
&, &:selected:focus {
|
&, &:selected:focus {
|
||||||
|
@ -149,7 +154,7 @@
|
||||||
@mixin entry($bg, $fg, $border: $borders_color) {
|
@mixin entry($bg, $fg, $border: $borders_color) {
|
||||||
@extend %entry;
|
@extend %entry;
|
||||||
@include linear-gradient($bg, to top);
|
@include linear-gradient($bg, to top);
|
||||||
@include border($bg);
|
border-color: border_normal($bg);
|
||||||
|
|
||||||
padding: $spacing;
|
padding: $spacing;
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue