You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
tt-rss/lib/flat-ttrss/dijit/form/RadioButton.styl

136 lines
2.7 KiB
Stylus

/* RadioButton
*
* Styling RadioButton mainly includes:
*
* 1. Containers
* .dijitRadio|.dijitRadioIcon
*
* 2. RadioButton within ToggleButton
* .dijitToggleButton|.dijitToggleButtonChecked
*
* 3. Checked state
* .dijitRadioChecked
* .dijitToggleButtonChecked
*
* 4. Hover state
* .dijitRadioHover|.dijitRadioCheckedHover
*
* 5. Disabled state
* .dijitRadioDisabled|.dijitRadioCheckedDisabled
*/
@import 'dijit_form_variables';
.{$theme-name} {
.dijitRadio,
.dijitRadioIcon { /* inside a toggle button */
width: $radio-width;
height: $radio-height;
background: $radio-background-color;
border: 1px solid $radio-border-color;
border-radius: 50%;
position: relative;
overflow: visible;
box-sizing: border-box;
&:after {
content: " ";
display: block;
width: 0;
height: 0;
background-color: $radio-checked-color;
border-radius: 50%;
opacity: 0;
margin: ($radio-width) * .5;
position: absolute;
top: 0;
left: 0;
transition: all 0.15s ease-in-out;
}
}
// hover
.dijitRadioHover {
border-color: $radio-hover-border-color;
}
// checked
.dijitRadioChecked,
.dijitChecked .dijitRadioIcon {
&:after {
width: $radio-width - 8px;
height: @width;
margin: 3px;
opacity: 1;
}
}
// checkbox icon within alternative buttons
if($button-alternative-colors && length($button-alternative-colors) > 0) {
for class in $button-alternative-colors {
.{class} {
.dijitRadioIcon {
border-color: $white;
&:after {
background-color: $white;
}
}
}
}
}
// disabled
.dijitRadioDisabled {
background-color: $radio-disabled-background-color;
border-color: $radio-disabled-border-color;
}
.dijitRadioCheckedDisabled {
background-color: $radio-disabled-background-color;
border-color: $radio-checked-disabled-color;
&:after {
background-color: $radio-checked-disabled-color;
}
}
/* ---- RadioMenuItem ---- */
.dijitRadioMenuItem {
.dijitCheckedMenuItemIcon {
width: $radio-width;
height: $radio-height;
background: $radio-background-color;
border: 1px solid $border-color;
border-radius: 50%;
position: relative;
overflow: visible;
box-sizing: border-box;
&:after {
content: " ";
display: block;
width: 0;
height: 0;
background-color: $radio-checked-color;
border-radius: 50%;
opacity: 0;
margin: ($radio-width) * .5;
position: absolute;
top: 0;
left: 0;
transition: all 0.15s ease-in-out;
}
}
}
.dijitRadioMenuItemChecked {
.dijitCheckedMenuItemIcon {
border-color: $border-color;
&:after {
width: $radio-width - 8px;
height: @width;
margin: 3px;
opacity: 1;
}
}
}
}