MediaWiki:Common.css/src/system/OOUI/widgets/ToggleSwitchWidget.scss
This page is one of the SCSS pages which are the basis for MediaWiki:Common.css. After you edit this page, you will need to recompile them for your changes to take effect. See Terraria Wiki:CSS to learn more.
Ancestors: / src / system / OOUI / widgets / ToggleSwitchWidget.scss
Siblings: ButtonGroupWidget.scss ButtonSelectWidget.scss CheckboxInputWidget.scss DropdownInputWidget.scss DropdownWidget.scss LabelWidget.scss MenuOptionWidget.scss MenuSectionOptionWidget.scss MenuSelectWidget.scss MessageWidget.scss MultioptionWidget.scss OptionWidget.scss OutlineOptionWidget.scss OutlineSelectWidget.scss PopupWidget.scss ProgressBarWidget.scss RadioInputWidget.scss RadioSelectWidget.scss SelectFileWidget.scss TabOptionWidget.scss TabSelectWidget.scss TagItemWidget.scss TagMultiselectWidget.scss TextInputWidget.scss ToggleButtonWidget.scss ToggleSwitchWidget.scss
Children: (none)
/********* OOUI: ToggleSwitchWidget *********/
/* overwriting styles from here:
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/widgets/ToggleSwitchWidget.less
* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less */
.oo-ui-toggleSwitchWidget {
background-color: transparent;
border: 3px solid var(--ooui--toggleswitch-border-color);
&-grip {
top: 0.21428571428571427em;
}
&.oo-ui-toggleWidget-on {
.oo-ui-toggleSwitchWidget-grip {
left: 1.7142857142857142em;
}
}
&.oo-ui-widget-enabled {
.oo-ui-toggleSwitchWidget-grip {
background-color: transparent;
border: 3px solid var(--ooui--toggleswitch-border-color);
}
&:hover {
background-color: transparent;
border-color: var(--ooui--toggleswitch-border-color--hover);
.oo-ui-toggleSwitchWidget-grip {
background-color: transparent;
border-color: var(--ooui--toggleswitch-border-color--hover);
}
}
&:active,
&:active:hover,
&:active:focus {
background-color: var(--ooui--toggleswitch-color--active);
border-color: var(--ooui--toggleswitch-color--active);
box-shadow: inset 0 0 0 1px var(--ooui--toggleswitch-color--active);
.oo-ui-toggleSwitchWidget-grip {
background-color: var(--ooui--toggleswitch-grip-color);
border-color: var(--ooui--toggleswitch-grip-color);
}
}
&:focus {
border-color: var(--ooui--toggleswitch-border-color);
box-shadow: inset 0 0 0 1px var(--ooui--toggleswitch-box-shadow--focus);
.oo-ui-toggleSwitchWidget-grip {
border-color: var(--ooui--toggleswitch-border-color);
}
}
&.oo-ui-toggleWidget-on {
background-color: var(--ooui--toggleswitch-border-color);
border-color: var(--ooui--toggleswitch-border-color);
.oo-ui-toggleSwitchWidget-grip {
background-color: var(--ooui--toggleswitch-grip-color);
border-color: var(--ooui--toggleswitch-grip-color);
}
&:hover {
background-color: var(--ooui--toggleswitch-border-color--hover);
border-color: var(--ooui--toggleswitch-border-color--hover);
}
&:active,
&:active:hover {
background-color: var(--ooui--toggleswitch-color--active);
border-color: var(--ooui--toggleswitch-color--active);
}
&:focus {
border-color: var(--ooui--toggleswitch-border-color);
box-shadow: none;
&::before {
border-color: var(--ooui--toggleswitch-grip-color);
}
}
}
}
&.oo-ui-widget-disabled {
background-color: var(--ooui--toggleswitch-disabled-background-color);
border-color: var(--ooui--toggleswitch-border-color);
&.oo-ui-toggleWidget-off .oo-ui-toggleSwitchWidget-grip {
background-color: transparent;
border: 3px solid var(--ooui--toggleswitch-border-color);
box-shadow: none;
}
&.oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-grip {
background-color: var(--ooui--toggleswitch-disabled-grip-color);
}
}
}