feat: adapt css to state indeterminate

telekom · Jul 19, 2021 · d7c95cc · d7c95cc
1 parent dcea072
commit d7c95cc
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 3 deletions.
diff --git a/packages/components/src/components/checkbox-group/checkbox-group.tsx b/packages/components/src/components/checkbox-group/checkbox-group.tsx
@@ -97,7 +97,6 @@ export class CheckboxGroup {
               label="checkbox"
               name="nameOfCheckbox"
               helper-text="helperText"
-              checked
             ></scale-checkbox>
           </div>
           <div class="checkbox-group__container">
@@ -113,16 +112,24 @@ export class CheckboxGroup {
               <scale-checkbox
                 input-id="checkbox3"
                 value="3"
-                label="checkbox"
                 name="nameOfCheckbox"
-              ></scale-checkbox>
+				checked
+              >Checkbox Slot</scale-checkbox>
             </div>
             <div class="checkbox-group__checkbox">
               <scale-checkbox
                 input-id="checkbox4"
                 value="4"
                 label="checkbox"
                 name="nameOfCheckbox"
+              ></scale-checkbox>
+            </div>
+			<div class="checkbox-group__checkbox">
+              <scale-checkbox
+                input-id="checkbox5"
+                value="5"
+                label="checkbox"
+                name="nameOfCheckbox"
                 checked
               ></scale-checkbox>
             </div>

diff --git a/packages/components/src/components/checkbox/checkbox.css b/packages/components/src/components/checkbox/checkbox.css
@@ -122,6 +122,11 @@ scale-checkbox {
   .checkbox__control {
   background: var(--color-disabled);
 }
+.checkbox--disabled.checkbox--indeterminate
+  .checkbox__control-wrapper
+  .checkbox__control {
+  background: var(--color-disabled);
+}
 .checkbox--disabled.checkbox--checked
   .checkbox__control-wrapper 
   .checkbox__icon {
@@ -139,6 +144,14 @@ scale-checkbox {
   border-color: var(--color-primary-hover);
   background: var(--color-primary-hover);
 }
+.checkbox--enabled.checkbox--indeterminate
+  input:hover
+  ~ .checkbox__control-wrapper
+  .checkbox__control {
+  box-shadow: none;
+  border-color: var(--color-primary-hover);
+  background: var(--color-primary-hover);
+}
 .checkbox--checked.checkbox--eanabled
   input:active
   ~ .checkbox__control-wrapper
@@ -150,6 +163,17 @@ scale-checkbox {
   border-color: var(--color-primary-active);
   background: var(--color-primary-active);
 }
+.checkbox--indeterminate.checkbox--eanabled
+  input:active
+  ~ .checkbox__control-wrapper
+  .checkbox__control/* ,
+.checkbox
+  input:checked:not([disabled])
+  ~ .checkbox__control-wrapper:active
+  .checkbox__control  */{
+  border-color: var(--color-primary-active);
+  background: var(--color-primary-active);
+}
 .checkbox--enabled.checkbox--checked
   input:active
   ~ .checkbox__control-wrapper
@@ -167,6 +191,12 @@ scale-checkbox {
   border: var(--scl-spacing-1) solid var(--color-primary);
   background: var(--color-primary);
 }
+.checkbox--enabled.checkbox--indeterminate
+.checkbox__control-wrapper
+.checkbox__control {
+  border: var(--scl-spacing-1) solid var(--color-primary);
+  background: var(--color-primary);
+}
 .checkbox.checkbox--disabled .checkbox__control-wrapper .checkbox__control {
   border-color: var(--color-disabled);
 }