phpvms/resources/sass/now-ui/now-ui-kit/_checkboxes-radio.scss
Nabeel S 7a76ac4226
CSS Libraries and style updates (#388)
* Update now-ui frontend lib to latest instead of the beta

* Update to bootstrap 4 lib

* Fix flights and profile pages
2019-09-12 11:48:41 -04:00

127 lines
3.0 KiB
SCSS
Executable File

.form-check{
margin-top: .65rem;
padding-left: 0;
}
.form-check .form-check-label{
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;
}
.radio .form-check-sign{
padding-left: 28px;
}
.form-check .form-check-sign::before,
.form-check .form-check-sign::after{
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{
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"],
.radio input[type="radio"]{
opacity: 0;
position: absolute;
visibility: hidden;
}
.form-check input[type="checkbox"]:checked + .form-check-sign::after{
opacity: 1;
}
.form-control input[type="checkbox"]:disabled + .form-check-sign::before,
.checkbox input[type="checkbox"]:disabled + .form-check-sign::after{
cursor: not-allowed;
}
.form-check input[type="checkbox"]:disabled + .form-check-sign,
.form-check input[type="radio"]:disabled + .form-check-sign{
pointer-events: none;
}
.form-check-radio .form-check-sign::before,
.form-check-radio .form-check-sign::after{
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"] {
opacity: 0;
}
.form-check-radio input[type="radio"]:checked + .form-check-sign::after {
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{
opacity: 1;
}
.form-check-radio input[type="radio"]:disabled + .form-check-sign {
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 {
color: $dark-gray;
}