[Gtk-3.22][Button-Redesign] Spinbutton: Fixing color and entry border

pull/614/merge
Khurshid Alam 2017-02-05 10:39:36 +05:30
parent 8670cc05f0
commit 85138a0fff
2 changed files with 32 additions and 13 deletions

View File

@ -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; }

View File

@ -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;