zarm/lib/button/style/index.css

基于 React 的移动端UI库

.za-button {
  --height: var(--za-button-height, var(--za-height-md));
  --border-radius: var(--za-button-border-radius, 0);
  /* prettier-ignore */
  --border-width: var(--za-button-border-width, 1PX);
  --padding-horizontal: var(--za-button-padding-horizontal, var(--za-padding-h-md));
  --font-size: var(--za-button-font-size, var(--za-font-size-md));
  --icon-size: var(--za-button-icon-size, 22px);
  --background: var(--za-button-background, #fff);
  --border-color: var(--za-button-border-color, var(--za-theme-default));
  --text-color: var(--za-button-text-color, var(--za-color-text));
  --loading-color: var(--za-button-loading-color, var(--za-theme-primary));
  --active-background: var(--za-button-active-background, #e6e6e6);
  --active-border-color: var(--za-button-active-border-color, #e6e6e6);
  --active-text-color: var(--za-button-active-text-color, var(--za-color-text));
  --active-loading-color: var(--za-button-active-loading-color, var(--za-theme-primary-dark));
  --shadow: var(--za-button-shadow, 0 3px 3px 0 rgba(230, 230, 230, 0.3));
  --primary-background: var(--za-button-primary-background, var(--za-theme-primary));
  --primary-border-color: var(--za-button-primary-border-color, var(--za-theme-primary));
  --primary-text-color: var(--za-button-primary-text-color, var(--za-color-text-inverse));
  --primary-loading-color: var(--za-button-primary-loading-color, var(--za-color-text-inverse));
  --primary-active-background: var(--za-button-primary-active-background, var(--za-theme-primary-dark));
  --primary-active-border-color: var(--za-button-primary-active-border-color, var(--za-theme-primary-dark));
  --primary-active-text-color: var(--za-button-primary-active-text-color, rgba(255, 255, 255, 0.4));
  --primary-active-loading-color: var(--za-button-primary-active-loading-color, rgba(255, 255, 255, 0.4));
  --primary-shadow: var(--za-button-primary-shadow, 0 3px 3px 0 rgba(0, 188, 112, 0.3));
  --danger-background: var(--za-button-danger-background, var(--za-theme-danger));
  --danger-border-color: var(--za-button-danger-border-color, var(--za-theme-danger));
  --danger-text-color: var(--za-button-danger-text-color, var(--za-color-text-inverse));
  --danger-loading-color: var(--za-button-danger-loading-color, var(--za-color-text-inverse));
  --danger-active-background: var(--za-button-danger-active-background, var(--za-theme-danger-dark));
  --danger-active-border-color: var(--za-button-danger-active-border-color, var(--za-theme-danger-dark));
  --danger-active-text-color: var(--za-button-danger-active-text-color, rgba(255, 255, 255, 0.4));
  --danger-active-loading-color: var(--za-button-danger-active-loading-color, rgba(255, 255, 255, 0.4));
  --danger-shadow: var(--za-button-danger-shadow, 0 3px 3px 0 rgba(255, 80, 80, 0.3));
  --ghost-border-color: var(--za-button-ghost-border-color, var(--za-color-text-inverse));
  --ghost-text-color: var(--za-button-ghost-text-color, var(--za-color-text-inverse));
  --ghost-active-border-color: var(--za-button-ghost-active-border-color, var(--za-theme-default-dark));
  --ghost-active-text-color: var(--za-button-ghost-active-text-color, var(--za-theme-default-dark));
  display: inline-block;
  vertical-align: middle;
  padding: 0;
  border: none;
  text-align: center;
  outline: none;
  user-select: none;
  cursor: pointer;
  -webkit-appearance: none;
  padding: 0 var(--padding-horizontal);
  font-size: var(--font-size);
  height: var(--height);
  line-height: 1.4;
  border-style: solid;
  border-width: var(--border-width);
  border-radius: var(--border-radius);
}
.za-button__content {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.za-button--disabled {
  cursor: not-allowed;
  opacity: var(--za-opacity-disabled);
  pointer-events: none;
}

.za-button--block {
  display: block;
  width: 100%;
}

.za-button--circle {
  width: var(--height);
  padding: 0;
}

.za-button .za-icon {
  font-size: var(--icon-size);
}
.za-button--loading .za-loading {
  width: var(--font-size);
  height: var(--font-size);
}

.za-button * + span {
  margin-left: calc(var(--padding-horizontal) / 2);
}
.za-button--default {
  background-color: var(--background);
  border-color: var(--border-color);
  color: var(--text-color);
}
.za-button--default.za-button--shadow {
  box-shadow: var(--shadow);
}

.za-button--default .za-loading.za-loading--circular circle {
  stroke: var(--loading-color);
}

.za-button--default:active {
  background-color: var(--active-background);
  border-color: var(--active-border-color);
  color: var(--active-text-color);
}
.za-button--default:active .za-loading.za-loading--circular circle {
  stroke: var(--active-loading-color);
}

.za-button--primary {
  background-color: var(--primary-background);
  border-color: var(--primary-border-color);
  color: var(--primary-text-color);
}
.za-button--primary.za-button--shadow {
  box-shadow: var(--primary-shadow);
}

.za-button--primary .za-loading.za-loading--circular circle {
  stroke: var(--primary-loading-color);
}

.za-button--primary:active {
  background-color: var(--primary-active-background);
  border-color: var(--primary-active-border-color);
  color: var(--primary-active-text-color);
}
.za-button--primary:active .za-loading.za-loading--circular circle {
  stroke: var(--primary-active-loading-color);
}

.za-button--danger {
  background-color: var(--danger-background);
  border-color: var(--danger-border-color);
  color: var(--danger-text-color);
}
.za-button--danger.za-button--shadow {
  box-shadow: var(--danger-shadow);
}

.za-button--danger .za-loading.za-loading--circular circle {
  stroke: var(--danger-loading-color);
}

.za-button--danger:active {
  background-color: var(--danger-active-background);
  border-color: var(--danger-active-border-color);
  color: var(--danger-active-text-color);
}
.za-button--danger:active .za-loading.za-loading--circular circle {
  stroke: var(--danger-active-loading-color);
}

.za-button--lg {
  --height: var(--za-button-height, var(--za-height-lg));
  --padding-horizontal: var(--za-button-padding-horizontal, var(--za-padding-h-lg));
  --font-size: var(--za-button-font-size, var(--za-font-size-lg));
  --icon-size: var(--za-button-icon-size, 26px);
}

.za-button--sm {
  --height: var(--za-button-height, var(--za-height-sm));
  --padding-horizontal: var(--za-button-padding-horizontal, var(--za-padding-h-sm));
  --font-size: var(--za-button-font-size, var(--za-font-size-sm));
  --icon-size: var(--za-button-icon-size, 18px);
}

.za-button--xs {
  --height: var(--za-button-height, var(--za-height-xs));
  --padding-horizontal: var(--za-button-padding-horizontal, var(--za-padding-h-xs));
  --font-size: var(--za-button-font-size, var(--za-font-size-xs));
  --icon-size: var(--za-button-icon-size, 16px);
}

.za-button--radius {
  --border-radius: var(--za-button-border-radius, var(--za-radius-md));
}

.za-button--round {
  --border-radius: var(--za-button-border-radius, var(--height));
}

.za-button--circle {
  --border-radius: var(--za-button-border-radius, 50%);
}

.za-button--link {
  line-height: calc(var(--height) - var(--border-width) * 2);
  background-color: transparent;
  border-color: transparent;
}
.za-button--link:active {
  background: var(--active-background);
  border-color: var(--active-border-color);
}
.za-button--link.za-button--primary {
  --primary-text-color: var(--za-button-primary-text-color, var(--za-theme-primary));
  --primary-active-text-color: var(--za-button-primary-active-text-color, var(--za-theme-primary-dark));
}

.za-button--link.za-button--danger {
  --danger-text-color: var(--za-button-danger-text-color, var(--za-theme-danger));
  --danger-active-text-color: var(--za-button-danger-active-text-color, var(--za-theme-danger-dark));
}

.za-button--ghost {
  background-color: transparent;
}
.za-button--ghost:active {
  background-color: transparent;
}
.za-button--ghost.za-button--default {
  border-color: var(--ghost-border-color);
  color: var(--ghost-text-color);
}
.za-button--ghost.za-button--default:active {
  border-color: var(--ghost-active-border-color);
  color: var(--ghost-active-text-color);
}

.za-button--ghost.za-button--primary {
  --primary-text-color: var(--za-button-primary-text-color, var(--za-theme-primary));
  --primary-active-text-color: var(--za-button-primary-active-text-color, var(--za-theme-primary-dark));
}

.za-button--ghost.za-button--danger {
  --danger-text-color: var(--za-button-danger-text-color, var(--za-theme-danger));
  --danger-active-text-color: var(--za-button-danger-active-text-color, var(--za-theme-danger-dark));
}