zarm/lib/notice-bar/style/index.css

基于 React 的移动端UI库

.za-notice-bar {
  --height: var(--za-notice-bar-height, 40px);
  --padding: var(--za-notice-bar-padding, 8px 12px);
  --icon-size: var(--za-notice-bar-icon-size, 16px);
}
.za-notice-bar .za-message {
  --font-size: var(--za-message-font-size, var(--za-font-size-sm));
  height: var(--height);
  font-size: var(--font-size);
  padding: var(--padding);
}
.za-notice-bar .za-message__icon {
  margin-right: 6px;
}
.za-notice-bar .za-message__icon .za-icon {
  font-size: var(--icon-size);
}

.za-notice-bar .za-message__footer .za-icon {
  font-size: var(--icon-size);
}

.za-notice-bar__body {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.za-notice-bar__content {
  position: absolute;
  left: 0;
  white-space: nowrap;
}