tdesign-mobile-vue/esm/_common/style/mobile/components/notice-bar/_index.less

tdesign-mobile-vue

// 组件允许单个组件打包，因此默认引入公共基础样式
@import "../../base.less";

@import "./_var.less";

@import "./_mixin.less";

.@{prefix}-notice-bar {
  background-color: @noticebar-bg-color-info;
  color: @noticebar-text-color-info;

  &--info {
    background-color: @noticebar-bg-color-info;
  }

  &&--info .@{prefix}-icon {
    color: @noticebar-icon-color-info;
  }

  &&--info &__text {
    color: @noticebar-text-color-info;
  }

  &&--info &__text-detail {
    color: @noticebar-text-color-info;
  }

  &--success {
    background-color: @noticebar-bg-color-success;
  }

  &&--success .@{prefix}-icon {
    color: @noticebar-icon-color-success;
  }

  &&--success &__text {
    color: @noticebar-text-color-success;
  }

  &&--success &__text-detail {
    color: @noticebar-text-color-success;
  }

  &--warning {
    background-color: @noticebar-bg-color-warning;
  }

  &&--warning .@{prefix}-icon {
    color: @noticebar-icon-color-warning;
  }

  &&--warning &__text {
    color: @noticebar-text-color-warning;
  }

  &&--warning &__text-detail {
    color: @noticebar-text-color-warning;
  }

  &--error {
    background-color: @noticebar-bg-color-error;
  }

  &&--error .@{prefix}-icon {
    color: @noticebar-icon-color-error;
  }

  &&--error &__text {
    color: @noticebar-text-color-error;
  }

  &&--error &__text-detail {
    color: @noticebar-text-color-error;
  }

  &__inner {
    display: flex;
    padding: @spacer-1 @spacer-2;
  }

  &__hd {
    margin-right: @spacer;
  }

  &__bd {
    flex: 1;
  }

  &__list--scrolling {
    position: relative;
    z-index: 1;
    min-height: @noticebar-min-height;
    overflow: hidden;
  }

  &__list--scrolling &__item {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
  }

  &__list--scrolling &__text {
    white-space: nowrap;
  }

  &__item-detail {
    display: flex;
  }

  &__text {
    font-size: @noticebar-text-font-size;
    line-height: @noticebar-min-height;
    color: @noticebar-text-color-info;

    display: -webkit-box; // stylelint-disable-line
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; // stylelint-disable-line
    overflow: hidden;
  }

  &__text-detail {
    display: inline-block;
    padding-left: @spacer-2;
    line-height: 1.5;
    font-size: @noticebar-text-font-size;
    color: @brand-color;
    text-decoration: underline;
  }

  &__text-detail&__text {
    -webkit-line-clamp: 1; // stylelint-disable-line
  }

  &__ft {
    margin-left: calc(@spacer * 2.5);
  }

  .@{prefix}-icon,
  &__inner .@{prefix}-icon {
    display: block;
    color: @noticebar-icon-color-info;
    font-size: @noticebar-icon-size;
  }

  & + & {
    margin-top: calc(@spacer * 2.5);
  }
}