Grouping.scss 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. /**
  2. * @class Ext.grid.feature.Grouping
  3. */
  4. /**
  5. * @var {color}
  6. * The background color of group headers
  7. */
  8. $grid-grouped-header-background-color: dynamic(#fff);
  9. /**
  10. * @var {number/list}
  11. * The border-width of group headers
  12. */
  13. $grid-grouped-header-border-width: dynamic(0 0 2px 0);
  14. /**
  15. * @var {string}
  16. * The border-style of group headers
  17. */
  18. $grid-grouped-header-border-style: dynamic(solid);
  19. /**
  20. * @var {color}
  21. * The border-color of group headers
  22. */
  23. $grid-grouped-header-border-color: dynamic(adjust-color($base-color, $hue: 0.844deg, $saturation: 7.644%, $lightness: -8.627%));
  24. /**
  25. * @var {number/list}
  26. * The padding of group headers
  27. */
  28. $grid-grouped-header-padding: dynamic(10px 4px 4px 4px);
  29. /**
  30. * @var {string}
  31. * The cursor of group headers
  32. */
  33. $grid-grouped-header-cursor: dynamic(pointer);
  34. /**
  35. * @var {color}
  36. * The text color of group header titles
  37. */
  38. $grid-grouped-title-color: dynamic(adjust-color($base-color, $hue: 0.952deg, $saturation: -6.718%, $lightness: -41.961%));
  39. /**
  40. * @var {string}
  41. * The font-family of group header titles
  42. */
  43. $grid-grouped-title-font-family: dynamic($font-family);
  44. /**
  45. * @var {number}
  46. * The font-size of group header titles
  47. */
  48. $grid-grouped-title-font-size: dynamic($font-size);
  49. /**
  50. * @var {string}
  51. * The font-weight of group header titles
  52. */
  53. $grid-grouped-title-font-weight: dynamic($font-weight-bold);
  54. /**
  55. * @var {number}
  56. * The line-height of group header titles
  57. */
  58. $grid-grouped-title-line-height: dynamic(round($grid-grouped-title-font-size * 1.15));
  59. /**
  60. * @var {string/list}
  61. * Glyph for the "group by this field" menu icon when {@link Global_CSS#$enable-font-icons} is `true`.
  62. */
  63. $grid-grouped-menu-group-by-glyph: dynamic($ext-var-group-by $grid-header-menu-glyph-font-size ExtJS);
  64. /**
  65. * @var {color}
  66. * The color to use for the group title's expand and collapse icons when {@link Global_CSS#$enable-font-icons} is `true`.
  67. */
  68. $grid-grouped-title-glyph-color: dynamic($color);
  69. /**
  70. * @var {number}
  71. * The font size for the group title's expand and collapse icons when {@link Global_CSS#$enable-font-icons} is `true`.
  72. */
  73. $grid-grouped-title-glyph-font-size: dynamic(14px);
  74. /**
  75. * @var {string/list}
  76. * Glyph for the group title's "expand" group icon when {@link Global_CSS#$enable-font-icons} is `true`.
  77. */
  78. $grid-grouped-title-expand-glyph: dynamic($fa-var-plus-square $grid-grouped-title-glyph-font-size $font-icon-font-family);
  79. /**
  80. * @var {string/list}
  81. * Glyph for the group title's "collapse" group icon when {@link Global_CSS#$enable-font-icons} is `true`.
  82. */
  83. $grid-grouped-title-collapse-glyph: dynamic($fa-var-minus-square $grid-grouped-title-glyph-font-size $font-icon-font-family);
  84. // private
  85. $grid-grouped-title-font: dynamic($grid-grouped-title-font-weight #{$grid-grouped-title-font-size}/#{$grid-grouped-title-line-height} $grid-grouped-title-font-family);
  86. /**
  87. * @var {number/list}
  88. * The amount of padding to add to the group title element. This is typically used
  89. * to reserve space for an icon by setting the amountof space to be reserved for the icon
  90. * as the left value and setting the remaining sides to 0.
  91. */
  92. $grid-grouped-icon-padding: dynamic(0 0 0 14px);