140 lines
3.0 KiB
SCSS
140 lines
3.0 KiB
SCSS
|
|
||
|
|
|
||
|
|
//
|
||
|
|
// Switches
|
||
|
|
//
|
||
|
|
switch {
|
||
|
|
font-size: 1px;
|
||
|
|
min-width: 52px;
|
||
|
|
min-height: 24px;
|
||
|
|
background-size: 52px 24px;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: center center;
|
||
|
|
|
||
|
|
slider {
|
||
|
|
min-width: 1px;
|
||
|
|
min-height: 1px;
|
||
|
|
}
|
||
|
|
|
||
|
|
&,
|
||
|
|
slider {
|
||
|
|
outline-color: transparent;
|
||
|
|
color: transparent;
|
||
|
|
border: none;
|
||
|
|
box-shadow: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@each $k, $l in ('', ''), (':checked', '-active'), (':disabled', '-insensitive'),
|
||
|
|
(':checked:disabled', '-active-insensitive')
|
||
|
|
{
|
||
|
|
// load switch troughs from .png files in assets directory
|
||
|
|
|
||
|
|
switch#{$k} {
|
||
|
|
background-image: -gtk-scaled(
|
||
|
|
url('assets/switch#{$l}.png'),
|
||
|
|
url('assets/switch#{$l}@2.png')
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
menuitem:hover switch#{$k},
|
||
|
|
row:selected switch#{$k},
|
||
|
|
infobar switch#{$k} {
|
||
|
|
background-image: -gtk-scaled(
|
||
|
|
url('assets/switch#{$l}-selected.png'),
|
||
|
|
url('assets/switch#{$l}-selected@2.png')
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
headerbar switch#{$k},
|
||
|
|
.primary-toolbar switch#{$k},
|
||
|
|
.primary-toolbar toolbar switch#{$k} {
|
||
|
|
background-image: -gtk-scaled(
|
||
|
|
url('assets/switch#{$l}-header.png'),
|
||
|
|
url('assets/switch#{$l}-header@2.png')
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
//
|
||
|
|
// Check and Radio items *
|
||
|
|
//
|
||
|
|
@each $w, $a in ('check', 'checkbox'), ('radio', 'radio') {
|
||
|
|
//standard checks and radios
|
||
|
|
@each $s, $as in ('', '-unchecked'), (':disabled', '-unchecked-insensitive'),
|
||
|
|
(':indeterminate', '-mixed'), (':indeterminate:disabled', '-mixed-insensitive'),
|
||
|
|
(':checked', '-checked'), (':checked:disabled', '-checked-insensitive')
|
||
|
|
{
|
||
|
|
.#{$w}#{$s},
|
||
|
|
#{$w}#{$s},
|
||
|
|
treeview.#{$w}#{$s} {
|
||
|
|
-gtk-icon-source: -gtk-scaled(
|
||
|
|
url('assets/#{$a}#{$as}.png'),
|
||
|
|
url('assets/#{$a}#{$as}@2.png')
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
.osd,
|
||
|
|
%osd_check_radio {
|
||
|
|
#{$w}#{$s} {
|
||
|
|
-gtk-icon-source: -gtk-scaled(
|
||
|
|
url('assets/#{$a}#{$as}-dark.png'),
|
||
|
|
url('assets/#{$a}#{$as}-dark@2.png')
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// the borders of checks and radios are
|
||
|
|
// too similar in luminosity to the selected background color, hence
|
||
|
|
// we need special casing.
|
||
|
|
.view #{$w}#{$s}:selected,
|
||
|
|
treeview.#{$w}#{$s}:selected,
|
||
|
|
row:selected #{$w}#{$s},
|
||
|
|
infobar #{$w}#{$s} {
|
||
|
|
-gtk-icon-source: -gtk-scaled(
|
||
|
|
url('assets/#{$a}#{$as}-selected.png'),
|
||
|
|
url('assets/#{$a}#{$as}-selected@2.png')
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Selectionmode
|
||
|
|
@each $s, $as in ('', '-selectionmode'), (':checked', '-checked-selectionmode') {
|
||
|
|
.view.content-view.check#{$s}:not(.list) {
|
||
|
|
-gtk-icon-source: -gtk-scaled(
|
||
|
|
url('assets/checkbox#{$as}.png'),
|
||
|
|
url('assets/checkbox#{$as}@2.png')
|
||
|
|
);
|
||
|
|
background-color: transparent;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
checkbutton,
|
||
|
|
radiobutton {
|
||
|
|
// this is for a nice focus on check and radios text
|
||
|
|
&.text-button {
|
||
|
|
padding: 2px 0;
|
||
|
|
outline-offset: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
label:not(:only-child) {
|
||
|
|
&:first-child {
|
||
|
|
margin-left: 4px;
|
||
|
|
}
|
||
|
|
&:last-child {
|
||
|
|
margin-right: 4px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
check,
|
||
|
|
radio {
|
||
|
|
min-width: 16px;
|
||
|
|
min-height: 16px;
|
||
|
|
margin: 0 2px;
|
||
|
|
|
||
|
|
&:only-child,
|
||
|
|
menu menuitem & {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
}
|