_file.scss.html 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>The source code</title>
  6. <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  7. <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  8. <style type="text/css">
  9. .highlight { display: block; background-color: #ddd; }
  10. </style>
  11. <script type="text/javascript">
  12. function highlight() {
  13. document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14. }
  15. </script>
  16. </head>
  17. <body onload="prettyPrint(); highlight();">
  18. <pre class="prettyprint lang-js"><span id='Ext-form-field-File-css_mixin-extjs-form-file'>/**
  19. </span> * Creates the base structure of file field.
  20. * @member Ext.form.field.File
  21. */
  22. @mixin extjs-form-file {
  23. .#{$prefix}form-file-wrap {
  24. .#{$prefix}form-text {
  25. color: #777;
  26. }
  27. .#{$prefix}form-file-btn {
  28. overflow: hidden;
  29. }
  30. .#{$prefix}form-file-input {
  31. position: absolute;
  32. top: -4px;
  33. right: -2px;
  34. height: $form-field-height + 8;
  35. @include opacity(0);
  36. /* Yes, there's actually a good reason for this...
  37. * If the configured buttonText is set to something longer than the default,
  38. * then it will quickly exceed the width of the hidden file input's &quot;Browse...&quot;
  39. * button, so part of the custom button's clickable area will be covered by
  40. * the hidden file input's text box instead. This results in a text-selection
  41. * mouse cursor over that part of the button, at least in Firefox, which is
  42. * confusing to a user. Giving the hidden file input a huge font-size makes
  43. * the native button part very large so it will cover the whole clickable area.
  44. */
  45. font-size: 100px;
  46. }
  47. }
  48. }</pre>
  49. </body>
  50. </html>