|
|
|
@ -9444,34 +9444,45 @@ a.ui.teal.label:hover:before { |
|
|
|
position: relative; |
|
|
|
display: inline-block; |
|
|
|
outline: none; |
|
|
|
margin-left: 0.5em; |
|
|
|
vertical-align: middle; |
|
|
|
} |
|
|
|
.ui.checkbox input { |
|
|
|
position: absolute; |
|
|
|
top: 0px; |
|
|
|
right: 0px; |
|
|
|
opacity: 0; |
|
|
|
outline: none; |
|
|
|
} |
|
|
|
/*--- Box ---*/ |
|
|
|
.ui.checkbox .box, |
|
|
|
.ui.checkbox label { |
|
|
|
outline: none; |
|
|
|
cursor: pointer; |
|
|
|
position: relative; |
|
|
|
min-width: 1em; |
|
|
|
height: 1em; |
|
|
|
padding-right: 2em; |
|
|
|
outline: none; |
|
|
|
white-space: nowrap; |
|
|
|
} |
|
|
|
.ui.checkbox .box:before, |
|
|
|
.ui.checkbox label:before { |
|
|
|
position: absolute; |
|
|
|
top: 0.25em; |
|
|
|
line-height: 1; |
|
|
|
width: 1em; |
|
|
|
height: 1em; |
|
|
|
bottom: 0em; |
|
|
|
right: 0em; |
|
|
|
content: ''; |
|
|
|
border-radius: 4px; |
|
|
|
background: #FFFFFF; |
|
|
|
-webkit-transition: background-color 0.3s ease, box-shadow 0.3s ease; |
|
|
|
-moz-transition: background-color 0.3s ease, box-shadow 0.3s ease; |
|
|
|
-o-transition: background-color 0.3s ease, box-shadow 0.3s ease; |
|
|
|
-ms-transition: background-color 0.3s ease, box-shadow 0.3s ease; |
|
|
|
transition: background-color 0.3s ease, box-shadow 0.3s ease; |
|
|
|
-webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); |
|
|
|
-moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); |
|
|
|
box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); |
|
|
|
background: #FFFFFF; |
|
|
|
-webkit-transition: background-color 0.1s ease-out, box-shadow 0.1s ease-out; |
|
|
|
-moz-transition: background-color 0.1s ease-out, box-shadow 0.1s ease-out; |
|
|
|
-o-transition: background-color 0.1s ease-out, box-shadow 0.1s ease-out; |
|
|
|
-ms-transition: background-color 0.1s ease-out, box-shadow 0.1s ease-out; |
|
|
|
transition: background-color 0.1s ease-out, box-shadow 0.1s ease-out; |
|
|
|
} |
|
|
|
/*--- Checkbox ---*/ |
|
|
|
.ui.checkbox .box:after, |
|
|
|
@ -9493,12 +9504,27 @@ a.ui.teal.label:hover:before { |
|
|
|
} |
|
|
|
.ui.checkbox .box:after, |
|
|
|
.ui.checkbox label:after { |
|
|
|
top: 0.3em; |
|
|
|
top: 0.54em; |
|
|
|
right: 0.2em; |
|
|
|
width: 0.45em; |
|
|
|
height: 0.15em; |
|
|
|
} |
|
|
|
/*--- Label ---*/ |
|
|
|
/*--- Inside Label ---*/ |
|
|
|
.ui.checkbox label { |
|
|
|
color: rgba(0, 0, 0, 0.6); |
|
|
|
-webkit-transition: color 0.2s ease; |
|
|
|
-moz-transition: color 0.2s ease; |
|
|
|
-o-transition: color 0.2s ease; |
|
|
|
-ms-transition: color 0.2s ease; |
|
|
|
transition: color 0.2s ease; |
|
|
|
} |
|
|
|
.ui.checkbox label:hover { |
|
|
|
color: rgba(0, 0, 0, 0.8); |
|
|
|
} |
|
|
|
.ui.checkbox input:focus + label { |
|
|
|
color: rgba(0, 0, 0, 0.8); |
|
|
|
} |
|
|
|
/*--- Outside Label ---*/ |
|
|
|
.ui.checkbox + label { |
|
|
|
cursor: pointer; |
|
|
|
opacity: 0.85; |
|
|
|
@ -9511,18 +9537,24 @@ a.ui.teal.label:hover:before { |
|
|
|
States |
|
|
|
*******************************/ |
|
|
|
/*--- Hover ---*/ |
|
|
|
.ui.checkbox .box:hover, |
|
|
|
.ui.checkbox label:hover { |
|
|
|
background-color: #FAFAFA; |
|
|
|
.ui.checkbox .box:hover::before, |
|
|
|
.ui.checkbox label:hover::before { |
|
|
|
-webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); |
|
|
|
-moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); |
|
|
|
box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); |
|
|
|
} |
|
|
|
/*--- Down ---*/ |
|
|
|
.ui.checkbox .box:active, |
|
|
|
.ui.checkbox label:active { |
|
|
|
.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 { |
|
|
|
-webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); |
|
|
|
-moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); |
|
|
|
box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); |
|
|
|
} |
|
|
|
/*--- Active ---*/ |
|
|
|
.ui.checkbox input:checked + .box:after, |
|
|
|
.ui.checkbox input:checked + label:after { |
|
|
|
@ -9536,6 +9568,7 @@ a.ui.teal.label:hover:before { |
|
|
|
.ui.disabled.checkbox label, |
|
|
|
.ui.checkbox input[disabled] + label { |
|
|
|
opacity: 0.4; |
|
|
|
color: rgba(0, 0, 0, 0.3); |
|
|
|
} |
|
|
|
/******************************* |
|
|
|
Variations |
|
|
|
@ -9543,25 +9576,21 @@ a.ui.teal.label:hover:before { |
|
|
|
/*-------------- |
|
|
|
Radio |
|
|
|
---------------*/ |
|
|
|
.ui.radio.checkbox { |
|
|
|
width: 14px; |
|
|
|
height: 16px; |
|
|
|
} |
|
|
|
.ui.radio.checkbox .box, |
|
|
|
.ui.radio.checkbox label { |
|
|
|
width: 14px; |
|
|
|
height: 14px; |
|
|
|
.ui.radio.checkbox .box:before, |
|
|
|
.ui.radio.checkbox label:before { |
|
|
|
width: 1em; |
|
|
|
height: 1em; |
|
|
|
-webkit-border-radius: 500px; |
|
|
|
-moz-border-radius: 500px; |
|
|
|
border-radius: 500px; |
|
|
|
} |
|
|
|
.ui.radio.checkbox .box:after, |
|
|
|
.ui.radio.checkbox label:after { |
|
|
|
top: 3px; |
|
|
|
right: 3px; |
|
|
|
border: none; |
|
|
|
width: 8px; |
|
|
|
height: 8px; |
|
|
|
top: 0.45em; |
|
|
|
right: 0.2em; |
|
|
|
width: 0.6em; |
|
|
|
height: 0.6em; |
|
|
|
background-color: #555555; |
|
|
|
-webkit-border-radius: 500px; |
|
|
|
-moz-border-radius: 500px; |
|
|
|
@ -9572,26 +9601,30 @@ a.ui.teal.label:hover:before { |
|
|
|
---------------*/ |
|
|
|
.ui.slider.checkbox { |
|
|
|
cursor: pointer; |
|
|
|
width: 3em; |
|
|
|
min-width: 3em; |
|
|
|
height: 2em; |
|
|
|
} |
|
|
|
/* Line */ |
|
|
|
.ui.slider.checkbox:after { |
|
|
|
position: absolute; |
|
|
|
top: 1em; |
|
|
|
top: 0.8em; |
|
|
|
right: 0em; |
|
|
|
content: ''; |
|
|
|
width: 100%; |
|
|
|
width: 3em; |
|
|
|
height: 2px; |
|
|
|
background-color: rgba(0, 0, 0, 0.1); |
|
|
|
} |
|
|
|
/* Button */ |
|
|
|
.ui.slider.checkbox .box, |
|
|
|
.ui.slider.checkbox label { |
|
|
|
padding-right: 4em; |
|
|
|
} |
|
|
|
.ui.slider.checkbox .box:before, |
|
|
|
.ui.slider.checkbox label:before { |
|
|
|
cursor: pointer; |
|
|
|
display: block; |
|
|
|
position: absolute; |
|
|
|
top: 0.25em; |
|
|
|
top: 0em; |
|
|
|
right: 0; |
|
|
|
z-index: 1; |
|
|
|
width: 1.5em; |
|
|
|
@ -9613,23 +9646,42 @@ a.ui.teal.label:hover:before { |
|
|
|
position: absolute; |
|
|
|
content: ''; |
|
|
|
top: 0.375em; |
|
|
|
right: 0.375em; |
|
|
|
right: 0em; |
|
|
|
z-index: 2; |
|
|
|
margin-right: 0.375em; |
|
|
|
border: none; |
|
|
|
width: 0.75em; |
|
|
|
height: 0.75em; |
|
|
|
background-color: #D95C5C; |
|
|
|
border-radius: 50rem; |
|
|
|
-webkit-transition: background 0.3s ease 0s; |
|
|
|
-moz-transition: background 0.3s ease 0s; |
|
|
|
-o-transition: background 0.3s ease 0s; |
|
|
|
-ms-transition: background 0.3s ease 0s; |
|
|
|
transition: background 0.3s ease 0s; |
|
|
|
} |
|
|
|
/* Active Slider Toggle */ |
|
|
|
.ui.slider.checkbox input:checked + .box, |
|
|
|
.ui.slider.checkbox input:checked + label { |
|
|
|
-webkit-transition: background 0.3s ease 0s, |
|
|
|
right 0.3s ease 0s |
|
|
|
; |
|
|
|
-moz-transition: background 0.3s ease 0s, |
|
|
|
right 0.3s ease 0s |
|
|
|
; |
|
|
|
-o-transition: background 0.3s ease 0s, |
|
|
|
right 0.3s ease 0s |
|
|
|
; |
|
|
|
-ms-transition: background 0.3s ease 0s, |
|
|
|
right 0.3s ease 0s |
|
|
|
; |
|
|
|
transition: background 0.3s ease 0s, |
|
|
|
right 0.3s ease 0s |
|
|
|
; |
|
|
|
} |
|
|
|
/* Selected Slider Toggle */ |
|
|
|
.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 { |
|
|
|
right: 1.75em; |
|
|
|
} |
|
|
|
/* Off Color */ |
|
|
|
.ui.slider.checkbox .box:after, |
|
|
|
.ui.slider.checkbox label:after { |
|
|
|
background-color: #D95C5C; |
|
|
|
} |
|
|
|
/* On Color */ |
|
|
|
.ui.slider.checkbox input:checked + .box:after, |
|
|
|
.ui.slider.checkbox input:checked + label:after { |
|
|
|
background-color: #89B84C; |
|
|
|
@ -9639,68 +9691,73 @@ a.ui.teal.label:hover:before { |
|
|
|
---------------*/ |
|
|
|
.ui.toggle.checkbox { |
|
|
|
cursor: pointer; |
|
|
|
width: 3em; |
|
|
|
height: 2em; |
|
|
|
} |
|
|
|
/* Line */ |
|
|
|
.ui.toggle.checkbox:after { |
|
|
|
.ui.toggle.checkbox .box, |
|
|
|
.ui.toggle.checkbox label { |
|
|
|
padding-right: 4em; |
|
|
|
} |
|
|
|
/* Switch */ |
|
|
|
.ui.toggle.checkbox .box:before, |
|
|
|
.ui.toggle.checkbox label:before { |
|
|
|
cursor: pointer; |
|
|
|
display: block; |
|
|
|
position: absolute; |
|
|
|
content: ''; |
|
|
|
top: 0.25em; |
|
|
|
top: 0em; |
|
|
|
right: 0em; |
|
|
|
z-index: 1; |
|
|
|
background-color: #FFFFFF; |
|
|
|
width: 100%; |
|
|
|
width: 3em; |
|
|
|
height: 1.5em; |
|
|
|
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; |
|
|
|
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; |
|
|
|
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; |
|
|
|
border-radius: 50rem; |
|
|
|
} |
|
|
|
.ui.toggle.checkbox .box, |
|
|
|
.ui.toggle.checkbox label { |
|
|
|
position: absolute; |
|
|
|
top: 0.65em; |
|
|
|
right: 0.5em; |
|
|
|
-webkit-transition: right 0.3s ease 0s; |
|
|
|
-moz-transition: right 0.3s ease 0s; |
|
|
|
-o-transition: right 0.3s ease 0s; |
|
|
|
-ms-transition: right 0.3s ease 0s; |
|
|
|
transition: right 0.3s ease 0s; |
|
|
|
/* Activation Light */ |
|
|
|
.ui.toggle.checkbox .box:after, |
|
|
|
.ui.toggle.checkbox label:after { |
|
|
|
opacity: 1; |
|
|
|
background-color: transparent; |
|
|
|
-webkit-box-shadow: none; |
|
|
|
-moz-box-shadow: none; |
|
|
|
box-shadow: none; |
|
|
|
} |
|
|
|
/* Button Activation Light */ |
|
|
|
.ui.toggle.checkbox .box:after, |
|
|
|
.ui.toggle.checkbox label:after { |
|
|
|
opacity: 1; |
|
|
|
content: ''; |
|
|
|
position: absolute; |
|
|
|
top: 0px; |
|
|
|
right: 0px; |
|
|
|
top: 0.35em; |
|
|
|
right: 0.5em; |
|
|
|
z-index: 2; |
|
|
|
border: none; |
|
|
|
width: 0.75em; |
|
|
|
height: 0.75em; |
|
|
|
background-color: #D95C5C; |
|
|
|
border-radius: 50rem; |
|
|
|
-webkit-transition: background 0.3s ease 0s; |
|
|
|
-moz-transition: background 0.3s ease 0s; |
|
|
|
-o-transition: background 0.3s ease 0s; |
|
|
|
-ms-transition: background 0.3s ease 0s; |
|
|
|
transition: background 0.3s ease 0s; |
|
|
|
} |
|
|
|
/* Active toggle Toggle */ |
|
|
|
.ui.toggle.checkbox input:checked + .box, |
|
|
|
.ui.toggle.checkbox input:checked + label { |
|
|
|
right: 1.75em; |
|
|
|
-webkit-transition: background 0.3s ease 0s, |
|
|
|
right 0.3s ease 0s |
|
|
|
; |
|
|
|
-moz-transition: background 0.3s ease 0s, |
|
|
|
right 0.3s ease 0s |
|
|
|
; |
|
|
|
-o-transition: background 0.3s ease 0s, |
|
|
|
right 0.3s ease 0s |
|
|
|
; |
|
|
|
-ms-transition: background 0.3s ease 0s, |
|
|
|
right 0.3s ease 0s |
|
|
|
; |
|
|
|
transition: background 0.3s ease 0s, |
|
|
|
right 0.3s ease 0s |
|
|
|
; |
|
|
|
} |
|
|
|
/* Active */ |
|
|
|
.ui.toggle.checkbox:active .box:before, |
|
|
|
.ui.toggle.checkbox:active label:before { |
|
|
|
background-color: #F5F5F5; |
|
|
|
} |
|
|
|
/* Active */ |
|
|
|
.ui.toggle.checkbox input:checked + .box:after, |
|
|
|
.ui.toggle.checkbox input:checked + label:after { |
|
|
|
right: 1.75em; |
|
|
|
background-color: #89B84C; |
|
|
|
} |
|
|
|
/*-------------- |
|
|
|
|
jlukic
11 years ago