restructured css

deven-org · Nov 21, 2023 · e79dec2 · e79dec2
1 parent edab070
commit e79dec2
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 25 deletions.
diff --git a/packages/ui-library/src/components/forms/checkbox/index.css.ts b/packages/ui-library/src/components/forms/checkbox/index.css.ts
@@ -137,21 +137,21 @@ export const { tokenizedLight: styleCustomLight, tokenizedDark: styleCustomDark
 
         }
 
-        &:not(.disabled) {
-          &:not(.error) {
-            .label-wrapper {
+        .label-wrapper {
+          &:not(.disabled) {
+            &:not(.error) {
               color: ${LabelNextToControl.Rest};
 
               &:hover {
-              &:not([readonly]) {
+                &:not(.readonly) {
                   color: ${LabelNextToControl.Hover};
                 }
               }
               &.focus {
                 color: ${LabelNextToControl.Focus};
               }
               &.active {
-                &:not(:disabled):not([readonly]) {
+                &:not(.readonly) {
                   color: ${LabelNextToControl.Pressed};
                 }
               }
@@ -167,27 +167,23 @@ export const { tokenizedLight: styleCustomLight, tokenizedDark: styleCustomDark
           &.error {
             color: ${LabelNextToControl.Error};
           }
-        }
-        &.disabled {
-          .input-control {
-            cursor: not-allowed;
-          }
-          .label-wrapper {
+          &.disabled {
             .blr-form-label-inline {
               cursor: not-allowed;
               color: ${LabelNextToControl.Disabled};
             }
-          }
+          }  
         }
-        &.readonly {
-          .input-control {
+
+        .input-control, .visual-checkbox {
+          &.disabled {
+            cursor: not-allowed;
+          }
+          &.readonly {
             pointer-events: none;
           }
-        }
-        
 
-        &:not(.error) { 
-          & .input-control, & .visual-checkbox {
+          &:not(.error) {
             &.checked {
               background-color: ${Checkbox.Control.Container.BackgroundColor.Active.Rest};
               outline-color: ${Checkbox.Control.Container.BorderColor.Active.Rest};
@@ -218,13 +214,12 @@ export const { tokenizedLight: styleCustomLight, tokenizedDark: styleCustomDark
               }
             }
 
-
             &:not(.checked) {
               background-color: ${Checkbox.Control.Container.BackgroundColor.Inactive.Rest};
               outline-color: ${Checkbox.Control.Container.BorderColor.Inactive.Rest};
 
               &.hover {
-                &:not(:disabled):not([readonly]) {
+                &:not(.disabled):not(.readonly) {
                   background-color: ${Checkbox.Control.Container.BackgroundColor.Inactive.Hover};
                   outline-color: ${Checkbox.Control.Container.BorderColor.Inactive.Hover};
                 }
@@ -234,7 +229,7 @@ export const { tokenizedLight: styleCustomLight, tokenizedDark: styleCustomDark
                 outline-color: ${Checkbox.Control.Container.BorderColor.Inactive.Focus};
               }
               &.active {
-                &:not(:disabled):not([readonly]) {
+                &:not(.disabled):not(.readonly) {
                   background-color: ${Checkbox.Control.Container.BackgroundColor.Inactive.Pressed};
                   outline-color: ${Checkbox.Control.Container.BorderColor.Inactive.Pressed};
                 }
@@ -249,10 +244,8 @@ export const { tokenizedLight: styleCustomLight, tokenizedDark: styleCustomDark
               }
             }
           }
-        }
-    
-        &.error {
-          & .input-control, & .visual-checkbox {
+
+          &.error {
             &.checked {
               background-color: ${Checkbox.Control.Container.BackgroundColor.Active.Error};
               outline-color: ${Checkbox.Control.Container.BorderColor.Active.Error};
@@ -264,6 +257,7 @@ export const { tokenizedLight: styleCustomLight, tokenizedDark: styleCustomDark
           }
         }
 
+
         &.sm {
           &:not(.error) {
             .input-control, .visual-checkbox {

diff --git a/packages/ui-library/src/components/forms/checkbox/index.ts b/packages/ui-library/src/components/forms/checkbox/index.ts
@@ -73,18 +73,26 @@ export class BlrCheckbox extends LitElement {
       const classes = classMap({
         'blr-semantic-action': true,
         'blr-checkbox': true,
+
+        /*
         'error': this.hasError || false,
         'disabled': this.disabled || false,
         'focus': this.focused || false,
         'checked': this.checked || false,
         'readonly': this.readonly || false,
         'indeterminate': this.indeterminate || false,
+        */
+
         [`${this.size}`]: this.size,
       });
 
       const labelWrapperClasses = classMap({
         'label-wrapper': true,
+        'disabled': this.disabled || false,
+        'focus': this.focused || false,
+        'checked': this.checked || false,
         'readonly': this.readonly || false,
+        'indeterminate': this.indeterminate || false,
       });
 
       const visualCheckboxClasses = classMap({
@@ -94,6 +102,7 @@ export class BlrCheckbox extends LitElement {
         'focus': this.focused || false,
         'checked': this.checked || false,
         'readonly': this.readonly || false,
+        'indeterminate': this.indeterminate || false,
       });
 
       const checkerIconClasses = classMap({