Expander.scss 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. /**
  2. * @class Ext.grid.cell.Expander
  3. */
  4. /**
  5. * @var {number/list}
  6. * Expander cell padding
  7. */
  8. $expandercell-padding: dynamic(0);
  9. /**
  10. * @var {number/list}
  11. * Expander cell padding in the {@link Global_CSS#$enable-big big} sizing scheme
  12. */
  13. $expandercell-padding-big: dynamic(0);
  14. /**
  15. * @var {number}
  16. * Expander cell icon size
  17. */
  18. $expandercell-icon-size: dynamic(14px);
  19. /**
  20. * @var {number}
  21. * Expander cell icon size in the {@link Global_CSS#$enable-big big} sizing scheme
  22. */
  23. $expandercell-icon-size-big: dynamic(18px);
  24. /**
  25. * @var {number}
  26. * Expander cell icon font-size
  27. */
  28. $expandercell-icon-font-size: dynamic(null);
  29. /**
  30. * @var {number}
  31. * Expander cell icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme
  32. */
  33. $expandercell-icon-font-size-big: dynamic(null);
  34. /**
  35. * @var {string/list}
  36. * Expander cell expand icon
  37. */
  38. $expandercell-expand-icon: dynamic($fa-var-plus-square);
  39. /**
  40. * @var {string/list}
  41. * Expander cell collapse icon
  42. */
  43. $expandercell-collapse-icon: dynamic($fa-var-minus-square);
  44. /**
  45. * @var {color}
  46. * Expander cell icon color
  47. */
  48. $expandercell-icon-color: dynamic($neutral-dark-color);
  49. /**
  50. * Creates a visual theme for an expander cell.
  51. *
  52. * @param {string} $ui
  53. * The name of the UI being created. Can not included spaces or special punctuation
  54. * (used in CSS class names).
  55. *
  56. * @param {String} [$xtype=expandercell] (protected) The {@link Ext.Class#xtype} to use
  57. * in CSS selectors. For use by UI mixins of derived classes.
  58. *
  59. * @param {number/list} $padding
  60. * Expander cell padding
  61. *
  62. * @param {number/list} $padding-big
  63. * Expander cell padding in the {@link Global_CSS#$enable-big big} sizing scheme
  64. *
  65. * @param {number} $icon-size
  66. * Expander cell icon size
  67. *
  68. * @param {number} $icon-size-big
  69. * Expander cell icon size in the {@link Global_CSS#$enable-big big} sizing scheme
  70. *
  71. * @param {number} $icon-font-size
  72. * Expander cell icon font-size
  73. *
  74. * @param {number} $icon-font-size-big
  75. * Expander cell icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme
  76. *
  77. * @param {string/list} $expand-icon
  78. * Expander cell expand icon
  79. *
  80. * @param {string/list} $collapse-icon
  81. * Expander cell collapse icon
  82. *
  83. * @param {color} $icon-color
  84. * Expander cell icon color
  85. */
  86. @mixin expandercell-ui(
  87. $ui: null,
  88. $xtype: 'expandercell',
  89. $padding: null,
  90. $padding-big: null,
  91. $icon-size: null,
  92. $icon-size-big: null,
  93. $icon-font-size: null,
  94. $icon-font-size-big: null,
  95. $expand-icon: null,
  96. $collapse-icon: null,
  97. $icon-color: null
  98. ) {
  99. $ui-suffix: ui-suffix($ui);
  100. $arguments: intersect-arguments(expandercell-ui, gridcell-ui);
  101. @include gridcell-ui($arguments...);
  102. .#{$prefix}#{$xtype}#{$ui-suffix} {
  103. .#{$prefix}icon-el {
  104. @include icon(
  105. $icon: $expand-icon,
  106. $color: $icon-color,
  107. $size: $icon-size,
  108. $size-big: $icon-size-big,
  109. $font-size: $icon-font-size,
  110. $font-size-big: $icon-font-size-big
  111. );
  112. }
  113. &.#{$prefix}expanded .#{$prefix}icon-el {
  114. @include icon($collapse-icon);
  115. }
  116. }
  117. }