You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
545 lines
12 KiB
545 lines
12 KiB
/*!
|
|
* # Semantic UI - Checkbox
|
|
* http://github.com/semantic-org/semantic-ui/
|
|
*
|
|
*
|
|
* Copyright 2015 Contributors
|
|
* Released under the MIT license
|
|
* http://opensource.org/licenses/MIT
|
|
*
|
|
*/
|
|
|
|
/*******************************
|
|
Theme
|
|
*******************************/
|
|
|
|
@type : 'module';
|
|
@element : 'checkbox';
|
|
|
|
@import (multiple) '../../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: baseline;
|
|
}
|
|
.ui.checkbox input[type="checkbox"],
|
|
.ui.checkbox input[type="radio"] {
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: @checkboxSize;
|
|
height: @checkboxSize;
|
|
opacity: 0 !important;
|
|
outline: none;
|
|
z-index: -1;
|
|
}
|
|
|
|
|
|
/*--------------
|
|
Box
|
|
---------------*/
|
|
|
|
|
|
.ui.checkbox .box,
|
|
.ui.checkbox label {
|
|
position: relative;
|
|
display: block;
|
|
cursor: pointer;
|
|
padding-left: @labelDistance;
|
|
outline: none;
|
|
}
|
|
|
|
.ui.checkbox .box,
|
|
.ui.checkbox label {
|
|
font-size: @fontSize;
|
|
}
|
|
|
|
.ui.checkbox .box:before,
|
|
.ui.checkbox label:before {
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
|
|
width: @checkboxSize;
|
|
height: @checkboxSize;
|
|
content: '';
|
|
|
|
background: @checkboxBackground;
|
|
border-radius: @checkboxBorderRadius;
|
|
|
|
transition: @checkboxTransition;
|
|
border: @checkboxBorder;
|
|
}
|
|
|
|
/*--------------
|
|
Checkmark
|
|
---------------*/
|
|
|
|
.ui.checkbox .box:after,
|
|
.ui.checkbox label:after {
|
|
position: absolute;
|
|
font-size: @checkboxCheckFontSize;
|
|
top: @checkboxCheckTop;
|
|
left: @checkboxCheckLeft;
|
|
width: @checkboxCheckSize;
|
|
height: @checkboxCheckSize;
|
|
text-align: center;
|
|
|
|
opacity: 0;
|
|
color: @checkboxColor;
|
|
transition: @checkboxTransition;
|
|
}
|
|
|
|
/*--------------
|
|
Label
|
|
---------------*/
|
|
|
|
/* Inside */
|
|
.ui.checkbox label,
|
|
.ui.checkbox + label {
|
|
cursor: pointer;
|
|
color: @labelColor;
|
|
transition: @labelTransition;
|
|
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-color: @checkboxHoverBorderColor;
|
|
}
|
|
.ui.checkbox label:hover,
|
|
.ui.checkbox + label:hover {
|
|
color: @labelHoverColor;
|
|
}
|
|
|
|
/*--------------
|
|
Down
|
|
---------------*/
|
|
|
|
.ui.checkbox .box:active::before,
|
|
.ui.checkbox label:active::before {
|
|
background: @checkboxPressedBackground;
|
|
border-color: @checkboxPressedBorderColor;
|
|
}
|
|
.ui.checkbox .box:active::after,
|
|
.ui.checkbox label:active::after {
|
|
color: @checkboxPressedColor;
|
|
}
|
|
.ui.checkbox input[type="checkbox"]:active ~ label,
|
|
.ui.checkbox input[type="radio"]:active ~ label {
|
|
color: @labelPressedColor;
|
|
}
|
|
|
|
/*--------------
|
|
Focus
|
|
---------------*/
|
|
|
|
.ui.checkbox input[type="checkbox"]:focus ~ .box:before,
|
|
.ui.checkbox input[type="checkbox"]:focus ~ label:before,
|
|
.ui.checkbox input[type="radio"]:focus ~ .box:before,
|
|
.ui.checkbox input[type="radio"]:focus ~ label:before {
|
|
background: @checkboxFocusedBackground;
|
|
border-color: @checkboxFocusedBorderColor;
|
|
}
|
|
.ui.checkbox input[type="checkbox"]:focus ~ .box:after,
|
|
.ui.checkbox input[type="checkbox"]:focus ~ label:after,
|
|
.ui.checkbox input[type="radio"]:focus ~ .box:after,
|
|
.ui.checkbox input[type="radio"]:focus ~ label:after {
|
|
color: @checkboxFocusedColor;
|
|
}
|
|
.ui.checkbox input[type="checkbox"]:focus ~ label,
|
|
.ui.checkbox input[type="radio"]:focus ~ label {
|
|
color: @labelFocusedColor;
|
|
}
|
|
|
|
/*--------------
|
|
Active
|
|
---------------*/
|
|
|
|
.ui.checkbox input:checked ~ .box:before,
|
|
.ui.checkbox input:checked ~ label:before {
|
|
background: @checkboxActiveBackground;
|
|
border-color: @checkboxActiveBorderColor;
|
|
}
|
|
.ui.checkbox input:checked ~ .box:after,
|
|
.ui.checkbox input:checked ~ label:after {
|
|
opacity: @checkboxActiveCheckOpacity;
|
|
color: @checkboxActiveCheckColor;
|
|
}
|
|
|
|
/*--------------
|
|
Indeterminate
|
|
---------------*/
|
|
|
|
.ui.checkbox input:indeterminate ~ .box:before,
|
|
.ui.checkbox input:indeterminate ~ label:before {
|
|
background: @checkboxIndeterminateBackground;
|
|
border-color: @checkboxIndeterminateBorderColor;
|
|
}
|
|
.ui.checkbox input:indeterminate ~ .box:after,
|
|
.ui.checkbox input:indeterminate ~ label:after {
|
|
opacity: @checkboxIndeterminateCheckOpacity;
|
|
color: @checkboxIndeterminateCheckColor;
|
|
}
|
|
|
|
/*--------------
|
|
Active Focus
|
|
---------------*/
|
|
|
|
.ui.checkbox input[type="radio"]:indeterminate:focus ~ .box:before,
|
|
.ui.checkbox input[type="radio"]:indeterminate:focus ~ label:before,
|
|
.ui.checkbox input[type="radio"]:checked:focus ~ .box:before,
|
|
.ui.checkbox input[type="radio"]:checked:focus ~ label:before {
|
|
background: @checkboxFocusedBackground;
|
|
border-color: @checkboxFocusedBorderColor;
|
|
}
|
|
|
|
|
|
/*--------------
|
|
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[disabled] ~ .box:after,
|
|
.ui.checkbox input[disabled] ~ label {
|
|
cursor: default;
|
|
opacity: @disabledCheckboxOpacity;
|
|
color: @disabledCheckboxLabelColor;
|
|
}
|
|
|
|
|
|
/*******************************
|
|
Types
|
|
*******************************/
|
|
|
|
|
|
/*--------------
|
|
Radio
|
|
---------------*/
|
|
|
|
.ui.radio.checkbox {
|
|
min-height: @radioSize;
|
|
}
|
|
|
|
.ui.radio.checkbox .box,
|
|
.ui.radio.checkbox label {
|
|
padding-left: @radioLabelDistance;
|
|
}
|
|
|
|
/* Box */
|
|
.ui.radio.checkbox .box:before,
|
|
.ui.radio.checkbox label:before {
|
|
content: '';
|
|
transform: none;
|
|
|
|
width: @radioSize;
|
|
height: @radioSize;
|
|
border-radius: @circularRadius;
|
|
top: @radioTop;
|
|
left: @radioLeft;
|
|
}
|
|
|
|
/* Bullet */
|
|
.ui.radio.checkbox .box:after,
|
|
.ui.radio.checkbox label:after {
|
|
border: none;
|
|
content: '' !important;
|
|
width: @radioSize;
|
|
height: @radioSize;
|
|
line-height: @radioSize;
|
|
}
|
|
|
|
/* Radio Checkbox */
|
|
.ui.radio.checkbox .box:after,
|
|
.ui.radio.checkbox label:after {
|
|
top: @bulletTop;
|
|
left: @bulletLeft;
|
|
width: @radioSize;
|
|
height: @radioSize;
|
|
border-radius: @bulletRadius;
|
|
transform: scale(@bulletScale);
|
|
background-color: @bulletColor;
|
|
}
|
|
|
|
/* Active */
|
|
.ui.radio.checkbox input[type="radio"]:checked ~ .box:before,
|
|
.ui.radio.checkbox input[type="radio"]:checked ~ label:before {
|
|
background-color: @radioActiveBackground;
|
|
}
|
|
.ui.radio.checkbox input[type="radio"]:checked ~ .box:after,
|
|
.ui.radio.checkbox input[type="radio"]:checked ~ label:after {
|
|
background-color: @radioActiveBulletColor;
|
|
}
|
|
|
|
/*--------------
|
|
Slider
|
|
---------------*/
|
|
|
|
.ui.slider.checkbox {
|
|
min-height: @sliderHeight;
|
|
}
|
|
|
|
/* Input */
|
|
.ui.slider.checkbox input[type="checkbox"],
|
|
.ui.slider.checkbox input[type="radio"] {
|
|
width: @sliderWidth;
|
|
height: @sliderHeight;
|
|
}
|
|
|
|
/* Label */
|
|
.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 {
|
|
display: block;
|
|
position: absolute;
|
|
content: '';
|
|
transform: none;
|
|
border: none !important;
|
|
left: 0em;
|
|
z-index: 1;
|
|
|
|
top: @sliderLineVerticalOffset;
|
|
|
|
background-color: @sliderLineColor;
|
|
width: @sliderLineWidth;
|
|
height: @sliderLineHeight;
|
|
|
|
transform: none;
|
|
border-radius: @sliderLineRadius;
|
|
transition: @sliderLineTransition;
|
|
|
|
}
|
|
|
|
/* Handle */
|
|
.ui.slider.checkbox .box:after,
|
|
.ui.slider.checkbox label:after {
|
|
background: @handleBackground;
|
|
position: absolute;
|
|
content: '' !important;
|
|
opacity: 1;
|
|
z-index: 2;
|
|
|
|
border: none;
|
|
box-shadow: @handleBoxShadow;
|
|
width: @sliderHandleSize;
|
|
height: @sliderHandleSize;
|
|
top: @sliderHandleOffset;
|
|
left: 0em;
|
|
transform: none;
|
|
|
|
border-radius: @circularRadius;
|
|
transition: @sliderHandleTransition;
|
|
}
|
|
|
|
/* Focus */
|
|
.ui.slider.checkbox input[type="checkbox"]:focus ~ .box:before,
|
|
.ui.slider.checkbox input[type="checkbox"]:focus ~ label:before,
|
|
.ui.slider.checkbox input[type="radio"]:focus ~ .box:before,
|
|
.ui.slider.checkbox input[type="radio"]: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 :checked ~ .box,
|
|
.ui.slider.checkbox :checked ~ label {
|
|
color: @sliderOnLabelColor;
|
|
}
|
|
.ui.slider.checkbox :checked ~ .box:before,
|
|
.ui.slider.checkbox :checked ~ label:before {
|
|
background-color: @sliderOnLineColor;
|
|
}
|
|
.ui.slider.checkbox :checked ~ .box:after,
|
|
.ui.slider.checkbox :checked ~ label:after {
|
|
left: @sliderTravelDistance;
|
|
}
|
|
|
|
|
|
/*--------------
|
|
Toggle
|
|
---------------*/
|
|
|
|
.ui.toggle.checkbox {
|
|
min-height: @toggleHeight;
|
|
}
|
|
|
|
/* Input */
|
|
.ui.toggle.checkbox input[type="checkbox"],
|
|
.ui.toggle.checkbox input[type="radio"] {
|
|
width: @toggleWidth;
|
|
height: @toggleHeight;
|
|
}
|
|
|
|
/* Label */
|
|
.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 {
|
|
display: block;
|
|
position: absolute;
|
|
content: '';
|
|
z-index: 1;
|
|
transform: none;
|
|
border: none;
|
|
|
|
top: @toggleLaneVerticalOffset;
|
|
|
|
background: @toggleLaneBackground;
|
|
width: @toggleLaneWidth;
|
|
height: @toggleLaneHeight;
|
|
border-radius: @toggleHandleRadius;
|
|
}
|
|
|
|
/* Handle */
|
|
.ui.toggle.checkbox .box:after,
|
|
.ui.toggle.checkbox label:after {
|
|
background: @handleBackground;
|
|
position: absolute;
|
|
content: '' !important;
|
|
opacity: 1;
|
|
z-index: 2;
|
|
|
|
border: none;
|
|
box-shadow: @handleBoxShadow;
|
|
width: @toggleHandleSize;
|
|
height: @toggleHandleSize;
|
|
top: @toggleHandleOffset;
|
|
left: 0em;
|
|
|
|
border-radius: @circularRadius;
|
|
transition: @toggleHandleTransition;
|
|
}
|
|
|
|
.ui.toggle.checkbox input[type="checkbox"] ~ .box:after,
|
|
.ui.toggle.checkbox input[type="checkbox"] ~ label:after,
|
|
.ui.toggle.checkbox input[type="radio"] ~ .box:after,
|
|
.ui.toggle.checkbox input[type="radio"] ~ label:after {
|
|
left: @toggleOffOffset;
|
|
}
|
|
|
|
/* Focus */
|
|
.ui.toggle.checkbox input[type="checkbox"]:focus ~ .box:before,
|
|
.ui.toggle.checkbox input[type="checkbox"]:focus ~ label:before,
|
|
.ui.toggle.checkbox input[type="radio"]:focus ~ .box:before,
|
|
.ui.toggle.checkbox input[type="radio"]: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();
|