Tool.scss 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286
  1. /**
  2. * @class Ext.panel.Tool
  3. */
  4. /**
  5. * @var {number}
  6. * The size of Tools
  7. */
  8. $tool-size: dynamic(16px);
  9. /**
  10. * @var {boolean}
  11. * True to change the background-position of the Tool on hover. Allows for a separate
  12. * hover state icon in the sprite.
  13. */
  14. $tool-include-hover-icons: dynamic(true);
  15. /**
  16. * @var {string}
  17. * The cursor to display when the mouse cursor is over a Tool
  18. */
  19. $tool-cursor: dynamic(pointer);
  20. /**
  21. * @var {number}
  22. * The opacity of Tools
  23. */
  24. $tool-opacity: dynamic(1);
  25. /**
  26. * @var {number}
  27. * The opacity of hovered Tools
  28. */
  29. $tool-opacity-over: dynamic(1);
  30. /**
  31. * @var {number}
  32. * The opacity of pressed Tools
  33. */
  34. $tool-opacity-pressed: dynamic(1);
  35. /**
  36. * @var {string}
  37. * The sprite to use as the background-image for Tools
  38. */
  39. $tool-background-image: dynamic('tools/tool-sprites');
  40. /**
  41. * @var {color}
  42. * The color to use for tool icons when {@link Global_CSS#$enable-font-icons} is `true`.
  43. */
  44. $tool-glyph-color: dynamic(#fff);
  45. /**
  46. * @var {number}
  47. * The font size to use for tool icons when {@link Global_CSS#$enable-font-icons} is `true`.
  48. */
  49. $tool-glyph-font-size: dynamic(16px);
  50. /**
  51. * @var {string/list}
  52. * Glyph for the "close" tool icon when {@link Global_CSS#$enable-font-icons} is `true`.
  53. */
  54. $tool-close-glyph: dynamic($fa-var-close $tool-glyph-font-size $font-icon-font-family);
  55. /**
  56. * @var {string/list}
  57. * Glyph for the "minimize" tool icon when {@link Global_CSS#$enable-font-icons} is `true`.
  58. */
  59. $tool-minimize-glyph: dynamic($ext-var-minimize $tool-glyph-font-size ExtJS);
  60. /**
  61. * @var {string/list}
  62. * Glyph for the "maximize" tool icon when {@link Global_CSS#$enable-font-icons} is `true`.
  63. */
  64. $tool-maximize-glyph: dynamic($fa-var-expand $tool-glyph-font-size $font-icon-font-family);
  65. /**
  66. * @var {string/list}
  67. * Glyph for the "restore" tool icon when {@link Global_CSS#$enable-font-icons} is `true`.
  68. */
  69. $tool-restore-glyph: dynamic($fa-var-compress $tool-glyph-font-size $font-icon-font-family);
  70. /**
  71. * @var {string/list}
  72. * Glyph for the up "toggle" tool icon when {@link Global_CSS#$enable-font-icons} is `true`.
  73. */
  74. $tool-toggle-up-glyph: dynamic($fa-var-chevron-up $tool-glyph-font-size $font-icon-font-family);
  75. /**
  76. * @var {string/list}
  77. * Glyph for the down "toggle" tool icon when {@link Global_CSS#$enable-font-icons} is `true`.
  78. */
  79. $tool-toggle-down-glyph: dynamic($fa-var-chevron-down $tool-glyph-font-size $font-icon-font-family);
  80. /**
  81. * @var {string/list}
  82. * Glyph for the "gear" tool icon when {@link Global_CSS#$enable-font-icons} is `true`.
  83. */
  84. $tool-gear-glyph: dynamic($fa-var-cog $tool-glyph-font-size $font-icon-font-family);
  85. /**
  86. * @var {string/list}
  87. * Glyph for the "prev" tool icon when {@link Global_CSS#$enable-font-icons} is `true`.
  88. */
  89. $tool-prev-glyph: dynamic($fa-var-chevron-left $tool-glyph-font-size $font-icon-font-family);
  90. /**
  91. * @var {string/list}
  92. * Glyph for the "next" tool icon when {@link Global_CSS#$enable-font-icons} is `true`.
  93. */
  94. $tool-next-glyph: dynamic($fa-var-chevron-right $tool-glyph-font-size $font-icon-font-family);
  95. /**
  96. * @var {string/list}
  97. * Glyph for the "pin" tool icon when {@link Global_CSS#$enable-font-icons} is `true`.
  98. */
  99. $tool-pin-glyph: dynamic($fa-var-thumb-tack $tool-glyph-font-size $font-icon-font-family);
  100. /**
  101. * @var {string/list}
  102. * Glyph for the "unpin" tool icon when {@link Global_CSS#$enable-font-icons} is `true`.
  103. */
  104. $tool-unpin-glyph: dynamic($ext-var-unpin $tool-glyph-font-size ExtJS);
  105. /**
  106. * @var {string/list}
  107. * Glyph for the "right" tool icon when {@link Global_CSS#$enable-font-icons} is `true`.
  108. */
  109. $tool-right-glyph: dynamic($fa-var-caret-right $tool-glyph-font-size $font-icon-font-family);
  110. /**
  111. * @var {string/list}
  112. * Glyph for the "left" tool icon when {@link Global_CSS#$enable-font-icons} is `true`.
  113. */
  114. $tool-left-glyph: dynamic($fa-var-caret-left $tool-glyph-font-size $font-icon-font-family);
  115. /**
  116. * @var {string/list}
  117. * Glyph for the "down" tool icon when {@link Global_CSS#$enable-font-icons} is `true`.
  118. */
  119. $tool-down-glyph: dynamic($fa-var-caret-down $tool-glyph-font-size $font-icon-font-family);
  120. /**
  121. * @var {string/list}
  122. * Glyph for the "up" tool icon when {@link Global_CSS#$enable-font-icons} is `true`.
  123. */
  124. $tool-up-glyph: dynamic($fa-var-caret-up $tool-glyph-font-size $font-icon-font-family);
  125. /**
  126. * @var {string/list}
  127. * Glyph for the "refresh" tool icon when {@link Global_CSS#$enable-font-icons} is `true`.
  128. */
  129. $tool-refresh-glyph: dynamic($fa-var-refresh $tool-glyph-font-size $font-icon-font-family);
  130. /**
  131. * @var {string/list}
  132. * Glyph for the "plus" tool icon when {@link Global_CSS#$enable-font-icons} is `true`.
  133. */
  134. $tool-plus-glyph: dynamic($fa-var-plus $tool-glyph-font-size $font-icon-font-family);
  135. /**
  136. * @var {string/list}
  137. * Glyph for the "minus" tool icon when {@link Global_CSS#$enable-font-icons} is `true`.
  138. */
  139. $tool-minus-glyph: dynamic($fa-var-minus $tool-glyph-font-size $font-icon-font-family);
  140. /**
  141. * @var {string/list}
  142. * Glyph for the "search" tool icon when {@link Global_CSS#$enable-font-icons} is `true`.
  143. */
  144. $tool-search-glyph: dynamic($fa-var-search $tool-glyph-font-size $font-icon-font-family);
  145. /**
  146. * @var {string/list}
  147. * Glyph for the "save" tool icon when {@link Global_CSS#$enable-font-icons} is `true`.
  148. */
  149. $tool-save-glyph: dynamic($fa-var-check $tool-glyph-font-size $font-icon-font-family);
  150. /**
  151. * @var {string/list}
  152. * Glyph for the "help" tool icon when {@link Global_CSS#$enable-font-icons} is `true`.
  153. */
  154. $tool-help-glyph: dynamic($fa-var-question $tool-glyph-font-size $font-icon-font-family);
  155. /**
  156. * @var {string/list}
  157. * Glyph for the "print" tool icon when {@link Global_CSS#$enable-font-icons} is `true`.
  158. */
  159. $tool-print-glyph: dynamic($fa-var-print $tool-glyph-font-size $font-icon-font-family);
  160. /**
  161. * @var {string/list}
  162. * Glyph for the "expand" tool icon when {@link Global_CSS#$enable-font-icons} is `true`.
  163. */
  164. $tool-expand-glyph: dynamic($ext-var-expand $tool-glyph-font-size ExtJS);
  165. /**
  166. * @var {string/list}
  167. * Glyph for the "collapse" tool icon when {@link Global_CSS#$enable-font-icons} is `true`.
  168. */
  169. $tool-collapse-glyph: dynamic($ext-var-collapse $tool-glyph-font-size ExtJS);
  170. /**
  171. * @var {string/list}
  172. * Glyph for the "resize" tool icon when {@link Global_CSS#$enable-font-icons} is `true`.
  173. */
  174. $tool-resize-glyph: dynamic($fa-var-arrows-h $tool-glyph-font-size $font-icon-font-family);
  175. /**
  176. * @var {string/list}
  177. * Glyph for the "move" tool icon when {@link Global_CSS#$enable-font-icons} is `true`.
  178. */
  179. $tool-move-glyph: dynamic($fa-var-arrows $tool-glyph-font-size $font-icon-font-family);
  180. /**
  181. * @var {string/list}
  182. * Glyph for the downward "expand" tool icon when {@link Global_CSS#$enable-font-icons} is `true`.
  183. */
  184. $tool-expand-bottom-glyph: dynamic($fa-var-caret-down $tool-glyph-font-size $font-icon-font-family);
  185. /**
  186. * @var {string/list}
  187. * Glyph for the downward "collapse" tool icon when {@link Global_CSS#$enable-font-icons} is `true`.
  188. */
  189. $tool-collapse-bottom-glyph: dynamic($fa-var-caret-down $tool-glyph-font-size $font-icon-font-family);
  190. /**
  191. * @var {string/list}
  192. * Glyph for the upward "expand" tool icon when {@link Global_CSS#$enable-font-icons} is `true`.
  193. */
  194. $tool-expand-top-glyph: dynamic($fa-var-caret-up $tool-glyph-font-size $font-icon-font-family);
  195. /**
  196. * @var {string/list}
  197. * Glyph for the upward "collapse" tool icon when {@link Global_CSS#$enable-font-icons} is `true`.
  198. */
  199. $tool-collapse-top-glyph: dynamic($fa-var-caret-up $tool-glyph-font-size $font-icon-font-family);
  200. /**
  201. * @var {string/list}
  202. * Glyph for the left "expand" tool icon when {@link Global_CSS#$enable-font-icons} is `true`.
  203. */
  204. $tool-expand-left-glyph: dynamic($fa-var-caret-left $tool-glyph-font-size $font-icon-font-family);
  205. /**
  206. * @var {string/list}
  207. * Glyph for the left "collapse" tool icon when {@link Global_CSS#$enable-font-icons} is `true`.
  208. */
  209. $tool-collapse-left-glyph: dynamic($fa-var-caret-left $tool-glyph-font-size $font-icon-font-family);
  210. /**
  211. * @var {string/list}
  212. * Glyph for the right "expand" tool icon when {@link Global_CSS#$enable-font-icons} is `true`.
  213. */
  214. $tool-expand-right-glyph: dynamic($fa-var-caret-right $tool-glyph-font-size $font-icon-font-family);
  215. /**
  216. * @var {string/list}
  217. * Glyph for the right "collapse" tool icon when {@link Global_CSS#$enable-font-icons} is `true`.
  218. */
  219. $tool-collapse-right-glyph: dynamic($fa-var-caret-right $tool-glyph-font-size $font-icon-font-family);
  220. /**
  221. * @var {number}
  222. * The focus outline width for Tools used in contexts outside a Panel header
  223. */
  224. $tool-focus-outline-width: dynamic($panel-tool-focus-outline-width);
  225. /**
  226. * @var {string}
  227. * The focus outline style for Tools used in contexts outside a Panel header
  228. */
  229. $tool-focus-outline-style: dynamic($panel-tool-focus-outline-style);
  230. /**
  231. * @var {string}
  232. * The focus outline color for Tools used in contexts outside a Panel header
  233. */
  234. $tool-focus-outline-color: dynamic($base-color);
  235. /**
  236. * @var {number}
  237. * The focus outline offset for Tools used in contexts outside a Panel header
  238. */
  239. $tool-focus-outline-offset: dynamic($panel-tool-focus-outline-offset);