@maxax/ui 1.1.53 → 1.1.55

package/dist/theme-chalk/components/basicButtonImportMax.scss

@@ -0,0 +1,118 @@
+@use '../base/config' as *;
+@use '../base/var' as *;
+@use '../base/utils' as *;
+@use '../base/function' as *;
+
+@include b('basic-button-max-preview') {
+  --basic-button-import-max-name: 'basic-button-import-max';
+
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+@include b('basic-button-import-max-modal') {
+  @include e('upload-icon') {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  @include e('upload-icon-svg') {
+    width: 48px;
+    height: 48px;
+    color: rgb(var(--primary-color, 100, 108, 255));
+  }
+
+  @include e('upload-text') {
+    margin-top: 16px;
+  }
+
+  @include e('tips') {
+    margin-top: 16px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  @include e('footer') {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  @include e('footer-left') {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  @include e('footer-text') {
+    // display: none;
+
+    @include m('checked') {
+      color: rgb(239, 68, 68);
+    }
+  }
+
+  @include e('footer-switch') {
+    // display: none;
+  }
+
+  @include e('footer-right') {
+    display: flex;
+    gap: 4px;
+  }
+
+  @include e('footer-btn') {
+    margin-right: 4px;
+  }
+
+  @include e('preview-table') {
+    width: 100%;
+    min-height: 200px;
+  }
+
+  @include e('preview-count') {
+    display: inline-flex;
+    align-items: center;
+    gap: 12px;
+    font-size: 14px;
+    margin-bottom: 8px;
+  }
+
+  @include e('total-count') {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    color: rgb(var(--primary-color, 100, 108, 255));
+    border-radius: 4px;
+    font-weight: 500;
+
+    &::before {
+      content: '';
+      width: 6px;
+      height: 6px;
+      background: rgb(var(--primary-color, 100, 108, 255));
+      border-radius: 50%;
+    }
+  }
+
+  @include e('error-count') {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    color: rgb(239, 68, 68);
+    border-radius: 4px;
+    font-weight: 500;
+
+    &::before {
+      content: '';
+      width: 6px;
+      height: 6px;
+      background: rgb(239, 68, 68);
+      border-radius: 50%;
+    }
+  }
+
+}

package/dist/theme-chalk/components/basicCard.scss

@@ -0,0 +1,8 @@
+@use '../base/config' as *;
+@use '../base/var' as *;
+@use '../base/utils' as *;
+@use '../base/function' as *;
+
+@include b('basic-card') {
+  --basic-card-name: 'basic-card';
+}

package/dist/theme-chalk/components/basicCascader.scss

@@ -0,0 +1,8 @@
+@use '../base/config' as *;
+@use '../base/var' as *;
+@use '../base/utils' as *;
+@use '../base/function' as *;
+
+@include b('basic-cascader') {
+  --basic-cascader-name: 'basic-cascader';
+}

package/dist/theme-chalk/components/basicCheckbox.scss

@@ -0,0 +1,197 @@
+@use '../base/config' as *;
+@use '../base/var' as *;
+@use '../base/utils' as *;
+@use '../base/function' as *;
+
+@include b('basic-checkbox') {
+  --basic-checkbox-name: 'basic-checkbox';
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding-left: 5px;
+  font-size: 14px;
+  line-height: unset;
+  cursor: pointer;
+
+  & > input[type='checkbox'] {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 0;
+    height: 0;
+    opacity: 0;
+  }
+
+  & > input[type='checkbox']:focus-visible + &-icon-hover:before {
+    background-color: rgb(var(--primary-color, 100, 108, 255));
+  }
+
+  @include e('label') {
+    margin-left: 8px;
+    color: getCssVar('color-text', 'base');
+  }
+
+  @include e('icon') {
+    position: relative;
+    box-sizing: border-box;
+    width: 14px;
+    height: 14px;
+    border-radius: 2px;
+    border: 1px solid rgb(var(--primary-color, 100, 108, 255));
+    background-color: getCssVar('fill-color', 'base');
+    user-select: none;
+
+    &:after {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      display: block;
+      width: 6px;
+      height: 2px;
+      background: getCssVar('fill-color', 'base');
+      border-radius: 0.5px;
+      transform: translate(-50%) translateY(-50%) scale(0);
+      content: '';
+    }
+  }
+
+  @include e('icon-check') {
+    position: relative;
+    display: block;
+    width: 8px;
+    height: 100%;
+    margin: 0 auto;
+    color: getCssVar('fill-color', 'base');
+    transform: scale(0);
+    transform-origin: center 75%;
+  }
+
+  &:hover {
+    @include e('icon-hover') {
+      &::before {
+        background-color: rgb(var(--primary-color, 100, 108, 255));
+      }
+    }
+
+    @include e('icon') {
+      border-color: rgb(var(--primary-color, 100, 108, 255));
+      transition:
+        border-color 0.1s cubic-bezier(0, 0, 1, 1),
+        transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1);
+    }
+  }
+
+  &.is-checked {
+    &:hover {
+      @include e('icon') {
+        transition: transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1);
+        background-color: rgb(var(--primary-color, 100, 108, 255));
+        border-color: transparent;
+      }
+
+      @include e('icon-check') {
+        transform: scale(1);
+        transition: transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1);
+      }
+
+      @include e('icon-hover') {
+        &::before {
+          background-color: transparent;
+        }
+      }
+    }
+
+    @include e('icon') {
+      background-color: rgb(var(--primary-color, 100, 108, 255));
+      border-color: transparent;
+    }
+
+    @include e('icon-check') {
+      transform: scale(1);
+      transition: transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1);
+    }
+  }
+
+  &.is-indeterminate {
+    &:hover {
+      @include e('icon') {
+        transition: transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1);
+        background-color: rgb(var(--primary-color, 100, 108, 255));
+        border-color: transparent;
+      }
+
+      @include e('icon-hover') {
+        &::before {
+          background-color: transparent;
+        }
+      }
+    }
+
+    @include e('icon') {
+      background-color: rgb(var(--primary-color, 100, 108, 255));
+      border-color: transparent;
+
+      svg {
+        transform: scale(0);
+      }
+
+      &:after {
+        transform: translate(-50%) translateY(-50%) scale(1);
+        transition: transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1);
+      }
+    }
+  }
+
+  &.is-disabled {
+    cursor: not-allowed;
+
+    &:hover {
+      @include e('mask') {
+        border-color: getCssVar('disabled', 'border');
+      }
+
+      @include e('icon') {
+        border-color: getCssVar('disabled', 'border');
+      }
+
+      @include e('icon-hover') {
+        &::before {
+          background-color: transparent;
+        }
+      }
+    }
+
+    @include e('icon') {
+      border-color: getCssVar('disabled', 'border');
+      background-color: getCssVar('disabled', 'bg');
+    }
+
+    @include e('icon-hover') {
+      cursor: not-allowed;
+    }
+
+    @include e('label') {
+      color: getCssVar('color-text', 'base');
+    }
+
+    @include e('icon-check') {
+      color: getCssVar('disabled', 'text');
+    }
+  }
+
+  &.is-disabled.is-checked {
+    @include e('icon') {
+      background-color: getCssVar('disabled', 'bg');
+      border-color: transparent;
+    }
+
+    &:hover {
+      @include e('icon') {
+        background-color: getCssVar('disabled', 'bg');
+        border-color: transparent;
+      }
+    }
+  }
+}

package/dist/theme-chalk/components/basicCheckboxGroup.scss

@@ -0,0 +1,22 @@
+@use '../base/config' as *;
+@use '../base/var' as *;
+@use '../base/utils' as *;
+@use '../base/function' as *;
+
+@include b('basic-checkbox-group') {
+  --basic-checkbox-group-name: 'basic-checkbox-group';
+
+  display: inline-block;
+
+  @include b('basic-checkbox') {
+    margin-right: 16px;
+  }
+
+  @include is('vertical') {
+    @include b('basic-checkbox') {
+      display: flex;
+      margin-right: 0;
+      line-height: 32px;
+    }
+  }
+}

package/dist/theme-chalk/components/basicCol.scss

@@ -0,0 +1,18 @@
+@use '../base/config' as *;
+@use '../base/var' as *;
+@use '../base/utils' as *;
+@use '../base/function' as *;
+@use '../base/col' as *;
+
+@include b('basic-col') {
+  --col-name: 'basic-col';
+
+  position: relative;
+  max-width: 100%;
+  min-height: 1px;
+}
+
+@each $size in $col-sizes {
+  @include col-size($size);
+  @include col-size-responsive($size);
+}

package/dist/theme-chalk/components/basicCountTo.scss

@@ -0,0 +1,8 @@
+@use '../base/config' as *;
+@use '../base/var' as *;
+@use '../base/utils' as *;
+@use '../base/function' as *;
+
+@include b('basic-count-to') {
+  --basic-count-to-name: 'basic-count-to';
+}

package/dist/theme-chalk/components/basicDatePicker.scss

@@ -0,0 +1,8 @@
+@use '../base/config' as *;
+@use '../base/var' as *;
+@use '../base/utils' as *;
+@use '../base/function' as *;
+
+@include b('basic-date-picker') {
+  --basic-date-picker-name: 'basic-date-picker';
+}

package/dist/theme-chalk/components/basicDragVerify.scss

@@ -0,0 +1,75 @@
+@use '../base/config' as *;
+@use '../base/var' as *;
+@use '../base/utils' as *;
+@use '../base/function' as *;
+
+@include b('basic-drag-verify') {
+  --basic-drag-verify-name: 'basic-drag-verify';
+
+  position: relative;
+  overflow: hidden;
+  border: 1px solid getCssVar('border-color', 'base');
+  background-color: getCssVar('disabled', 'bg');
+  text-align: center;
+
+  @include e('bar') {
+    position: absolute;
+    width: 0;
+    height: 36px;
+    background-color: rgb(var(--success-color));
+
+    &.to-left {
+      width: 0 !important;
+      transition: width 0.3s;
+    }
+  }
+
+  @include e('content') {
+    position: absolute;
+    top: 0;
+    animation: slidetounlock 3s infinite;
+    background-clip: text;
+    background-color: -webkit-gradient(linear, left top, right top, color-stop(0, #333), color-stop(0.4, #333), color-stop(0.5, #fff), color-stop(0.6, #333), color-stop(1, #333));
+    font-size: 12px;
+    user-select: none;
+    text-size-adjust: none;
+
+    &.success {
+      -webkit-text-fill-color: #fff;
+    }
+
+    & > * {
+      -webkit-text-fill-color: #333;
+    }
+  }
+
+  @include e('action') {
+    display: flex;
+    position: absolute;
+    top: 0;
+    left: 0;
+    align-items: center;
+    justify-content: center;
+    background-color: getCssVar('fill-color', 'base');
+    cursor: move;
+
+    &__icon {
+      cursor: inherit;
+    }
+
+    &.to-left {
+      left: 0 !important;
+      transition: left 0.3s;
+    }
+  }
+}
+
+@keyframes slidetounlock {
+  0% {
+    background-position: -120px 0;
+  }
+
+  100% {
+    background-position: 120px 0;
+  }
+}

package/dist/theme-chalk/components/basicDrawer.scss

@@ -0,0 +1,12 @@
+@use '../base/config' as *;
+@use '../base/var' as *;
+@use '../base/utils' as *;
+@use '../base/function' as *;
+
+@include b('basic-drawer') {
+  --basic-drawer-name: 'basic-drawer';
+
+  .ml-4 {
+    margin-left: 8px;
+  }
+}

package/dist/theme-chalk/components/basicDrawerFooter.scss

@@ -0,0 +1,13 @@
+@use '../base/config' as *;
+@use '../base/var' as *;
+@use '../base/utils' as *;
+@use '../base/function' as *;
+
+@include b('basic-drawer-footer') {
+  --basic-drawer-footer-name: 'basic-drawer-footer';
+
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}

package/dist/theme-chalk/components/basicEditBatch.scss

@@ -0,0 +1,62 @@
+@use '../base/config' as *;
+@use '../base/var' as *;
+@use '../base/utils' as *;
+@use '../base/function' as *;
+
+@include b('basic-edit-batch') {
+  --basic-edit-batch-name: 'basic-edit-batch';
+
+  display: flex;
+  align-items: center;
+
+  &.is-disabled {
+    display: none;
+  }
+
+  @include e('select') {
+    width: 100px;
+  }
+
+  @include b('basic-edit-batch-item') {
+    flex: 1;
+    display: flex;
+    padding: 0 12px;
+
+    @include e('item-container') {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      width: 100%;
+      flex: 1;
+    }
+
+    @include e('content') {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      max-width: 100%;
+    }
+
+    @include e('content-inner') {
+      flex: 1;
+      max-width: 100%;
+    }
+
+    @include e('content-suffix') {
+      margin-left: 8px;
+    }
+
+    @include e('label-help-message') {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+  }
+
+  @include b('basic-edit-batch-action') {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    justify-content: flex-end;
+  }
+}

package/dist/theme-chalk/components/basicFontIcon.scss

@@ -0,0 +1,8 @@
+@use '../base/config' as *;
+@use '../base/var' as *;
+@use '../base/utils' as *;
+@use '../base/function' as *;
+
+@include b('basic-font-icon') {
+  --basic-font-icon-name: 'basic-font-icon';
+}

package/dist/theme-chalk/components/basicForm.scss

@@ -0,0 +1,61 @@
+@use '../base/config' as *;
+@use '../base/var' as *;
+@use '../base/utils' as *;
+@use '../base/function' as *;
+
+@include b('basic-form') {
+  &.is-bordered {
+    border: 1px solid getCssVar('border-color', 'base');
+    margin-bottom: 12px;
+    background-color: getCssVar('fill-color', 'base');
+  }
+
+  &.is-card {
+    padding: 16px 16px 0 16px;
+    margin-bottom: 12px;
+    background-color: getCssVar('fill-color', 'base');
+  }
+
+  @include b('basic-form-action') {
+    --basic-form-action-name: 'basic-form-action';
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+
+    @include e('reset-btn') {
+      margin-left: 4px;
+    }
+
+    @include e('submit-btn') {
+      margin-left: 4px;
+    }
+
+    @include e('advance-btn') {
+      margin-left: 4px;
+    }
+  }
+
+  @include b('basic-form-item') {
+    @include e('content') {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      max-width: 100%;
+    }
+
+    @include e('content-inner') {
+      flex: 1;
+      max-width: 100%;
+    }
+
+    @include e('content-suffix') {
+      margin-left: 8px;
+    }
+
+    @include e('label-help-message') {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+  }
+}

package/dist/theme-chalk/components/basicGradientTitle.scss

@@ -0,0 +1,49 @@
+@use '../base/config' as *;
+@use '../base/var' as *;
+@use '../base/utils' as *;
+@use '../base/function' as *;
+
+@include b('basic-gradient-title') {
+  --basic-gradient-title-name: 'basic-gradient-title';
+
+  width: 100%;
+  margin: 20px auto;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: 11px;
+  padding-bottom: 11px;
+  backdrop-filter: blur(4px);
+  background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.67) 23%, rgba(255, 255, 255, 0.67) 79%, rgba(255, 255, 255, 0) 100%),
+    linear-gradient(90deg, rgba(144, 215, 255, 0) 0%, rgba(115, 205, 255, 0.3) 23%, rgba(255, 240, 162, 0.3) 50%, rgba(255, 160, 129, 0.3) 73%, rgba(255, 101, 51, 0) 100%);
+
+  @include e('text') {
+    text-align: center;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+
+  @include e('text-inner') {
+    color: transparent;
+    font-weight: 500;
+    background-clip: text;
+    background-image: linear-gradient(to right, #00a4ff, #ffa900, #ed6336);
+  }
+
+  .line {
+    height: 1px;
+    right: 0;
+    left: 0;
+    position: absolute;
+    background: linear-gradient(90deg, rgba(0, 164, 255, 0) 0%, rgba(0, 164, 255, 0.5) 23%, rgba(213, 201, 140, 0.5) 50%, rgba(237, 99, 54, 0.5) 73%, rgba(237, 99, 54, 0) 100%);
+  }
+
+  @include e('line-top') {
+    top: 0;
+  }
+
+  @include e('line-bottom') {
+    bottom: 0;
+  }
+}

package/dist/theme-chalk/components/basicHelp.scss

@@ -0,0 +1,16 @@
+@use '../base/config' as *;
+@use '../base/var' as *;
+@use '../base/utils' as *;
+@use '../base/function' as *;
+
+@include b('basic-help') {
+  --basic-help-name: 'basic-help';
+
+  @include inline-flex-center();
+}
+
+@include b('basic-help-trigger') {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}