numix-gtk-theme/gtk-3.20/scss/widgets/_choosers.scss

184 lines
5.5 KiB
SCSS
Raw Normal View History

2016-04-09 04:30:09 +00:00
/***************
! Color chooser
****************/
@include exports("colorchooser") {
colorswatch {
// 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.
2016-04-09 04:30:09 +00:00
&:drop(active), & { border-style: none; } // FIXME: implement a proper drop(active) state
$_colorswatch_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: $_colorswatch_radius + .5px;
border-top-right-radius: $_colorswatch_radius + .5px;
overlay {
border-top-left-radius: $_colorswatch_radius;
border-top-right-radius: $_colorswatch_radius;
}
2016-04-09 04:30:09 +00:00
}
&.bottom {
border-bottom-left-radius: $_colorswatch_radius + .5px;
border-bottom-right-radius: $_colorswatch_radius + .5px;
2016-04-09 04:30:09 +00:00
overlay {
border-bottom-left-radius: $_colorswatch_radius;
border-bottom-right-radius: $_colorswatch_radius;
}
2016-04-09 04:30:09 +00:00
}
&.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;
}
2016-04-09 04:30:09 +00:00
}
&.right,
&:last-child:not(.bottom) {
border-top-right-radius: $_colorswatch_radius + .5px;
border-bottom-right-radius: $_colorswatch_radius + .5px;
2016-04-09 04:30:09 +00:00
overlay {
border-top-right-radius: $_colorswatch_radius;
border-bottom-right-radius: $_colorswatch_radius;
}
2016-04-09 04:30:09 +00:00
}
&.dark overlay {
color: $selected_fg_color;
&:hover { border-color: if($variant == 'light', transparentize($black, .2), $borders_color); }
&:backdrop { color: $backdrop_selected_fg_color; }
2016-04-09 04:30:09 +00:00
}
&.light overlay {
color: $text_color;
2016-04-09 04:30:09 +00:00
&:hover { border-color: if($variant == 'light', transparentize($black, .5), $borders_color); }
&:backdrop { color: $backdrop_text_color; }
2016-04-09 04:30:09 +00:00
}
&:drop(active) {
box-shadow: none;
2016-04-09 04:30:09 +00:00
&.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;
}
2016-04-09 04:30:09 +00:00
}
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;
}
2016-04-09 04:30:09 +00:00
}
&:disabled {
opacity: .5;
overlay {
border-color: transparentize($black, .4);
box-shadow: none;
2016-04-09 04:30:09 +00:00
}
}
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 { background-color: shade($bg_color, .9); }
&:backdrop { background-color: shade($backdrop_bg_color, .95); }
2016-04-09 04:30:09 +00:00
}
}
&#editor-color-sample {
border-radius: $_colorswatch_radius;
overlay { border-radius: $_colorswatch_radius + .5px; }
}
}
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; } }
}
2016-04-09 04:30:09 +00:00
}
colorchooser .popover.osd { border-radius: $roundness; }
2016-04-09 04:30:09 +00:00
}
/***********************
! Font and file choosers
************************/
@include exports("miscchoosers") {
filechooser {
/* for fallback when header bar not used */
.dialog-action-box {
2016-04-13 05:42:37 +00:00
border-top: 1px solid $borders_color;
&:backdrop { border-top-color: $backdrop_borders_color; }
2016-04-09 04:30:09 +00:00
}
2016-04-13 05:42:37 +00:00
#pathbarbox { border-bottom: 1px solid $bg_color; }
}
filechooserbutton:drop(active) {
box-shadow: none;
border-color: transparent;
2016-04-09 04:30:09 +00:00
}
}