|
|
.ui.checkbox { position: relative; display: inline-block; min-width: 1em; height: 1.25em; line-height: 1em; outline: 0; vertical-align: middle; }
.ui.checkbox input { position: absolute; top: 0; left: 0; opacity: 0; outline: 0; }
.ui.checkbox .box, .ui.checkbox label { cursor: pointer; padding-left: 2em; outline: 0; }
.ui.checkbox .box:before, .ui.checkbox label:before { position: absolute; top: 0; line-height: 1; width: 1em; height: 1em; left: 0; content: ''; border-radius: 4px; background: #FFF; -webkit-transition: background-color .3s ease,-webkit-box-shadow .3s ease; transition: background-color .3s ease,box-shadow .3s ease; -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.2); box-shadow: 0 0 0 1px rgba(0,0,0,.2); }
.ui.checkbox .box:after, .ui.checkbox label:after { -ms-filter: "alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; content: ''; position: absolute; background: transparent; border: .2em solid #333; border-top: 0; border-right: 0; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }
.ui.checkbox .box:after, .ui.checkbox label:after { top: .275em; left: .2em; width: .45em; height: .15em; }
.ui.checkbox label { color: rgba(0,0,0,.6); -webkit-transition: color .2s ease; transition: color .2s ease; }
.ui.checkbox label:hover { color: rgba(0,0,0,.8); }
.ui.checkbox input:focus+label { color: rgba(0,0,0,.8); }
.ui.checkbox+label { cursor: pointer; opacity: .85; vertical-align: middle; }
.ui.checkbox+label:hover { opacity: 1; }
.ui.checkbox .box:hover::before, .ui.checkbox label:hover::before { -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.3); box-shadow: 0 0 0 1px rgba(0,0,0,.3); }
.ui.checkbox .box:active::before, .ui.checkbox label:active::before { background-color: #F5F5F5; }
.ui.checkbox input:focus+.box:before, .ui.checkbox input:focus+label:before { -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.3); box-shadow: 0 0 0 1px rgba(0,0,0,.3); }
.ui.checkbox input:checked+.box:after, .ui.checkbox input:checked+label:after { -ms-filter: "alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; }
.ui.disabled.checkbox+.box:after, .ui.checkbox input[disabled]+.box:after, .ui.disabled.checkbox label, .ui.checkbox input[disabled]+label { opacity: .4; color: rgba(0,0,0,.3); }
.ui.radio.checkbox .box:before, .ui.radio.checkbox label:before { min-width: 1em; height: 1em; border-radius: 500px; }
.ui.radio.checkbox .box:after, .ui.radio.checkbox label:after { border: 0; top: .2em; left: .2em; width: .6em; height: .6em; background-color: #555; -webkit-transform: none; -ms-transform: none; transform: none; border-radius: 500px; }
.ui.slider.checkbox { cursor: pointer; min-width: 3em; }
.ui.slider.checkbox:after { position: absolute; top: .5em; left: 0; content: ''; width: 3em; height: 2px; background-color: rgba(0,0,0,.1); }
.ui.slider.checkbox .box, .ui.slider.checkbox label { padding-left: 4em; }
.ui.slider.checkbox .box:before, .ui.slider.checkbox label:before { cursor: pointer; display: block; position: absolute; top: -.25em; left: 0; z-index: 1; width: 1.5em; height: 1.5em; -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.1) inset; box-shadow: 0 0 0 1px rgba(0,0,0,.1) inset; border-radius: 50rem; -webkit-transition: left .3s ease 0s; transition: left .3s ease 0s; }
.ui.slider.checkbox .box:after, .ui.slider.checkbox label:after { opacity: 1; position: absolute; content: ''; top: .15em; left: 0; z-index: 2; margin-left: .375em; border: 0; width: .75em; height: .75em; border-radius: 50rem; -webkit-transform: none; -ms-transform: none; transform: none; -webkit-transition: background .3s ease 0s,left .3s ease 0s; transition: background .3s ease 0s,left .3s ease 0s; }
.ui.slider.checkbox input:checked+.box:before, .ui.slider.checkbox input:checked+label:before, .ui.slider.checkbox input:checked+.box:after, .ui.slider.checkbox input:checked+label:after { left: 1.75em; }
.ui.slider.checkbox .box:after, .ui.slider.checkbox label:after { background-color: #D95C5C; }
.ui.slider.checkbox input:checked+.box:after, .ui.slider.checkbox input:checked+label:after { background-color: #89B84C; }
.ui.toggle.checkbox { cursor: pointer; }
.ui.toggle.checkbox .box, .ui.toggle.checkbox label { padding-left: 4em; }
.ui.toggle.checkbox .box:before, .ui.toggle.checkbox label:before { cursor: pointer; display: block; position: absolute; content: ''; top: -.25em; left: 0; z-index: 1; background-color: #FFF; width: 3em; height: 1.5em; -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.1) inset; box-shadow: 0 0 0 1px rgba(0,0,0,.1) inset; border-radius: 50rem; }
.ui.toggle.checkbox .box:after, .ui.toggle.checkbox label:after { opacity: 1; background-color: transparent; -webkit-box-shadow: none; box-shadow: none; content: ''; position: absolute; top: .15em; left: .5em; z-index: 2; border: 0; width: .75em; height: .75em; background-color: #D95C5C; border-radius: 50rem; -webkit-transition: background .3s ease 0s,left .3s ease 0s; transition: background .3s ease 0s,left .3s ease 0s; }
.ui.toggle.checkbox:active .box:before, .ui.toggle.checkbox:active label:before { background-color: #F5F5F5; }
.ui.toggle.checkbox input:checked+.box:after, .ui.toggle.checkbox input:checked+label:after { left: 1.75em; background-color: #89B84C; }
.ui.checkbox { font-size: 1em; }
.ui.large.checkbox { font-size: 1.25em; }
.ui.huge.checkbox { font-size: 1.5em; }
|