_field.scss.html 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  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-Base-css_mixin-extjs-form-field'>/**
  19. </span> * Creates the base structure of form field.
  20. * @member Ext.form.field.Base
  21. */
  22. @mixin extjs-form-field {
  23. .#{$prefix}form-field,
  24. .#{$prefix}form-display-field {
  25. margin: 0 0 0 0;
  26. font: $form-field-font;
  27. color: $form-field-color;
  28. }
  29. .#{$prefix}form-item-hidden {
  30. margin: 0;
  31. }
  32. .#{$prefix}form-text,
  33. textarea.#{$prefix}form-field {
  34. padding: $form-field-padding;
  35. background: repeat-x 0 0;
  36. border: $form-field-border-width solid;
  37. background-color: $form-field-background-color;
  38. @if $form-field-background-image {
  39. background-image: theme-background-image($theme-name, $form-field-background-image);
  40. }
  41. border-color: $form-field-border-color;
  42. }
  43. $form-field-content-height: $form-field-height - top($form-field-padding) - top($form-field-border-width) - bottom($form-field-padding) - bottom($form-field-border-width);
  44. $form-field-line-height: $form-field-content-height - 3px;
  45. .#{$prefix}form-text {
  46. height: $form-field-content-height;
  47. line-height: $form-field-line-height;
  48. vertical-align: top;
  49. }
  50. .#{$prefix}ie8m {
  51. .#{$prefix}form-text {
  52. line-height: $form-field-line-height;
  53. }
  54. }
  55. .#{$prefix}border-box .#{$prefix}form-text {
  56. height: $form-field-height;
  57. }
  58. textarea.#{$prefix}form-field {
  59. color: $form-field-color;
  60. overflow: auto;
  61. height: auto;
  62. line-height: normal;
  63. background: repeat-x 0 0;
  64. background-color: $form-field-background-color;
  65. @if $form-field-background-image {
  66. background-image: theme-background-image($theme-name, $form-field-background-image);
  67. }
  68. resize: none; //Disable browser resizable textarea
  69. }
  70. .#{$prefix}border-box textarea.#{$prefix}form-field {
  71. height: auto;
  72. }
  73. @if $include-safari {
  74. .#{$prefix}safari.#{$prefix}mac textarea.#{$prefix}form-field {
  75. margin-bottom: -2px; // another bogus margin bug, safari/mac only
  76. }
  77. }
  78. .#{$prefix}form-focus,
  79. textarea.#{$prefix}form-focus {
  80. border-color: $form-field-focus-border-color;
  81. }
  82. .#{$prefix}form-invalid-field,
  83. textarea.#{$prefix}form-invalid-field {
  84. background-color: $form-field-invalid-background-color;
  85. @if $form-field-invalid-background-image {
  86. background-image: theme-background-image($theme-name, $form-field-invalid-background-image);
  87. background-repeat: $form-field-invalid-background-repeat;
  88. background-position: $form-field-invalid-background-position;
  89. }
  90. border-color: $form-field-invalid-border-color;
  91. }
  92. .#{$prefix}form-item {
  93. font: $form-label-font;
  94. }
  95. .#{$prefix}form-empty-field, textarea.#{$prefix}form-empty-field {
  96. color: $form-field-empty-color;
  97. }
  98. .#{$prefix}webkit {
  99. .#{$prefix}form-empty-field {
  100. line-height: $form-field-line-height;
  101. }
  102. }
  103. .#{$prefix}form-display-field {
  104. padding-top: 3px;
  105. }
  106. @if $include-ie {
  107. /*
  108. In oldIE, text inputs get a mysterious extra pixel of spacing above and below.
  109. This is targeted at IE6-IE7 (all modes) and IE9+ Quirks mode.
  110. IE8 quirks on Windows 7 requires this fix, but on
  111. IE8 quirks on Windows XP, this is breaks the layout.
  112. TODO: Check field input heights in IE8 quirks on Windows Vista.
  113. Since we can't specifically target a specific version of Windows via CSS, we default to fixing it the XP way, for now.
  114. */
  115. .#{$prefix}quirks .#{$prefix}ie9p .#{$prefix}form-text,
  116. .#{$prefix}ie7m .#{$prefix}form-text {
  117. margin-top: -1px;
  118. margin-bottom: -1px;
  119. }
  120. .#{$prefix}ie .#{$prefix}form-file {
  121. height: $form-field-height + 1;
  122. line-height: 18px;
  123. vertical-align: middle;
  124. }
  125. }
  126. .#{$prefix}field-default-toolbar .#{$prefix}form-text {
  127. height: $form-toolbar-field-height - vertical($form-field-padding) - vertical($form-field-border-width);
  128. }
  129. .#{$prefix}border-box .#{$prefix}field-default-toolbar .#{$prefix}form-text {
  130. height: $form-toolbar-field-height;
  131. }
  132. .#{$prefix}field-default-toolbar .#{$prefix}form-item-label-left {
  133. padding-left: 4px;
  134. }
  135. }
  136. </pre>
  137. </body>
  138. </html>