|
|
/*! * # Semantic UI 2.0.0 - Checkbox * http://github.com/semantic-org/semantic-ui/ * * * Copyright 2015 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * */
/******************************* Checkbox *******************************/
/*-------------- Content ---------------*/
.ui.checkbox { position: relative; display: inline-block; min-height: 17px; font-size: 1rem; line-height: 15px; min-width: 17px; -webkit-backface-visibility: hidden; backface-visibility: hidden; outline: none; vertical-align: baseline; } .ui.checkbox input[type="checkbox"], .ui.checkbox input[type="radio"] { 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: 1.85714em; outline: none; } .ui.checkbox label { font-size: 1em; } .ui.checkbox .box:before, .ui.checkbox label:before { position: absolute; line-height: 1; width: 17px; height: 17px; top: 0em; left: 0em; content: ''; background: #ffffff; border-radius: 0.25em; -webkit-transition: background-color 0.1s ease, border 0.1s ease, opacity 0.1s ease, box-shadow 0.1s ease; transition: background-color 0.1s ease, border 0.1s ease, opacity 0.1s ease, box-shadow 0.1s ease; border: 1px solid #d4d4d5; }
/*-------------- Checkmark ---------------*/
.ui.checkbox .box:after, .ui.checkbox label:after { position: absolute; top: 0px; left: 0px; line-height: 17px; width: 17px; height: 17px; text-align: center; opacity: 0; color: rgba(0, 0, 0, 0.87); -webkit-transition: background-color 0.1s ease, border 0.1s ease, opacity 0.1s ease, box-shadow 0.1s ease; transition: background-color 0.1s ease, border 0.1s ease, opacity 0.1s ease, box-shadow 0.1s ease; }
/*-------------- Label ---------------*/
/* Inside */ .ui.checkbox label, .ui.checkbox + label { cursor: pointer; color: rgba(0, 0, 0, 0.87); -webkit-transition: color 0.1s ease; transition: color 0.1s ease; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
/* Outside */ .ui.checkbox + label { vertical-align: middle; }
/******************************* States *******************************/
/*-------------- Hover ---------------*/
.ui.checkbox .box:hover::before, .ui.checkbox label:hover::before { background: #ffffff; border-color: rgba(34, 36, 38, 0.35); } .ui.checkbox label:hover, .ui.checkbox + label:hover { color: rgba(0, 0, 0, 0.8); }
/*-------------- Down ---------------*/
.ui.checkbox .box:active::before, .ui.checkbox label:active::before { background: #f9fafb; border-color: rgba(34, 36, 38, 0.35); } .ui.checkbox .box:active::after, .ui.checkbox label:active::after { color: rgba(0, 0, 0, 0.95); } .ui.checkbox input[type="checkbox"]:active ~ label, .ui.checkbox input[type="radio"]:active ~ label { color: rgba(0, 0, 0, 0.95); }
/*-------------- Active ---------------*/
.ui.checkbox input[type="checkbox"]:checked ~ .box:before, .ui.checkbox input[type="checkbox"]:checked ~ label:before, .ui.checkbox input[type="radio"]:checked ~ .box:before, .ui.checkbox input[type="radio"]:checked ~ label:before { background: #ffffff; border-color: rgba(34, 36, 38, 0.35); } .ui.checkbox input[type="checkbox"]:checked ~ .box:after, .ui.checkbox input[type="checkbox"]:checked ~ label:after, .ui.checkbox input[type="radio"]:checked ~ .box:after, .ui.checkbox input[type="radio"]:checked ~ label:after { opacity: 1; color: rgba(0, 0, 0, 0.95); }
/*-------------- 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, .ui.checkbox input[type="checkbox"]:checked:focus ~ .box:before, .ui.checkbox input[type="checkbox"]:checked:focus ~ label:before, .ui.checkbox input[type="radio"]:checked:focus ~ .box:before, .ui.checkbox input[type="radio"]:checked:focus ~ label:before { background: #f9fafb; border-color: rgba(34, 36, 38, 0.35); } .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: rgba(0, 0, 0, 0.95); } .ui.checkbox input[type="checkbox"]:focus ~ label, .ui.checkbox input[type="radio"]:focus ~ label { color: rgba(0, 0, 0, 0.95); }
/*-------------- 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: 0.5; color: #000000; }
/******************************* Types *******************************/
/*-------------- Radio ---------------*/
.ui.radio.checkbox { min-height: 14px; } .ui.radio.checkbox .box, .ui.radio.checkbox label { padding-left: 1.85714em; }
/* Box */ .ui.radio.checkbox .box:before, .ui.radio.checkbox label:before { width: 14px; height: 14px; border-radius: 500rem; top: 1px; left: 0px; -webkit-transform: none; -ms-transform: none; transform: none; }
/* Circle */ .ui.radio.checkbox .box:after, .ui.radio.checkbox label:after { border: none; content: ''; width: 14px; height: 14px; line-height: 14px; top: 1px; left: 0px; font-size: 9px; }
/* Radio Checkbox */ .ui.radio.checkbox .box:after, .ui.radio.checkbox label:after { width: 14px; height: 14px; border-radius: 500rem; -webkit-transform: scale(0.42857143); -ms-transform: scale(0.42857143); transform: scale(0.42857143); background-color: rgba(0, 0, 0, 0.87); }
/* Active */ .ui.radio.checkbox input[type="radio"]:checked ~ .box:before, .ui.radio.checkbox input[type="radio"]:checked ~ label:before { background-color: #ffffff; } .ui.radio.checkbox input[type="radio"]:checked ~ .box:after, .ui.radio.checkbox input[type="radio"]:checked ~ label:after { background-color: rgba(0, 0, 0, 0.95); }
/*-------------- Slider ---------------*/
.ui.slider.checkbox { min-height: 1.25rem; } .ui.slider.checkbox .box, .ui.slider.checkbox label { padding-left: 4.5rem; line-height: 1rem; color: rgba(0, 0, 0, 0.4); }
/* Line */ .ui.slider.checkbox .box:before, .ui.slider.checkbox label:before { display: block; position: absolute; content: ''; top: 0.4rem; left: 0em; z-index: 1; border: none !important; background-color: rgba(0, 0, 0, 0.05); width: 3.5rem; height: 0.2142rem; -webkit-transform: none; -ms-transform: none; transform: none; border-radius: 500rem; -webkit-transition: background 0.3s ease; transition: background 0.3s ease; }
/* Handle */ .ui.slider.checkbox .box:after, .ui.slider.checkbox label:after { background: #ffffff -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05)); background: #ffffff linear-gradient(transparent, rgba(0, 0, 0, 0.05)); position: absolute; content: ''; opacity: 1; z-index: 2; border: none; box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset; width: 1.5rem; height: 1.5rem; top: -0.25rem; left: 0em; -webkit-transform: none; -ms-transform: none; transform: none; border-radius: 500rem; -webkit-transition: left 0.3s ease; transition: left 0.3s ease; }
/* 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: rgba(0, 0, 0, 0.15); border: none; }
/* Hover */ .ui.slider.checkbox .box:hover, .ui.slider.checkbox label:hover { color: rgba(0, 0, 0, 0.8); } .ui.slider.checkbox .box:hover::before, .ui.slider.checkbox label:hover::before { background: rgba(0, 0, 0, 0.15); }
/* Active */ .ui.slider.checkbox input[type="checkbox"]:checked ~ .box, .ui.slider.checkbox input[type="checkbox"]:checked ~ label, .ui.slider.checkbox input[type="radio"]:checked ~ .box, .ui.slider.checkbox input[type="radio"]:checked ~ label { color: rgba(0, 0, 0, 0.95); } .ui.slider.checkbox input[type="checkbox"]:checked ~ .box:before, .ui.slider.checkbox input[type="checkbox"]:checked ~ label:before, .ui.slider.checkbox input[type="radio"]:checked ~ .box:before, .ui.slider.checkbox input[type="radio"]:checked ~ label:before { background-color: #545454; } .ui.slider.checkbox input[type="checkbox"]:checked ~ .box:after, .ui.slider.checkbox input[type="checkbox"]:checked ~ label:after, .ui.slider.checkbox input[type="radio"]:checked ~ .box:after, .ui.slider.checkbox input[type="radio"]:checked ~ label:after { left: 2rem; }
/*-------------- Toggle ---------------*/
.ui.toggle.checkbox { min-height: 1.5rem; } .ui.toggle.checkbox .box, .ui.toggle.checkbox label { min-height: 1.5rem; padding-left: 4.5rem; color: rgba(0, 0, 0, 0.87); } .ui.toggle.checkbox label { padding-top: 0.15em; }
/* Switch */ .ui.toggle.checkbox .box:before, .ui.toggle.checkbox label:before { display: block; position: absolute; content: ''; top: 0rem; z-index: 1; border: none; background-color: rgba(0, 0, 0, 0.05); width: 3.5rem; height: 1.5rem; border-radius: 500rem; }
/* Handle */ .ui.toggle.checkbox .box:after, .ui.toggle.checkbox label:after { background: #ffffff -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05)); background: #ffffff linear-gradient(transparent, rgba(0, 0, 0, 0.05)); position: absolute; content: ''; opacity: 1; z-index: 2; border: none; box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset; width: 1.5rem; height: 1.5rem; top: 0rem; left: 0em; border-radius: 500rem; -webkit-transition: background 0.3s ease, left 0.3s ease; transition: background 0.3s ease, left 0.3s ease; } .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: -0.05rem; }
/* 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: rgba(0, 0, 0, 0.15); border: none; }
/* Hover */ .ui.toggle.checkbox .box:hover::before, .ui.toggle.checkbox label:hover::before { background-color: rgba(0, 0, 0, 0.15); border: none; }
/* Active */ .ui.toggle.checkbox input[type="checkbox"]:checked ~ .box, .ui.toggle.checkbox input[type="checkbox"]:checked ~ label, .ui.toggle.checkbox input[type="radio"]:checked ~ .box, .ui.toggle.checkbox input[type="radio"]:checked ~ label { color: rgba(0, 0, 0, 0.95); } .ui.toggle.checkbox input[type="checkbox"]:checked ~ .box:before, .ui.toggle.checkbox input[type="checkbox"]:checked ~ label:before, .ui.toggle.checkbox input[type="radio"]:checked ~ .box:before, .ui.toggle.checkbox input[type="radio"]:checked ~ label:before { background-color: #2185d0; } .ui.toggle.checkbox input[type="checkbox"]:checked ~ .box:after, .ui.toggle.checkbox input[type="checkbox"]:checked ~ label:after, .ui.toggle.checkbox input[type="radio"]:checked ~ .box:after, .ui.toggle.checkbox input[type="radio"]:checked ~ label:after { left: 2.15rem; }
/******************************* Variations *******************************/
/*-------------- Fitted ---------------*/
.ui.fitted.checkbox .box, .ui.fitted.checkbox label { padding-left: 0em !important; } .ui.fitted.toggle.checkbox, .ui.fitted.toggle.checkbox { width: 3.5rem; } .ui.fitted.slider.checkbox, .ui.fitted.slider.checkbox { width: 3.5rem; }
/******************************* Theme Overrides *******************************/
@font-face { font-family: 'Checkbox'; src: url(data:application/x-font-ttf;charset=utf-8;base64,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 } .ui.checkbox label:before, .ui.checkbox .box:before, .ui.checkbox label:after, .ui.checkbox .box:after { font-family: 'Checkbox'; } .ui.checkbox label:after, .ui.checkbox .box:after { content: '\e800'; } /* UTF Reference .check:before { content: '\e800'; } '' .circle:before { content: '\e801'; } .ok-circled:before { content: '\e806'; } .ok-circle:before { content: '\e805'; } .cancel-circle:before { content: '\e807'; } .cancel-circle-1:before { content: '\e804'; } .empty-circle:before { content: '\e802'; } .radio:before { content: '\e803'; }
*/
/******************************* Site Overrides *******************************/
|