VberAdminPlus/UI/VAP.APP/src/static/scss/vb-component/_base.scss

view,
button,
input,
textarea,
image,
text,
scroll-view,
:host {
  box-sizing: border-box;
  --vb-icon-font-family: "iconfont";
  --vb-color: #1989fa;
  --vb-black: #1e2129;
  --vb-white: #fff;
  --vb-gray-1: #f7f8fa;
  --vb-gray-2: #f2f3f5;
  --vb-gray-3: #ebedf0;
  --vb-gray-4: #dcdee0;
  --vb-gray-5: #c8c9cc;
  --vb-gray-6: #969799;
  --vb-gray-7: #646566;
  --vb-gray-8: #323233;
  --vb-red: #f1416c;
  --vb-blue: #009ef7;
  --vb-yellow: #ffc700;
  --vb-orange: #ff976a;
  --vb-orange-dark: #ed6a0c;
  --vb-orange-light: #fffbe8;
  --vb-green: #50cd89;
  --vb-pink: #e03997;
  --vb-info: #7239ea;
  --vb-gradient-red: linear-gradient(to right, #ff6034, #ee0a24);
  --vb-gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);
  --vb-primary-color: var(--vb-blue);
  --vb-success-color: var(--vb-green);
  --vb-danger-color: var(--vb-red);
  --vb-warning-color: var(--vb-yellow);
  --vb-light: #f1faff;
  --vb-primary-light: #f1faff;
  --vb-success-light: #e8fff3;
  --vb-info-light: #f8f5ff;
  --vb-danger-light: #fff5f8;
  --vb-warning-light: #fff8dd;
  --vb-dark-light: #f9f9f9;
  --vb-light-light: #ffffff;
  --vb-text-color: var(--vb-gray-8);
  --vb-text-color-2: var(--vb-gray-6);
  --vb-text-color-3: var(--vb-gray-5);
  --vb-active-color: var(--vb-gray-2);
  --vb-active-opacity: 0.6;
  --vb-disabled-opacity: 0.5;
  --vb-background: var(--vb-gray-1);
  --vb-background-2: var(--vb-white);
  --vb-background-3: var(--vb-white);
  --vb-padding-base: 4px;
  --vb-padding-xs: 8px;
  --vb-padding-sm: 12px;
  --vb-padding-md: 16px;
  --vb-padding-lg: 24px;
  --vb-padding-xl: 32px;
  --vb-font-bold: 600;
  --vb-font-size-xs: 10px;
  --vb-font-size-sm: 12px;
  --vb-font-size-md: 14px;
  --vb-font-size-lg: 16px;
  --vb-line-height-xs: 14px;
  --vb-line-height-sm: 18px;
  --vb-line-height-md: 20px;
  --vb-line-height-lg: 22px;
  --vb-base-font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Segoe UI, Arial, Roboto, "PingFang SC",
    "miui", "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
  --vb-price-font: avenir-heavy, "PingFang SC", helvetica neue, arial, sans-serif;
  --vb-duration-base: 0.3s;
  --vb-duration-fast: 0.2s;
  --vb-ease-out: ease-out;
  --vb-ease-in: ease-in;
  --vb-border-color: var(--vb-gray-3);
  --vb-border-width: 1px;
  --vb-radius-sm: 2px;
  --vb-radius-md: 4px;
  --vb-radius-lg: 8px;
  --vb-radius-max: 999px;
}

.vb-theme-dark {
  --vb-text-color: #f5f5f5;
  --vb-text-color-2: #707070;
  --vb-text-color-3: #4d4d4d;
  --vb-border-color: #3a3a3c;
  --vb-active-color: #3a3a3c;
  --vb-background: #000;
  --vb-background-2: #1c1c1e;
  --vb-background-3: #37363b;
}

.vb-clearfix:after {
  display: table;
  clear: both;
  content: "";
}

.vb-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.vb-multi-ellipsis--l2 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  line-break: anywhere;
  -webkit-box-orient: vertical;
}

.vb-multi-ellipsis--l3 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  line-break: anywhere;
  -webkit-box-orient: vertical;
}

[class*="vb-hairline"]:after {
  position: absolute;
  box-sizing: border-box;
  content: " ";
  pointer-events: none;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  border: 0 solid var(--vb-border-color) !important;
  transform: scale(0.5);
}

.vb-hairline,
.vb-hairline--top,
.vb-hairline--left,
.vb-hairline--right,
.vb-hairline--bottom,
.vb-hairline--surround,
.vb-hairline--top-bottom {
  position: relative;
}

.vb-hairline--top:after {
  border-top-width: var(--vb-border-width);
}

.vb-hairline--left:after {
  border-left-width: var(--vb-border-width);
}

.vb-hairline--right:after {
  border-right-width: var(--vb-border-width);
}

.vb-hairline--bottom:after {
  border-bottom-width: var(--vb-border-width);
}

.vb-hairline--top-bottom:after,
.vb-hairline-unset--top-bottom:after {
  border-width: var(--vb-border-width) 0 var(--vb-border-width);
}

.vb-hairline--surround:after {
  border-width: var(--vb-border-width);
}