refactor(form): convert LESS styles to SCSS

Author: 100stacks

src/less/components.less

@@ -18,9 +18,3 @@
   word-spacing: normal;
   word-wrap: normal;
 }
-
-/* ========== COMPONENTS ========== *\
-    - Complex CSS Selectors
-    - NO !important
-\* ========== COMPONENTS ========== */
-@import 'components/form/index';

src/less/components/form/FieldName.less

@@ -1,44 +1,47 @@
 // ----- DEPRECATED ----------
 //remove in v1.0.0
+@import "./mixins/placeholder";
+
 .hxTextCtrl {
-  #Mix.placeholder();
+  @include hxPlaceholder;
 
-  background-color: @gray-0;
+  background-color: $gray-0;
   border-radius: 2px;
-  border: 1px solid @gray-500;
-  color: @gray-900;
+  border: 1px solid $gray-500;
+  color: $gray-900;
   display: block;
   font-size: 1rem; // 16px
   height: 2rem;
   padding: 0 0.75rem;
   width: 100%;
 
-  textarea& {
+  textarea {
     min-height: 5.75rem; // ~92px
     resize: vertical;
     padding: 0.5rem;
   }
 
   &:focus {
-    border-color: @cyan-700;
-    box-shadow: @focus-glow;
+    border-color: $cyan-700;
+    box-shadow: $focus-glow;
     outline: 0;
 
     &[invalid] {
-      box-shadow: @focus-glow-invalid;
+      box-shadow: $focus-glow-invalid;
     }
   }
 
   &[invalid] {
-    border: 2px solid @red-900;
+    border: 2px solid $red-900;
   }
 
   &[disabled] {
-    #Mix.disabledPlaceholder();
-    background-color: @gray-50;
-    border-color: @gray-300;
+    @include hxPlaceholder(disabled);
+
+    background-color: $gray-50;
+    border-color: $gray-300;
     border-width: 1px;
-    color: @gray-400;
+    color: $gray-400;
     cursor: not-allowed;
     resize: none;
   }