index.less 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. @import './var.less';
  2. :root {
  3. --van-divider-margin: @divider-margin;
  4. --van-divider-text-color: @divider-text-color;
  5. --van-divider-font-size: @divider-font-size;
  6. --van-divider-line-height: @divider-line-height;
  7. --van-divider-border-color: @divider-border-color;
  8. --van-divider-content-padding: @divider-content-padding;
  9. --van-divider-content-left-width: @divider-content-left-width;
  10. --van-divider-content-right-width: @divider-content-right-width;
  11. }
  12. .van-divider {
  13. display: flex;
  14. align-items: center;
  15. margin: var(--van-divider-margin);
  16. color: var(--van-divider-text-color);
  17. font-size: var(--van-divider-font-size);
  18. line-height: var(--van-divider-line-height);
  19. border-color: var(--van-divider-border-color);
  20. border-style: solid;
  21. border-width: 0;
  22. &::before,
  23. &::after {
  24. display: block;
  25. flex: 1;
  26. box-sizing: border-box;
  27. height: 1px;
  28. border-color: inherit;
  29. border-style: inherit;
  30. border-width: var(--van-border-width-base) 0 0;
  31. }
  32. &::before {
  33. content: '';
  34. }
  35. &--hairline {
  36. &::before,
  37. &::after {
  38. transform: scaleY(0.5);
  39. }
  40. }
  41. &--dashed {
  42. border-style: dashed;
  43. }
  44. &--content-center,
  45. &--content-left,
  46. &--content-right {
  47. &::before {
  48. margin-right: var(--van-divider-content-padding);
  49. }
  50. &::after {
  51. margin-left: var(--van-divider-content-padding);
  52. content: '';
  53. }
  54. }
  55. &--content-left {
  56. &::before {
  57. max-width: var(--van-divider-content-left-width);
  58. }
  59. }
  60. &--content-right {
  61. &::after {
  62. max-width: var(--van-divider-content-right-width);
  63. }
  64. }
  65. }