_triggerfield.scss.html 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205
  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-Trigger-css_mixin-extjs-form-triggerfield'>/**
  19. </span> * Creates the base structure of trigger field.
  20. * @member Ext.form.field.Trigger
  21. */
  22. @mixin extjs-form-triggerfield {
  23. .#{$prefix}form-trigger-wrap {
  24. vertical-align: top;
  25. }
  26. .#{$prefix}form-trigger {
  27. background-image: theme-background-image($theme-name, 'form/trigger.gif');
  28. background-position: 0 0;
  29. width: $form-trigger-width;
  30. height: $form-trigger-height - $form-trigger-border-bottom-width;
  31. border-bottom: $form-trigger-border-bottom;
  32. cursor: pointer;
  33. cursor: hand;
  34. overflow: hidden;
  35. }
  36. .#{$prefix}border-box .#{$prefix}form-trigger {
  37. height: $form-trigger-height;
  38. }
  39. .#{$prefix}field-default-toolbar .#{$prefix}form-trigger {
  40. height: $form-toolbar-trigger-height - $form-trigger-border-bottom-width;
  41. }
  42. .#{$prefix}border-box .#{$prefix}field-default-toolbar .#{$prefix}form-trigger {
  43. height: $form-toolbar-trigger-height;
  44. }
  45. .#{$prefix}form-trigger-over {
  46. background-position: -$form-trigger-width 0;
  47. border-bottom-color: $form-trigger-border-bottom-color-over;
  48. }
  49. .#{$prefix}form-trigger-wrap-focus .#{$prefix}form-trigger {
  50. background-position: -($form-trigger-width * 3) 0;
  51. border-bottom-color: $form-trigger-border-bottom-color-focus;
  52. }
  53. .#{$prefix}form-trigger-wrap-focus .#{$prefix}form-trigger-over {
  54. background-position: -($form-trigger-width * 4) 0;
  55. @if $form-trigger-border-bottom-color-focus-over {
  56. border-bottom-color: $form-trigger-border-bottom-color-focus-over;
  57. }
  58. }
  59. .#{$prefix}form-trigger-click,
  60. .#{$prefix}form-trigger-wrap-focus .#{$prefix}form-trigger-click {
  61. background-position: -($form-trigger-width * 2) 0;
  62. @if $form-trigger-border-bottom-color-pressed {
  63. border-bottom-color: $form-trigger-border-bottom-color-pressed;
  64. }
  65. }
  66. .#{$prefix}form-trigger-icon {
  67. height: $form-trigger-width - $form-trigger-border-bottom-width;
  68. background-repeat: no-repeat;
  69. background-position: $form-trigger-icon-background-position;
  70. }
  71. .#{$prefix}pickerfield-open {
  72. .#{$prefix}form-field {
  73. @include border-bottom-radius(0);
  74. }
  75. }
  76. .#{$prefix}pickerfield-open-above {
  77. .#{$prefix}form-field {
  78. @include border-bottom-left-radius(3px);
  79. @include border-top-radius(0);
  80. }
  81. }
  82. .#{$prefix}form-arrow-trigger {
  83. .#{$prefix}form-trigger-icon {
  84. background-image: theme-background-image($theme-name, 'boundlist/trigger-arrow.png');
  85. }
  86. }
  87. .#{$prefix}form-date-trigger {
  88. background-image: theme-background-image($theme-name, 'form/date-trigger.gif');
  89. }
  90. $spinner-btn-height: $form-trigger-height / 2;
  91. .#{$prefix}form-trigger-wrap {
  92. .#{$prefix}form-spinner-up,
  93. .#{$prefix}form-spinner-down {
  94. background-image: theme-background-image($theme-name, 'form/spinner.gif');
  95. width: $form-trigger-width !important;
  96. height: $spinner-btn-height !important;
  97. font-size: 0; /*for IE*/
  98. border-bottom: 0;
  99. }
  100. .#{$prefix}form-spinner-down {
  101. background-position: 0 (-$spinner-btn-height);
  102. }
  103. }
  104. .#{$prefix}form-trigger-wrap-focus .#{$prefix}form-spinner-down {
  105. background-position: -($form-trigger-width * 3) (-$spinner-btn-height);
  106. }
  107. .#{$prefix}form-trigger-wrap .#{$prefix}form-spinner-down-over {
  108. background-position: (-$form-trigger-width) (-$spinner-btn-height);
  109. }
  110. .#{$prefix}form-trigger-wrap-focus .#{$prefix}form-spinner-down-over {
  111. background-position: -($form-trigger-width * 4) (-$spinner-btn-height);
  112. }
  113. .#{$prefix}form-trigger-wrap .#{$prefix}form-spinner-down-click {
  114. background-position: -($form-trigger-width * 2) (-$spinner-btn-height);
  115. }
  116. .#{$prefix}field-default-toolbar {
  117. $spinner-btn-height: $form-toolbar-trigger-height / 2;
  118. .#{$prefix}form-trigger-wrap {
  119. .#{$prefix}form-spinner-up,
  120. .#{$prefix}form-spinner-down {
  121. background-image: theme-background-image($theme-name, 'form/spinner-small.gif');
  122. height: $spinner-btn-height !important;
  123. }
  124. .#{$prefix}form-spinner-down {
  125. background-position: 0 (-$spinner-btn-height);
  126. }
  127. }
  128. .#{$prefix}form-trigger-wrap-focus .#{$prefix}form-spinner-down {
  129. background-position: -($form-trigger-width * 3) (-$spinner-btn-height);
  130. }
  131. .#{$prefix}form-trigger-wrap .#{$prefix}form-spinner-down-over {
  132. background-position: (-$form-trigger-width) (-$spinner-btn-height);
  133. }
  134. .#{$prefix}form-trigger-wrap-focus .#{$prefix}form-spinner-down-over {
  135. background-position: -($form-trigger-width * 4) (-$spinner-btn-height);
  136. }
  137. .#{$prefix}form-trigger-wrap .#{$prefix}form-spinner-down-click {
  138. background-position: -($form-trigger-width * 2) (-$spinner-btn-height);
  139. }
  140. }
  141. .#{$prefix}trigger-noedit {
  142. cursor: pointer;
  143. cursor: hand;
  144. }
  145. .#{$prefix}item-disabled {
  146. .#{$prefix}trigger-noedit, .#{$prefix}form-trigger {
  147. cursor: auto;
  148. }
  149. }
  150. .#{$prefix}form-clear-trigger {
  151. background-image: theme-background-image($theme-name, 'form/clear-trigger.gif');
  152. }
  153. .#{$prefix}form-search-trigger {
  154. background-image: theme-background-image($theme-name, 'form/search-trigger.gif');
  155. }
  156. @if $include-ie {
  157. // in IE6 quirks, the table cell enclosing the trigger field's input element does not shrink to fit,
  158. // so it is necessary to set the height of the table cell.
  159. .#{$prefix}quirks .#{prefix}ie6 {
  160. .#{$prefix}form-trigger-input-cell {
  161. height: $form-field-height;
  162. }
  163. .#{$prefix}field-default-toolbar .#{$prefix}form-trigger-input-cell {
  164. height: $form-toolbar-field-height;
  165. }
  166. }
  167. }
  168. }
  169. </pre>
  170. </body>
  171. </html>