collapse.scss 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. @import './variables.scss';
  2. $module: #{$prefix}-collapse;
  3. .#{$module} {
  4. &-item {
  5. border-bottom: $width-collapse_item-border solid $color-collapse_item-border-default;
  6. }
  7. &-header {
  8. display: flex;
  9. align-items: center;
  10. justify-content: space-between;
  11. margin: $spacing-collapse_header-marginY $spacing-collapse_header-marginX;
  12. padding: $spacing-collapse_header-padding;
  13. border-radius: $radius-collapse_header;
  14. outline: none;
  15. cursor: pointer;
  16. color: $color-collapse_header-text-default;
  17. font-weight: $font-collapse_header-fontWeight;
  18. @include font-size-regular;
  19. &-right {
  20. display: flex;
  21. align-items: center;
  22. span {
  23. display: flex;
  24. padding-right: $spacing-collapse_right-paddingRight;
  25. &:last-child {
  26. padding-right: 0;
  27. }
  28. }
  29. }
  30. &-icon {
  31. width: $size-collapse_icon-default;
  32. height: $size-collapse_icon-default;
  33. color: $color-collapse_header-icon-default;
  34. }
  35. &-iconLeft {
  36. justify-content: flex-start;
  37. .#{$module}-header-icon {
  38. margin-right: $spacing-collapse_header_iconLeft-marginRight;
  39. }
  40. }
  41. &-iconDisabled {
  42. color: var(--semi-color-disabled-text);
  43. }
  44. &:hover {
  45. background-color: $color-collapse_header-bg-hover;
  46. }
  47. &:active {
  48. background-color: $color-collapse_header-bg-active;
  49. }
  50. }
  51. &-content {
  52. padding: $spacing-collapse_content-paddingTop $spacing-collapse_content-paddingRight $spacing-collapse_content-paddingBottom $spacing-collapse_content-paddingLeft;
  53. color: $color-collapse_content-text-default;
  54. @include font-size-regular;
  55. p {
  56. margin: 0;
  57. }
  58. }
  59. }
  60. @import './rtl.scss';