92 lines
1.9 KiB
SCSS
92 lines
1.9 KiB
SCSS
.form-check:not(.form-switch) .form-check-input {
|
|
float: initial !important;
|
|
margin-left: auto !important;
|
|
|
|
&[type="checkbox"],
|
|
&[type="radio"] {
|
|
border: 1px solid darken($gray-200, 10%);
|
|
margin-top: $form-text-margin-top;
|
|
position: relative;
|
|
|
|
&:checked {
|
|
border-color: $primary;
|
|
}
|
|
}
|
|
|
|
&[type="checkbox"] {
|
|
background-image: none;
|
|
&:after {
|
|
transition: opacity $form-check-transition-time ease-in-out;
|
|
font-family: "FontAwesome";
|
|
content: "\f00c";
|
|
width: 100%;
|
|
height: 100%;
|
|
color: $form-check-input-checked-color;
|
|
position: absolute;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: $font-size-sm - .205;
|
|
opacity: 0;
|
|
}
|
|
|
|
&:checked{
|
|
background: $primary;
|
|
&:after {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
&[type="radio"] {
|
|
transition: border 0s;
|
|
background: transparent;
|
|
|
|
&:after {
|
|
transition: opacity $form-check-transition-time ease-in-out;
|
|
content: "";
|
|
position: absolute;
|
|
width: $form-check-radio-after-width;
|
|
height: $form-check-radio-after-width;
|
|
border-radius: 50%;
|
|
background-image: escape-svg($form-check-radio-checked-bg-image), var(--#{$variable-prefix}gradient);;
|
|
opacity: 0;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
margin: auto;
|
|
}
|
|
|
|
&:checked {
|
|
padding: 6px;
|
|
}
|
|
|
|
&:checked:after {
|
|
opacity: 1;
|
|
}
|
|
|
|
&:active{
|
|
box-shadow: $form-check-radio-after-shadow;
|
|
border-radius: $border-radius-pill;
|
|
transition: $form-check-radio-transition;
|
|
}
|
|
}
|
|
}
|
|
|
|
.form-check-label,
|
|
.form-check-input[type="checkbox"] {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.form-check-label{
|
|
font-size:$font-size-sm;
|
|
font-weight: $font-weight-normal;
|
|
}
|
|
|
|
.form-check-input{
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
}
|