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.
 
 
 

285 lines
5.5 KiB

.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;
}