phpvms/resources/sass/now-ui/now-ui-kit/_checkboxes-radio.scss

127 lines
3.0 KiB
SCSS
Raw Normal View History

.form-check{
margin-top: .65rem;
padding-left: 0;
2017-07-28 20:13:52 +08:00
}
.form-check .form-check-label{
2017-07-28 20:13:52 +08:00
display: inline-block;
position: relative;
cursor: pointer;
padding-left: 35px;
line-height: 26px;
margin-bottom: 0;
-webkit-transition: color 0.3s linear;
-moz-transition: color 0.3s linear;
-o-transition: color 0.3s linear;
-ms-transition: color 0.3s linear;
transition: color 0.3s linear;
2017-07-28 20:13:52 +08:00
}
.radio .form-check-sign{
2017-07-28 20:13:52 +08:00
padding-left: 28px;
}
.form-check .form-check-sign::before,
.form-check .form-check-sign::after{
2017-07-28 20:13:52 +08:00
content: " ";
display: inline-block;
position: absolute;
width: 26px;
height: 26px;
left: 0;
cursor: pointer;
border-radius: 3px;
top: 0;
background-color: transparent;
border: 1px solid $light-gray;
-webkit-transition: opacity 0.3s linear;
-moz-transition: opacity 0.3s linear;
-o-transition: opacity 0.3s linear;
-ms-transition: opacity 0.3s linear;
transition: opacity 0.3s linear;
}
.form-check .form-check-sign::after{
2017-07-28 20:13:52 +08:00
font-family: 'Nucleo Outline';
content: "\ea22";
top: 0px;
text-align: center;
font-size: 14px;
opacity: 0;
color: $dark-background;
border: 0;
background-color: inherit;
}
.form-check.disabled .form-check-label,
.form-check.disabled .form-check-label {
color: $dark-gray;
opacity: .5;
cursor: not-allowed;
}
.form-check input[type="checkbox"],
2017-07-28 20:13:52 +08:00
.radio input[type="radio"]{
opacity: 0;
position: absolute;
visibility: hidden;
}
.form-check input[type="checkbox"]:checked + .form-check-sign::after{
2017-07-28 20:13:52 +08:00
opacity: 1;
}
.form-control input[type="checkbox"]:disabled + .form-check-sign::before,
.checkbox input[type="checkbox"]:disabled + .form-check-sign::after{
2017-07-28 20:13:52 +08:00
cursor: not-allowed;
}
.form-check input[type="checkbox"]:disabled + .form-check-sign,
.form-check input[type="radio"]:disabled + .form-check-sign{
pointer-events: none;
2017-07-28 20:13:52 +08:00
}
.form-check-radio .form-check-sign::before,
.form-check-radio .form-check-sign::after{
2017-07-28 20:13:52 +08:00
content: " ";
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid $light-gray;
display: inline-block;
position: absolute;
left: 3px;
top: 3px;
padding: 1px;
-webkit-transition: opacity 0.3s linear;
-moz-transition: opacity 0.3s linear;
-o-transition: opacity 0.3s linear;
-ms-transition: opacity 0.3s linear;
transition: opacity 0.3s linear;
}
.form-check-radio input[type="radio"] + .form-check-sign:after,
.form-check-radio input[type="radio"] {
2017-07-28 20:13:52 +08:00
opacity: 0;
}
.form-check-radio input[type="radio"]:checked + .form-check-sign::after {
2017-07-28 20:13:52 +08:00
width: 4px;
height: 4px;
background-color: $dark-background;
border-color: $dark-background;
top: 11px;
left: 11px;
opacity: 1;
}
.form-check-radio input[type="radio"]:checked + .form-check-sign::after{
2017-07-28 20:13:52 +08:00
opacity: 1;
}
.form-check-radio input[type="radio"]:disabled + .form-check-sign {
2017-07-28 20:13:52 +08:00
color: $dark-gray;
}
.form-check-radio input[type="radio"]:disabled + .form-check-sign::before,
.form-check-radio input[type="radio"]:disabled + .form-check-sign::after {
2017-07-28 20:13:52 +08:00
color: $dark-gray;
}