table-column.scss 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  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. }
  25. @include e(list-item) {
  26. line-height: 36px;
  27. padding: 0 10px;
  28. cursor: pointer;
  29. font-size: getCssVar('font-size', 'base');
  30. &:hover {
  31. background-color: map.get($dropdown, 'menuItem-hover-fill');
  32. color: map.get($dropdown, 'menuItem-hover-color');
  33. }
  34. @include when(active) {
  35. background-color: getCssVar('color-primary');
  36. color: $color-white;
  37. }
  38. }
  39. @include e(content) {
  40. min-width: 100px;
  41. }
  42. @include e(bottom) {
  43. border-top: 1px solid getCssVar('border-color-lighter');
  44. padding: 8px;
  45. button {
  46. background: transparent;
  47. border: none;
  48. color: getCssVar('text-color', 'regular');
  49. cursor: pointer;
  50. font-size: getCssVar('font-size-small');
  51. padding: 0 3px;
  52. &:hover {
  53. color: getCssVar('color-primary');
  54. }
  55. &:focus {
  56. outline: none;
  57. }
  58. &.is-disabled {
  59. color: getCssVar('disabled-text-color');
  60. cursor: not-allowed;
  61. }
  62. }
  63. }
  64. @include e(wrap) {
  65. max-height: 280px;
  66. }
  67. @include e(checkbox-group) {
  68. padding: 10px;
  69. label.#{$namespace}-checkbox {
  70. display: flex;
  71. align-items: center;
  72. margin-right: 5px;
  73. margin-bottom: 12px;
  74. margin-left: 5px;
  75. height: unset;
  76. }
  77. .#{$namespace}-checkbox:last-child {
  78. margin-bottom: 0;
  79. }
  80. }
  81. }