collapse-item.scss 1.7 KB

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