/*
* # Semantic - Checkbox * http://github.com/semantic-org/semantic-ui/ * * * Copyright 2014 Contributor * Released under the MIT license * http://opensource.org/licenses/MIT * */
/*******************************
Theme
*******************************/
@type : ‘module’; @element : ‘checkbox’;
@import ‘../../theme.config’;
/*******************************
Checkbox
*******************************/
/*————–
Content
—————*/
.ui.checkbox {
position: relative; display: inline-block; min-height: @checkboxSize; font-size: 1rem; line-height: @checkboxLineHeight; min-width: @checkboxSize; backface-visibility: hidden; outline: none; vertical-align: middle;
} .ui.checkbox input {
position: absolute; top: 0px; left: 0px; opacity: 0 !important; outline: none; z-index: -1;
}
/*————–
Box
—————*/
.ui.checkbox .box, .ui.checkbox label {
display: block; cursor: pointer; padding-left: @labelPadding; outline: none;
} .ui.checkbox label {
font-size: @fontSize;
}
.ui.checkbox .box:before, .ui.checkbox label:before {
position: absolute; line-height: 1; width: @checkboxSize; height: @checkboxSize; top: 0em; left: 0em; content: ''; background: @checkboxBackground; border-radius: @checkboxBorderRadius; transition: @checkboxTransition; border: @checkboxBorder;
}
/*————–
Checkmark
—————*/
.ui.checkbox .box:after, .ui.checkbox label:after {
position: absolute; top: @checkboxCheckTop; left: @checkboxCheckLeft; line-height: @checkboxSize; width: @checkboxSize; height: @checkboxSize; text-align: center; opacity: 0; color: @checkboxColor; transition: all 0.1s ease;
}
/*————–
Label
—————*/
/* Inside */ .ui.checkbox label, .ui.checkbox + label {
cursor: pointer; color: @labelColor; transition: color 0.2s ease; user-select: none;
}
/* Outside */ .ui.checkbox + label {
vertical-align: middle;
}
/*******************************
States
*******************************/
/*————–
Hover
—————*/
.ui.checkbox .box:hover::before, .ui.checkbox label:hover::before {
background: @checkboxHoverBackground; border: @checkboxHoverBorder;
} .ui.checkbox label:hover, .ui.checkbox + label:hover {
color: @labelHoverColor;
}
/*————–
Down
—————*/
.ui.checkbox .box:active::before, .ui.checkbox label:active::before {
background: @checkboxSelectedBackground; border: 1px solid @checkboxSelectedBorder;
} .ui.checkbox input:active ~ label {
color: @labelSelectedColor;
}
/*————–
Focus
—————*/
.ui.checkbox input:focus ~ .box:before, .ui.checkbox input:focus ~ label:before {
background: @checkboxSelectedBackground; border: 1px solid @checkboxSelectedBorder;
} .ui.checkbox input:focus ~ label {
color: @labelSelectedColor;
}
/*————–
Active
—————*/
.ui.checkbox input:checked ~ .box:after, .ui.checkbox input:checked ~ label:after {
opacity: 1;
}
/*————–
Read-Only
—————*/
.ui.read-only.checkbox, .ui.read-only.checkbox label {
cursor: default;
}
/*————–
Disabled
—————*/
.ui.disabled.checkbox .box:after, .ui.disabled.checkbox label, .ui.checkbox input ~ .box:after, .ui.checkbox input ~ label {
cursor: default; opacity: @disabledCheckboxOpacity; color: @disabledCheckboxLabelColor;
}
/*******************************
Types
*******************************/
/*————–
Radio
—————*/
.ui.radio.checkbox {
min-height: @checkboxRadioSize;
}
/* Box */ .ui.radio.checkbox .box:before, .ui.radio.checkbox label:before {
width: @checkboxRadioSize; height: @checkboxRadioSize; border-radius: @circularRadius; top: @checkboxRadioTop; left: @checkboxRadioLeft; transform: none;
}
/* Circle */ .ui.radio.checkbox .box:after, .ui.radio.checkbox label:after {
border: none; width: @checkboxRadioSize; height: @checkboxRadioSize; line-height: @checkboxRadioSize; top: @checkboxRadioTop; left: @checkboxRadioLeft; font-size: @checkboxRadioCircleSize;
} /* Radio Checkbox */ .ui.radio.checkbox .box:after, .ui.radio.checkbox label:after {
width: @checkboxRadioSize; height: @checkboxRadioSize; border-radius: @checkboxBulletRadius; transform: scale(@checkboxBulletScale); background-color: @checkboxBulletColor;
}
/*————–
Slider
—————*/
.ui.slider.checkbox {
cursor: pointer; min-height: @sliderHeight;
}
.ui.slider.checkbox .box, .ui.slider.checkbox label {
padding-left: @sliderLabelDistance; line-height: @sliderLabelLineHeight; color: @sliderOffLabelColor;
}
/* Line */ .ui.slider.checkbox .box:before, .ui.slider.checkbox label:before {
cursor: pointer; display: block; position: absolute; content: ''; top: @sliderLineVerticalOffset; left: 0em; z-index: 1; border: none !important; background-color: @sliderLineColor; width: @sliderLineWidth; height: @sliderLineHeight; transform: none; border-radius: @sliderLineRadius; transition: background 0.3s ease ;
}
/* Handle */ .ui.slider.checkbox .box:after, .ui.slider.checkbox label:after {
background: @handleBackground; position: absolute; content: ''; opacity: 1; z-index: 2; border: none; box-shadow: @handleBoxShadow; width: @sliderHandleSize; height: @sliderHandleSize; top: @sliderHandleOffset; left: 0em; transform: none; border-radius: @circularRadius; transition: left 0.3s ease 0s ;
}
/* Focus */ .ui.slider.checkbox input:focus ~ .box:before, .ui.slider.checkbox input:focus ~ label:before {
background-color: @toggleFocusColor; border: none;
}
/* Hover */ .ui.slider.checkbox .box:hover, .ui.slider.checkbox label:hover {
color: @sliderHoverLabelColor;
} .ui.slider.checkbox .box:hover::before, .ui.slider.checkbox label:hover::before {
background: @sliderHoverLaneBackground;
}
/* Active */ .ui.slider.checkbox input:checked ~ .box, .ui.slider.checkbox input:checked ~ label {
color: @sliderOnLabelColor;
} .ui.slider.checkbox input:checked ~ .box:before, .ui.slider.checkbox input:checked ~ label:before {
background-color: @sliderOnLineColor;
} .ui.slider.checkbox input:checked ~ .box:after, .ui.slider.checkbox input:checked ~ label:after {
left: @sliderTravelDistance;
}
/*————–
Toggle
—————*/
.ui.toggle.checkbox {
cursor: pointer; min-height: @toggleHeight;
}
.ui.toggle.checkbox .box, .ui.toggle.checkbox label {
min-height: @toggleHandleSize; padding-left: @toggleLabelDistance; color: @toggleOffLabelColor;
} .ui.toggle.checkbox label {
padding-top: @toggleLabelOffset;
}
/* Switch */ .ui.toggle.checkbox .box:before, .ui.toggle.checkbox label:before {
cursor: pointer; display: block; position: absolute; content: ''; top: @toggleLaneVerticalOffset; z-index: 1; border: none; background-color: @neutralCheckbox; width: @toggleLaneWidth; height: @toggleLaneHeight; border-radius: @toggleHandleRadius;
}
/* Handle */ .ui.toggle.checkbox .box:after, .ui.toggle.checkbox label:after {
background: @handleBackground; position: absolute; content: ''; opacity: 1; z-index: 2; border: none; box-shadow: @handleBoxShadow; width: @toggleHandleSize; height: @toggleHandleSize; top: @toggleHandleOffset; left: 0em; border-radius: @circularRadius; transition: background 0.3s ease 0s, left 0.3s ease 0s ;
}
.ui.toggle.checkbox input ~ .box:after, .ui.toggle.checkbox input ~ label:after {
left: @toggleOffOffset;
}
/* Focus */ .ui.toggle.checkbox input:focus ~ .box:before, .ui.toggle.checkbox input:focus ~ label:before {
background-color: @toggleFocusColor; border: none;
}
/* Hover */ .ui.toggle.checkbox .box:hover::before, .ui.toggle.checkbox label:hover::before {
background-color: @toggleHoverColor; border: none;
}
/* Active */ .ui.toggle.checkbox input:checked ~ .box, .ui.toggle.checkbox input:checked ~ label {
color: @toggleOnLabelColor;
} .ui.toggle.checkbox input:checked ~ .box:before, .ui.toggle.checkbox input:checked ~ label:before {
background-color: @toggleOnLaneColor;
} .ui.toggle.checkbox input:checked ~ .box:after, .ui.toggle.checkbox input:checked ~ label:after {
left: @toggleOnOffset;
}
/*******************************
Variations
*******************************/
/*————–
Fitted
—————*/
.ui.fitted.checkbox .box, .ui.fitted.checkbox label {
padding-left: 0em !important;
}
.ui.fitted.toggle.checkbox, .ui.fitted.toggle.checkbox {
width: @toggleWidth;
}
.ui.fitted.slider.checkbox, .ui.fitted.slider.checkbox {
width: @sliderWidth;
}
.loadUIOverrides();