index.less 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. @import './var.less';
  2. @import '../style/mixins/hairline';
  3. :root {
  4. --van-collapse-item-transition-duration: @collapse-item-transition-duration;
  5. --van-collapse-item-content-padding: @collapse-item-content-padding;
  6. --van-collapse-item-content-font-size: @collapse-item-content-font-size;
  7. --van-collapse-item-content-line-height: @collapse-item-content-line-height;
  8. --van-collapse-item-content-text-color: @collapse-item-content-text-color;
  9. --van-collapse-item-content-background-color: @collapse-item-content-background-color;
  10. --van-collapse-item-title-disabled-color: @collapse-item-title-disabled-color;
  11. }
  12. .van-collapse-item {
  13. position: relative;
  14. &--border {
  15. &::after {
  16. .hairline-top(var(--van-border-color), var(--van-padding-md), var(--van-padding-md));
  17. }
  18. }
  19. &__title {
  20. .van-cell__right-icon::before {
  21. // using translateZ to fix safari rendering issues
  22. // see: https://github.com/vant-ui/vant/issues/8608
  23. transform: rotate(90deg) translateZ(0);
  24. transition: transform var(--van-collapse-item-transition-duration);
  25. }
  26. &::after {
  27. right: var(--van-padding-md);
  28. display: none;
  29. }
  30. &--expanded {
  31. .van-cell__right-icon::before {
  32. transform: rotate(-90deg);
  33. }
  34. &::after {
  35. display: block;
  36. }
  37. }
  38. &--borderless {
  39. &::after {
  40. display: none;
  41. }
  42. }
  43. &--disabled {
  44. cursor: not-allowed;
  45. &,
  46. & .van-cell__right-icon {
  47. color: var(--van-collapse-item-title-disabled-color);
  48. }
  49. }
  50. }
  51. &__wrapper {
  52. overflow: hidden;
  53. transition: height var(--van-collapse-item-transition-duration) ease-in-out;
  54. will-change: height;
  55. }
  56. &__content {
  57. padding: var(--van-collapse-item-content-padding);
  58. color: var(--van-collapse-item-content-text-color);
  59. font-size: var(--van-collapse-item-content-font-size);
  60. line-height: var(--van-collapse-item-content-line-height);
  61. background: var(--van-collapse-item-content-background-color);
  62. }
  63. }