github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

add custom-control-input-outline for checkbox & radio

pull/3046/head
REJack 2020-09-23 08:46:54 +02:00
parent 0c91826f12
commit 89dbc4c8de
3 changed files with 39 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
build/scss/_forms.scss
View File

@ -320,3 +320,13 @@ body.text-sm {
@each $name, $color in $colors {
@include custom-control-input-variant($name, $color);
}
.custom-control-input-outline {
~ .custom-control-label::before {
background-color: transparent !important;
box-shadow: none;
}
&:checked ~ .custom-control-label::before {
@include gradient-bg(transparent);
}
}

13
build/scss/mixins/_custom-forms.scss
View File

@ -83,12 +83,25 @@
// Custom Control Input Variant
@mixin custom-control-input-variant($name, $color) {
$custom-control-indicator-checked-color: $color;
$custom-checkbox-indicator-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23");
$custom-radio-indicator-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3E%3C/svg%3E"), "#", "%23");
.custom-control-input-#{$name} {
&:checked ~ .custom-control-label::before {
border-color: $color;
@include gradient-bg($color);
}
&.custom-control-input-outline:checked {
&[type="checkbox"] ~ .custom-control-label::after {
background-image: $custom-checkbox-indicator-icon-checked !important;
}
&[type="radio"] ~ .custom-control-label::after {
background-image: $custom-radio-indicator-icon-checked !important;
}
}
&:focus ~ .custom-control-label::before {
// the mixin is not used here to make sure there is feedback
@if $enable-shadows {

16
pages/forms/general.html
View File

@ -1303,6 +1303,14 @@
<input class="custom-control-input" type="checkbox" id="customCheckbox3" disabled>
<label for="customCheckbox3" class="custom-control-label">Custom Checkbox disabled</label>
</div>
<div class="custom-control custom-checkbox">
<input class="custom-control-input custom-control-input-danger" type="checkbox" id="customCheckbox4" checked>
<label for="customCheckbox4" class="custom-control-label">Custom Checkbox with custom color</label>
</div>
<div class="custom-control custom-checkbox">
<input class="custom-control-input custom-control-input-danger custom-control-input-outline" type="checkbox" id="customCheckbox5" checked>
<label for="customCheckbox5" class="custom-control-label">Custom Checkbox with custom color outline</label>
</div>
</div>
</div>
<div class="col-sm-6">
@ -1320,6 +1328,14 @@
<input class="custom-control-input" type="radio" id="customRadio3" disabled>
<label for="customRadio3" class="custom-control-label">Custom Radio disabled</label>
</div>
<div class="custom-control custom-radio">
<input class="custom-control-input custom-control-input-danger" type="radio" id="customRadio4" name="customRadio2" checked>
<label for="customRadio4" class="custom-control-label">Custom Radio with custom color</label>
</div>
<div class="custom-control custom-radio">
<input class="custom-control-input custom-control-input-danger custom-control-input-outline" type="radio" id="customRadio5" name="customRadio2">
<label for="customRadio5" class="custom-control-label">Custom Radio with custom color outline</label>
</div>
</div>
</div>
</div>