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

GTK 3.20 :: Color chooser rewirte (#423) 

* * Color chooser rewirte.

* * Adding button.color code.
pull/517/head
Csaba Jakosa 2016-08-23 13:00:16 +02:00 committed by Dustin Falgout
parent 0bc870bcf7
commit bbf00f22b5
1 changed files with 137 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

180
gtk-3.20/scss/widgets/_choosers.scss
View File

@ -4,85 +4,159 @@
@include exports("colorchooser") {
colorswatch {
&, &:selected {
border: 1px solid alpha($black, .1);
border-radius: $roundness - 1px;
background-color: transparent;
background-clip: border-box;
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
// is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
// applied to the overlay box.
&:hover { border-color: alpha($black, .3); }
}
&:drop(active), & { border-style: none; } // FIXME: implement a proper drop(active) state
&.color-light:selected:hover, &.color-dark:selected:hover { background-image: none; }
$_colorswatch_radius: $roundness;
&.left, &:first-child {
border-top-left-radius: $roundness;
border-bottom-left-radius: $roundness;
}
&.right, &:last-child {
border-top-right-radius: $roundness;
border-bottom-right-radius: $roundness;
}
&:only-child { border-radius: $roundness; }
// base color corners rounding
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
// sports a bigger radius.
// nth-child is needed by the custom color strip.
&.top {
border-top-left-radius: $roundness;
border-top-right-radius: $roundness;
border-top-left-radius: $_colorswatch_radius + .5px;
border-top-right-radius: $_colorswatch_radius + .5px;
overlay {
border-top-left-radius: $_colorswatch_radius;
border-top-right-radius: $_colorswatch_radius;
}
}
&.bottom {
border-bottom-left-radius: $roundness;
border-bottom-right-radius: $roundness;
}
border-bottom-left-radius: $_colorswatch_radius + .5px;
border-bottom-right-radius: $_colorswatch_radius + .5px;
coloreditor & {
border-radius: $roundness;
&.color-dark:hover, &.color-light:hover {
background-image: none;
border-color: alpha($black, .3);
}
overlay {
border-bottom-left-radius: $_colorswatch_radius;
border-bottom-right-radius: $_colorswatch_radius;
}
}
GtkColorChooserWidget #add-color-button {
background-clip: padding-box;
border-color: alpha($black, .1);
&.left,
&:first-child:not(.top) {
border-top-left-radius: $_colorswatch_radius + .5px;
border-bottom-left-radius: $_colorswatch_radius + .5px;
overlay {
border-top-left-radius: $_colorswatch_radius;
border-bottom-left-radius: $_colorswatch_radius;
}
}
&.right,
&:last-child:not(.bottom) {
border-top-right-radius: $_colorswatch_radius + .5px;
border-bottom-right-radius: $_colorswatch_radius + .5px;
overlay {
border-top-right-radius: $_colorswatch_radius;
border-bottom-right-radius: $_colorswatch_radius;
}
}
&.dark overlay {
color: $selected_fg_color;
&:hover { border-color: if($variant == 'light', transparentize($black, .2), $borders_color); }
&:backdrop { color: $backdrop_selected_fg_color; }
}
&.light overlay {
color: $text_color;
&:hover { border-color: if($variant == 'light', transparentize($black, .5), $borders_color); }
&:backdrop { color: $backdrop_text_color; }
}
&:drop(active) {
box-shadow: none;
&.light overlay {
border-color: $drop_target_color;
box-shadow: inset 0 0 0 2px if($variant == 'light', darken($drop_target_color, 7%), $borders_color),
inset 0 0 0 1px $drop_target_color;
}
&.dark overlay {
border-color: $drop_target_color;
box-shadow: inset 0 0 0 2px if($variant == 'light', transparentize($black, .7), $borders_color),
inset 0 0 0 1px $drop_target_color;
}
}
overlay {
border: 1px solid if($variant == 'light', transparentize($black, .7), $borders_color);
&:hover {
box-shadow: inset 0 1px transparentize($white, .6),
inset 0 -1px transparentize($black, .8);
}
&:backdrop,
&:backdrop:hover {
border-color: if($variant == 'light', transparentize($black, .7), $borders_color);
box-shadow: none;
}
}
&:disabled {
opacity: .5;
overlay {
border-color: transparentize($black, .4);
box-shadow: none;
}
}
row:selected & { box-shadow: 0 0 0 2px $selected_fg_color; }
&#add-color-button {
border-radius: $_colorswatch_radius $_colorswatch_radius 0 0;
&:only-child { border-radius: $_colorswatch_radius; }
overlay {
background-color: shade($bg_color, .95);
color: $fg_color;
&:hover {
border-color: alpha($black, .3);
background-color: shade($bg_color, .9);
color: $fg_color;
&:hover { background-color: shade($bg_color, .9); }
&:backdrop { background-color: shade($backdrop_bg_color, .95); }
}
}
.color-active-badge {
&, &:selected {
border-width: 2px;
border-style: solid;
background-color: transparent;
}
&#editor-color-sample {
border-radius: $_colorswatch_radius;
&.color-light {
&, &:hover {
border-color: alpha($black, .3);
color: alpha($black, .3);
overlay { border-radius: $_colorswatch_radius + .5px; }
}
}
&.color-dark {
&, &:hover {
border-color: alpha($white, .3);
color: alpha($white, .3);
button.color {
padding: $spacing;
colorswatch:only-child {
&, overlay { border-radius: 0; }
@if $variant == 'light' { box-shadow: 0 1px _text_shadow_color(); }
}
@if $variant == 'light' {
&:disabled,
&:backdrop,
&:active,
&:checked { colorswatch:only-child { box-shadow: none; } }
}
}
GtkColorButton.button { padding: $spacing; }
colorchooser .popover.osd { border-radius: $roundness; }
}