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

基于 React 的移动端UI库

.za-search-bar {
  --background: var(--za-search-bar-background, transparent);
  --height: var(--za-search-bar-height, 52px);
  --padding-horizontal: var(--za-search-bar-padding-horizontal, 16px);
  --input-padding-horizontal: var(--za-search-bar-input-padding-horizontal, 8px);
  --input-height: var(--za-search-bar-input-height, 36px);
  --input-background: var(--za-search-bar-input-background, rgba(118, 118, 128, 0.12));
  --input-font-size: var(--za-search-bar-input-font-size, var(--za-font-size-md));
  --input-placeholder-color: var(--za-search-bar-input-placeholder-color, #808084);
  --input-clear-icon-color: var(--za-search-bar-input-clear-icon-color, #8e8e92);
  --input-border-radius: var(--za-search-bar-input-border-radius, 10px);
  --cancel-font-size: var(--za-search-bar-cancel-font-size, var(--za-font-size-md));
  --cancel-color: var(--za-search-bar-cancel-color, var(--za-theme-primary));
  --cancel-margin-left: var(--za-search-bar-cancel-margin-left, 13px);
  --cancel-transition: var(--za-search-bar-cancel-transition, all 0.2s);
  --icon-margin-right: var(--za-search-bar-icon-margin-right, 6px);
  --icon-color: var(--za-search-bar-icon-color, #808084);
  background: var(--background);
}
.za-search-bar__form {
  height: var(--height);
  margin: 0 var(--padding-horizontal);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.za-search-bar__content {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 var(--input-padding-horizontal);
  height: var(--input-height);
  background: var(--input-background);
  overflow: hidden;
}
.za-search-bar__content .za-search-bar__icon {
  margin-right: var(--icon-margin-right);
  color: var(--icon-color);
  align-items: center;
  display: flex;
}

.za-search-bar .za-input {
  --placeholder-color: var(--za-input-placeholder-color, var(--input-placeholder-color));
  --clear-icon-color: var(--za-input-clear-icon-color, var(--input-clear-icon-color));
  flex: 1;
  font-size: var(--input-font-size);
  background-color: transparent;
}
.za-search-bar .za-input input::-webkit-search-cancel-button {
  display: none;
}
.za-search-bar__cancel {
  font-size: var(--cancel-font-size);
  color: var(--cancel-color);
  margin-left: var(--cancel-margin-left);
  transition: var(--cancel-transition);
}

.za-search-bar--focus .za-search-bar__cancel {
  margin-right: 0;
}

.za-search-bar--radius .za-search-bar__content {
  border-radius: var(--input-border-radius);
}

.za-search-bar--round .za-search-bar__content {
  border-radius: var(--za-radius-round);
}