/ext-4.0.7/resources/themes/stylesheets/ext4/default/widgets/form/_file.scss

https://bitbucket.org/srogerf/javascript · Sass · 32 lines · 19 code · 4 blank · 9 comment · 0 complexity · f0abc1c4e5290b8713362e66d3e18741 MD5 · raw file

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