Merge pull request #634 from HelixDesignSystem/surf-1890-1951-convert-checbox-scss

refactor(checkbox): convert less styles to scss

Author: CITguy

docs/components/_index.scss

@@ -3,6 +3,7 @@
 @import "typography/index";
 
 /// load styles needed to test component visuals
+@import "checkbox/spec";
 @import "choice-tile/spec";
 @import "menu/spec";
 @import "popover/spec";

docs/components/checkbox/_spec.scss

@@ -0,0 +1,108 @@
+@import "components/checkbox/config";
+
+.checkbox-spec {
+  hx-checkbox-control {
+    > label {
+      > hx-checkbox {
+        display: none;
+      }
+    }
+
+    // ----- PRISTINE -----
+    > input[type="checkbox"] {
+      // imitate :focus
+      &.mock-focus {
+        @include hxCheckboxControl($pseudo-state: focus);
+
+        ~ label > hx-checkbox {
+          @include hxCheckboxFacade($pseudo-state: focus);
+        }
+      }
+
+      // imitate :hover
+      &.mock-hover {
+        @include hxCheckboxControl($pseudo-state: hover);
+
+        ~ label > hx-checkbox {
+          @include hxCheckboxFacade($pseudo-state: hover);
+        }
+      }
+
+      // ----- DISABLED -----
+      // imitate :disabled:focus
+      &:disabled.mock-focus {
+        @include hxCheckboxControl(disabled, focus);
+
+        ~ label > hx-checkbox {
+          @include hxCheckboxFacade(disabled, focus);
+        }
+      }
+
+      // imitate :disabled:hover
+      &:disabled.mock-hover {
+        @include hxCheckboxControl(disabled, hover);
+
+        ~ label > hx-checkbox {
+          @include hxCheckboxFacade(disabled, hover);
+        }
+      }
+    }
+
+    // ----- INVALID -----
+    &[hx-dirty] {
+      > input[type="checkbox"]:invalid {
+        // imitate :focus
+        &.mock-focus {
+          @include hxCheckboxControl(invalid, focus);
+
+          ~ label > hx-checkbox {
+            @include hxCheckboxFacade(invalid, focus);
+          }
+        }
+
+        // imitate :hover
+        &.mock-hover {
+          @include hxCheckboxControl(invalid, hover);
+
+          ~ label > hx-checkbox {
+            @include hxCheckboxFacade(invalid, hover);
+          }
+        }
+      }
+    }
+
+    &.hxInvalid {
+      > input[type="checkbox"]:enabled {
+        // imitate :focus
+        &.mock-focus {
+          @include hxCheckboxControl(invalid, focus);
+
+          ~ label > hx-checkbox {
+            @include hxCheckboxFacade(invalid, focus);
+          }
+        }
+
+        // imitate :hover
+        &.mock-hover {
+          @include hxCheckboxControl(invalid, hover);
+
+          ~ label > hx-checkbox {
+            @include hxCheckboxFacade(invalid, hover);
+          }
+        }
+      }
+    }
+  }
+}
+
+@supports (--modern: true) {
+  .checkbox-spec {
+    hx-checkbox-control {
+      > label {
+        > hx-checkbox {
+          display: inline-block;
+        }
+      }
+    }
+  }
+}

docs/docs.less

@@ -202,7 +202,6 @@ min-version {
 @import 'demo/tooltip-docs';
 // Spec Styles
 @import 'spec/button-spec';
-@import 'spec/checkbox-spec';
 @import 'spec/dropdown-select-spec';
 @import 'spec/file-input-spec';
 @import 'spec/panel-spec';

docs/styles/spec/checkbox-spec.less

@@ -24,6 +24,5 @@
     - NO !important
 \* ========== COMPONENTS ========== */
 @import 'components/button/index';
-@import 'components/checkbox/index';
 @import 'components/dropdown-select/index';
 @import 'components/form/index';

src/less/components.less

@@ -3,6 +3,7 @@
 @import "badge/index";
 @import "box/index";
 @import "breadcrumb/index";
+@import "checkbox/index";
 @import "choice-tile/index";
 @import "drawer/index";
 @import "form/index";

src/scss/components/_index.scss

@@ -0,0 +1,7 @@
+/// ========== VARIABLES ========== ///
+@import "vars";
+
+/// ========== MIXINS ========== ///
+@import "components/form/config";
+@import "./mixins/hxCheckboxControl";
+@import "./mixins/hxCheckboxFacade";