X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/resources/themes/stylesheets/ext4/default/widgets/form/_file.scss

diff --git a/resources/themes/stylesheets/ext4/default/widgets/form/_file.scss b/resources/themes/stylesheets/ext4/default/widgets/form/_file.scss
new file mode 100644
index 00000000..3f83ea20
--- /dev/null
+++ b/resources/themes/stylesheets/ext4/default/widgets/form/_file.scss
@@ -0,0 +1,32 @@
+@mixin extjs-form-file {
+
+    .#{$prefix}form-file-wrap {
+        .#{$prefix}form-text {
+            color: #777;
+        }
+
+        .#{$prefix}form-file-btn {
+            overflow: hidden;
+            float: left;
+        }
+
+        .#{$prefix}form-file-input {
+            position: absolute;
+            top: -4px;
+            right: -2px;
+            height: $form-field-height + 8;
+            @include opacity(0);
+
+            /* Yes, there's actually a good reason for this...
+             * If the configured buttonText is set to something longer than the default,
+             * then it will quickly exceed the width of the hidden file input's "Browse..."
+             * button, so part of the custom button's clickable area will be covered by
+             * the hidden file input's text box instead. This results in a text-selection
+             * mouse cursor over that part of the button, at least in Firefox, which is
+             * confusing to a user. Giving the hidden file input a huge font-size makes
+             * the native button part very large so it will cover the whole clickable area.
+             */
+            font-size: 100px;
+        }
+    }
+}
\ No newline at end of file