47a0aa225db5fb04c39fa06028bf4a37f95d6861c8c5528f90a5d38da787a6bee2f0a237d0edb1948b328fa978d7e28a77e8b79344f0c749263f459f2570b6 1.6 KB

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