mealcomes/theme-chalk/button.css

MealComes 用于学习前端的组件库

.mc-button {
  --mc-button-font-weight: var(--mc-font-weight-primary);
  --mc-button-border-color: var(--mc-border-color);
  --mc-button-bg-color: var(--mc-fill-color-blank);
  --mc-button-text-color: var(--mc-text-color-regular);
  --mc-button-disabled-text-color: var(--mc-disabled-text-color);
  --mc-button-disabled-bg-color: var(--mc-fill-color-blank);
  --mc-button-disabled-border-color: var(--mc-border-color-light);
  --mc-button-divide-border-color: rgba(255, 255, 255, 0.5);
  --mc-button-hover-text-color: var(--mc-color-primary);
  --mc-button-hover-bg-color: var(--mc-color-primary-light-9);
  --mc-button-hover-border-color: var(--mc-color-primary-light-7);
  --mc-button-active-text-color: var(--mc-button-hover-text-color);
  --mc-button-active-border-color: var(--mc-color-primary);
  --mc-button-active-bg-color: var(--mc-button-hover-bg-color);
  --mc-button-outline-color: var(--mc-color-primary-light-5);
  --mc-button-hover-link-text-color: var(--mc-text-color-secondary);
  --mc-button-active-color: var(--mc-text-color-primary);
}

.mc-button {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  height: 32px;
  white-space: nowrap;
  cursor: pointer;
  color: var(--mc-button-text-color);
  text-align: center;
  box-sizing: border-box;
  outline: none;
  transition: 0.1s;
  user-select: none;
  vertical-align: middle;
  background-color: var(--mc-button-bg-color);
  border: var(--mc-border);
  border-color: var(--mc-button-border-color);
}
.mc-button:hover {
  color: var(--mc-button-hover-text-color);
  border-color: var(--mc-button-hover-border-color);
  background-color: var(--mc-button-hover-bg-color);
  outline: none;
}
.mc-button:active {
  color: var(--mc-button-active-text-color);
  border-color: var(--mc-button-active-border-color);
  background-color: var(--mc-button-active-bg-color);
  outline: none;
}
.mc-button:focus-visible {
  outline: 2px solid var(--mc-button-outline-color);
  outline-offset: 1px;
  transition: outline-offset 0s, outline 0s;
}
.mc-button > span {
  display: inline-flex;
  align-items: center;
}
.mc-button > span + [class*=mc-icon] {
  margin-left: 6px;
}
.mc-button + .mc-button {
  margin-left: 12px;
}
.mc-button {
  padding: 8px 15px;
  font-size: var(--mc-font-size-base);
  border-radius: var(--mc-border-radius-base);
}
.mc-button.is-round {
  padding: 8px 15px;
}
.mc-button [class*=mc-icon] + span {
  margin-left: 6px;
}
.mc-button [class*=mc-icon] svg {
  vertical-align: bottom;
}
.mc-button.is-active {
  color: var(--mc-button-active-text-color);
  border-color: var(--mc-button-active-border-color);
  background-color: var(--mc-button-active-bg-color);
  outline: none;
}

.mc-button.is-plain {
  --mc-button-hover-text-color: var(--mc-color-primary);
  --mc-button-hover-bg-color: var(--mc-fill-color-blank);
  --mc-button-hover-border-color: var(--mc-color-primary);
}

.mc-button.is-disabled, .mc-button.is-disabled:hover {
  color: var(--mc-button-disabled-text-color);
  cursor: not-allowed;
  background-image: none;
  background-color: var(--mc-button-disabled-bg-color);
  border-color: var(--mc-button-disabled-border-color);
}

.mc-button.is-loading {
  position: relative;
  pointer-events: none;
}
.mc-button.is-loading:before {
  content: "";
  z-index: 1;
  pointer-events: none;
  position: absolute;
  left: -1px;
  top: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: inherit;
  background-color: var(--mc-mask-color-extra-light);
}

.mc-button.is-round {
  border-radius: var(--mc-border-radius-round);
}

.mc-button.is-circle {
  width: 32px;
  border-radius: 50%;
  padding: 8px;
}

.mc-button--primary {
  --mc-button-text-color: var(--mc-color-white);
  --mc-button-bg-color: var(--mc-color-primary);
  --mc-button-border-color: var(--mc-color-primary);
  --mc-button-outline-color: var(--mc-color-primary-light-5);
  --mc-button-active-color: var(--mc-color-primary-dark-2);
  --mc-button-hover-text-color: var(--mc-color-white);
  --mc-button-hover-link-text-color: var(--mc-color-primary-light-5);
  --mc-button-hover-bg-color: var(--mc-color-primary-light-3);
  --mc-button-hover-border-color: var(--mc-color-primary-light-3);
  --mc-button-active-bg-color: var(--mc-color-primary-dark-2);
  --mc-button-active-border-color: var(--mc-color-primary-dark-2);
  --mc-button-disabled-text-color: var(--mc-color-white);
  --mc-button-disabled-bg-color: var(--mc-color-primary-light-5);
  --mc-button-disabled-border-color: var(--mc-color-primary-light-5);
}
.mc-button--primary.is-plain, .mc-button--primary.is-text, .mc-button--primary.is-link {
  --mc-button-text-color: var(--mc-color-primary);
  --mc-button-bg-color: var(--mc-color-primary-light-9);
  --mc-button-border-color: var(--mc-color-primary-light-5);
  --mc-button-hover-text-color: var(--mc-color-white);
  --mc-button-hover-bg-color: var(--mc-color-primary);
  --mc-button-hover-border-color: var(--mc-color-primary);
  --mc-button-active-text-color: var(--mc-color-white);
}
.mc-button--primary.is-plain.is-disabled, .mc-button--primary.is-plain.is-disabled:hover, .mc-button--primary.is-plain.is-disabled:focus, .mc-button--primary.is-plain.is-disabled:active, .mc-button--primary.is-text.is-disabled, .mc-button--primary.is-text.is-disabled:hover, .mc-button--primary.is-text.is-disabled:focus, .mc-button--primary.is-text.is-disabled:active, .mc-button--primary.is-link.is-disabled, .mc-button--primary.is-link.is-disabled:hover, .mc-button--primary.is-link.is-disabled:focus, .mc-button--primary.is-link.is-disabled:active {
  color: var(--mc-color-primary-light-5);
  background-color: var(--mc-color-primary-light-9);
  border-color: var(--mc-color-primary-light-8);
}

.mc-button--success {
  --mc-button-text-color: var(--mc-color-white);
  --mc-button-bg-color: var(--mc-color-success);
  --mc-button-border-color: var(--mc-color-success);
  --mc-button-outline-color: var(--mc-color-success-light-5);
  --mc-button-active-color: var(--mc-color-success-dark-2);
  --mc-button-hover-text-color: var(--mc-color-white);
  --mc-button-hover-link-text-color: var(--mc-color-success-light-5);
  --mc-button-hover-bg-color: var(--mc-color-success-light-3);
  --mc-button-hover-border-color: var(--mc-color-success-light-3);
  --mc-button-active-bg-color: var(--mc-color-success-dark-2);
  --mc-button-active-border-color: var(--mc-color-success-dark-2);
  --mc-button-disabled-text-color: var(--mc-color-white);
  --mc-button-disabled-bg-color: var(--mc-color-success-light-5);
  --mc-button-disabled-border-color: var(--mc-color-success-light-5);
}
.mc-button--success.is-plain, .mc-button--success.is-text, .mc-button--success.is-link {
  --mc-button-text-color: var(--mc-color-success);
  --mc-button-bg-color: var(--mc-color-success-light-9);
  --mc-button-border-color: var(--mc-color-success-light-5);
  --mc-button-hover-text-color: var(--mc-color-white);
  --mc-button-hover-bg-color: var(--mc-color-success);
  --mc-button-hover-border-color: var(--mc-color-success);
  --mc-button-active-text-color: var(--mc-color-white);
}
.mc-button--success.is-plain.is-disabled, .mc-button--success.is-plain.is-disabled:hover, .mc-button--success.is-plain.is-disabled:focus, .mc-button--success.is-plain.is-disabled:active, .mc-button--success.is-text.is-disabled, .mc-button--success.is-text.is-disabled:hover, .mc-button--success.is-text.is-disabled:focus, .mc-button--success.is-text.is-disabled:active, .mc-button--success.is-link.is-disabled, .mc-button--success.is-link.is-disabled:hover, .mc-button--success.is-link.is-disabled:focus, .mc-button--success.is-link.is-disabled:active {
  color: var(--mc-color-success-light-5);
  background-color: var(--mc-color-success-light-9);
  border-color: var(--mc-color-success-light-8);
}

.mc-button--warning {
  --mc-button-text-color: var(--mc-color-white);
  --mc-button-bg-color: var(--mc-color-warning);
  --mc-button-border-color: var(--mc-color-warning);
  --mc-button-outline-color: var(--mc-color-warning-light-5);
  --mc-button-active-color: var(--mc-color-warning-dark-2);
  --mc-button-hover-text-color: var(--mc-color-white);
  --mc-button-hover-link-text-color: var(--mc-color-warning-light-5);
  --mc-button-hover-bg-color: var(--mc-color-warning-light-3);
  --mc-button-hover-border-color: var(--mc-color-warning-light-3);
  --mc-button-active-bg-color: var(--mc-color-warning-dark-2);
  --mc-button-active-border-color: var(--mc-color-warning-dark-2);
  --mc-button-disabled-text-color: var(--mc-color-white);
  --mc-button-disabled-bg-color: var(--mc-color-warning-light-5);
  --mc-button-disabled-border-color: var(--mc-color-warning-light-5);
}
.mc-button--warning.is-plain, .mc-button--warning.is-text, .mc-button--warning.is-link {
  --mc-button-text-color: var(--mc-color-warning);
  --mc-button-bg-color: var(--mc-color-warning-light-9);
  --mc-button-border-color: var(--mc-color-warning-light-5);
  --mc-button-hover-text-color: var(--mc-color-white);
  --mc-button-hover-bg-color: var(--mc-color-warning);
  --mc-button-hover-border-color: var(--mc-color-warning);
  --mc-button-active-text-color: var(--mc-color-white);
}
.mc-button--warning.is-plain.is-disabled, .mc-button--warning.is-plain.is-disabled:hover, .mc-button--warning.is-plain.is-disabled:focus, .mc-button--warning.is-plain.is-disabled:active, .mc-button--warning.is-text.is-disabled, .mc-button--warning.is-text.is-disabled:hover, .mc-button--warning.is-text.is-disabled:focus, .mc-button--warning.is-text.is-disabled:active, .mc-button--warning.is-link.is-disabled, .mc-button--warning.is-link.is-disabled:hover, .mc-button--warning.is-link.is-disabled:focus, .mc-button--warning.is-link.is-disabled:active {
  color: var(--mc-color-warning-light-5);
  background-color: var(--mc-color-warning-light-9);
  border-color: var(--mc-color-warning-light-8);
}

.mc-button--danger {
  --mc-button-text-color: var(--mc-color-white);
  --mc-button-bg-color: var(--mc-color-danger);
  --mc-button-border-color: var(--mc-color-danger);
  --mc-button-outline-color: var(--mc-color-danger-light-5);
  --mc-button-active-color: var(--mc-color-danger-dark-2);
  --mc-button-hover-text-color: var(--mc-color-white);
  --mc-button-hover-link-text-color: var(--mc-color-danger-light-5);
  --mc-button-hover-bg-color: var(--mc-color-danger-light-3);
  --mc-button-hover-border-color: var(--mc-color-danger-light-3);
  --mc-button-active-bg-color: var(--mc-color-danger-dark-2);
  --mc-button-active-border-color: var(--mc-color-danger-dark-2);
  --mc-button-disabled-text-color: var(--mc-color-white);
  --mc-button-disabled-bg-color: var(--mc-color-danger-light-5);
  --mc-button-disabled-border-color: var(--mc-color-danger-light-5);
}
.mc-button--danger.is-plain, .mc-button--danger.is-text, .mc-button--danger.is-link {
  --mc-button-text-color: var(--mc-color-danger);
  --mc-button-bg-color: var(--mc-color-danger-light-9);
  --mc-button-border-color: var(--mc-color-danger-light-5);
  --mc-button-hover-text-color: var(--mc-color-white);
  --mc-button-hover-bg-color: var(--mc-color-danger);
  --mc-button-hover-border-color: var(--mc-color-danger);
  --mc-button-active-text-color: var(--mc-color-white);
}
.mc-button--danger.is-plain.is-disabled, .mc-button--danger.is-plain.is-disabled:hover, .mc-button--danger.is-plain.is-disabled:focus, .mc-button--danger.is-plain.is-disabled:active, .mc-button--danger.is-text.is-disabled, .mc-button--danger.is-text.is-disabled:hover, .mc-button--danger.is-text.is-disabled:focus, .mc-button--danger.is-text.is-disabled:active, .mc-button--danger.is-link.is-disabled, .mc-button--danger.is-link.is-disabled:hover, .mc-button--danger.is-link.is-disabled:focus, .mc-button--danger.is-link.is-disabled:active {
  color: var(--mc-color-danger-light-5);
  background-color: var(--mc-color-danger-light-9);
  border-color: var(--mc-color-danger-light-8);
}

.mc-button--info {
  --mc-button-text-color: var(--mc-color-white);
  --mc-button-bg-color: var(--mc-color-info);
  --mc-button-border-color: var(--mc-color-info);
  --mc-button-outline-color: var(--mc-color-info-light-5);
  --mc-button-active-color: var(--mc-color-info-dark-2);
  --mc-button-hover-text-color: var(--mc-color-white);
  --mc-button-hover-link-text-color: var(--mc-color-info-light-5);
  --mc-button-hover-bg-color: var(--mc-color-info-light-3);
  --mc-button-hover-border-color: var(--mc-color-info-light-3);
  --mc-button-active-bg-color: var(--mc-color-info-dark-2);
  --mc-button-active-border-color: var(--mc-color-info-dark-2);
  --mc-button-disabled-text-color: var(--mc-color-white);
  --mc-button-disabled-bg-color: var(--mc-color-info-light-5);
  --mc-button-disabled-border-color: var(--mc-color-info-light-5);
}
.mc-button--info.is-plain, .mc-button--info.is-text, .mc-button--info.is-link {
  --mc-button-text-color: var(--mc-color-info);
  --mc-button-bg-color: var(--mc-color-info-light-9);
  --mc-button-border-color: var(--mc-color-info-light-5);
  --mc-button-hover-text-color: var(--mc-color-white);
  --mc-button-hover-bg-color: var(--mc-color-info);
  --mc-button-hover-border-color: var(--mc-color-info);
  --mc-button-active-text-color: var(--mc-color-white);
}
.mc-button--info.is-plain.is-disabled, .mc-button--info.is-plain.is-disabled:hover, .mc-button--info.is-plain.is-disabled:focus, .mc-button--info.is-plain.is-disabled:active, .mc-button--info.is-text.is-disabled, .mc-button--info.is-text.is-disabled:hover, .mc-button--info.is-text.is-disabled:focus, .mc-button--info.is-text.is-disabled:active, .mc-button--info.is-link.is-disabled, .mc-button--info.is-link.is-disabled:hover, .mc-button--info.is-link.is-disabled:focus, .mc-button--info.is-link.is-disabled:active {
  color: var(--mc-color-info-light-5);
  background-color: var(--mc-color-info-light-9);
  border-color: var(--mc-color-info-light-8);
}

.mc-button--large {
  --mc-button-size: 40px;
  height: var(--mc-button-size);
}
.mc-button--large [class*=mc-icon] + span {
  margin-left: 8px;
}
.mc-button--large {
  padding: 12px 19px;
  font-size: var(--mc-font-size-base);
  border-radius: var(--mc-border-radius-base);
}
.mc-button--large.is-round {
  padding: 12px 19px;
}
.mc-button--large.is-circle {
  width: var(--mc-button-size);
  padding: 12px;
}

.mc-button--small {
  --mc-button-size: 24px;
  height: var(--mc-button-size);
}
.mc-button--small [class*=mc-icon] + span {
  margin-left: 4px;
}
.mc-button--small {
  padding: 5px 11px;
  font-size: 12px;
  border-radius: calc(var(--mc-border-radius-base) - 1px);
}
.mc-button--small.is-round {
  padding: 5px 11px;
}
.mc-button--small.is-circle {
  width: var(--mc-button-size);
  padding: 5px;
}