refactor(file): convert Light DOM LESS to SCSS

* convert `file-input-spec.less` after `button-spec.less`

Author: 100stacks

src/less/components.less

@@ -27,5 +27,4 @@
 @import 'components/checkbox/index';
 @import 'components/choice-tile/index';
 @import 'components/dropdown-select/index';
-@import 'components/file/index';
 @import 'components/form/index';

src/scss/components/_index.scss

@@ -5,6 +5,7 @@
 @import "breadcrumb/index";
 @import "drawer/index";
 @import "form/index";
+@import "file/index";
 @import "grid/index";
 @import "icon/index";
 @import "layout/index";

src/scss/components/file/_config.scss

@@ -0,0 +1,3 @@
+@import "vars";
+@import "components/form/config";
+@import "components/box/config";

src/scss/components/file/_hx-drop-fence.scss

@@ -0,0 +1,8 @@
+hx-drop-fence {
+  @include box-size(md);
+
+  border: 1px dashed $gray-600;
+  display: block;
+  font-size: 0.875rem;
+  text-align: center;
+}

src/scss/components/file/_hx-drop-zone.scss

@@ -0,0 +1,30 @@
+hx-drop-zone {
+  display: block;
+  min-height: 0; // because IE
+  padding: 0 !important;
+  position: relative;
+
+  &::after {
+    border: 4px dashed $cyan-500;
+    content: "";
+    display: none;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+
+  &[drag] {
+    &::after {
+      display: block;
+    }
+  }
+
+  &[drag="over"] {
+    &::after {
+      background-color: rgba(255, 255, 255, 0.6);
+      border-style: solid;
+    }
+  }
+}

src/scss/components/file/_hx-file-control.scss

@@ -0,0 +1,87 @@
+// ----- LAYOUT -----
+hx-file-control {
+  position: relative;
+
+  > * {
+    margin: 0;
+  }
+
+  > label {
+    display: inline-block;
+    padding: 0;
+  }
+
+  > input[type="file"] {
+    @include hxInput(visuallyHidden);
+
+    background: none;
+
+    &::-ms-browse,
+    &::-ms-value {
+      opacity: 0.01;
+    }
+  }
+}
+
+hx-file-control > input[type="file"]:focus {
+  ~ label > hx-file-input {
+    box-shadow: $focus-glow;
+  }
+}
+
+hx-file-control > input[type="file"]:active {
+  ~ label > hx-file-input {
+    // TODO refactor button mixins
+    &.hxBtn {
+      background-color: $cyan-700;
+      border-color: transparent;
+      color: $gray-0;
+    }
+
+    // TODO refactor button mixins
+    &.hxBtn.hxPrimary {
+      background-color: $cyan-700;
+      border-color: transparent;
+      color: $gray-0;
+    }
+
+    // TODO refactor button mixins
+    &.hxBtn.hxTertiary {
+      background-color: transparent;
+      border-color: transparent;
+      color: $cyan-700;
+    }
+  }
+}
+
+// ========== DISABLED ==========
+hx-file-control > input[type="file"]:disabled {
+  ~ label {
+    color: $gray-700;
+
+    > hx-file-input {
+      cursor: not-allowed;
+
+      // TODO refactor button mixins
+      &.hxBtn {
+        background-color: transparent;
+        border-color: $gray-400;
+        color: $gray-400;
+      }
+
+      // TODO refactor button mixins
+      &.hxBtn.hxPrimary {
+        background-color: $gray-400;
+        border-color: transparent;
+        color: $gray-700;
+      }
+
+      // TODO refactor button mixins
+      &.hxBtn.hxTertiary {
+        background-color: transparent;
+        border-color: transparent;
+        color: $gray-400;
+      }
+    }
+  }
+}

src/scss/components/file/_hx-file-icon.scss

@@ -0,0 +1,3 @@
+hx-file-icon {
+  display: inline-block;
+}

src/scss/components/file/_hx-file-tile.scss

@@ -0,0 +1,17 @@
+hx-file-tile {
+  background-color: $gray-50;
+  border-radius: 2px;
+  border: 2px solid transparent;
+  color: $gray-900;
+  display: block;
+  height: 3.75rem;
+  width: 25rem; // 400px
+
+  &[progress] {
+    color: $gray-600;
+  }
+
+  &[invalid] {
+    border-color: $red-900;
+  }
+}

src/scss/components/file/_index.scss

@@ -0,0 +1,8 @@
+@import "./config";
+
+/// ========== PARTIALS ========== ///
+@import "./hx-drop-fence";
+@import "./hx-drop-zone";
+@import "./hx-file-control";
+@import "./hx-file-icon";
+@import "./hx-file-tile";