SpinUp.scss 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215
  1. /**
  2. * @class Ext.field.trigger.SpinUp
  3. */
  4. /**
  5. * @var {number}
  6. * Spin Up Trigger width
  7. */
  8. $spinuptrigger-width: dynamic(null);
  9. /**
  10. * @var {number}
  11. * Spin Up Trigger width in the {@link Global_CSS#$enable-big big} sizing scheme
  12. */
  13. $spinuptrigger-width-big: dynamic(null);
  14. /**
  15. * @var {color}
  16. * Spin Up Trigger background-color
  17. */
  18. $spinuptrigger-background-color: dynamic(null);
  19. /**
  20. * @var {color}
  21. * Spin Up Trigger background-color when hovered
  22. */
  23. $spinuptrigger-hovered-background-color: dynamic(null);
  24. /**
  25. * @var {color}
  26. * Spin Up Trigger background-color when pressed
  27. */
  28. $spinuptrigger-pressed-background-color: dynamic(null);
  29. //# fashion replaces $spinnerfield-button-up-icon
  30. /**
  31. * @var {string}
  32. * Spin Up Trigger icon
  33. */
  34. $spinuptrigger-icon: dynamic($fa-var-caret-up);
  35. /**
  36. * @var {string}
  37. * Spin Up Trigger icon in the {@link Global_CSS#$enable-big big} sizing scheme
  38. */
  39. $spinuptrigger-icon-big: dynamic($fa-var-plus);
  40. /**
  41. * @var {color}
  42. * Spin Up Trigger icon color
  43. */
  44. $spinuptrigger-icon-color: dynamic(null);
  45. /**
  46. * @var {color}
  47. * Spin Up Trigger icon color when hovered
  48. */
  49. $spinuptrigger-hovered-icon-color: dynamic(null);
  50. /**
  51. * @var {color}
  52. * Spin Up Trigger icon color when pressed
  53. */
  54. $spinuptrigger-pressed-icon-color: dynamic(null);
  55. /**
  56. * @var {color}
  57. * Spin Up Trigger icon background-color
  58. */
  59. $spinuptrigger-icon-background-color: dynamic(null);
  60. /**
  61. * @var {color}
  62. * Spin Up Trigger icon background-color when hovered
  63. */
  64. $spinuptrigger-hovered-icon-background-color: dynamic(null);
  65. /**
  66. * @var {color}
  67. * Spin Up Trigger icon background-color when pressed
  68. */
  69. $spinuptrigger-pressed-icon-background-color: dynamic(null);
  70. /**
  71. * @var {number/list}
  72. * Spin Up Trigger icon border-radius
  73. */
  74. $spinuptrigger-icon-border-radius: dynamic(null);
  75. /**
  76. * @var {number}
  77. * Spin Up Trigger icon size
  78. */
  79. $spinuptrigger-icon-size: dynamic(11px);
  80. /**
  81. * @var {number}
  82. * Spin Up Trigger icon size in the {@link Global_CSS#$enable-big big} sizing scheme
  83. */
  84. $spinuptrigger-icon-size-big: dynamic(null);
  85. /**
  86. * @var {number}
  87. * Spin Up Trigger icon font-size
  88. */
  89. $spinuptrigger-icon-font-size: dynamic(16px);
  90. /**
  91. * @var {number}
  92. * Spin Up Trigger icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme
  93. */
  94. $spinuptrigger-icon-font-size-big: dynamic($spinuptrigger-icon-size-big);
  95. /**
  96. * Creates a visual theme for a Spin Up Trigger.
  97. *
  98. * @param {string} $ui
  99. * The name of the UI being created. Can not included spaces or special punctuation
  100. * (used in CSS class names).
  101. *
  102. * @param {String} [$xtype=spinuptrigger] (protected) The {@link Ext.Class#xtype} to use
  103. * in CSS selectors. For use by UI mixins of derived classes.
  104. *
  105. * @param {number} $width
  106. * Spin Up Trigger width
  107. *
  108. * @param {number} $width-big
  109. * Spin Up Trigger width in the {@link Global_CSS#$enable-big big} sizing scheme
  110. *
  111. * @param {color} $background-color
  112. * Spin Up Trigger background-color
  113. *
  114. * @param {color} $hovered-background-color
  115. * Spin Up Trigger background-color when hovered
  116. *
  117. * @param {color} $pressed-background-color
  118. * Spin Up Trigger background-color when pressed
  119. *
  120. * @param {string} $icon
  121. * Spin Up Trigger icon
  122. *
  123. * @param {string} $icon-big
  124. * Spin Up Trigger icon in the {@link Global_CSS#$enable-big big} sizing scheme
  125. *
  126. * @param {color} $icon-color
  127. * Spin Up Trigger icon color
  128. *
  129. * @param {color} $hovered-icon-color
  130. * Spin Up Trigger icon color when hovered
  131. *
  132. * @param {color} $pressed-icon-color
  133. * Spin Up Trigger icon color when pressed
  134. *
  135. * @param {color} $icon-background-color
  136. * Spin Up Trigger icon background-color
  137. *
  138. * @param {color} $hovered-icon-background-color
  139. * Spin Up Trigger icon background-color when hovered
  140. *
  141. * @param {color} $pressed-icon-background-color
  142. * Spin Up Trigger icon background-color when pressed
  143. *
  144. * @param {number/list} $icon-border-radius
  145. * Spin Up Trigger icon border-radius
  146. *
  147. * @param {number} $icon-size
  148. * Spin Up Trigger icon size
  149. *
  150. * @param {number} $icon-size-big
  151. * Spin Up Trigger icon size in the {@link Global_CSS#$enable-big big} sizing scheme
  152. *
  153. * @param {number} $icon-font-size
  154. * Spin Up Trigger icon font-size
  155. *
  156. * @param {number} $icon-font-size-big
  157. * Spin Up Trigger icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme
  158. */
  159. @mixin spinuptrigger-ui(
  160. $ui: null,
  161. $xtype: spinuptrigger,
  162. $width: null,
  163. $width-big: null,
  164. $background-color: null,
  165. $hovered-background-color: null,
  166. $pressed-background-color: null,
  167. $icon: null,
  168. $icon-big: null,
  169. $icon-color: null,
  170. $hovered-icon-color: null,
  171. $pressed-icon-color: null,
  172. $icon-background-color: null,
  173. $hovered-icon-background-color: null,
  174. $pressed-icon-background-color: null,
  175. $icon-border-radius: null,
  176. $icon-size: null,
  177. $icon-size-big: null,
  178. $icon-font-size: null,
  179. $icon-font-size-big: null
  180. ) {
  181. $ui-suffix: ui-suffix($ui);
  182. $arguments: intersect-arguments(spinuptrigger-ui, trigger-ui);
  183. @include trigger-ui($arguments...);
  184. .#{$prefix}#{$xtype}#{$ui-suffix} {
  185. .#{$prefix}icon-el {
  186. @if $enable-big {
  187. .#{$prefix}big & {
  188. @include icon($icon: $icon-big);
  189. }
  190. }
  191. }
  192. }
  193. }