fix: update custom checkboxes

techfromsage · Apr 22, 2021 · 31228d7 · 31228d7
1 parent 07feb1b
commit 31228d7
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 4 deletions.
diff --git a/docs/assets/css/talis.css b/docs/assets/css/talis.css
diff --git a/docs/assets/css/talis.css.map b/docs/assets/css/talis.css.map
diff --git a/docs/index.html b/docs/index.html
@@ -447,12 +447,12 @@ <h2>Forms</h2>
             </div>
 
             <div class="form-check">
-              <input class="form-check-input" type="radio" id="radio">
+              <input class="form-check-input" type="radio" id="radio" name="radio">
               <label class="form-check-label form-label" for="radio">Check me out</label>
             </div>
 
             <div class="form-check">
-              <input class="form-check-input" type="radio" id="radio-checked" checked>
+              <input class="form-check-input" type="radio" id="radio-checked" name="radio" checked>
               <label class="form-check-label form-label" for="radio-checked">Check me out</label>
             </div>
 

diff --git a/scss/_forms.scss b/scss/_forms.scss
@@ -5,3 +5,23 @@
 ::placeholder {
   font-style: italic;
 }
+
+.form-check-input {
+  width: 16px;
+  height: 16px;
+  box-shadow: 0 0 0 1px $primary;
+}
+
+.form-check-label.form-label {
+  margin-bottom: 0;
+}
+
+.form-check-input:hover {
+  background-color: $gray-200;
+}
+
+.form-check-input:focus {
+  border: 0;
+  box-shadow: none;
+  outline: 2px solid $primary;
+}
diff --git a/scss/talis.scss b/scss/talis.scss
@@ -148,6 +148,14 @@ $form-select-focus-border-color:        $input-focus-border-color !default;
 $form-select-focus-width:               $input-focus-width !default;
 $form-select-focus-box-shadow:          0 0 0 $form-select-focus-width $input-btn-focus-color !default;
 
+$form-check-input-border:                 none !default;
+$form-check-input-checked-color:          $primary !default;
+$form-check-input-checked-bg-color:       $white !default;
+$form-check-input-checked-border-color:   $primary !default;
+$form-check-min-height:                   2rem !default;
+$form-check-padding-start:                1.5rem !default;
+$form-check-input-border-radius:          3px !default;
+
 $modal-md:                          600px !default ;
 $modal-header-border-color:         $gray-200 !default;
 $modal-footer-border-color:         $gray-300 !default;