117 lines
2.1 KiB
SCSS
117 lines
2.1 KiB
SCSS
//
|
|
// Slider
|
|
//
|
|
.popup-slider-menu-item,
|
|
.slider {
|
|
-slider-height: 0.3em;
|
|
-slider-background-color: $button_border; //background of the trough
|
|
-slider-border-color: transparentize($bg_color, 0.7); //trough border color
|
|
-slider-active-background-color: $selected_bg_color; //active trough fill
|
|
-slider-active-border-color: transparentize($bg_color, 0.7); //active trough border
|
|
-slider-border-width: 1px;
|
|
-slider-handle-radius: 0.5em;
|
|
height: 1em;
|
|
min-width: 15em;
|
|
border: 0 solid transparent;
|
|
border-right-width: 1px;
|
|
border-left-width: 5px;
|
|
}
|
|
|
|
//
|
|
// Check Boxes
|
|
//
|
|
.check-box {
|
|
CinnamonGenericContainer {
|
|
spacing: 0.2em;
|
|
min-height: 30px;
|
|
padding-top: 2px;
|
|
}
|
|
|
|
StLabel {
|
|
font-weight: normal;
|
|
}
|
|
|
|
StBin {
|
|
width: 16px;
|
|
height: 16px;
|
|
background-image: url('assets/checkbox/checkbox-unchecked.svg');
|
|
}
|
|
|
|
&:focus StBin {
|
|
background-image: url('assets/checkbox/checkbox-unchecked-focused.svg');
|
|
}
|
|
|
|
&:checked StBin {
|
|
background-image: url('assets/checkbox/checkbox-checked.svg');
|
|
}
|
|
|
|
&:focus:checked StBin {
|
|
background-image: url('assets/checkbox/checkbox-checked-focused.svg');
|
|
}
|
|
}
|
|
|
|
//
|
|
// Radio Buttons
|
|
//
|
|
.radiobutton {
|
|
CinnamonGenericContainer {
|
|
spacing: 0.2em;
|
|
height: 26px;
|
|
padding-top: 2px;
|
|
}
|
|
|
|
StLabel {
|
|
padding-top: 4px;
|
|
font-size: 0.9em;
|
|
box-shadow: none;
|
|
}
|
|
|
|
StBin {
|
|
width: 16px;
|
|
height: 16px;
|
|
background-image: url('assets/checkbox/checkbox-unchecked.svg');
|
|
}
|
|
|
|
&:focus StBin {
|
|
background-image: url('assets/checkbox/checkbox-unchecked-focused.svg');
|
|
}
|
|
|
|
&:checked StBin {
|
|
background-image: url('assets/checkbox/checkbox-checked.svg');
|
|
}
|
|
|
|
&:focus:checked StBin {
|
|
background-image: url('assets/checkbox/checkbox-checked-focused.svg');
|
|
}
|
|
}
|
|
|
|
//
|
|
// Switches
|
|
//
|
|
.toggle-switch {
|
|
width: 50px;
|
|
height: 20px;
|
|
background-size: contain;
|
|
|
|
&-us,
|
|
&-intl {
|
|
background-image: url('assets/switch/switch-off.svg');
|
|
|
|
&:checked {
|
|
background-image: url('assets/switch/switch-on.svg');
|
|
}
|
|
}
|
|
}
|
|
|
|
//
|
|
// Links
|
|
//
|
|
.cinnamon-link {
|
|
color: $link_color;
|
|
text-decoration: underline;
|
|
|
|
&:hover {
|
|
color: lighten($link_color, 10%);
|
|
}
|
|
}
|