cerebrate/webroot/theme/scss/mixins/_forms-severity.scss

32 lines
1.3 KiB
SCSS
Raw Normal View History

@mixin form-control-validation-severity-state($color) {
background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='#{$color}' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$color}' stroke='none'/></svg>"));
&:focus {
border-color: $color;
box-shadow: 0 0 0 $form-select-focus-width rgba($color, .25);
}
}
@mixin form-select-validation-severity-state($color) {
background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$color}' stroke='none'/></svg>"));
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
&:focus {
box-shadow: 0 0 0 $form-select-focus-width rgba($color, .25);
}
}
@mixin form-check-input-validation-severity-state($color) {
& {
border-color: $color;
}
&:checked {
background-color: $color;
}
& ~ .form-check-label {
color: unset;
}
&:focus {
box-shadow: 0 0 0 0.2rem rgba($color, .25);
}
}