View.scss 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. /**
  2. * @class Ext.tree.View
  3. */
  4. /**
  5. * @var {number} $tree-elbow-width
  6. * The width of the tree elbow/arrow icons
  7. */
  8. $tree-elbow-width: dynamic(16px);
  9. /**
  10. * @var {number} $tree-icon-width
  11. * The width of the tree folder/leaf icons
  12. */
  13. $tree-icon-width: dynamic(16px);
  14. /**
  15. * @var {number} $tree-elbow-spacing
  16. * The amount of spacing between the tree elbows or arrows, and the checkbox or icon.
  17. */
  18. $tree-elbow-spacing: dynamic(0);
  19. /**
  20. * @var {number} $tree-checkbox-spacing
  21. * The amount of space (in pixels) between the tree checkbox and the folder/leaf icon
  22. */
  23. $tree-checkbox-spacing: dynamic(3px);
  24. /**
  25. * @var {number} $tree-icon-spacing
  26. * The amount of space (in pixels) between the folder/leaf icons and the text
  27. */
  28. $tree-icon-spacing: dynamic(3px);
  29. /**
  30. * @var {string} $tree-expander-cursor
  31. * The type of cursor to display when the mouse is over a tree expander (+, - or arrow icon)
  32. */
  33. $tree-expander-cursor: dynamic(pointer);
  34. /**
  35. * @var {number/list}
  36. * The amount of padding to apply to the tree cell's inner div element
  37. */
  38. $tree-cell-inner-padding: dynamic(
  39. top($grid-cell-inner-padding)
  40. right($grid-cell-inner-padding)
  41. bottom($grid-cell-inner-padding)
  42. 0
  43. );
  44. /**
  45. * @var {number}
  46. * The font size to use for tree icons when {@link Global_CSS#$enable-font-icons} is `true`.
  47. */
  48. $tree-glyph-font-size: dynamic(16px);
  49. /**
  50. * @var {color}
  51. * The color to use for tree icons when {@link Global_CSS#$enable-font-icons} is `true`.
  52. */
  53. $tree-glyph-color: dynamic($color);
  54. /**
  55. * @var {string/list}
  56. * Glyph for the "folder" tree icon when {@link Global_CSS#$enable-font-icons} is `true`.
  57. */
  58. $tree-folder-glyph: dynamic($fa-var-folder-o $tree-glyph-font-size $font-icon-font-family);
  59. /**
  60. * @var {color}
  61. * The color to use for the "folder" tree icon when {@link Global_CSS#$enable-font-icons} is `true`.
  62. */
  63. $tree-folder-glyph-color: dynamic($tree-glyph-color);
  64. /**
  65. * @var {string/list}
  66. * Glyph for the "open folder" tree icon when {@link Global_CSS#$enable-font-icons} is `true`.
  67. */
  68. $tree-folder-open-glyph: dynamic($fa-var-folder-open-o $tree-glyph-font-size $font-icon-font-family);
  69. /**
  70. * @var {color}
  71. * The color to use for the "open folder" tree icon when {@link Global_CSS#$enable-font-icons} is `true`.
  72. */
  73. $tree-folder-open-glyph-color: dynamic($tree-folder-glyph-color);
  74. /**
  75. * @var {string/list}
  76. * Glyph for the "leaf" tree icon when {@link Global_CSS#$enable-font-icons} is `true`.
  77. */
  78. $tree-leaf-glyph: dynamic($fa-var-file-o $tree-glyph-font-size $font-icon-font-family);
  79. /**
  80. * @var {color}
  81. * The color to use for the "leaf" tree icon when {@link Global_CSS#$enable-font-icons} is `true`.
  82. */
  83. $tree-leaf-glyph-color: dynamic($tree-glyph-color);
  84. /**
  85. * @var {string/list}
  86. * Glyph for the "arrow" tree icon when {@link Global_CSS#$enable-font-icons} is `true`.
  87. */
  88. $tree-arrow-glyph: dynamic($fa-var-caret-right $tree-glyph-font-size $font-icon-font-family);
  89. /**
  90. * @var {string/list}
  91. * Glyph for the RTL "arrow" tree icon when {@link Global_CSS#$enable-font-icons} is `true`.
  92. */
  93. $tree-arrow-glyph-rtl: dynamic($fa-var-caret-left $tree-glyph-font-size $font-icon-font-family);
  94. /**
  95. * @var {color}
  96. * The color to use for the "arrow" tree icon when {@link Global_CSS#$enable-font-icons} is `true`.
  97. */
  98. $tree-arrow-glyph-color: dynamic($tree-glyph-color);
  99. /**
  100. * @var {string/list}
  101. * Glyph for the "expanded arrow" tree icon when {@link Global_CSS#$enable-font-icons} is `true`.
  102. */
  103. $tree-arrow-expanded-glyph: dynamic($fa-var-caret-down $tree-glyph-font-size $font-icon-font-family);
  104. /**
  105. * @var {color}
  106. * The color to use for the "expanded arrow" icon when {@link Global_CSS#$enable-font-icons} is `true`.
  107. */
  108. $tree-arrow-expanded-glyph-color: dynamic($tree-arrow-glyph-color);
  109. /**
  110. * @var {string/list}
  111. * Glyph for the "expand" tree icon when {@link Global_CSS#$enable-font-icons} is `true`.
  112. */
  113. $tree-expand-glyph: dynamic($fa-var-plus-square 14px $font-icon-font-family);
  114. /**
  115. * @var {color}
  116. * The color to use for the "expand" tree icon when {@link Global_CSS#$enable-font-icons} is `true`.
  117. */
  118. $tree-expand-glyph-color: dynamic($tree-glyph-color);
  119. /**
  120. * @var {string/list}
  121. * Glyph for the "collapse" tree icon when {@link Global_CSS#$enable-font-icons} is `true`.
  122. */
  123. $tree-collapse-glyph: dynamic($fa-var-minus-square 14px $font-icon-font-family);
  124. /**
  125. * @var {color}
  126. * The color to use for the "collapse" tree icon when {@link Global_CSS#$enable-font-icons} is `true`.
  127. */
  128. $tree-collapse-glyph-color: dynamic($tree-glyph-color);
  129. /**
  130. * @var {color}
  131. * The color to use for the Tree checkbox when {@link Global_CSS#$enable-font-icons} is `true`.
  132. */
  133. $tree-checkbox-glyph-color: dynamic($form-checkbox-glyph-color);
  134. /**
  135. * @var {string/list}
  136. * The glyph for the Tree checkbox when {@link Global_CSS#$enable-font-icons} is `true`.
  137. */
  138. $tree-checkbox-glyph: dynamic($form-checkbox-glyph);
  139. /**
  140. * @var {string/list}
  141. * The glyph for the Tree checkbox in "checked" state when {@link Global_CSS#$enable-font-icons} is `true`.
  142. */
  143. $tree-checkbox-checked-glyph: dynamic($form-checkbox-checked-glyph);
  144. /**
  145. * @var {string/list}
  146. * Glyph for the tree's "ok" drag/drop icon when {@link Global_CSS#$enable-font-icons} is `true`.
  147. */
  148. $tree-statusproxy-ok-glyph: dynamic($fa-var-plus-circle $statusproxy-glyph-font-size $font-icon-font-family);