table-column.scss 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. @use 'sass:map';
  2. @use 'mixins/mixins' as *;
  3. @use 'common/var' as *;
  4. @include b(table-column) {
  5. @include m(selection) {
  6. .cell {
  7. padding-left: 14px;
  8. padding-right: 14px;
  9. }
  10. }
  11. }
  12. @include b(table-filter) {
  13. border: solid 1px getCssVar('border-color-lighter');
  14. border-radius: 2px;
  15. background-color: $color-white;
  16. box-shadow: map.get($dropdown, 'menu-box-shadow');
  17. box-sizing: border-box;
  18. /** used for dropdown mode */
  19. @include e(list) {
  20. padding: 5px 0;
  21. margin: 0;
  22. list-style: none;
  23. min-width: 100px;
  24. outline: none;
  25. }
  26. @include e(list-item) {
  27. line-height: 36px;
  28. padding: 0 10px;
  29. cursor: pointer;
  30. font-size: getCssVar('font-size', 'base');
  31. outline: none;
  32. &:hover,
  33. &:focus {
  34. background-color: map.get($dropdown, 'menuItem-hover-fill');
  35. color: map.get($dropdown, 'menuItem-hover-color');
  36. }
  37. @include when(active) {
  38. background-color: getCssVar('color-primary');
  39. color: $color-white;
  40. }
  41. }
  42. @include e(multiple) {
  43. outline: none;
  44. }
  45. @include e(content) {
  46. min-width: 100px;
  47. }
  48. @include e(bottom) {
  49. border-top: 1px solid getCssVar('border-color-lighter');
  50. padding: 8px;
  51. button {
  52. @include reset-button();
  53. color: getCssVar('text-color', 'regular');
  54. font-size: getCssVar('font-size-small');
  55. padding: 0 3px;
  56. &:hover {
  57. color: getCssVar('color-primary');
  58. }
  59. &.is-disabled {
  60. color: getCssVar('disabled-text-color');
  61. cursor: not-allowed;
  62. }
  63. }
  64. }
  65. @include e(wrap) {
  66. max-height: 280px;
  67. }
  68. @include e(checkbox-group) {
  69. padding: 10px;
  70. label.#{$namespace}-checkbox {
  71. display: flex;
  72. align-items: center;
  73. margin-right: 5px;
  74. margin-bottom: 12px;
  75. margin-left: 5px;
  76. height: unset;
  77. }
  78. .#{$namespace}-checkbox:last-child {
  79. margin-bottom: 0;
  80. }
  81. }
  82. }