index.less 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. @import './var.less';
  2. :root {
  3. --van-notice-bar-height: @notice-bar-height;
  4. --van-notice-bar-padding: @notice-bar-padding;
  5. --van-notice-bar-wrapable-padding: @notice-bar-wrapable-padding;
  6. --van-notice-bar-text-color: @notice-bar-text-color;
  7. --van-notice-bar-font-size: @notice-bar-font-size;
  8. --van-notice-bar-line-height: @notice-bar-line-height;
  9. --van-notice-bar-background-color: @notice-bar-background-color;
  10. --van-notice-bar-icon-size: @notice-bar-icon-size;
  11. --van-notice-bar-icon-min-width: @notice-bar-icon-min-width;
  12. }
  13. .van-notice-bar {
  14. position: relative;
  15. display: flex;
  16. align-items: center;
  17. height: var(--van-notice-bar-height);
  18. padding: var(--van-notice-bar-padding);
  19. color: var(--van-notice-bar-text-color);
  20. font-size: var(--van-notice-bar-font-size);
  21. line-height: var(--van-notice-bar-line-height);
  22. background: var(--van-notice-bar-background-color);
  23. &__left-icon,
  24. &__right-icon {
  25. min-width: var(--van-notice-bar-icon-min-width);
  26. font-size: var(--van-notice-bar-icon-size);
  27. }
  28. &__right-icon {
  29. text-align: right;
  30. cursor: pointer;
  31. }
  32. &__wrap {
  33. position: relative;
  34. display: flex;
  35. flex: 1;
  36. align-items: center;
  37. height: 100%;
  38. overflow: hidden;
  39. }
  40. &__content {
  41. position: absolute;
  42. white-space: nowrap;
  43. transition-timing-function: linear;
  44. &.van-ellipsis {
  45. max-width: 100%;
  46. }
  47. }
  48. &--wrapable {
  49. height: auto;
  50. padding: var(--van-notice-bar-wrapable-padding);
  51. .van-notice-bar {
  52. &__wrap {
  53. height: auto;
  54. }
  55. &__content {
  56. position: relative;
  57. white-space: normal;
  58. word-wrap: break-word;
  59. }
  60. }
  61. }
  62. }