Multi.scss 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
  1. /**
  2. * @class Ext.slider.Multi
  3. */
  4. /**
  5. * @var {number}
  6. * The horizontal slider thumb width
  7. */
  8. $horizontal-slider-thumb-width: dynamic(15px);
  9. /**
  10. * @var {number}
  11. * The horizontal slider thumb height
  12. */
  13. $horizontal-slider-thumb-height: dynamic(15px);
  14. /**
  15. * @var {number}
  16. * The width of the horizontal slider start cap
  17. */
  18. $horizontal-slider-start-cap-width: dynamic(floor($horizontal-slider-thumb-width / 2));
  19. /**
  20. * @var {number}
  21. * The width of the horizontal slider end cap
  22. */
  23. $horizontal-slider-end-cap-width: dynamic(ceil($horizontal-slider-thumb-width / 2));
  24. /**
  25. * @var {number}
  26. * The vertical slider thumb width
  27. */
  28. $vertical-slider-thumb-width: dynamic(15px);
  29. /**
  30. * @var {number}
  31. * The vertical slider thumb height
  32. */
  33. $vertical-slider-thumb-height: dynamic(15px);
  34. /**
  35. * @var {number}
  36. * The height of the vertical slider start cap
  37. */
  38. $vertical-slider-start-cap-height: dynamic(floor($vertical-slider-thumb-height / 2));
  39. /**
  40. * @var {number}
  41. * The height of the vertical slider end cap
  42. */
  43. $vertical-slider-end-cap-height: dynamic(ceil($vertical-slider-thumb-height / 2));
  44. /**
  45. * @var {boolean}
  46. * `true` to use imageless sliders
  47. */
  48. $slider-imageless: dynamic($enable-font-icons);
  49. /**
  50. * @var {number}
  51. * The size of the slider track when using {@link #$slider-imageless imageless} sliders
  52. */
  53. $slider-track-size: dynamic(10px);
  54. /**
  55. * @var {number}
  56. * The border-radius of the slider track when using {@link #$slider-imageless imageless} sliders
  57. */
  58. $slider-track-border-radius: dynamic(2px);
  59. /**
  60. * @var {number}
  61. * The border-width of the slider track when using {@link #$slider-imageless imageless} sliders
  62. */
  63. $slider-track-border-width: dynamic(1px);
  64. /**
  65. * @var {number}
  66. * The border-style of the slider track when using {@link #$slider-imageless imageless} sliders
  67. */
  68. $slider-track-border-style: dynamic(solid);
  69. /**
  70. * @var {number}
  71. * The border-color of the slider track when using {@link #$slider-imageless imageless} sliders
  72. */
  73. $slider-track-border-color: dynamic($base-color);
  74. /**
  75. * @var {number}
  76. * The background-color of the slider track when using {@link #$slider-imageless imageless} sliders
  77. */
  78. $slider-track-background-color: dynamic($neutral-color);
  79. /**
  80. * @var {number}
  81. * The border-radius of the slider thumb when using {@link #$slider-imageless imageless} sliders
  82. */
  83. $slider-thumb-border-radius: dynamic(2px);
  84. /**
  85. * @var {number}
  86. * The border-width of the slider thumb when using {@link #$slider-imageless imageless} sliders
  87. */
  88. $slider-thumb-border-width: dynamic(1px);
  89. /**
  90. * @var {number}
  91. * The border-style of the slider thumb when using {@link #$slider-imageless imageless} sliders
  92. */
  93. $slider-thumb-border-style: dynamic(solid);
  94. /**
  95. * @var {number}
  96. * The border-color of the slider thumb when using {@link #$slider-imageless imageless} sliders
  97. */
  98. $slider-thumb-border-color: dynamic($neutral-color);
  99. /**
  100. * @var {number}
  101. * The border-color of the hovered slider thumb when using {@link #$slider-imageless imageless} sliders
  102. */
  103. $slider-thumb-border-color-over: dynamic($slider-thumb-border-color);
  104. /**
  105. * @var {number}
  106. * The border-color of the focused slider thumb when using {@link #$slider-imageless imageless} sliders
  107. */
  108. $slider-thumb-border-color-focus: dynamic($base-color);
  109. /**
  110. * @var {number}
  111. * The border-color of the slider thumb while dragging when using {@link #$slider-imageless imageless} sliders
  112. */
  113. $slider-thumb-border-color-drag: dynamic($slider-thumb-border-color);
  114. /**
  115. * @var {number}
  116. * The background-color of the slider thumb when using {@link #$slider-imageless imageless} sliders
  117. */
  118. $slider-thumb-background-color: dynamic(#fff);
  119. /**
  120. * @var {number}
  121. * The background-color of the hovered slider thumb when using {@link #$slider-imageless imageless} sliders
  122. */
  123. $slider-thumb-background-color-over: dynamic($slider-thumb-background-color);
  124. /**
  125. * @var {number}
  126. * The background-color of the focused slider thumb when using {@link #$slider-imageless imageless} sliders
  127. */
  128. $slider-thumb-background-color-focus: dynamic($slider-thumb-background-color);
  129. /**
  130. * @var {number}
  131. * The background-color of the slider thumb while dragging when using {@link #$slider-imageless imageless} sliders
  132. */
  133. $slider-thumb-background-color-drag: dynamic($slider-thumb-background-color);
  134. /**
  135. * @var {color}
  136. * The color to use for the slider thumb glyph when {@link Global_CSS#$enable-font-icons} is `true`.
  137. */
  138. $slider-thumb-glyph-color: dynamic($neutral-color);
  139. /**
  140. * @var {number}
  141. * The color to use for the slider thumb glyph when hovered.
  142. */
  143. $slider-thumb-glyph-color-over: dynamic($slider-thumb-glyph-color);
  144. /**
  145. * @var {number}
  146. * The color to use for the slider thumb glyph when focused.
  147. */
  148. $slider-thumb-glyph-color-focus: dynamic($slider-thumb-border-color-focus);
  149. /**
  150. * @var {number}
  151. * The color to use for the slider thumb glyph while dragging.
  152. */
  153. $slider-thumb-glyph-color-drag: dynamic($slider-thumb-glyph-color);
  154. /**
  155. * @var {number}
  156. * The font-size to use for the slider thumb glyph when {@link Global_CSS#$enable-font-icons} is `true`.
  157. */
  158. $slider-thumb-glyph-font-size: dynamic(12px);
  159. /**
  160. * @var {string/list}
  161. * Glyph to display inside of the slider thumb when {@link Global_CSS#$enable-font-icons} is `true`
  162. */
  163. $horizontal-slider-thumb-glyph: dynamic($ext-var-equals-vertical $slider-thumb-glyph-font-size ExtJS);
  164. /**
  165. * @var {string/list}
  166. * Glyph to display inside of the slider thumb when {@link Global_CSS#$enable-font-icons} is `true`
  167. */
  168. $vertical-slider-thumb-glyph: dynamic($ext-var-equals $slider-thumb-glyph-font-size ExtJS);