zarm/es/radio/style/index.css

基于 React 的移动端UI库

.za-radio {
  --icon-size: var(--za-radio-icon-size, 22px);
  --icon-background: var(--za-radio-icon-background, transparent);
  --icon-border-radius: var(--za-radio-icon-border-radius, 22px);
  --icon-border-width: var(--za-radio-icon-border-width, 1px);
  --icon-border-color: var(--za-radio-icon-border-color, rgb(199, 199, 204));
  --tick-font-size: var(--za-radio-tick-font-size, 16px);
  --tick-color: var(--za-radio-tick-color, var(--za-theme-primary));
  --tick-transition: var(--za-radio-tick-transition, all 0.2s cubic-bezier(0.71, -0.46, 0.88, 0.6));
  --text-margin-horizontal: var(--za-radio-text-margin-horizontal, 8px);
  --active-opacity: var(--za-radio-active-opacity, 0.6);
  --checked-icon-background: var(--za-radio-checked-icon-background, transparent);
  --checked-icon-border-color: var(--za-radio-checked-icon-border-color, var(--za-theme-primary));
  --checked-tick-color: var(--za-radio-checked-tick-color, var(--za-theme-primary));
  --disabled-icon-background: var(--za-radio-disabled-icon-background, #f2f2f2);
  --disabled-icon-border-color: var(--za-radio-disabled-icon-border-color, rgba(199, 199, 204, 0.7));
  --disabled-text-color: var(--za-radio-disabled-text-color, rgba(0, 0, 0, 0.3));
  --disabled-tick-color: var(--za-radio-disabled-tick-color, #bcbcbc);
  display: inline-flex;
  vertical-align: text-bottom;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
}
.za-radio:not(.za-radio--disabled):active {
  opacity: var(--active-opacity);
}
.za-radio__icon {
  display: inline-block;
  vertical-align: middle;
}

.za-radio__input {
  display: none;
}

.za-radio__text {
  vertical-align: middle;
  margin: 0 var(--text-margin-horizontal);
}

.za-radio__tick {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-size);
  height: var(--icon-size);
  border: var(--icon-border-width) solid var(--icon-border-color);
  border-radius: var(--icon-border-radius);
  background: var(--icon-background);
}
.za-radio__tick .za-icon {
  font-size: var(--tick-font-size);
  color: var(--tick-color);
  transform: scale(0);
  transition: var(--tick-transition);
}

.za-radio--checked .za-radio__tick, .za-radio--indeterminate .za-radio__tick {
  border-color: var(--checked-icon-border-color);
  background: var(--checked-icon-background);
}
.za-radio--checked .za-radio__tick .za-icon, .za-radio--indeterminate .za-radio__tick .za-icon {
  color: var(--checked-tick-color);
  transform: scale(1);
}

.za-radio--disabled .za-radio__input {
  cursor: not-allowed;
}

.za-radio--disabled .za-radio__text {
  color: var(--disabled-text-color);
}

.za-radio--disabled .za-radio__tick {
  border-color: var(--disabled-icon-border-color);
  background: var(--disabled-icon-background);
}

.za-radio--disabled.za-radio--checked .za-radio__tick {
  border-color: var(--disabled-icon-border-color);
  background: var(--disabled-icon-background);
}
.za-radio--disabled.za-radio--checked .za-radio__tick .za-icon {
  color: var(--disabled-tick-color);
}

.za-radio-group {
  --group-spacing-vertical: var(--za-radio-group-group-spacing-vertical, 8px);
  --group-spacing-horizontal: var(--za-radio-group-group-spacing-horizontal, 24px);
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
}
.za-radio-group__inner {
  margin-right: calc(var(--group-spacing-horizontal) * -1);
  margin-bottom: calc(var(--group-spacing-vertical) * -1);
  line-height: 1;
}

.za-radio-group .za-radio {
  margin-right: var(--group-spacing-horizontal);
  margin-bottom: var(--group-spacing-vertical);
}
.za-radio-group--block {
  width: 100%;
}
.za-radio-group--block .za-radio-group__inner {
  display: flex;
  flex-wrap: wrap;
}

.za-radio-group--block .za-radio {
  flex: 1;
}

.za-radio-group--button {
  --group-spacing-vertical: var(--za-radio-group-group-spacing-vertical, var(--za-padding-v-xs));
  --group-spacing-horizontal: var(--za-radio-group-group-spacing-horizontal, var(--za-padding-h-xs));
}
.za-radio-group--button.za-radio-group--button-compact .za-radio:not(:last-child) {
  /* prettier-ignore */
  margin-right: -1PX;
}
.za-radio-group--button.za-radio-group--button-compact .za-radio:first-child .za-button {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.za-radio-group--button.za-radio-group--button-compact .za-radio:last-child .za-button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.za-radio-group--button.za-radio-group--button-compact .za-radio:not(:first-child):not(:last-child) .za-button {
  border-radius: 0;
}
.za-radio-group--button.za-radio-group--button-compact .za-radio.za-radio--checked .za-button {
  z-index: 1;
}

.za-radio-group--list {
  display: block;
  overflow: visible;
}
.za-radio-group--list .za-radio-group__inner {
  margin-right: 0;
  margin-bottom: 0;
}

.za-radio-group--list .za-radio {
  display: flex;
  margin-right: 0;
  margin-bottom: 0;
}
.za-radio-group--list .za-radio .za-radio__text {
  margin-left: 0;
}

.za-radio-group--list .za-radio .za-radio__tick {
  --icon-border-width: var(--za-radio-icon-border-width, 0);
  background: transparent;
}
.za-radio-group--list .za-radio .za-radio__tick .za-icon {
  font-size: var(--icon-size);
}