index-u.scss 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. @import '@/uni_modules/lime-style/index.scss';
  2. $divider: l-divider;
  3. $divider-color: create-var(divider-color, $gray-3) !default;
  4. $divider-text-color: create-var(divider-text-color, $text-color-3) !default;
  5. $divider-font-size: create-var(divider-font-size, 12px) !default;
  6. $divider-line-height: create-var(divider-line-height, 20px) !default;
  7. $divider-line-style: create-var(divider-line-style, solid);
  8. $divider-margin: create-var(divider-margin, 10px);
  9. /* #ifdef MP */
  10. :host {
  11. align-self: stretch;
  12. display: flex;
  13. }
  14. /* #endif*/
  15. .#{$divider} {
  16. flex-direction: row;
  17. // transition: padding 100ms;
  18. /* #ifdef MP */
  19. flex:1;
  20. /* #endif*/
  21. /* #ifndef APP-ANDROID || APP-IOS */
  22. display: flex;
  23. color: $divider-text-color;
  24. border-color: $divider-color;
  25. border-style: $divider-line-style;
  26. border-width: 0;
  27. /* #ifdef APP-NVUE */
  28. &__before,
  29. &__after,
  30. /* #endif */
  31. /* #ifndef APP-NVUE */
  32. &::before,
  33. &::after
  34. /* #endif */
  35. {
  36. content: '';
  37. display: block;
  38. flex: 1;
  39. box-sizing: border-box;
  40. border: inherit;
  41. border-color: inherit;
  42. border-style: inherit;
  43. }
  44. &--horizontal {
  45. align-items: center;
  46. margin-top: $divider-margin;
  47. margin-bottom: $divider-margin;
  48. /* #ifdef APP-NVUE */
  49. .l-divider__before,
  50. .l-divider__after,
  51. /* #endif */
  52. /* #ifndef APP-NVUE */
  53. &::before,
  54. &::after
  55. /* #endif */
  56. {
  57. border-top-width: 1px;
  58. transform: scaleY(0.5);
  59. }
  60. .l-divider__content:not(:empty) {
  61. margin: 0 24rpx;
  62. }
  63. }
  64. &--vertical {
  65. align-self: stretch;
  66. flex-direction: column;
  67. // height: 1em;
  68. width: 1em;
  69. // line-height: 1.2;
  70. margin: 0 $divider-margin;
  71. /* #ifdef APP-NVUE */
  72. .l-divider__before,
  73. .l-divider__after,
  74. /* #endif */
  75. /* #ifndef APP-NVUE */
  76. &::before,
  77. &::after
  78. /* #endif */
  79. {
  80. border-left-width: 1px;
  81. transform: scaleX(0.5);
  82. }
  83. &-center {
  84. align-items: center;
  85. height: 100%;
  86. }
  87. .#{$divider} {
  88. &__content {
  89. line-height: 1.2;
  90. // width: 1em;
  91. }
  92. }
  93. }
  94. &--dashed {
  95. border-style: dashed;
  96. }
  97. &--left::before,
  98. &--right::after {
  99. max-width: 60rpx;
  100. }
  101. /* #endif */
  102. &__content {
  103. font-size: $divider-font-size;
  104. line-height: $divider-line-height;
  105. color: $divider-text-color;
  106. }
  107. /* #ifdef APP-ANDROID || APP-IOS */
  108. &__inner {
  109. align-self: flex-start;
  110. }
  111. &--vertical {
  112. align-self: stretch;
  113. width: $divider-font-size;
  114. .#{$divider} {
  115. &__content {
  116. line-height: 1.2;
  117. }
  118. }
  119. }
  120. /* #endif */
  121. }