collapse.scss 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. @use '../helpers/baseMixin.scss';
  2. .vxe-collapse {
  3. font-size: var(--vxe-ui-font-size-default);
  4. color: var(--vxe-ui-font-color);
  5. font-family: var(--vxe-ui-font-family);
  6. &.is--padding {
  7. .vxe-collapse--item-inner {
  8. padding: var(--vxe-ui-layout-padding-default);
  9. }
  10. }
  11. }
  12. .vxe-collapse-slots {
  13. display: none;
  14. }
  15. .vxe-collapse--item-content {
  16. &.is--visible {
  17. .vxe-collapse--item-inner {
  18. display: block;
  19. }
  20. }
  21. }
  22. .vxe-collapse--item-inner {
  23. display: none;
  24. }
  25. .vxe-collapse--item-header {
  26. display: flex;
  27. flex-direction: row;
  28. align-items: center;
  29. height: 1.8em;
  30. cursor: pointer;
  31. }
  32. .vxe-collapse--item-switch,
  33. .vxe-collapse--item-icon {
  34. user-select: none;
  35. padding-right: var(--vxe-ui-layout-padding-half);
  36. }
  37. .vxe-collapse--item-switch {
  38. flex-shrink: 0;
  39. cursor: pointer;
  40. & > i {
  41. display: inline-block;
  42. @include baseMixin.createAnimationTransition(transform, .2s);
  43. }
  44. }
  45. .vxe-collapse {
  46. &.size--medium {
  47. font-size: var(--vxe-ui-font-size-medium);
  48. }
  49. &.size--small {
  50. font-size: var(--vxe-ui-font-size-small);
  51. }
  52. &.size--mini {
  53. font-size: var(--vxe-ui-font-size-mini);
  54. }
  55. }