kirbylife
/
numix-gtk-theme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Flatter button. More prominent shadow on hover. Fixing #370 

Attempt to fix #370. It is a temporary fix. Ideally we must use seperate functions for button and headerbar button.
pull/614/merge
Khurshid Alam 2017-01-30 22:22:09 +05:30
parent 3be320f526
commit 2363312450
1 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/gtk-3.20/scss/widgets/_button.scss
View File

@ -273,14 +273,14 @@
$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(hue($bg) == 0deg, shade($bg, 1.2), $bg); $button_bg: if(hue($bg) == 0deg, shade($bg, 1.08), $bg);
@extend %button; @extend %button;
@include linear-gradient($button_bg); @include linear-gradient($button_bg);
@include border(rgba(0, 0, 0, .12 + $border_strength)); border-color: border_normal($button_bg);
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); //making it flatter
&.flat { &.flat {
border-color: alpha($button_bg, 0); border-color: alpha($button_bg, 0);
@ -292,7 +292,7 @@
&, &.flat { &, &.flat {
&:focus, &:hover { &:focus, &:hover {
@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, .25 + $border_strength));
box-shadow: 0 1px 2px -1px alpha($dark_shadow, .32 + $shadow_strength); box-shadow: 0 1px 2px -1px alpha($dark_shadow, .32 + $shadow_strength);
} }
@ -379,12 +379,12 @@
} }
button { button {
@include button(shade($bg_color, 1.2), $fg_color); @include button($bg_color, $fg_color);
.inline-toolbar &, .inline-toolbar &,
.linked > & { @include linked_button(shade($bg_color, 1.2)); } .linked > & { @include linked_button($bg_color); }
.linked.vertical > & { @include linked_vertical_button(shade($bg_color, 1.2)); } .linked.vertical > & { @include linked_vertical_button($bg_color); }
&.circular, &.circular,
&.circular-button { // FIXME: aggregate to buttons &.circular-button { // FIXME: aggregate to buttons