Check.scss 4.7 KB

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