/*

* # 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();