智慧水务管理系统 - 精河县供水工程综合管理平台

collapse-item.scss 1.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  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. box-sizing: border-box;
  28. @include e(arrow) {
  29. transition: transform getCssVar('transition-duration');
  30. font-weight: 300;
  31. @include when(active) {
  32. transform: rotate(90deg);
  33. }
  34. }
  35. @include e(title) {
  36. text-align: left;
  37. flex: auto;
  38. }
  39. &.focusing:focus:not(:hover) {
  40. color: getCssVar('color-primary');
  41. }
  42. @include when(active) {
  43. border-bottom-color: transparent;
  44. }
  45. }
  46. @include e(wrap) {
  47. will-change: height;
  48. background-color: getCssVar('collapse-content-bg-color');
  49. overflow: hidden;
  50. box-sizing: border-box;
  51. border-bottom: 1px solid getCssVar('collapse-border-color');
  52. }
  53. @include e(content) {
  54. padding-bottom: 25px;
  55. font-size: getCssVar('collapse-content-font-size');
  56. color: getCssVar('collapse-content-text-color');
  57. line-height: 1.769230769230769;
  58. }
  59. &:last-child {
  60. margin-bottom: -1px;
  61. }
  62. }