index.scss 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. @import '@/uni_modules/lime-style/index.scss';
  2. $divider-color: create-var(divider-color, $gray-3) !default;
  3. $divider-text-color: create-var(divider-text-color, $text-color-3) !default;
  4. $divider-font-size: create-var(divider-font-size, 12px) !default;
  5. $divider-line-height: create-var(divider-line-height, 20px) !default;
  6. $divider-line-style: create-var(divider-line-style, solid);
  7. $divider-margin: create-var(divider-margin, 10px);
  8. .l-divider {
  9. display: flex;
  10. color: $divider-text-color;
  11. border-color: $divider-color;
  12. border-style: $divider-line-style;
  13. border-width: 0;
  14. /* #ifdef APP-NVUE */
  15. &__before,
  16. &__after,
  17. /* #endif */
  18. /* #ifndef APP-NVUE */
  19. &::before,
  20. &::after
  21. /* #endif */
  22. {
  23. content: '';
  24. display: block;
  25. flex: 1;
  26. box-sizing: border-box;
  27. border: inherit;
  28. border-color: inherit;
  29. border-style: inherit;
  30. }
  31. &--horizontal {
  32. align-items: center;
  33. margin-top: $divider-margin;
  34. margin-bottom: $divider-margin;
  35. /* #ifdef APP-NVUE */
  36. .l-divider__before,
  37. .l-divider__after,
  38. /* #endif */
  39. /* #ifndef APP-NVUE */
  40. &::before,
  41. &::after
  42. /* #endif */
  43. {
  44. border-top-width: 1px;
  45. transform: scaleY(0.5);
  46. }
  47. .l-divider__content:not(:empty) {
  48. margin: 0 24rpx;
  49. }
  50. }
  51. &--vertical {
  52. flex-direction: column;
  53. height: 1em;
  54. margin: 0 $divider-margin;
  55. /* #ifdef APP-NVUE */
  56. .l-divider__before,
  57. .l-divider__after,
  58. /* #endif */
  59. /* #ifndef APP-NVUE */
  60. &::before,
  61. &::after
  62. /* #endif */
  63. {
  64. border-left-width: 1px;
  65. transform: scaleX(0.5);
  66. }
  67. &-center {
  68. align-items: center;
  69. height: 100%;
  70. }
  71. }
  72. &--dashed {
  73. border-style: dashed;
  74. }
  75. &__content {
  76. font-size: $divider-font-size;
  77. line-height: $divider-line-height;
  78. color: $divider-text-color;
  79. }
  80. &--left::before,
  81. &--right::after {
  82. max-width: 60rpx;
  83. }
  84. }