vue-fluent-ui/dist/components/VfButton/src/Button.style.css

一个winui3/fluent design风格的vue组件库

.vf-button {
  cursor: default;
  user-select: none;
  text-align: center;
  border: 1px solid;
  outline: none;
  justify-content: center;
  align-items: center;
  padding: 5px 11px 6px;
  font-size: 14px;
  font-weight: normal;
  line-height: 20px;
  transition-property: background;
  transition-duration: 83ms;
  transition-timing-function: ease;
  display: inline-flex;
  position: relative;
}

.vf-button:focus-visible {
  box-shadow: 0 0 0 1px var(--vf-stroke-focus-inner), 0 0 0 3px var(--vf-stroke-focus-outer);
}

.vf-button--standard {
  color: var(--vf-text-primary);
  border-color: var(--vf-border-control-elevation);
  background-color: var(--vf-fill-control-default);
}

.vf-button--standard:hover {
  background-color: var(--vf-fill-control-secondary);
}

.vf-button--standard:active {
  color: var(--vf-text-secondary);
  border-color: var(--vf-stroke-control-default);
  background-color: var(--vf-fill-control-tertiary);
}

.vf-button--standard:disabled {
  color: var(--vf-text-disabled);
  border-color: var(--vf-stroke-control-default);
  background-color: var(--vf-fill-control-disabled);
}

.vf-button--accent {
  color: var(--vf-text-on-accent-fill-color-primary);
  border-color: var(--vf-border-accent-control-elevation);
  background-color: var(--vf-fill-accent-default);
}

.vf-button--accent:hover {
  background-color: var(--vf-fill-accent-secondary);
}

.vf-button--accent:active {
  color: var(--vf-text-on-accent-fill-color-secondary);
  border-color: var(--vf-fill-control-transparent);
  background-color: var(--vf-fill-accent-tertiary);
}

.vf-button--accent:disabled {
  color: var(--vf-text-on-accent-fill-color-disabled);
  border-color: var(--vf-fill-control-transparent);
  background-color: var(--vf-fill-accent-disabled);
}

.vf-button--rounded {
  border-radius: var(--vf-radius-control-corner);
}

.vf-button--circular {
  border-radius: var(--vf-radius-circular);
}

.vf-button--square {
  border-radius: 0;
}

.vf-button.vf-is-disabled {
  cursor: default;
}