Slider.scss 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
  1. /**
  2. * @class Ext.field.Slider
  3. */
  4. /**
  5. * @var {number/list}
  6. * Slider Field padding
  7. */
  8. $sliderfield-padding: dynamic(5px 0 4px);
  9. /**
  10. * @var {number/list}
  11. * Slider Field padding in the {@link Global_CSS#$enable-big big} sizing scheme
  12. */
  13. $sliderfield-padding-big: dynamic(2px 0);
  14. /**
  15. * @var {color}
  16. * Slider Field {@link #boxLabel} text color
  17. */
  18. $sliderfield-box-label-color: dynamic($field-box-label-color);
  19. /**
  20. * @var {string/number}
  21. * Slider Field {@link #boxLabel} font-weight
  22. */
  23. $sliderfield-box-label-font-weight: dynamic($field-box-label-font-weight);
  24. /**
  25. * @var {number}
  26. * Slider Field {@link #boxLabel} font-size
  27. */
  28. $sliderfield-box-label-font-size: dynamic($field-box-label-font-size);
  29. /**
  30. * @var {number}
  31. * Slider Field {@link #boxLabel} font-size in the {@link Global_CSS#$enable-big big} sizing scheme
  32. */
  33. $sliderfield-box-label-font-size-big: dynamic($field-box-label-font-size-big);
  34. /**
  35. * @var {number}
  36. * Slider Field {@link #boxLabel} line-height
  37. */
  38. $sliderfield-box-label-line-height: dynamic($field-box-label-line-height);
  39. /**
  40. * @var {number}
  41. * Slider Field {@link #boxLabel} line-height in the {@link Global_CSS#$enable-big big} sizing scheme
  42. */
  43. $sliderfield-box-label-line-height-big: dynamic($field-box-label-line-height-big);
  44. /**
  45. * @var {string}
  46. * Slider Field {@link #boxLabel} font-family
  47. */
  48. $sliderfield-box-label-font-family: dynamic($field-box-label-font-family);
  49. /**
  50. * @var {number/list}
  51. * Slider Field {@link #boxLabel} padding
  52. * The padding box will be flipped horizontally when {@link #boxLabelAlign} is `before`
  53. */
  54. $sliderfield-box-label-padding: dynamic(top($field-box-label-padding) right($field-box-label-padding) bottom($field-box-label-padding) 6px);
  55. /**
  56. * @var {number/list}
  57. * Slider Field {@link #boxLabel} padding in the {@link Global_CSS#$enable-big big} sizing scheme
  58. * The padding box will be flipped horizontally when {@link #boxLabelAlign} is `before`
  59. */
  60. $sliderfield-box-label-padding-big: dynamic(top($field-box-label-padding-big) right($field-box-label-padding-big) bottom($field-box-label-padding-big) 8px);
  61. /**
  62. * @var {number}
  63. * Slider Field body width
  64. */
  65. $sliderfield-body-width: dynamic(100px);
  66. /**
  67. * @var {number}
  68. * Slider Field body width in the {@link Global_CSS#$enable-big big} sizing scheme
  69. */
  70. $sliderfield-body-width-big: dynamic(150px);
  71. /**
  72. * Creates a visual theme for a Slider Field
  73. *
  74. * @param {string} $ui
  75. * The name of the UI being created. Can not included spaces or special punctuation
  76. * (used in CSS class names).
  77. *
  78. * @param {String} [$xtype=sliderfield] (protected) The {@link Ext.Class#xtype} to use
  79. * in CSS selectors. For use by UI mixins of derived classes.
  80. *
  81. * @param {number/list} $padding
  82. * Slider Field padding
  83. *
  84. * @param {number/list} $padding-big
  85. * Slider Field padding in the {@link Global_CSS#$enable-big big} sizing scheme
  86. *
  87. * @param {color} $box-label-color
  88. * Slider Field {@link #boxLabel} text color
  89. *
  90. * @param {string/number} $box-label-font-weight
  91. * Slider Field {@link #boxLabel} font-weight
  92. *
  93. * @param {number} $box-label-font-size
  94. * Slider Field {@link #boxLabel} font-size
  95. *
  96. * @param {number} $box-label-font-size-big
  97. * Slider Field {@link #boxLabel} font-size in the {@link Global_CSS#$enable-big big} sizing scheme
  98. *
  99. * @param {number} $box-label-line-height
  100. * Slider Field {@link #boxLabel} line-height
  101. *
  102. * @param {number} $box-label-line-height-big
  103. * Slider Field {@link #boxLabel} line-height in the {@link Global_CSS#$enable-big big} sizing scheme
  104. *
  105. * @param {string} $box-label-font-family
  106. * Slider Field {@link #boxLabel} font-family
  107. *
  108. * @param {number/list} $box-label-padding
  109. * Slider Field {@link #boxLabel} padding
  110. * The padding box will be flipped horizontally when {@link #boxLabelAlign} is `before`
  111. *
  112. * @param {number/list} $box-label-padding-big
  113. * Slider Field {@link #boxLabel} padding in the {@link Global_CSS#$enable-big big} sizing scheme
  114. * The padding box will be flipped horizontally when {@link #boxLabelAlign} is `before`
  115. *
  116. * @param {number} $body-width
  117. * Slider Field body width
  118. *
  119. * @param {number} $body-width-big
  120. * Slider Field body width in the {@link Global_CSS#$enable-big big} sizing scheme
  121. */
  122. @mixin sliderfield-ui(
  123. $ui: null,
  124. $xtype: sliderfield,
  125. $padding: null,
  126. $padding-big: null,
  127. $box-label-color: null,
  128. $box-label-font-weight: null,
  129. $box-label-font-size: null,
  130. $box-label-font-size-big: null,
  131. $box-label-line-height: null,
  132. $box-label-line-height-big: null,
  133. $box-label-font-family: null,
  134. $box-label-padding: null,
  135. $box-label-padding-big: null,
  136. $body-width,
  137. $body-width-big
  138. ) {
  139. $ui-suffix: ui-suffix($ui);
  140. .#{$prefix}#{$xtype}#{$ui-suffix} {
  141. .#{$prefix}body-wrap-el {
  142. width: $body-width;
  143. @if $enable-big {
  144. .#{$prefix}big & {
  145. width: $body-width-big;
  146. }
  147. }
  148. }
  149. .#{$prefix}box-el {
  150. padding: $sliderfield-padding;
  151. @if $enable-big {
  152. .#{$prefix}big & {
  153. padding: $sliderfield-padding-big;
  154. }
  155. }
  156. }
  157. @include box-label-ui(
  158. $box-label-color: $box-label-color,
  159. $box-label-font-weight: $box-label-font-weight,
  160. $box-label-font-size: $box-label-font-size,
  161. $box-label-font-size-big: $box-label-font-size-big,
  162. $box-label-line-height: $box-label-line-height,
  163. $box-label-line-height-big: $box-label-line-height-big,
  164. $box-label-font-family: $box-label-font-family,
  165. $box-label-padding: $box-label-padding,
  166. $box-label-padding-big: $box-label-padding-big
  167. );
  168. }
  169. }