@qxs-bns/components 0.0.89 → 0.0.90

package/theme-chalk/src/common/element-plus.scss

@@ -1,606 +0,0 @@
-@use "../mixins/config" as *;
-// TODO:这里可以重置 element-plus 样式
-$ns: $namespace !default;
-$cs: "cs-in" !default; // 自定义样式对应不同的类型前缀
-
-// 整体结构
-// .customize-input {
-//   // 某种类型
-//   .#{$cs}-inline {
-//     background: red;
-//   }
-//   &:not([class*="#{$cs}"]) {
-//    // 默认样式
-//    &.#{$ns}-input {
-//      width: 160px;
-//      .#{$ns}-input__wrapper {
-//        background-color: var(--#{$ns}-fill-color-lighter);
-//        border-radius: 20px;
-//      }
-//    }
-//  }
-// }
-// #{$ns}-input-number
-.customize-input-number {
-  &.#{$ns}-input-number {
-    width: 98px;
-
-    .#{$ns}-input-number__wrapper {
-      top: 2px;
-      width: 24px;
-      height: 21px;
-      overflow: hidden;
-      font-weight: 500;
-      line-height: 22px;
-      background-color: #fbfbfb;
-
-      i {
-        padding-top: 1px;
-        font-size: 16px;
-        font-weight: 600;
-      }
-
-      &:hover {
-        color: #3d61e3;
-      }
-    }
-
-    .#{$ns}-input__inner {
-      height: 24px;
-      padding-right: 28px;
-      padding-left: 28px;
-      line-height: 24px;
-      border: 1px solid #e1e1e1;
-      border-radius: 3px;
-
-      &::placeholder {
-        color: #5a5a5a;
-      }
-    }
-  }
-}
-
-.customize-date-picker {
-  &:not([class*="#{$cs}"]) {
-    &.#{$ns}-date-editor {
-      background-color: #fbfbfb;
-      .#{$ns}-icon:nth-child(1) {
-        order: 1;
-        margin-left: 4px;
-      }
-    }
-  }
-}
-
-.customize-dialog {
-  &:not([class*="#{$cs}"]) {
-    &.#{$ns}-dialog {
-      padding: 0;
-      .#{$ns}-dialog__header {
-        position: relative;
-        height: 40px;
-        padding: 0 calc(var(--#{$ns}-dialog-padding-primary) - 3px);
-        margin-right: 0;
-        font-weight: 600;
-        border-bottom: var(--#{$ns}-border);
-
-        .#{$ns}-dialog__title {
-          font-size: 14px;
-          line-height: 40px;
-        }
-
-        .#{$ns}-dialog__headerbtn {
-          top: 2px;
-          width: 40px;
-          height: 40px;
-          font-size: 22px;
-        }
-      }
-
-      .#{$ns}-dialog__body {
-        padding: var(--#{$ns}-dialog-padding-primary);
-      }
-
-      .#{$ns}-dialog__footer {
-        padding: var(--#{$ns}-dialog-padding-primary);
-        padding-top: 0;
-        text-align: center;
-        .#{$ns}-button {
-          min-width: 90px;
-        }
-      }
-    }
-  }
-}
-
-.customize-button {
-  &.#{$cs}-info {
-    background-color: #fbfbfb;
-  }
-  &:not([class*="#{$cs}"]) {
-    &.#{$ns}-button {
-      min-width: 90px;
-
-      --#{$ns}-button-size: 28px;
-      --#{$ns}-border-radius-base: 4px;
-    }
-  }
-}
-
-.customize-tree {
-  &.#{$ns}-tree {
-    .qxs-tree-node__content {
-      --#{$ns}-tree-node-content-height: 30px;
-      .#{$ns}-checkbox {
-        --#{$ns}-color-primary: #30c691;
-
-        .#{$ns}-checkbox__inner {
-          width: 14px;
-          height: 14px;
-
-          &::after {
-            width: 3px;
-            height: 7px;
-          }
-        }
-      }
-    }
-  }
-}
-
-.customize-input {
-  &.#{$cs}-line {
-    &.#{$ns}-input {
-      .#{$ns}-input__wrapper {
-        border-radius: 0;
-        box-shadow: 0 1px 0 0 var(--qxs-input-border-color, var(--qxs-border-color));
-
-        &:hover {
-          box-shadow: 0 1px 0 0 var(--qxs-input-hover-border-color);
-        }
-
-        &.is-focus {
-          box-shadow: 0 1px 0 0 var(--qxs-input-focus-border-color);
-        }
-
-        .#{$ns}-input__count {
-          .#{$ns}-input__count-inner {
-            background-color: transparent;
-          }
-        }
-      }
-    }
-  }
-
-  &:not([class*="#{$cs}"]) {
-    &.#{$ns}-input {
-      width: 160px;
-
-      .#{$ns}-input__wrapper {
-        background-color: var(--#{$ns}-fill-color-lighter);
-        border-radius: 20px;
-
-        .#{$ns}-input__count {
-          .#{$ns}-input__count-inner {
-            background-color: transparent;
-          }
-        }
-      }
-    }
-  }
-}
-
-.customize-message-box {
-  &.#{$ns}-message-box {
-    --#{$ns}-messagebox-border-radius: 0px;
-
-    padding: 0;
-
-    .#{$ns}-message-box__header {
-      padding: 0;
-
-      .#{$ns}-message-box__title {
-        height: 36px;
-        padding-left: 12px;
-        font-size: 14px;
-        font-weight: 600;
-        line-height: 36px;
-        border-bottom: 1px solid var(--#{$ns}-color-info-light-9);
-      }
-    }
-    .#{$ns}-message-box__content {
-      padding: 35px 10px 23px;
-      .#{$ns}-message-box__container {
-        justify-content: center;
-      }
-    }
-    .#{$ns}-message-box__btns {
-      justify-content: center;
-      padding-bottom: 20px;
-
-      .#{$ns}-button {
-        min-width: 90px;
-      }
-    }
-  }
-}
-
-.customize-tooltip {
-  &.#{$ns}-popper {
-    &.is-light {
-      padding: 5px 10px;
-      font-size: 14px;
-      font-weight: bold;
-      border: none;
-      box-shadow: 0 1px 8px 0 rgb(0 0 0 / 20%);
-
-      .#{$ns}-popper__arrow {
-        &::before {
-          width: 8px;
-          height: 8px;
-          border-color: transparent !important;
-        }
-      }
-    }
-  }
-}
-
-.customize-dropdown {
-  &.#{$cs}-noarrow {
-    &.#{$ns}-dropdown__popper {
-      .#{$ns}-popper__arrow {
-        display: none;
-      }
-    }
-  }
-}
-
-// el-table + el-pagination
-.customize-table {
-  &.#{$ns}-table {
-    border: 1px solid var(--#{$ns}-color-info-light-9) !important;
-    border-bottom: none !important;
-    border-radius: var(--#{$ns}-border-radius-base);
-
-    thead {
-      th {
-        padding: 10px 0;
-        background-color: var(--#{$ns}-color-info-light-9);
-        &.#{$ns}-table-fixed-column--left,
-        &.#{$ns}-table-fixed-column--right {
-          background-color: var(--qxs-color-info-light-9);
-        }
-      }
-    }
-    .#{$ns}-scrollbar__view {
-      .qxs-table__empty-block {
-        width: calc(100% - 2px) !important;
-      }
-
-      .#{$ns}-table__body {
-        tbody {
-          width: calc(100% - 2px);
-          .#{$ns}-table__row {
-            .#{$ns}-table__cell {
-              .cell {
-                &:empty::before {
-                  content: "——";
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-
-    & + .customize-pagination {
-      margin-top: 20px;
-    }
-  }
-}
-// select
-.customize-select {
-  &.cs-in-line {
-    &.#{$ns}-select {
-      .#{$ns}-select__wrapper {
-        border-radius: 0;
-        box-shadow: 0 1px 0 0 var(--#{$ns}-border-color);
-
-        &.is-hovering:not(.is-focused) {
-          box-shadow: 0 1px 0 0 var(--#{$ns}-border-color-hover);
-        }
-
-        &.is-focused {
-          box-shadow: 0 1px 0 0 var(--#{$ns}-color-primary);
-        }
-      }
-    }
-  }
-  &:not([class*="#{$cs}"]) {
-    &.#{$ns}-select {
-      .#{$ns}-select__wrapper {
-        padding: 0 10px;
-        padding-right: 10px;
-        color: #5a5a5a;
-        background: #fbfbfb;
-
-        .#{$ns}-select__selection {
-          &::placeholder {
-            color: #5a5a5a;
-          }
-        }
-
-        .#{$ns}-input__suffix {
-          right: 0;
-
-          .#{$ns}-icon-arrow-up {
-            &::before {
-              position: absolute;
-              top: 50%;
-              left: 50%;
-              content: "";
-              border-top: 5px solid transparent;
-              border-right: 4px solid transparent;
-              border-bottom: 5px solid #a3a3a3;
-              border-left: 4px solid transparent;
-              transform: translate3d(-50%, -75%, 0);
-              transform-origin: -25% center;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-.customize-pagination {
-  &.#{$ns}-pagination {
-    color: #5a5a5a;
-
-    .#{$ns}-pagination__sizes {
-      .#{$ns}-select {
-        width: 95px !important;
-      }
-    }
-
-    .btn-prev,
-    .btn-next {
-      background-color: transparent !important;
-      border: 1px solid #e1e1e1;
-      border-radius: var(--#{$ns}-border-radius-base);
-    }
-
-    .#{$ns}-pager {
-      > .number,
-      .more {
-        color: #5a5a5a;
-        background-color: transparent;
-        border: 1px solid #e1e1e1;
-        border-radius: var(--#{$ns}-border-radius-base);
-
-        &.active {
-          border-color: #3d61e3;
-        }
-      }
-
-      li:not(.disabled):hover {
-        border-color: var(--#{$ns}-color-primary);
-      }
-
-      .is-active {
-        border: 1px solid var(--#{$ns}-color-primary);
-      }
-    }
-
-    .#{$ns}-pagination__jump {
-      .#{$ns}-pagination__goto {
-        margin-right: 5px;
-        font-size: 0;
-
-        &::after {
-          font-size: 14px;
-          content: "跳转至";
-        }
-      }
-
-      .#{$ns}-pagination__classifier {
-        margin-left: 5px;
-      }
-
-      .#{$ns}-pagination__editor {
-        width: 40px;
-      }
-    }
-  }
-}
-
-.customize-form {
-  &[class*="#{$cs}"] {
-    &.#{$cs} {
-      &-bold-title {
-        .title-input {
-          .#{$ns}-input__inner {
-            font-weight: 600;
-            color: #0f0f0f;
-          }
-          .#{$ns}-textarea__inner {
-            color: #0f0f0f;
-          }
-        }
-      }
-    }
-  }
-  &.#{$ns}-form {
-    &.#{$ns}-form--inline .#{$ns}-form-item {
-      margin-right: 10px;
-    }
-  }
-}
-
-.customize-tabs {
-  &.#{$ns}-tabs {
-    .#{$ns}-tabs__header {
-      .#{$ns}-tabs__nav-wrap {
-        &::after {
-          height: 1px;
-        }
-      }
-    }
-    .#{$ns}-tabs__item {
-      --#{$ns}-tabs-header-height: 36px;
-
-      font-size: 14px;
-      color: #7784a1;
-
-      &.is-active {
-        font-weight: bold;
-        color: #272e40;
-      }
-    }
-    .#{$ns}-tabs__active-bar {
-      height: 3px;
-    }
-  }
-}
-
-// TODO: 自定义组件样式
-// 如果page-main下有 el-tabs 是
-.customize-page-main {
-  padding-top: 0 !important;
-
-  .#{$ns}-tabs {
-    position: sticky;
-    top: 0;
-    z-index: 10;
-
-    .#{$ns}-tabs__header {
-      position: relative;
-      margin: 0;
-
-      .#{$ns}-tabs__nav-wrap {
-        overflow: inherit;
-
-        .#{$ns}-tabs__nav {
-          .#{$ns}-tabs__item {
-            box-sizing: content-box;
-            min-width: 48px;
-            height: 40px;
-            padding: 0 16px;
-            line-height: 40px;
-            text-align: center;
-
-            &:nth-child(2) {
-              padding-left: 8px;
-            }
-          }
-        }
-
-        &::after {
-          display: none;
-        }
-      }
-
-      $g-main-wrap-padding: 10px;
-
-      &::after {
-        position: absolute;
-        bottom: 0;
-        left: -$g-main-wrap-padding;
-        z-index: 1;
-        width: calc(100% + 2 * #{$g-main-wrap-padding});
-        height: 1px;
-        content: "";
-        background-color: #e4e7ed;
-      }
-    }
-
-    .#{$ns}-tabs__content {
-      padding-right: 2px;
-      padding-left: 5px;
-      margin-top: 11px;
-    }
-  }
-}
-
-// search-wrap
-.customize-search-form.#{$ns}-form--inline {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  padding: 10px 10px 0;
-  margin: 10px 0;
-  background-color: #f5f5f5;
-
-  .#{$ns}-form-item {
-    display: inline-flex;
-    flex: 0 1 auto;
-    margin-bottom: 10px !important;
-
-    &.last-box {
-      margin-right: 0;
-      margin-left: auto;
-    }
-  }
-
-  .new-line-placeholder {
-    margin-right: 100%;
-  }
-}
-
-.customize-driver {
-  box-shadow: unset;
-
-  .driver-popover-arrow {
-    &::before {
-      position: absolute;
-      content: "";
-      background-color: #fff;
-    }
-
-    &.driver-popover-arrow-side-left {
-      &::before {
-        left: -3px;
-        width: var(--popover-offset);
-        height: 1px;
-        transform: translateY(-50%);
-      }
-    }
-
-    &.driver-popover-arrow-side-right {
-      &::before {
-        right: -3px;
-        width: var(--popover-offset);
-        height: 1px;
-        transform: translateY(-50%);
-      }
-    }
-
-    &.driver-popover-arrow-side-top {
-      &::before {
-        top: -1px;
-        width: 1px;
-        height: var(--popover-offset);
-        transform: translateX(-50%);
-      }
-    }
-
-    &.driver-popover-arrow-side-bottom {
-      &::before {
-        bottom: -1px;
-        width: 1px;
-        height: var(--popover-offset);
-        transform: translateX(-50%);
-      }
-    }
-  }
-
-  .driver-popover-footer {
-    .driver-popover-navigation-btns {
-      button {
-        color: var(--#{$ns}-color-primary);
-        background-color: transparent;
-        border: none;
-      }
-    }
-  }
-}