|
|
/* * # Semantic - Checkbox * http://github.com/semantic-org/semantic-ui/ * * * Copyright 2013 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * */
/******************************* Theme*******************************/
@type : 'module';@element : 'checkbox';
@import '../../semantic.config';
/******************************* Checkbox*******************************/
/*-------------- Content---------------*/
.ui.checkbox { position: relative; display: inline-block;
height: @checkboxHeight;
min-width: 1em; line-height: 1em;
outline: none; vertical-align: middle;}.ui.checkbox input { position: absolute; top: 0px; left: 0px; opacity: 0; outline: none;}
/*-------------- Box---------------*/
.ui.checkbox .box,.ui.checkbox label { cursor: pointer; padding-left: @labelPadding; outline: none;}
.ui.checkbox .box:before,.ui.checkbox label:before { position: absolute;
line-height: 1; width: 1.25em; height: 1.25em; top: @boxOffset; left: @boxOffset; content: '';
background: #FFFFFF; border-radius: 0.25em;
transition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease ; border: @checkboxBorder;}
/*-------------- Checkmark---------------*/
.ui.checkbox .box:after,.ui.checkbox label:after { position: absolute; top: 0em; left: 0em;
opacity: 0; color: @checkboxColor; transition: opacity 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 { border: 1px solid @selectedBorderColor;}.ui.checkbox label:hover,.ui.checkbox + label:hover { color: @labelHoverColor;}
/*-------------- Down---------------*/
.ui.checkbox .box:active::before,.ui.checkbox label:active::before { background-color: #F5F5F5;}
/*-------------- Focus---------------*/
.ui.checkbox input:focus + .box:before,.ui.checkbox input:focus + label:before { border: 1px solid @selectedBorderColor;}.ui.checkbox input:focus + label { color: @labelSelectedColor;}
/*-------------- Active---------------*/
.ui.checkbox input:checked + .box:after,.ui.checkbox input:checked + label:after { opacity: 1;}
/*-------------- Disabled---------------*/
.ui.disabled.checkbox + .box:after,.ui.checkbox input[disabled] + .box:after,.ui.disabled.checkbox label,.ui.checkbox input[disabled] + label { opacity: 0.4; color: rgba(0, 0, 0, 0.3);}
/******************************* Variations*******************************/
/*-------------- Radio---------------*/
/* Box */.ui.radio.checkbox .box:before,.ui.radio.checkbox label:before { border-radius: @circularRadius; transform: none;}
/* Circle */.ui.radio.checkbox .box:after,.ui.radio.checkbox label:after { border: none;}
/*-------------- Slider---------------*/
.ui.slider.checkbox { cursor: pointer;}
.ui.slider.checkbox .box,.ui.slider.checkbox label { padding-left: @sliderLabelDistance;}
/* 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: @neutralCheckbox; width: @sliderLineWidth; height: @sliderLineHeight;
transform: none; border-radius: @circularRadius; 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: @handleSize; height: @handleSize; top: @sliderHandleOffset; left: 0em;
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;}
/* Active */.ui.slider.checkbox input:checked + .box:before,.ui.slider.checkbox input:checked + label:before { background-color: @positiveCheckbox;}.ui.slider.checkbox input:checked + .box:after,.ui.slider.checkbox input:checked + label:after { left: @sliderTravelDistance;}
/*-------------- Toggle---------------*/
.ui.toggle.checkbox { cursor: pointer;}
.ui.toggle.checkbox .box,.ui.toggle.checkbox label { padding-left: 3em;}
/* Switch */.ui.toggle.checkbox .box:before,.ui.toggle.checkbox label:before { cursor: pointer; display: block;
position: absolute; content: '';
top: @toggleSwitchVerticalOffset; left: 0em; z-index: 1; border: none;
background-color: @neutralCheckbox; width: @toggleSwitchWidth; height: @toggleSwitchHeight; border-radius: @circularRadius;}
/* 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: @handleSize; height: @handleSize; top: @sliderHandleOffset; left: 0em;
border-radius: @circularRadius; transition: background 0.3s ease 0s, left 0.3s ease 0s ;}
/* Focus */.ui.toggle.checkbox input:focus + .box:before,.ui.toggle.checkbox input:focus + label:before { background-color: @toggleFocusColor; border: none;}
/* Active */.ui.toggle.checkbox input:checked + .box:before,.ui.toggle.checkbox input:checked + label:before { background-color: @positiveCheckbox;}.ui.toggle.checkbox input:checked + .box:after,.ui.toggle.checkbox input:checked + label:after { left: 1em;}
/*-------------- Sizes---------------*/
.ui.checkbox { font-size: 1em;}.ui.large.checkbox { font-size: 1.25em;}.ui.huge.checkbox { font-size: 1.5em;}
.loadUIOverrides();
|
