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

[Gtk-3.22] Redesign-Buttons (Phase1) 

Darker  color, lighter button color for hover & focus state. Disabled shadows.
pull/614/merge
Khurshid Alam 2017-02-04 00:44:26 +05:30
parent 2363312450
commit 9e4844a70b
3 changed files with 23 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/gtk-3.20/scss/_global.scss
View File

@ -3,7 +3,7 @@
@import "functions"; @import "functions";
// default color scheme // default color scheme
$bg_color: if($variant == "dark", #444, #eee); $bg_color: if($variant == "dark", #444, #dedede);
$fg_color: if($variant == "dark", #ddd, #555); $fg_color: if($variant == "dark", #ddd, #555);
$base_color: if($variant == "dark", #333, #fff); $base_color: if($variant == "dark", #333, #fff);
$text_color: if($variant == "dark", #eee, #333); $text_color: if($variant == "dark", #eee, #333);

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

@ -273,14 +273,19 @@
$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.08), $bg); $button_bg: if(lightness($bg) > 50, shade($bg, 1.08), shade($bg, 1.2));
@extend %button; @extend %button;
@include linear-gradient($button_bg); @if (lightness($button_bg) > 50) {
border-color: border_normal($button_bg); 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; color: $fg;
//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);
@ -291,24 +296,24 @@
&, &.flat { &, &.flat {
&:focus, &:hover { &:focus, &:hover {
@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 linear-gradient(shade($button_bg, 1.2));
@include border(rgba(0, 0, 0, .25 + $border_strength)); @include border(rgba(0, 0, 0, .2 + $border_strength));
box-shadow: 0 1px 2px -1px alpha($dark_shadow, .32 + $shadow_strength);
} }
}
&:checked, &:active { &:checked, &:active {
@include linear-gradient(shade($button_bg, .7), to top); @include linear-gradient(shade($button_bg, .7), to top);
color: $white; 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 { &:focus, &:hover {
@include linear-gradient(shade($button_bg, .65), to top); @include linear-gradient(shade($button_bg, .65), to top);
color: $white; color: $white;
} }
} }

5
src/gtk-3.20/scss/widgets/_toolbar.scss
View File

@ -50,11 +50,12 @@
} }
@mixin inline-toolbar($bg, $fg) { @mixin inline-toolbar($bg, $fg) {
background-image: none; padding: 1px;
border-width: 0 1px 1px; border-width: 0 1px 1px;
border-style: solid; border-style: solid;
border-color: $borders_color; border-color: $borders_color;
background-color: mix($borders_color, $bg_color, .7); background-color: shade($bg, 1.08);
background-image: none;
&:backdrop { &:backdrop {
border-color: $backdrop_borders_color; border-color: $backdrop_borders_color;