120 lines
3.0 KiB
CSS
Executable File
120 lines
3.0 KiB
CSS
Executable File
/*
|
|
Skins:
|
|
Blue: #3498DB
|
|
Green: #1ABC9C
|
|
Grey: #3F3F3F
|
|
Purple: #AF7AC5
|
|
Red: #EC7063
|
|
Yellow: #F1C40F
|
|
*/
|
|
/* Debug*/
|
|
/* [class^='col-'] {
|
|
box-shadow: inset 0 0 0 1px #d6bf2b;
|
|
background: #f5db31;
|
|
}
|
|
|
|
.checkbox-inline,
|
|
.radio-inline,
|
|
.checkbox,
|
|
.radio {
|
|
box-shadow: inset 0 0 0 1px #e08114;
|
|
background: #f59931;
|
|
} */
|
|
.checkbox-inline,
|
|
.radio-inline,
|
|
.checkbox label,
|
|
.radio label,
|
|
.form-check-label {
|
|
position: relative;
|
|
text-align: left !important;
|
|
padding-left: 30px !important;
|
|
margin-right: 40px;
|
|
padding-top: calc(0.375rem + 1px);
|
|
padding-bottom: calc(0.375rem + 1px);
|
|
line-height: 1.5; }
|
|
|
|
.foundation-checkbox,
|
|
.foundation-radio {
|
|
position: relative;
|
|
margin-right: 40px; }
|
|
.foundation-checkbox label,
|
|
.foundation-radio label {
|
|
position: relative;
|
|
padding-left: 30px; }
|
|
|
|
.check {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
display: block;
|
|
width: 19.6px;
|
|
height: 1px;
|
|
top: 50%;
|
|
margin-top: -9.8px; }
|
|
|
|
input[type='checkbox'] {
|
|
display: none; }
|
|
input[type='checkbox'] ~ .check:before,
|
|
input[type='checkbox'] ~ label .check:before {
|
|
transition: transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
|
|
transform: rotate(-45deg) scale(0, 0);
|
|
content: '';
|
|
position: absolute;
|
|
margin-left: 1.4px;
|
|
left: 2px;
|
|
top: 2.1px;
|
|
z-index: 1;
|
|
width: 12.6px;
|
|
height: 7px;
|
|
border: 2px solid #268fff;
|
|
border-top-style: none;
|
|
border-right-style: none; }
|
|
input[type='checkbox']:checked ~ .check:before, input[type='checkbox']:checked + label .check:before {
|
|
transform: rotate(-45deg) scale(1, 1); }
|
|
input[type='checkbox'] ~ .check:after,
|
|
input[type='checkbox'] ~ label .check:after {
|
|
content: '';
|
|
position: absolute;
|
|
top: -2px;
|
|
left: 0;
|
|
width: 19.6px;
|
|
height: 19.6px;
|
|
background: #fff;
|
|
border: 2px solid #ccc;
|
|
cursor: pointer; }
|
|
input[type='checkbox']:checked ~ .check:after, input[type='checkbox']:checked + label .check:after {
|
|
border: 2px solid #a3c4e8; }
|
|
|
|
/* 14px => 10px */
|
|
/* 14px => 20px */
|
|
input[type='radio'] {
|
|
display: none; }
|
|
input[type='radio'] ~ .check:before,
|
|
input[type='radio'] ~ label .check:before {
|
|
transition: transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
|
|
transform: scale(0, 0);
|
|
content: '';
|
|
position: absolute;
|
|
top: 5px;
|
|
left: 5px;
|
|
z-index: 1;
|
|
width: 10px;
|
|
height: 10px;
|
|
background: #268fff;
|
|
border-radius: 50%; }
|
|
input[type='radio']:checked ~ .check:before, input[type='radio']:checked + label .check:before {
|
|
transform: scale(1, 1); }
|
|
input[type='radio'] ~ .check:after,
|
|
input[type='radio'] ~ label .check:after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 20px;
|
|
height: 20px;
|
|
background: #fff;
|
|
box-shadow: inset 0 0 0 2px #ccc;
|
|
border-radius: 50%; }
|
|
input[type='radio']:checked ~ .check:after, input[type='radio']:checked + label .check:after {
|
|
box-shadow: inset 0 0 0 2px #268fff; }
|
|
|
|
/*# sourceMappingURL=nice-check-blue.css.map */
|