Container.scss 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
  1. /**
  2. * @class Ext.grid.header.Container
  3. */
  4. /**
  5. * @var {color}
  6. * The background-color of grid headers
  7. */
  8. $grid-header-background-color: dynamic(#ddd);
  9. /**
  10. * @var {string/list}
  11. * The background-gradient of grid headers. Can be either the name of a predefined gradient
  12. * or a list of color stops. Used as the `$type` parameter for {@link Global_CSS#background-gradient}.
  13. */
  14. $grid-header-background-gradient: dynamic('grid-header');
  15. /**
  16. * @var {color}
  17. * The border-color of grid headers
  18. */
  19. $grid-header-border-color: dynamic(#333);
  20. /**
  21. * @var {number}
  22. * The border-width of grid headers
  23. */
  24. $grid-header-border-width: dynamic(1px);
  25. /**
  26. * @var {string}
  27. * The border-style of grid headers
  28. */
  29. $grid-header-border-style: dynamic(solid);
  30. /**
  31. * @var {color}
  32. * The background-color of grid headers when the cursor is over the header
  33. */
  34. $grid-header-over-background-color: dynamic(#eee);
  35. /**
  36. * @var {string/list}
  37. * The background-gradient of grid headers when the cursor is over the header. Can be
  38. * either the name of a predefined gradient or a list of color stops. Used as the `$type`
  39. * parameter for {@link Global_CSS#background-gradient}.
  40. */
  41. $grid-header-over-background-gradient: dynamic('grid-header-over');
  42. /**
  43. * @var {color}
  44. * The background-color of grid headers when sorted
  45. */
  46. $grid-header-sorted-background-color: dynamic($grid-header-over-background-color);
  47. /**
  48. * @var {string/list}
  49. * The background-gradient of grid headers when sorted. Can be either the name of a
  50. * predefined gradient or a list of color stops. Used as the `$type`
  51. * parameter for {@link Global_CSS#background-gradient}.
  52. */
  53. $grid-header-sorted-background-gradient: dynamic($grid-header-over-background-gradient);
  54. /**
  55. * @var {color}
  56. * The background-color of a grid header when its menu is open
  57. */
  58. $grid-header-open-background-color: dynamic(transparent);
  59. /**
  60. * @var {number/list}
  61. * The padding to apply to grid headers
  62. */
  63. $grid-header-padding: dynamic(5px);
  64. /**
  65. * @var {number}
  66. * The height of grid header triggers
  67. */
  68. $grid-header-trigger-height: dynamic(22px);
  69. /**
  70. * @var {number}
  71. * The width of grid header triggers
  72. */
  73. $grid-header-trigger-width: dynamic(14px);
  74. /**
  75. * @var {string}
  76. * The background-image of grid header triggers
  77. */
  78. $grid-header-trigger-background-image: dynamic('grid/hd-pop');
  79. /**
  80. * @var {string/list}
  81. * Glyph for the grid header trigger icon when {@link Global_CSS#$enable-font-icons} is `true`.
  82. */
  83. $grid-header-trigger-glyph-font-size: dynamic(16px);
  84. /**
  85. * @var {string/list}
  86. * Glyph for the grid header trigger icon when {@link Global_CSS#$enable-font-icons} is `true`.
  87. */
  88. $grid-header-trigger-glyph: dynamic($fa-var-caret-down $grid-header-trigger-glyph-font-size $font-icon-font-family);
  89. /**
  90. * @var {color}
  91. * The color to use for the grid header trigger icon when {@link Global_CSS#$enable-font-icons} is `true`.
  92. */
  93. $grid-header-trigger-glyph-color: dynamic($color);
  94. /**
  95. * @var {number}
  96. * The width of the grid header sort icon
  97. */
  98. $grid-header-sort-icon-width: dynamic(9px);
  99. /**
  100. * @var {string}
  101. * The type of cursor to display when the cursor is over a grid header trigger
  102. */
  103. $grid-header-trigger-cursor: dynamic(pointer);
  104. /**
  105. * @var {number}
  106. * The amount of space between the header trigger and text
  107. */
  108. $grid-header-trigger-spacing: dynamic(1px);
  109. /**
  110. * @var {list}
  111. * The background-position of the header trigger
  112. */
  113. $grid-header-trigger-background-position: dynamic(0 center);
  114. /**
  115. * @var {color}
  116. * The background-color of the header trigger
  117. */
  118. $grid-header-trigger-background-color: dynamic(transparent);
  119. /**
  120. * @var {color}
  121. * The background-color of the header trigger when the menu is open
  122. */
  123. $grid-header-trigger-background-color-open: dynamic(transparent);
  124. /**
  125. * @var {number}
  126. * The space between the grid header sort icon and the grid header text
  127. */
  128. $grid-header-sort-icon-spacing: dynamic(3px);
  129. // private
  130. $grid-header-sort-icon-position: dynamic(right center);
  131. /**
  132. * @var {string/list}
  133. * Glyph for the grid header sort icon when {@link Global_CSS#$enable-font-icons} is `true`.
  134. */
  135. $grid-header-sort-glyph-font-size: dynamic(14px);
  136. /**
  137. * @var {color}
  138. * The color to use for the grid header sort icon when {@link Global_CSS#$enable-font-icons} is `true`.
  139. */
  140. $grid-header-sort-glyph-color: dynamic($color);
  141. /**
  142. * @var {string/list}
  143. * Glyph for the grid header "sort ascending" icon when {@link Global_CSS#$enable-font-icons} is `true`.
  144. */
  145. $grid-header-sort-asc-glyph: dynamic($fa-var-long-arrow-up $grid-header-sort-glyph-font-size $font-icon-font-family);
  146. /**
  147. * @var {string/list}
  148. * Glyph for the grid header "sort descending" icon when {@link Global_CSS#$enable-font-icons} is `true`.
  149. */
  150. $grid-header-sort-desc-glyph: dynamic($fa-var-long-arrow-down $grid-header-sort-glyph-font-size $font-icon-font-family);
  151. /**
  152. * @var {string/list}
  153. * Glyph for the grid header menu icons when {@link Global_CSS#$enable-font-icons} is `true`.
  154. */
  155. $grid-header-menu-glyph-font-size: dynamic(16px);
  156. /**
  157. * @var {color}
  158. * The color to use for the grid header menu icons when {@link Global_CSS#$enable-font-icons} is `true`.
  159. */
  160. $grid-header-menu-glyph-color: dynamic($menu-glyph-color);
  161. /**
  162. * @var {string/list}
  163. * Glyph for the grid header menu "sort ascending" icon when {@link Global_CSS#$enable-font-icons} is `true`.
  164. */
  165. $grid-header-menu-sort-asc-glyph: dynamic($ext-var-sort-up $grid-header-menu-glyph-font-size ExtJS);
  166. /**
  167. * @var {string/list}
  168. * Glyph for the grid header menu "sort descending" icon when {@link Global_CSS#$enable-font-icons} is `true`.
  169. */
  170. $grid-header-menu-sort-desc-glyph: dynamic($ext-var-sort-down $grid-header-menu-glyph-font-size ExtJS);
  171. /**
  172. * @var {string/list}
  173. * Glyph for the grid header menu "columns" icon when {@link Global_CSS#$enable-font-icons} is `true`.
  174. */
  175. $grid-header-menu-columns-glyph: dynamic($ext-var-columns $grid-header-menu-glyph-font-size ExtJS);