chore(pr-review): microsoft styles fixes for edge and ie

HelixDesignSystem · Jun 17, 2019 · 650af45 · 650af45
1 parent a60d2e8
commit 650af45
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 0 deletions.
diff --git a/docs/components/file/index.html b/docs/components/file/index.html
@@ -191,6 +191,14 @@ <h2 id="file-input">File Input</h2>
         <pre><code v-text="snippet"></code></pre>
       </footer>
     </div>
+    <p class="hxSubdued hxSubBody">
+      <hx-icon type="exclamation-triangle"></hx-icon>
+      Microsoft browsers never match the <code>input[type="file"]:active</code> CSS selector.
+    </p>
+    <p class="hxSubdued hxSubBody">
+      <hx-icon type="exclamation-triangle"></hx-icon>
+      Microsoft browsers apply two tab stops on <code>&lt;input type="file"&gt;</code> elements.
+    </p>
   </section>
 
   <section>

diff --git a/src/helix-ui/elements/HXFileInputElement.less b/src/helix-ui/elements/HXFileInputElement.less
@@ -1,5 +1,9 @@
 @import './HXElement';
 
+#hxFileInput {
+  //width: 100%;
+}
+
 #hxIcon {
   display: none;
 }

diff --git a/src/helix-ui/styles/components/files/hx-file-control.less b/src/helix-ui/styles/components/files/hx-file-control.less
@@ -11,6 +11,13 @@ hx-file-control {
 
   > input[type="file"] {
     #Mix.hideInput();
+    background: none;
+
+    &::-ms-browse,
+    &::-ms-value { 
+      opacity: 0.01;
+     //visibility: hidden; 
+    }
   }
 }