collapse.scss 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. @use 'mixins/mixins' as *;
  2. @use 'mixins/var' as *;
  3. @use 'common/var' as *;
  4. @use 'common/transition';
  5. @include b(collapse) {
  6. @include set-component-css-var('collapse', $collapse);
  7. border-top: 1px solid getCssVar('collapse-border-color');
  8. border-bottom: 1px solid getCssVar('collapse-border-color');
  9. }
  10. @include b(collapse-item) {
  11. @include when(disabled) {
  12. .#{$namespace}-collapse-item__header {
  13. color: getCssVar('text-color-disabled');
  14. cursor: not-allowed;
  15. }
  16. }
  17. @include e(header) {
  18. width: 100%;
  19. padding: 0;
  20. border: none;
  21. display: flex;
  22. align-items: center;
  23. height: getCssVar('collapse-header-height');
  24. line-height: getCssVar('collapse-header-height');
  25. background-color: getCssVar('collapse-header-bg-color');
  26. color: getCssVar('collapse-header-text-color');
  27. cursor: pointer;
  28. border-bottom: 1px solid getCssVar('collapse-border-color');
  29. font-size: getCssVar('collapse-header-font-size');
  30. font-weight: 500;
  31. transition: border-bottom-color getCssVar('transition-duration');
  32. outline: none;
  33. @include e(arrow) {
  34. margin: 0 8px 0 auto;
  35. transition: transform getCssVar('transition-duration');
  36. font-weight: 300;
  37. @include when(active) {
  38. transform: rotate(90deg);
  39. }
  40. }
  41. &.focusing:focus:not(:hover) {
  42. color: getCssVar('color-primary');
  43. }
  44. @include when(active) {
  45. border-bottom-color: transparent;
  46. }
  47. }
  48. @include e(wrap) {
  49. will-change: height;
  50. background-color: getCssVar('collapse-content-bg-color');
  51. overflow: hidden;
  52. box-sizing: border-box;
  53. border-bottom: 1px solid getCssVar('collapse-border-color');
  54. }
  55. @include e(content) {
  56. padding-bottom: 25px;
  57. font-size: getCssVar('collapse-content-font-size');
  58. color: getCssVar('collapse-content-text-color');
  59. line-height: 1.769230769230769;
  60. }
  61. &:last-child {
  62. margin-bottom: -1px;
  63. }
  64. }