zarm/es/nav-bar/style/index.css

基于 React 的移动端UI库

.za-nav-bar {
  --background: var(--za-nav-bar-background, rgba(249, 249, 249, 0.94));
  --height: var(--za-nav-bar-height, 44px);
  --title-color: var(--za-nav-bar-title-color, var(--za-color-text));
  --title-font-size: var(--za-nav-bar-title-font-size, var(--za-font-size-md));
  --title-font-weight: var(--za-nav-bar-title-font-weight, 500);
  --side-font-size: var(--za-nav-bar-side-font-size, var(--za-font-size-md));
  --padding-horizontal: var(--za-nav-bar-padding-horizontal, 16px);
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: var(--height);
  background: var(--background);
}
.za-nav-bar__title {
  position: absolute;
  left: 50%;
  white-space: nowrap;
  color: var(--title-color);
  font-size: var(--title-font-size);
  font-weight: var(--title-font-weight);
  transform: translate(-50%, 0);
  margin-left: auto;
}

.za-nav-bar__side {
  display: flex;
  justify-content: center;
  color: var(--za-theme-primary);
  font-size: var(--side-font-size);
  margin-left: auto;
}
.za-nav-bar__side--left {
  margin-left: var(--padding-horizontal);
}

.za-nav-bar__side--right {
  margin-right: var(--padding-horizontal);
}