@wei-design/web-vue/lib/style.css

Wei Design - A Vue.js 3 UI library, @wei-design/web-vue

:export {
  default: #409EFF;
  primary: #ffffff;
  link: #409EFF;
  ghost: #409EFF;
  delicate: #8e8e93;
  primaryColor: #409EFF;
  successColor: #67C23A;
  warningColor: #E6A23C;
  dangerColor: #F56C6C;
  delicateColor: #8e8e93;
  white: #ffffff;
  black: #000000;
}

button {
  outline: none;
}

.we-button {
  padding: 8px 12px;
  overflow: hidden;
  border-radius: 6px;
  border: 0;
  text-align: center;
  display: inline-block;
  position: relative;
  outline: none;
  font-weight: 400;
  -webkit-appearance: none;
  user-select: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.1s linear;
  box-sizing: border-box;
}

.we-button-type-default {
  background: #409EFF;
  color: #409EFF;
  background: transparent;
  border: 1px solid #409EFF;
}

.we-button-type-default:focus, .we-button-type-default:hover {
  background: rgb(235.9, 245.3, 255);
  border: 1px solid rgb(102.2, 177.4, 255);
  color: #409EFF;
}

.we-button-type-primary {
  background: #409EFF;
  color: #409EFF;
  border: none;
  color: #ffffff;
  border: none;
  color: #ffffff !important;
}

.we-button-type-primary:focus, .we-button-type-primary:hover {
  background: rgb(121.3, 187.1, 255);
}

.we-button-type-primary:active {
  background: rgb(60.8, 150.1, 242.25);
}

.we-button-type-primary:disabled {
  background: rgb(140.4, 196.8, 255);
}

.we-button-type-link {
  background: #409EFF;
  color: #409EFF;
  background: none;
  border: none;
}

.we-button-type-ghost {
  background: #409EFF;
  color: #409EFF;
  background: #ffffff;
  border: 1px solid #409EFF;
}

.we-button-type-delicate {
  background: #8e8e93;
  color: #8e8e93;
  background: none;
  border: none;
}

.we-button-type-default.we-button-status-success {
  background: #67C23A;
  color: #67C23A;
  background: transparent;
  border: 1px solid #67C23A;
}

.we-button-type-default.we-button-status-success:focus, .we-button-type-default.we-button-status-success:hover {
  background: rgb(239.8, 248.9, 235.3);
  border: 1px solid rgb(133.4, 206.2, 97.4);
  color: #67C23A;
}

.we-button-type-default.we-button-status-info {
  background: #909399;
  color: #909399;
  background: transparent;
  border: 1px solid #909399;
}

.we-button-type-default.we-button-status-info:focus, .we-button-type-default.we-button-status-info:hover {
  background: rgb(243.9, 244.2, 244.8);
  border: 1px solid rgb(166.2, 168.6, 173.4);
  color: #909399;
}

.we-button-type-default.we-button-status-warning {
  background: #E6A23C;
  color: #E6A23C;
  background: transparent;
  border: 1px solid #E6A23C;
}

.we-button-type-default.we-button-status-warning:focus, .we-button-type-default.we-button-status-warning:hover {
  background: rgb(252.5, 245.7, 235.5);
  border: 1px solid rgb(235, 180.6, 99);
  color: #E6A23C;
}

.we-button-type-default.we-button-status-danger {
  background: #F56C6C;
  color: #F56C6C;
  background: transparent;
  border: 1px solid #F56C6C;
}

.we-button-type-default.we-button-status-danger:focus, .we-button-type-default.we-button-status-danger:hover {
  background: rgb(254, 240.3, 240.3);
  border: 1px solid rgb(247, 137.4, 137.4);
  color: #F56C6C;
}

.we-button-type-primary.we-button-status-success {
  background: #67C23A;
  color: #67C23A;
  border: none;
  color: #ffffff;
}

.we-button-type-primary.we-button-status-success:focus, .we-button-type-primary.we-button-status-success:hover {
  background: rgb(148.6, 212.3, 117.1);
}

.we-button-type-primary.we-button-status-success:active {
  background: rgb(97.85, 184.3, 55.1);
}

.we-button-type-primary.we-button-status-success:disabled {
  background: rgb(163.8, 218.4, 136.8);
}

.we-button-type-primary.we-button-status-info {
  background: #909399;
  color: #909399;
  border: none;
  color: #ffffff;
}

.we-button-type-primary.we-button-status-info:focus, .we-button-type-primary.we-button-status-info:hover {
  background: rgb(177.3, 179.4, 183.6);
}

.we-button-type-primary.we-button-status-info:active {
  background: rgb(136.8, 139.65, 145.35);
}

.we-button-type-primary.we-button-status-info:disabled {
  background: rgb(188.4, 190.2, 193.8);
}

.we-button-type-primary.we-button-status-warning {
  background: #E6A23C;
  color: #E6A23C;
  border: none;
  color: #ffffff;
}

.we-button-type-primary.we-button-status-warning:focus, .we-button-type-primary.we-button-status-warning:hover {
  background: rgb(237.5, 189.9, 118.5);
}

.we-button-type-primary.we-button-status-warning:active {
  background: rgb(218.5, 153.9, 57);
}

.we-button-type-primary.we-button-status-warning:disabled {
  background: rgb(240, 199.2, 138);
}

.we-button-type-primary.we-button-status-danger {
  background: #F56C6C;
  color: #F56C6C;
  border: none;
  color: #ffffff;
}

.we-button-type-primary.we-button-status-danger:focus, .we-button-type-primary.we-button-status-danger:hover {
  background: rgb(248, 152.1, 152.1);
}

.we-button-type-primary.we-button-status-danger:active {
  background: rgb(232.75, 102.6, 102.6);
}

.we-button-type-primary.we-button-status-danger:disabled {
  background: rgb(249, 166.8, 166.8);
}

.we-button-type-link.we-button-status-success {
  background: #67C23A;
  color: #67C23A;
  background: none;
  border: none;
}

.we-button-type-link.we-button-status-info {
  background: #909399;
  color: #909399;
  background: none;
  border: none;
}

.we-button-type-link.we-button-status-warning {
  background: #E6A23C;
  color: #E6A23C;
  background: none;
  border: none;
}

.we-button-type-link.we-button-status-danger {
  background: #F56C6C;
  color: #F56C6C;
  background: none;
  border: none;
}

.we-button-type-ghost.we-button-status-success {
  background: #67C23A;
  color: #67C23A;
  background: #ffffff;
  border: 1px solid #67C23A;
}

.we-button-type-ghost.we-button-status-info {
  background: #909399;
  color: #909399;
  background: #ffffff;
  border: 1px solid #909399;
}

.we-button-type-ghost.we-button-status-warning {
  background: #E6A23C;
  color: #E6A23C;
  background: #ffffff;
  border: 1px solid #E6A23C;
}

.we-button-type-ghost.we-button-status-danger {
  background: #F56C6C;
  color: #F56C6C;
  background: #ffffff;
  border: 1px solid #F56C6C;
}

.we-button-disabled {
  background-color: #f7f7fa;
  cursor: not-allowed;
}

.we-button-disabled:focus, .we-button-disabled:hover {
  background-color: #f7f7fa;
  outline: none;
}

.we-button-shape-square {
  border-radius: 6px;
}

.we-button-shape-circle {
  border-radius: 50%;
  padding: 0;
}

.we-button-shape-round {
  border-radius: 18px;
}

.we-button-size-lg {
  padding: 10px 16px;
  font-size: 16px;
}

.we-button-size-lg.we-button-loading {
  padding: 4px 8px;
  font-size: 16px;
}

.we-button-size-md {
  padding: 8px 12px;
  font-size: 14px;
}

.we-button-size-md.we-button-loading {
  padding: 3px 6px;
  pointer-events: none;
  font-size: 14px;
}

.we-button-size-sm {
  padding: 5px 10px;
  font-size: 14px;
}

.we-button-size-sm.we-button-loading {
  padding: 2px 5px;
  pointer-events: none;
  font-size: 14px;
}

.we-button-size-xs {
  padding: 2px 8px;
  font-size: 12px;
}

.we-button-size-xs.we-button-loading {
  padding: 1px 4px;
  pointer-events: none;
  font-size: 14px;
}

.we-button-slot {
  text-align: center;
}