Merge pull request #650 from lalithkarikelli/surf1949

refactor(file): surf-1949

Author: 100stacks

docs/components/file/_spec.scss

@@ -1,7 +1,25 @@
 @import 'components/button/config';
+@import 'components/file/mixins/hxFileControl';
 
 .file-input-spec {
   hx-file-control {
+    input[type="file"].mock-focus ~ label > hx-file-input {
+      @include hxFileControl($pseudo-state: focus);
+     }
+     
+     input[type="file"].mock-active ~ label > hx-file-input {
+       &.hxBtn{
+      @include hxButton-active--secondary;
+      }
+      &.hxPrimary {
+        @include hxButton-active--primary;
+      }
+
+      &.hxTertiary {
+        @include hxButton-active--tertiary;
+      }
+    }
+
     hx-file-input.hxBtn.mock-hover {
       @include hxButton-hover--secondary;
 

docs/docs.less

@@ -183,6 +183,5 @@ min-version {
 @import 'demo/tabset-docs';
 @import 'demo/tooltip-docs';
 // Spec Styles
-@import 'spec/file-input-spec';
 @import 'spec/panel-spec';
 @import 'spec/radio-spec';

docs/styles/spec/file-input-spec.less

@@ -1,3 +1,8 @@
 @import "vars";
+
+/// ========== EXTERNAL COMPONENT DEPENDENCIES ========== ///
 @import "components/form/config";
 @import "components/box/config";
+
+/// ========== MIXINS ========== ///
+@import "./mixins/hxFileControl";

src/scss/components/file/_config.scss

@@ -0,0 +1,8 @@
+@mixin hxFileControl($pseudo-state: null) {
+  @if $pseudo-state == focus {
+    box-shadow: $focus-glow;
+  }
+  @else {
+    //no additional styles applied
+  }
+}