Table.scss 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346
  1. /**
  2. * @class Ext.view.Table
  3. */
  4. /**
  5. * @var {color}
  6. * The color of the text in the grid cells
  7. */
  8. $grid-row-cell-color: dynamic($color);
  9. /**
  10. * @var {number}
  11. * The font size of the text in the grid cells
  12. */
  13. $grid-row-cell-font-size: dynamic($font-size);
  14. /**
  15. * @var {number}
  16. * The line-height of the text inside the grid cells.
  17. */
  18. $grid-row-cell-line-height: dynamic(round($grid-row-cell-font-size * 1.15));
  19. /**
  20. * @var {string}
  21. * The font-weight of the text in the grid cells
  22. */
  23. $grid-row-cell-font-weight: dynamic($font-weight);
  24. /**
  25. * @var {string}
  26. * The font-family of the text in the grid cells
  27. */
  28. $grid-row-cell-font-family: dynamic($font-family);
  29. // private
  30. $grid-row-cell-font: dynamic($grid-row-cell-font-weight #{$grid-row-cell-font-size}/#{$grid-row-cell-line-height} $grid-row-cell-font-family);
  31. /**
  32. * @var {color}
  33. * The background-color of the grid cells
  34. */
  35. $grid-row-cell-background-color: dynamic(#fff);
  36. /**
  37. * @var {color}
  38. * The border-color of row/column borders. Can be specified as a single color, or as a list
  39. * of colors containing the row border color followed by the column border color.
  40. */
  41. $grid-row-cell-border-color: dynamic(#ededed);
  42. /**
  43. * @var {string}
  44. * The border-style of the row/column borders.
  45. */
  46. $grid-row-cell-border-style: dynamic(solid);
  47. /**
  48. * @var {number}
  49. * The border-width of the row and column borders.
  50. */
  51. $grid-row-cell-border-width: dynamic(1px);
  52. /**
  53. * @var {color}
  54. * The background-color of "special" cells. Special cells are created by {@link
  55. * Ext.grid.RowNumberer RowNumberer}, {@link Ext.selection.CheckboxModel Checkbox Selection
  56. * Model} and {@link Ext.grid.plugin.RowExpander RowExpander}.
  57. */
  58. $grid-cell-special-background-color: dynamic($grid-row-cell-background-color);
  59. /**
  60. * @var {string}
  61. * The background-gradient to use for "special" cells. Special cells are created by {@link
  62. * Ext.grid.RowNumberer RowNumberer}, {@link Ext.selection.CheckboxModel Checkbox Selection
  63. * Model} and {@link Ext.grid.plugin.RowExpander RowExpander}.
  64. */
  65. $grid-cell-special-background-gradient: dynamic('none');
  66. /**
  67. * @var {number}
  68. * The border-width of "special" cells. Special cells are created by {@link
  69. * Ext.grid.RowNumberer RowNumberer}, {@link Ext.selection.CheckboxModel Checkbox Selection
  70. * Model} and {@link Ext.grid.plugin.RowExpander RowExpander}.
  71. * Only applies to the vertical border, since the row border width is determined by
  72. * {#$grid-row-cell-border-width}.
  73. */
  74. $grid-cell-special-border-width: dynamic($grid-row-cell-border-width);
  75. /**
  76. * @var {color}
  77. * The border-color of "special" cells. Special cells are created by {@link
  78. * Ext.grid.RowNumberer RowNumberer}, {@link Ext.selection.CheckboxModel Checkbox Selection
  79. * Model} and {@link Ext.grid.plugin.RowExpander RowExpander}.
  80. * Only applies to the vertical border, since the row border color is determined by
  81. * {#$grid-row-cell-border-color}.
  82. */
  83. $grid-cell-special-border-color: dynamic(right($grid-row-cell-border-color));
  84. /**
  85. * @var {string}
  86. * The border-style of "special" cells. Special cells are created by {@link
  87. * Ext.grid.RowNumberer RowNumberer}, {@link Ext.selection.CheckboxModel Checkbox Selection
  88. * Model} and {@link Ext.grid.plugin.RowExpander RowExpander}.
  89. * Only applies to the vertical border, since the row border style is determined by
  90. * {#$grid-row-cell-border-style}.
  91. */
  92. $grid-cell-special-border-style: dynamic($grid-row-cell-border-style);
  93. /**
  94. * @var {color}
  95. * The border-color of "special" cells when the row is selected using a {@link
  96. * Ext.selection.RowModel Row Selection Model}. Special cells are created by {@link
  97. * Ext.grid.RowNumberer RowNumberer}, {@link Ext.selection.CheckboxModel Checkbox Selection
  98. * Model} and {@link Ext.grid.plugin.RowExpander RowExpander}.
  99. * Only applies to the vertical border, since the selected row border color is determined by
  100. * {#$grid-row-cell-selected-border-color}.
  101. */
  102. $grid-cell-special-selected-border-color: dynamic(right($grid-row-cell-border-color));
  103. /**
  104. * @var {color}
  105. * The background-color of "special" cells when the row is hovered. Special cells are
  106. * created by {@link Ext.grid.RowNumberer RowNumberer}, {@link Ext.selection.CheckboxModel
  107. * Checkbox Selection Model} and {@link Ext.grid.plugin.RowExpander RowExpander}.
  108. */
  109. $grid-cell-special-over-background-color: dynamic($grid-row-cell-over-background-color);
  110. /**
  111. * @var {color}
  112. * The background-color color of odd-numbered rows when the table view is configured with
  113. * `{@link Ext.view.Table#stripeRows stripeRows}: true`.
  114. */
  115. $grid-row-cell-alt-background-color: dynamic(darken($grid-row-cell-background-color, 2));
  116. /**
  117. * @var {string}
  118. * The border-style of the hovered row
  119. */
  120. $grid-row-cell-over-border-style: dynamic(solid);
  121. /**
  122. * @var {color}
  123. * The text color of the hovered row
  124. */
  125. $grid-row-cell-over-color: dynamic($grid-row-cell-color);
  126. /**
  127. * @var {color}
  128. * The background-color of the hovered row
  129. */
  130. $grid-row-cell-over-background-color: dynamic(#ddd);
  131. /**
  132. * @var {color}
  133. * The border-color of the hovered row
  134. */
  135. $grid-row-cell-over-border-color: dynamic(top($grid-row-cell-border-color));
  136. /**
  137. * @var {string}
  138. * The border-style of the selected row
  139. */
  140. $grid-row-cell-selected-border-style: dynamic(solid);
  141. /**
  142. * @var {color}
  143. * The text color of the selected row
  144. */
  145. $grid-row-cell-selected-color: dynamic($grid-row-cell-color);
  146. /**
  147. * @var {color}
  148. * The background-color of the selected row
  149. */
  150. $grid-row-cell-selected-background-color: dynamic(#ccc);
  151. /**
  152. * @var {color}
  153. * The border-color of the selected row
  154. */
  155. $grid-row-cell-selected-border-color: dynamic(top($grid-row-cell-border-color));
  156. /**
  157. * @var {number}
  158. * The border-width of the focused cell
  159. */
  160. $grid-row-cell-focus-border-width: dynamic(1px);
  161. /**
  162. * @var {color}
  163. * The border-color of the focused cell
  164. */
  165. $grid-row-cell-focus-border-color: dynamic(#808080);
  166. /**
  167. * @var {string}
  168. * The border-style of the focused cell
  169. */
  170. $grid-row-cell-focus-border-style: dynamic(dotted);
  171. /**
  172. * @var {number}
  173. * The spacing between grid cell border and inner focus border
  174. */
  175. $grid-row-cell-focus-border-inset: dynamic(0px);
  176. /**
  177. * @var {color}
  178. * The text color of the focused cell
  179. */
  180. $grid-row-cell-focus-color: dynamic($grid-row-cell-color);
  181. /**
  182. * @var {color}
  183. * The background-color of the focused cell
  184. */
  185. $grid-row-cell-focus-background-color: dynamic('none');
  186. /**
  187. * @var {boolean}
  188. * True to show the focus border when a row is focused even if the grid has no
  189. * {@link Ext.panel.Table#rowLines rowLines}.
  190. */
  191. $grid-no-row-lines-show-focus-border: dynamic(false);
  192. /**
  193. * @var {color}
  194. * The text color of a selected cell when using a {@link Ext.selection.CellModel
  195. * Cell Selection Model}.
  196. */
  197. $grid-cell-selected-color: dynamic($grid-row-cell-selected-color);
  198. /**
  199. * @var {color}
  200. * The background-color of a selected cell when using a {@link Ext.selection.CellModel
  201. * Cell Selection Model}.
  202. */
  203. $grid-cell-selected-background-color: dynamic($grid-row-cell-selected-background-color);
  204. /**
  205. * @var {number}
  206. * The amount of padding to apply to the grid cell's inner div element
  207. */
  208. $grid-cell-inner-padding: dynamic(3px 6px);
  209. /**
  210. * @var {string}
  211. * The type of text-overflow to use on the grid cell's inner div element
  212. */
  213. $grid-cell-inner-text-overflow: dynamic(ellipsis);
  214. /**
  215. * @var {color}
  216. * The border-color of the grid body
  217. */
  218. $grid-body-border-color: dynamic($panel-body-border-color);
  219. /**
  220. * @var {number}
  221. * The border-width of the grid body border
  222. */
  223. $grid-body-border-width: dynamic($panel-body-border-width);
  224. /**
  225. * @var {string}
  226. * The border-style of the grid body border
  227. */
  228. $grid-body-border-style: dynamic($panel-body-border-style);
  229. /**
  230. * @var {color}
  231. * The background-color of the grid body
  232. */
  233. $grid-body-background-color: dynamic($panel-body-background-color);
  234. /**
  235. * @var {number}
  236. * The amount of padding to apply to the grid body when the grid contains no data.
  237. */
  238. $grid-empty-padding: dynamic(10px);
  239. /**
  240. * @var {color}
  241. * The text color of the {@link Ext.view.Table#emptyText emptyText} in the grid body when
  242. * the grid contains no data.
  243. */
  244. $grid-empty-color: dynamic(#808080);
  245. /**
  246. * @var {color}
  247. * The background color of the grid body when the grid contains no data.
  248. */
  249. $grid-empty-background-color: dynamic($panel-body-background-color);
  250. /**
  251. * @var {number}
  252. * The font-size of the {@link Ext.view.Table#emptyText emptyText} in the grid body when
  253. * the grid contains no data.
  254. */
  255. $grid-empty-font-size: dynamic($grid-row-cell-font-size);
  256. /**
  257. * @var {number}
  258. * The font-weight of the {@link Ext.view.Table#emptyText emptyText} in the grid body when
  259. * the grid contains no data.
  260. */
  261. $grid-empty-font-weight: dynamic($font-weight);
  262. /**
  263. * @var {number}
  264. * The font-family of the {@link Ext.view.Table#emptyText emptyText} in the grid body when
  265. * the grid contains no data.
  266. */
  267. $grid-empty-font-family: dynamic($font-family);
  268. /**
  269. * @var {color}
  270. * The color of the resize markers that display when dragging a column border to resize
  271. * the column
  272. */
  273. $grid-resize-marker-background-color: dynamic(#0f0f0f);
  274. /**
  275. * @var {color}
  276. * The color of the grid cell dirty indicator when {@link Global_CSS#$enable-font-icons} is `true`.
  277. */
  278. $grid-cell-dirty-glyph-color: dynamic(#c30);
  279. /**
  280. * @var {string/list}
  281. * Glyph for the grid cell dirty indicator when {@link Global_CSS#$enable-font-icons} is `true`.
  282. */
  283. $grid-cell-dirty-glyph: dynamic($ext-var-dirty 14px ExtJS);
  284. /**
  285. * @var {string/list}
  286. * Glyph for the grid cell dirty indicator in rtl mode
  287. * when {@link Global_CSS#$enable-font-icons} is `true`.
  288. */
  289. $grid-cell-dirty-glyph-rtl: dynamic($ext-var-dirty-rtl 14px ExtJS);
  290. // private
  291. $grid-row-height: dynamic($grid-row-cell-line-height + vertical($grid-cell-inner-padding));
  292. // private
  293. $grid-row-border-color: top($grid-row-cell-border-color);
  294. // private
  295. $grid-col-border-color: right($grid-row-cell-border-color);