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

build/scss/_forms.scss

@@ -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);
+  }
+}

build/scss/mixins/_custom-forms.scss

@@ -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 {

pages/forms/general.html

@@ -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>