shop-vite/library/styles/vab.scss

/**
 * @description 全局样式
 */

@import 'normalize.css';
@import 'element-plus/theme-chalk/src/display';
@import 'element-plus/theme-chalk/src/index';
@import './dark';
@import './plain';
@import './technology';
@import 'vsv-icon/dist/style.css';
@import './var';

@mixin base-scrollbar {
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  &::-webkit-scrollbar-thumb {
    background-color: rgba(#909399, 0.3);
    border-radius: var(--el-border-radius-round);
    transition: var(--el-transition-duration) background-color;

    &:hover {
      background-color: rgba(#909399, 0.5);
    }
  }
}

html {
  body {
    position: relative;
    box-sizing: border-box;
    height: calc(var(--vh, 1vh) * 100);
    padding: 0;
    overflow: hidden;
    font-size: var(--el-font-size-base);
    color: var(--el-color-black);
    background: var(--el-background-color);

    &.color-weakness {
      filter: invert(80%);
    }

    #app {
      height: calc(var(--vh, 1vh) * 100);

      @include base-scrollbar;

      &:not([class*='el-scrollbar']) {
        transition: var(--el-transition);
      }

      .vue-shop-vite-box {
        section,
        div:not(
            .el-drawer,
            .el-drawer *,
            .el-dialog,
            .el-dialog *,
            .el-message-box,
            .el-message-box *,
            .el-table,
            .el-table *,
            .el-carousel,
            .el-carousel *,
            .el-pagination,
            .el-pagination *,
            .el-slider,
            .el-slider *,
            .el-card,
            .el-card *,
            .split,
            .split *,
            .card-drag,
            .card-drag *,
            .global-animation-disabled *,
            .no-transition-container *,
            .vab-magnifier,
            .vab-magnifier *
          ) {
          text-shadow: none;
          transition: var(--el-transition);
          -webkit-font-smoothing: antialiased;
        }

        .vab-main {
          .vab-app-main {
            width: 100%;
            padding: var(--el-padding);
            overflow: hidden;

            > section {
              > [class*='-container'] {
                min-height: var(--el-container-height);
                padding: var(--el-padding);
                background: var(--el-color-white);
                border: 1px solid var(--el-border-color);
                border-radius: var(--el-border-radius-base);
              }
            }
          }
        }
      }
    }

    .vue-shop-vite-box.mobile {
      --el-margin: 16px;
      --el-padding: 16px;
      --el-container-height: calc(
        var(--vh, 1vh) * 100 - var(--el-nav-height) - var(--el-tabs-height) - var(--el-padding) * 3 - var(--el-footer-height)
      );

      .ri-contract-right-line.fold-unfold {
        position: fixed;
        bottom: var(--el-margin);
        left: var(--el-margin);
        z-index: var(--el-z-index);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        color: var(--el-color-white);
        background: var(--el-color-primary);
        border-radius: 50%;
        box-shadow: 0 2px 12px 0 var(--el-color-primary);
      }
    }

    * {
      box-sizing: border-box;
      font-family: Arial, sans-serif;
      outline: none !important;
      -webkit-tap-highlight-color: transparent;
      -webkit-font-smoothing: antialiased;

      @include base-scrollbar;
    }

    [class*='ri-'] {
      cursor: pointer;
    }

    /*a标签 */
    a {
      color: var(--el-color-primary);
      text-decoration: none;
    }

    /*图片 */
    img {
      object-fit: cover;

      &[src=''],
      &:not([src]) {
        opacity: 0;
      }
    }

    /* vab-dropdown下拉动画 */
    .vab-dropdown {
      &-active {
        transform: rotateZ(180deg);
      }
    }

    /* vab-query-form表单查询 */
    .vab-query-form {
      .el-form-item__content {
        .el-slider {
          width: 190px;
        }
      }

      .el-form {
        &.el-form--inline.el-form--label-right {
          .el-form-item:not(:first-child) {
            .el-form-item__label {
              margin-left: 10px;
            }
          }
        }
      }
    }

    /* vab-dot圆点动画 */
    .vab-dot {
      position: relative;
      display: inline-block;
      width: 6px;
      height: 6px;
      margin-right: 3px;
      vertical-align: middle;
      border-radius: 50%;

      span {
        position: absolute;
        top: 0;
        left: 0;
        box-sizing: border-box;
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        animation: vabDot 1.2s ease-in-out infinite;
        @keyframes vabDot {
          0% {
            opacity: 0.6;
            transform: scale(0.8);
          }
          to {
            opacity: 0;
            transform: scale(2.4);
          }
        }
      }

      &-success {
        background: var(--el-color-success);

        span {
          background: var(--el-color-success);
        }
      }

      &-error,
      &-danger {
        background: var(--el-color-error);

        span {
          background: var(--el-color-error);
        }
      }
    }

    /* vab-data-empty占位图 */
    .vab-data-empty {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: calc(var(--el-container-height) - 250px);
      margin: auto;
    }

    /* el-descriptions */
    .el-descriptions {
      &__title {
        padding-left: 10px;
        border-left: 5px solid var(--el-color-primary);
      }
    }

    /* el-button按钮 */
    .el-button {
      border-radius: var(--el-border-radius-base);

      &:hover,
      &:focus,
      &:active,
      &.is-disabled {
        background-clip: padding-box;
      }

      &.is-round {
        border-radius: var(--el-border-radius-round);
      }

      &.is-circle {
        border-radius: var(--el-border-radius-circle);
      }

      [class*='el-icon-'] + span,
      span + [class*='el-icon-'],
      [class*='ri-'] + span,
      span + [class*='ri-'] {
        margin-left: 3px;
      }
    }

    /* el-select */
    .el-select {
      min-width: 115px;
    }

    a + a,
    a + .el-button,
    .el-button + a {
      margin-left: 10px;
    }

    /* 毛玻璃遮罩(影响性能，默认关闭) */
    .el-overlay,
    .el-image-viewer__mask {
      background-color: var(--el-overlay-color-lighter);
      //backdrop-filter: blur(2.5px);
      //opacity: 1;

      // > div {
      //   backdrop-filter: none;backdrop-filter
      // }
    }

    .v-modal {
      z-index: var(--el-z-index);
      background-color: var(--el-overlay-color-lighter);
      //backdrop-filter: blur(2.5px);
      //opacity: 1;
    }

    .vab-modal {
      position: fixed;
      top: 0;
      left: 0;
      z-index: var(--el-z-index);
      width: 100%;
      height: 100%;
      background-color: var(--el-overlay-color-lighter);
      //opacity: 1;
      //backdrop-filter: blur(2.5px);
    }

    /* el-loading-mask遮罩 */
    .el-loading-mask {
      z-index: calc(var(--el-z-index) - 10) !important;

      &.is-fullscreen {
        z-index: calc(var(--el-z-index) + 99) !important;
      }
    }

    /* el-tag */
    .el-tag {
      border-radius: var(--el-border-radius-base);
    }

    /* .el-badge */

    .el-badge {
      &__content {
        border: 0;
      }
    }

    /*  .el-page-header */
    .el-page-header {
      margin: 0 0 var(--el-margin) 0;
    }

    /* el-alert */
    .el-alert {
      margin: 0 0 var(--el-margin) 0;

      &.is-light {
        .el-alert__icon,
        .el-alert__close-btn {
          color: currentColor;
        }
      }

      &--success {
        &.is-light {
          color: var(--el-color-success);
          background-color: var(--el-color-success-lighter);
          border: 1px solid var(--el-color-success);
        }

        &.is-dark {
          background-color: var(--el-color-success);
          border: 1px solid var(--el-color-success);
        }
      }

      &--info {
        &.is-light {
          color: var(--el-color-primary);
          background-color: var(--el-color-primary-light-9);
          border: 1px solid var(--el-color-primary);
        }

        &.is-dark {
          background-color: var(--el-color-primary);
          border: 1px solid var(--el-color-primary);
        }
      }

      &--warning {
        &.is-light {
          color: var(--el-color-warning);
          background-color: var(--el-color-warning-lighter);
          border: 1px solid var(--el-color-warning);
        }

        &.is-dark {
          background-color: var(--el-color-warning);
          border: 1px solid var(--el-color-warning);
        }
      }

      &--error {
        &.is-light {
          color: var(--el-color-error);
          background-color: var(--el-color-error-lighter);
          border: 1px solid var(--el-color-error);
        }

        &.is-dark {
          background-color: var(--el-color-error);
          border: 1px solid var(--el-color-error);
        }
      }
    }

    /* nprogress进度条 */
    #nprogress {
      position: fixed;
      z-index: calc(var(--el-z-index) + 3);

      .bar {
        background: var(--el-color-primary);
      }

      .peg {
        box-shadow:
          0 0 10px var(--el-color-primary),
          0 0 5px var(--el-color-primary);
      }
    }

    /* el-checkbox */
    .el-checkbox {
      &__label {
        font-size: var(--el-font-size-base);
      }
    }

    /* el-table表格 */
    .el-table {
      font-size: var(--el-font-size-base);

      td {
        .cell {
          .el-image {
            width: 50px;
            height: 50px;
            cursor: pointer;
            border-radius: var(--el-border-radius-base);
          }

          .el-button.is-text + .el-button.is-text {
            margin-left: 0;
          }
        }
      }
    }

    /* el-pagination分页 */
    .el-pagination {
      --el-pagination-border-radius: var(--el-border-radius-base);
      justify-content: center;
      margin-top: var(--el-margin);
      font-size: var(--el-font-size-base);

      * {
        font-size: var(--el-font-size-base);
      }
    }

    /* el-menu菜单 */
    .el-menu {
      user-select: none;

      .el-sub-menu__title,
      .el-menu-item {
        svg,
        [class*='ri-'] {
          margin-right: 3px;
          margin-left: 0;
        }
      }
    }

    /* el-tabs--top */
    .el-tabs.el-tabs--top {
      .el-tabs__item {
        svg,
        [class*='ri-'] {
          margin-right: 3px;
        }
      }
    }

    /* el-breadcrumb */
    .el-breadcrumb__inner {
      display: flex;
      align-items: center;
      justify-content: center;

      svg,
      [class*='ri-'] {
        margin-right: 3px;
      }
    }

    /* el-tour */
    .el-tour {
      --el-tour-title-font-size: 18px;

      &__header {
        display: flex;
        justify-items: center;
        width: 100%;
        height: 58px;
        padding: 0 0 0 var(--el-padding);
        margin: 0;
      }

      &__title {
        line-height: 58px;
      }

      &__closebtn {
        width: auto;
        height: auto;
        margin-top: var(--el-padding);
        margin-right: var(--el-padding);
      }

      &__content {
        max-width: 400px !important;
        padding: 0;

        .el-button--small {
          height: 32px;
          padding: 8px 15px;
          font-size: var(--el-font-size-base);
          border-radius: var(--el-border-radius-base);
        }
      }

      &__body {
        padding: var(--el-padding);
      }

      &__footer {
        display: flex;
        align-items: center;
        padding: var(--el-padding);
      }

      @media (max-width: 768px) {
        &__content {
          width: calc(100% - 10vw);
        }
      }
    }

    /* el-dialog */
    @media (max-width: 768px) {
      .el-dialog,
      .el-message-box {
        width: calc(100% - 10vw);
        margin-right: 5vw;
        margin-left: 5vw;
      }
    }

    .el-dialog {
      --el-dialog-title-font-size: 18px;

      padding: 0;
      border-radius: var(--el-border-radius-base);

      &--center {
        .el-dialog__title {
          padding-left: 0 !important;
        }
      }

      &__header {
        height: calc(var(--el-dialog-title-font-size) + var(--el-padding) * 2);
        padding: 0 !important;
        margin-right: 0;
        line-height: calc(var(--el-dialog-title-font-size) + var(--el-padding) * 2);
        border-top-left-radius: inherit;
        border-top-right-radius: inherit;

        .el-dialog__title {
          width: 100%;
          height: inherit;
          padding-left: var(--el-padding);
          line-height: inherit;
        }

        &btn {
          right: var(--el-margin);
          display: flex;
          align-items: center;
          justify-content: center;
          width: 16px;
          height: inherit;

          &:focus {
            .el-dialog__close {
              color: var(--el-color-info);
            }
          }

          .el-dialog__close {
            color: var(--el-color-info);
          }

          .el-dialog__fullscreen {
            font-size: 14px;
            vertical-align: -3px;
          }
        }
      }

      &__body {
        padding: var(--el-padding);

        .el-form:not(.el-form--inline):not(.el-form--label-top) {
          margin-right: 30px;

          .el-form-item:last-child {
            margin-bottom: 0;
          }

          .el-date-editor,
          .el-select {
            width: 100%;
          }
        }
      }

      &__footer {
        padding: var(--el-padding);
      }

      &.is-fullscreen {
        width: 100%;
        margin: 0;
        border-radius: 0;

        .el-dialog__body {
          height: calc(var(--vh, 1vh) * 100 - var(--el-dialog-title-font-size) - var(--el-padding) * 4 - 32px);
          overflow-y: auto;
        }
      }

      &.vab-dialog-plain {
        .el-dialog__header {
          background: var(--el-color-info-light-9);
        }
      }

      &.vab-dialog-primary {
        .el-dialog__header {
          --el-text-color-primary: var(--el-color-white);
          --el-color-info: var(--el-color-white);
          background: var(--el-color-primary);

          .el-dialog__close {
            --el-color-primary: var(--el-color-white);

            &:hover {
              opacity: 0.6;
            }
          }
        }
      }
    }

    /* el-el-message-box */
    .el-message-box {
      --el-messagebox-font-size: 18px;

      padding: 0;
      border-radius: var(--el-border-radius-base);

      &__header {
        height: calc(var(--el-messagebox-font-size) + var(--el-padding) * 2);
        padding: 0 !important;
        margin-right: 0;
        line-height: calc(var(--el-messagebox-font-size) + var(--el-padding) * 2);
        border-top-left-radius: inherit;
        border-top-right-radius: inherit;

        .el-message-box__title {
          width: 100%;
          height: inherit;
          padding-left: var(--el-padding);
          line-height: inherit;
        }

        &btn {
          right: var(--el-margin);
          width: 16px;
          height: inherit;
          line-height: inherit;

          &:focus {
            .el-message-box__close {
              color: var(--el-color-info);
            }
          }

          .el-message-box__close {
            color: var(--el-color-info);
          }
        }
      }

      &__content {
        padding: calc(var(--el-padding) / 2) var(--el-padding) 0 var(--el-padding);
      }

      &__btns {
        padding: var(--el-padding);
      }
    }

    /* el-card卡片 */
    .el-card {
      margin-bottom: var(--el-margin);
      border: 1px solid var(--el-border-color);
      border-radius: var(--el-border-radius-base);
      transition: var(--el-transition) !important;

      &__header {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-start;

        [class*='ri-'] {
          margin-right: 3px;
        }

        .card-header-tag,
        .card-header-button {
          position: absolute;
          right: var(--el-margin);
        }
      }

      &__body {
        padding: var(--el-padding);
      }
    }

    /* .vab-hey-message */
    .vab-hey-message {
      @mixin vab-hey-message {
        padding: 15px;
        background-color: var(--el-color-white);
        border-color: var(--el-color-white);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);

        .el-message__content {
          color: var(--el-color-grey);
        }

        .el-icon-close {
          color: var(--el-color-grey);

          &:hover {
            opacity: 0.8;
          }
        }
      }

      &-info {
        @include vab-hey-message;

        i {
          color: var(--el-color-grey);
        }
      }

      &-success {
        @include vab-hey-message;

        i {
          color: var(--el-color-success);
        }
      }

      &-warning {
        @include vab-hey-message;

        i {
          color: var(--el-color-warning);
        }
      }

      &-error {
        @include vab-hey-message;

        i {
          color: var(--el-color-error);
        }
      }
    }

    /* vab-table-expand */
    .vab-table-expand {
      padding: var(--el-padding);
      line-height: 30px;

      &-title {
        display: inline-block;
        width: 80px;
        font-weight: bold;
      }
    }

    /* el-color-picker */
    .el-color-picker {
      &__trigger {
        width: 20px;
        height: 20px;
        padding: 0;
        border-radius: 0;
      }

      &__color {
        border: 0;
      }
    }

    /* svg */
    [fill='#6c63ff'],
    [fill='#7CADF6'],
    [fill='#1C85E8'],
    [fill='#5CA4E6'],
    [fill='#2F9BFF'] {
      fill: var(--el-color-primary) !important;
    }

    [fill='#5661AE'],
    [fill='#465393'] {
      fill: var(--el-color-primary-light-1) !important;
    }

    [fill='#FEBB94'],
    [fill='#BC775C'],
    [fill='#E6A23C'] {
      fill: var(--el-color-warning) !important;
    }

    .el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
    .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
      background-color: var(--el-color-primary) !important;
    }

    .el-avatar {
      background-color: var(--el-color-primary-light-9) !important;
    }

    .no-background-container {
      padding: 0 !important;
      background: var(--el-background-color) !important;
      border: 0 !important;
    }

    /* 表格全屏 */
    .vab-table-fullscreen {
      position: fixed !important;
      inset: 0 !important;
      z-index: calc(var(--el-z-index) + 3) !important;
      box-sizing: border-box !important;
      width: 100vw !important;
      height: calc(var(--vh, 1vh) * 100) !important;
      overflow: auto !important;
      border: 0 !important;
      border-radius: 0 !important;
    }

    /* 数据大屏全屏 */
    .vab-data-fullscreen {
      position: fixed !important;
      inset: 0 !important;
      z-index: calc(var(--el-z-index) + 3) !important;
      padding: 0 !important;
      margin: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
    }

    .el-upload.el-upload--text + .el-button {
      margin-left: 10px;
    }

    /* 默认布局自动高度 */
    :not(.no-background-container).auto-height-container {
      display: flex;
      flex-direction: column;
      height: var(--el-container-height);

      .el-table {
        flex: 1;
      }

      .el-scrollbar {
        //margin-right: -20px;

        .vab-auto-box {
          flex: 1;
          width: 100%;
          padding: 0 var(--el-padding) 0 0;
        }
      }

      @media (max-width: 1024px) {
        height: auto;
      }
    }

    /* 左右布局自动高度 */
    .no-background-container.auto-height-container {
      .auto-height-card {
        margin-bottom: 0;

        > .el-card__body {
          display: flex;
          flex-direction: column;
          height: calc(var(--el-container-height) - 2px);

          .el-table {
            flex: 1;
          }
        }

        &.has-header {
          > .el-card__body {
            height: calc(var(--el-container-height) - 57px);
          }
        }
      }

      @media (max-width: 1200px) {
        margin-bottom: calc(0 - var(--el-margin));

        > .el-row {
          > .el-col + .el-col {
            .auto-height-card {
              margin-bottom: 0;
            }
          }
        }

        .auto-height-card {
          margin-bottom: var(--el-margin);

          > .el-card__body {
            &:not(:has(.el-alert)) {
              height: auto;
            }
          }

          &.has-header {
            margin-bottom: 0;

            > .el-card__body {
              height: auto;
              min-height: calc(var(--el-container-height) - 57px);
            }
          }
        }
      }

      &.vab-table-fullscreen {
        padding: var(--el-padding) !important;

        .auto-height-card {
          > .el-card__body {
            height: calc(var(--vh, 1vh) * 100 - var(--el-padding) * 2 - 2px);
          }
        }
      }
    }

    :not(.auto-height-container).no-background-container {
      > .el-row:has(.el-card) {
        margin-bottom: calc(0px - var(--el-margin));
      }
    }

    .jv-container.jv-light {
      background: var(--el-color-white);

      .jv-key,
      .jv-item.jv-object {
        color: var(--el-color-black);
      }
    }

    .vab-column-bar .el-tabs .el-tabs__nav {
      margin-left: -1px !important;
      border-right: 1px solid var(--el-menu-background-color) !important;
    }

    .vab-logo-column .logo {
      border-right: 1px solid var(--el-menu-background-color) !important;
    }

    .vab-side-bar {
      margin-left: -1px !important;
      border-right: 1px solid var(--el-menu-background-color) !important;
    }

    .el-space {
      &__item {
        &:empty {
          display: none;
        }
      }
    }

    @media (max-width: 768px) {
      .el-space {
        &__item {
          &:has([class*='hidden']) {
            display: none;
          }
        }
      }
    }

    /* 旋转动画 */
    .rotate {
      @keyframes rotate {
        0% {
          transform: rotate(0);
        }
        100% {
          transform: rotate(360deg);
        }
      }

      animation: rotate 1s linear infinite;
    }
  }
}