feat: adding indeterminate state styling for checkboxes

jonathanharrell · Dec 28, 2017 · 9775f7f · 9775f7f
1 parent 82cf702
commit 9775f7f
Show file tree

Hide file tree

Showing 6 changed files with 347 additions and 317 deletions.
diff --git a/assets/build/docs.css b/assets/build/docs.css
@@ -874,7 +874,8 @@ output{
           box-shadow:0 0 0 var(--hiq-outline-width, 0.2rem) var(--hiq-input-focus-outline-color, var(--hiq-outline-color, hsl(210, 100%, 85%)));
 }
 .checkbox input[type='checkbox']:checked + label::before,
-    .checkbox input[type='checkbox'][aria-checked] + label::before{
+    .checkbox input[type='checkbox'][aria-checked] + label::before,
+    .checkbox input[type='checkbox']:indeterminate + label::before{
   border-color:var(--hiq-checkbox-checked-border-color, var(--hiq-color-primary, hsl(210, 100%, 50%)));
   background-color:var(--hiq-checkbox-checked-background-color, var(--hiq-color-primary, hsl(210, 100%, 50%)));
 }
@@ -887,12 +888,22 @@ output{
   left:var(--hiq-checkbox-check-position-left, 0.375rem);
   width:var(--hiq-checkbox-check-width, 0.25rem);
   height:var(--hiq-checkbox-check-height, 0.5rem);
-  border:solid white;
+  border:solid var(--hiq-checkbox-check-color, white);
   border-width:0 var(--hiq-checkbox-check-border-width, 2px) var(--hiq-checkbox-check-border-width, 2px) 0;
   -webkit-transform:rotate(45deg);
           transform:rotate(45deg);
   content:'';
 }
+.checkbox input[type='checkbox']:indeterminate + label::after{
+  display:block;
+  position:absolute;
+  top:0.45rem;
+  left:0.3rem;
+  width:calc(var(--hiq-checkbox-width, 1rem) - 0.5rem);
+  height:var(--hiq-checkbox-check-border-width, 2px);
+  background-color:var(--hiq-checkbox-check-color, white);
+  content:'';
+}
 .checkbox input[type='checkbox']:disabled + label,
     .checkbox input[type='checkbox'][aria-disabled] + label,
     .checkbox input[type='checkbox'][readonly] + label{

diff --git a/assets/build/docs.min.css b/assets/build/docs.min.css