_file.scss (1233B)
1 /** 2 * Creates the base structure of file field. 3 * @member Ext.form.field.File 4 */ 5 @mixin extjs-form-file { 6 7 .#{$prefix}form-file-wrap { 8 .#{$prefix}form-text { 9 color: #777; 10 } 11 12 .#{$prefix}form-file-btn { 13 overflow: hidden; 14 } 15 16 .#{$prefix}form-file-input { 17 position: absolute; 18 top: -4px; 19 right: -2px; 20 height: $form-field-height + 8; 21 @include opacity(0); 22 23 /* Yes, there's actually a good reason for this... 24 * If the configured buttonText is set to something longer than the default, 25 * then it will quickly exceed the width of the hidden file input's "Browse..." 26 * button, so part of the custom button's clickable area will be covered by 27 * the hidden file input's text box instead. This results in a text-selection 28 * mouse cursor over that part of the button, at least in Firefox, which is 29 * confusing to a user. Giving the hidden file input a huge font-size makes 30 * the native button part very large so it will cover the whole clickable area. 31 */ 32 font-size: 100px; 33 } 34 } 35 }