123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130 |
- @import '@/uni_modules/lime-style/index.scss';
- $divider: l-divider;
- $divider-color: create-var(divider-color, $gray-3) !default;
- $divider-text-color: create-var(divider-text-color, $text-color-3) !default;
- $divider-font-size: create-var(divider-font-size, 12px) !default;
- $divider-line-height: create-var(divider-line-height, 20px) !default;
- $divider-line-style: create-var(divider-line-style, solid);
- $divider-margin: create-var(divider-margin, 10px);
- /* #ifdef MP */
- :host {
- align-self: stretch;
- display: flex;
- }
- /* #endif*/
- .#{$divider} {
- flex-direction: row;
- // transition: padding 100ms;
- /* #ifdef MP */
- flex:1;
- /* #endif*/
- /* #ifndef APP-ANDROID || APP-IOS */
- display: flex;
-
- color: $divider-text-color;
- border-color: $divider-color;
- border-style: $divider-line-style;
- border-width: 0;
- /* #ifdef APP-NVUE */
- &__before,
- &__after,
- /* #endif */
- /* #ifndef APP-NVUE */
- &::before,
- &::after
- /* #endif */
- {
- content: '';
- display: block;
- flex: 1;
- box-sizing: border-box;
- border: inherit;
- border-color: inherit;
- border-style: inherit;
- }
- &--horizontal {
- align-items: center;
- margin-top: $divider-margin;
- margin-bottom: $divider-margin;
- /* #ifdef APP-NVUE */
- .l-divider__before,
- .l-divider__after,
- /* #endif */
- /* #ifndef APP-NVUE */
- &::before,
- &::after
- /* #endif */
- {
- border-top-width: 1px;
- transform: scaleY(0.5);
- }
-
- .l-divider__content:not(:empty) {
- margin: 0 24rpx;
- }
- }
- &--vertical {
- align-self: stretch;
- flex-direction: column;
- // height: 1em;
- width: 1em;
- // line-height: 1.2;
- margin: 0 $divider-margin;
- /* #ifdef APP-NVUE */
- .l-divider__before,
- .l-divider__after,
- /* #endif */
- /* #ifndef APP-NVUE */
- &::before,
- &::after
- /* #endif */
- {
- border-left-width: 1px;
- transform: scaleX(0.5);
- }
-
- &-center {
- align-items: center;
- height: 100%;
- }
- .#{$divider} {
- &__content {
- line-height: 1.2;
- // width: 1em;
- }
- }
- }
- &--dashed {
- border-style: dashed;
- }
- &--left::before,
- &--right::after {
- max-width: 60rpx;
- }
- /* #endif */
-
- &__content {
- font-size: $divider-font-size;
- line-height: $divider-line-height;
- color: $divider-text-color;
- }
- /* #ifdef APP-ANDROID || APP-IOS */
- &__inner {
- align-self: flex-start;
- }
- &--vertical {
- align-self: stretch;
- width: $divider-font-size;
- .#{$divider} {
- &__content {
- line-height: 1.2;
- }
- }
- }
- /* #endif */
- }
|