@aloudata/aloudata-design 0.2.6 → 0.3.0

package/es/Select/style/index.less

@@ -1,565 +1,315 @@
-// @import './variables.less';
-@import '../../style/index.less';
-
-// @component-prefix:ant-;
-.font(@style: normal, @weight: 400, @size: @size-font-base) {
-  font-weight: @weight;
-  font-size: @size;
-  font-family: @font-family-primary;
-  font-style: @style;
-}
+/* stylelint-disable no-descending-specificity */
+@import './select.less';
+@import './variables.less';
 
-// The prefix to use for components classes
-@component-prefix: ant;
-@ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
-// vertical margins
-@margin-lg: 24px; // containers
-@margin-md: 16px; // small containers and buttons
-@margin-sm: 12px; // Form controls and items
-@margin-xs: 8px; // small items
-@margin-xss: 4px; // more small
-
-@ald-border-color-base: #a3adc8;
-@border-color-split: hsv(0, 0, 94%); // split border inside a component
-@border-color-inverse: #fff;
-@border-width-base: 1px; // width of the border for a component
-@border-style-base: solid; // style of a components border
-@border-color-disabled: #dfe2ed;
-@select-option-height-lg: @ald-height-lg;
-@select-option-line-height-lg: 16px;
-@select-option-height-base: @ald-height-base;
-@select-option-height-sm: @ald-height-sm;
-@line-height-base: 1.5715;
-// @mode: compact;
-
-// Base Text
-// @text-color-base: #313e75;
-// @text-color-disabled: #313e75;
-@text-font-base-size: 14px;
-// @text-lint-height-base: 22px;
-
-//Background Color
-// @background-color-base: #fff;
-// @background-color-disabled: #f7f8fc;
-
-@ald-prefix: ~'@{component-prefix}';
-@select-prefix-cls-legacy: ~'@{component-prefix}-select-legacy';
-@select-input-fontSize: @text-font-base-size;
-@select-input-fontSize-sm: @text-font-base-size - 2px;
-// @color-font-list-primary-normal: @palette-black-6; // $color-black-6
-// @color-box-shadow-focused: #c0c4d3;
-// @color-background-matchHeight: #ffcf3c;
-.@{select-prefix-cls-legacy} {
-  position: relative;
-  display: inline-block;
-  min-width: 120px;
-  padding: 0 36px 0 11px;
-  overflow: hidden;
-  border: 1px solid transparent;
-  border-radius: @ald-border-radius-base;
-  outline: none;
-  cursor: pointer;
-  transition: all 0.2s;
-  user-select: none;
-
-  &-selector-wrap {
-    display: flex;
-    align-items: center;
-  }
+.ald-select {
+  .ant-select-selector:not(.ant-select-customize-input) {
+    background-color: @selector-bgColor-default;
+    border-color: @selector-borderColor-default;
 
-  &-selector {
-    box-sizing: border-box;
-    width: 100%;
-    min-height: @ald-height-base;
-    max-height: @ald-height-base * 3.5px;
-    overflow-x: hidden;
-    overflow-y: auto;
-    border-radius: @ald-border-radius-base;
-    transition: all 0.2s;
-
-    &::-webkit-scrollbar {
-      width: 2px;
-      background-color: transparent;
+    .ald-select-selector-prefix {
+      color: @selector-labelColor-default;
     }
 
-    // &::-webkit-scrollbar-thumb {
-    //   // background: @palette-gray-3;
-    // }
-  }
-
-  &-selector-label {
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-    max-width: 50%;
-    height: @ald-height-base;
-    margin-right: @ald-select-label-margin-right;
-    overflow: hidden;
-    color: @NL30;
-    font-size: @select-input-fontSize;
-    line-height: @ald-height-base;
-  }
-
-  &-values-wrapper {
-    position: relative;
-    width: 100%;
-    color: @NL0;
-    line-height: @ald-height-base;
-  }
-
-  &-bordered {
-    border: 1px solid @NL90;
-  }
-
-  &-bordered:not(&-disabled):not(&-focused):hover {
-    border: 1px solid @B40;
-  }
-
-  // &:not(&-bordered):not(&-disabled):hover {
-  //   // background-color: @palette-gray-2;
-  //   // border: 1px solid transparent;
-  // }
-
-  &-focused:not(&-bordered):not(&-disabled) {
-    // background-color: @color-background-tree-normal;
-    // border: 1px solid @color-background-button-primary-hover;
-    border-radius: 4px;
-  }
-
-  &-focused {
-    // box-shadow: 0 0 6px 0 @color-box-shadow-focused;
+    .ant-select-selection-placeholder {
+      color: @selector-placeholderColor-default;
+    }
 
-    .@{select-prefix-cls-legacy} {
-      &-item-all,
-      &-item {
-        opacity: 0.5;
-      }
+    .ant-select-selection-item {
+      color: @selector-valueColor-default;
+      background-color: initial;
+      border: none;
     }
   }
 
-  &-arrow,
-  &-close {
-    position: absolute;
-    top: 0;
-    right: 8px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    // color: @color-text-table-empty;
-    // transition: all 0.2s;
+  &.ant-select-disabled .ant-select-selector:not(.ant-select-customize-input) {
+    background-color: @selector-bgColor-disabled;
+    border-color: @selector-borderColor-disabled;
+    cursor: initial;
 
-    &-focused {
-      transform: rotate(-180deg);
+    .ald-select-selector-prefix {
+      color: @selector-labelColor-disabled;
     }
-  }
 
-  &-item {
-    max-width: 100%;
-    overflow: hidden;
-    font-size: @select-input-fontSize;
-    transition: margin 0.2s;
-
-    &-text {
-      overflow: hidden;
-      color: @NL0;
-      font-size: @select-input-fontSize-sm;
-      line-height: 22px;
-      white-space: nowrap;
-      text-overflow: ellipsis;
+    .ant-select-selection-placeholder {
+      color: @selector-placeholderColor-disabled;
     }
-  }
-
-  &-tag-item {
-    max-width: 100%;
-    margin-right: 8px;
-    margin-bottom: 5px;
-  }
 
-  &-item-all {
-    display: inline-flex;
-    width: 100%;
-    font-size: @select-input-fontSize;
-    transition: margin 0.2s;
-    .@{select-prefix-cls-legacy}-overflow-item {
-      white-space: nowrap;
-
-      &:not(:first-child)::before {
-        content: ',';
-      }
-
-      &-rest {
-        &::before {
-          content: '' !important;
-        }
-      }
+    .ant-select-selection-item {
+      color: @selector-valueColor-disabled;
+      background-color: initial;
+      border: none;
     }
 
-    &-text {
-      overflow: hidden;
-      font-size: @select-input-fontSize-sm;
-      line-height: 22px;
-      white-space: nowrap;
-      text-overflow: ellipsis;
+    input {
+      cursor: initial;
     }
   }
 
-  &-placeholder {
-    position: absolute;
-    top: 0;
-    left: 0;
-    color: @ald-select-placeholder-color;
-    font-size: @select-input-fontSize-sm;
-  }
-
-  &-input {
-    position: absolute;
-    top: 9px;
-    left: 0;
-    box-sizing: content-box;
-    padding: 0;
-    background: none;
-    border: none;
-    outline: none;
+  &.ant-select-multiple.ant-select-disabled.ant-select:not(.ant-select-customize-input) {
+    .ant-select-selector {
+      background-color: @selector-bgColor-disabled;
+      border-color: @selector-borderColor-disabled;
+      cursor: initial;
+    }
   }
 
-  &-input-tags {
-    position: relative;
-    top: 0;
-  }
+  &:not(.ant-select-disabled):hover,
+  &.ant-select.ant-select-focused:not(.ant-select-disabled) {
+    .ant-select-selector {
+      border-color: @selector-borderColor-active;
+      box-shadow: 0 0 0 0.5px @B60;
 
-  &-input-reference {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: -1;
-    visibility: hidden;
-  }
-
-  &-small {
-    border-radius: @ald-border-radius-sm;
-    .@{select-prefix-cls-legacy} {
-      &-selector {
-        min-height: @ald-height-sm;
-        max-height: @ald-height-sm * 3.5px;
-        border-radius: @ald-border-radius-sm;
+      &:focus-visible {
+        outline: none;
       }
 
-      &-selector-label {
-        height: @ald-height-sm;
-        color: @NL30;
-        font-size: @select-input-fontSize-sm;
-        line-height: @ald-height-sm;
+      .ald-select-selector-prefix {
+        color: @selector-labelColor-active;
       }
 
-      &-values-wrapper {
-        font-size: @select-input-fontSize-sm;
-        line-height: @ald-height-sm;
+      .ant-select-selection-placeholder {
+        color: @selector-placeholderColor-active;
       }
+    }
 
-      &-item-all {
-        font-size: @select-input-fontSize-sm;
-
-        &-text {
-          font-size: @select-input-fontSize-sm;
-        }
+    &.ant-select-open {
+      .ant-select-selection-overflow,
+      .ant-select-selection-item {
+        color: @selector-valueColor-active;
+        background-color: initial;
+        border: none;
       }
+    }
 
-      &-placeholder {
-        font-size: @select-input-fontSize-sm;
-      }
+    &:not(.ant-select-open) {
+      .ant-select-selector {
+        border-color: @selector-borderColor-default;
+        box-shadow: none;
 
-      &-tag-item {
-        margin-bottom: 2px;
-      }
+        &:focus-visible {
+          outline: none;
+        }
 
-      &-input {
-        top: 6px;
-      }
+        .ald-select-selector-prefix {
+          color: @selector-labelColor-default;
+        }
 
-      &-input-tags {
-        top: 0;
+        .ant-select-selection-placeholder {
+          color: @selector-placeholderColor-default;
+        }
       }
     }
   }
 
-  &-default {
-    height: 28px;
-    .@{select-prefix-cls-legacy} {
-      &-selector {
-        height: 26px;
-        min-height: 26px;
-      }
-
-      &-values-wrapper {
-        font-size: 12px;
-        line-height: 26px;
-      }
-
-      &-selector-label {
-        height: 26px;
-        font-size: 12px;
-      }
+  .ant-select-clear,
+  .ant-select-arrow {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: @NL50;
+    font-size: inherit;
+  }
+
+  &.ant-select-disabled {
+    .ant-select-clear,
+    .ant-select-arrow {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: @NL60;
+      font-size: inherit;
     }
   }
 
-  &-large {
-    height: @ald-height-lg;
-    .@{select-prefix-cls-legacy} {
-      &-selector {
-        min-height: @ald-height-lg;
-        max-height: @ald-height-lg * 3.5px;
-      }
+  &.ald-select-large {
+    font-size: @selector-fontSize-large;
 
-      &-selector-label {
-        height: @ald-height-lg;
-        font-size: @select-input-fontSize;
-        line-height: @ald-height-lg;
-      }
+    .ant-select-selector {
+      align-items: center;
+      height: @selector-height-large;
+      padding: 0 @selector-paddingHorizontal-large;
+      line-height: @selector-lineHeight-large;
+      border-radius: @selector-borderRadius-large;
 
-      &-values-wrapper {
-        line-height: @ald-height-lg;
+      .ald-select-selector-prefix {
+        display: flex;
+        align-items: center;
+        margin-right: @prefix-marginRight-large;
       }
 
-      &-tag-item {
-        margin-bottom: 7px;
+      .ant-select-selection-item,
+      .ant-select-selection-placeholder {
+        line-height: @selector-lineHeight-large;
       }
+    }
+  }
 
-      &-input {
-        top: 11px;
-      }
+  &.ald-select-middle {
+    font-size: @selector-fontSize-middle;
 
-      &-input-tags {
-        top: 0;
-      }
+    .ant-select-selector {
+      align-items: center;
+      height: @selector-height-middle;
+      padding: 0 @selector-paddingHorizontal-middle;
+      line-height: @selector-lineHeight-middle;
+      border-radius: @selector-borderRadius-middle;
 
-      &-placeholder {
-        font-size: @select-input-fontSize;
+      .ald-select-selector-prefix {
+        display: flex;
+        align-items: center;
+        margin-right: @prefix-marginRight-middle;
       }
 
-      &-item-text {
-        font-size: @select-input-fontSize;
+      .ant-select-selection-item,
+      .ant-select-selection-placeholder {
+        line-height: @selector-lineHeight-middle;
       }
     }
   }
 
-  &-disabled {
-    color: @NL80;
-    text-shadow: none;
-    background: @NL95;
-    cursor: not-allowed !important;
-    .@{select-prefix-cls-legacy} {
-      &-selector-label {
-        color: inherit;
-      }
+  &.ald-select-small {
+    font-size: @selector-fontSize-small;
+
+    .ant-select-selector {
+      align-items: center;
+      height: @selector-height-small;
+      padding: 0 @selector-paddingHorizontal-small;
+      line-height: @selector-lineHeight-small;
+      border-radius: @selector-borderRadius-small;
 
-      &-values-wrapper {
-        color: inherit;
+      .ald-select-selector-prefix {
+        display: flex;
+        align-items: center;
+        margin-right: @prefix-marginRight-small;
       }
 
-      &-placeholder {
-        color: inherit;
+      .ant-select-selection-item,
+      .ant-select-selection-placeholder {
+        line-height: @selector-lineHeight-small;
       }
     }
   }
 
-  &-bordered&-disabled {
-    border-color: @NL90;
-  }
+  &.ald-select-mini {
+    font-size: @selector-fontSize-mini;
 
-  // &-focused&-bordered {
-  //   // border: 1px solid @color-border-input-active;
-  // }
+    .ant-select-selector {
+      align-items: center;
+      height: @selector-height-mini;
+      padding: 0 @selector-paddingHorizontal-mini;
+      line-height: @selector-lineHeight-mini;
+      border-radius: @selector-borderRadius-mini;
 
-  // &-focused:not(&-bordered) {
-  //   background-color: @palette-gray-2;
-  // }
+      .ald-select-selector-prefix {
+        display: flex;
+        align-items: center;
+        margin-right: @prefix-marginRight-mini;
+      }
 
-  &-single {
-    .@{select-prefix-cls-legacy} {
-      &-item {
-        display: inline-flex;
+      .ant-select-selection-item,
+      .ant-select-selection-placeholder {
+        line-height: @selector-lineHeight-mini;
       }
     }
   }
 
-  // rc-trigger
-  &-dropdown {
-    position: absolute;
-    padding: 4px 0;
-    background: @BG100;
-    border: 1px solid @NL90;
-    border-radius: @ald-border-radius-base;
-    box-shadow: @shadow-actionsheet;
-    &.@{select-prefix-cls-legacy}-hidden {
-      display: none;
+  &.ant-select-multiple {
+    .ant-select-selection-search {
+      margin-inline-start: 0;
     }
-  }
 
-  // &-search-highlight {
-  //   // background-color: @color-background-matchHeight;
-  // }
+    .ant-select-selection-overflow {
+      .ant-select-selection-overflow-item {
+        display: flex;
+        align-items: center;
+        line-height: inherit;
+
+        .ant-select-selection-item {
+          height: auto;
+          margin-top: 0;
+
+          .ant-select-selection-item-content {
+            display: flex;
+            align-items: center;
+            margin: 0;
+          }
+
+          .ant-select-selection-item-remove {
+            display: flex;
+            align-items: center;
+            margin: 0;
+            font-size: inherit;
+          }
+        }
 
-  &-not-found {
-    width: 100%;
-    // color: @color-text-table-empty;
-    text-align: center;
+        .ald-select-multiple-tag-default {
+          color: inherit;
 
-    &-icon {
-      margin-bottom: 40px;
-    }
-  }
+          &::before {
+            content: '，';
+          }
+        }
 
-  &-gap-10 {
-    width: 10px;
-  }
+        .ant-select-selection-search-input {
+          height: inherit;
+          line-height: inherit;
+          caret-color: @B60;
+        }
+      }
 
-  &-gap-10 + div {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
+      .ant-select-selection-overflow-item:first-of-type {
+        .ald-select-multiple-tag-default::before {
+          content: '';
+        }
+      }
+    }
 
-  &-button {
-    margin-right: 8px;
+    .ant-select-selector::after {
+      height: 1.5715em;
+    }
   }
-
-  // &-button-active {
-  //   color: @color-text-button-text-hover;
-  //   background: @palette-gray-4;
-  //   border-color: @palette-gray-4;
-  // }
 }
 
-.@{select-prefix-cls-legacy}-list {
-  box-sizing: border-box;
-  overflow-y: scroll;
-  overflow-y: overlay;
-  // min-width: 160px;
-  // padding: 16px 0 16px 8px;
-  outline: none;
-}
+.ald-select-dropdown {
+  .ald-select-item {
+    display: flex;
+    align-items: center;
+    margin: 0 4px;
+    padding: 0;
+    font-size: 14px;
+    background-color: @select-option-bgColor;
+    border-radius: 6px;
 
-.@{select-prefix-cls-legacy}-list-option {
-  position: relative;
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  max-width: 100%;
-  height: @select-option-height-lg;
-  // margin-top: 4px;
-  padding: 8px 12px 8px 36px;
-  overflow: hidden;
-  color: @NL0;
-  font-size: 12px;
-  line-height: @select-option-line-height-lg;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  cursor: pointer;
-  transition: background-color 0.3s ease;
-  user-select: none;
-
-  &-icon,
-  &-all-icon {
-    position: absolute;
-    top: 50%;
-    left: 12px;
-    margin-top: -2px;
-    color: @B40;
-    transform: translateY(-50%);
-
-    &-checkbox {
-      .@{component-prefix}-checkbox-inner {
-        border-color: @NL90;
-        // background-color: @BG100;
-        border-radius: 4px;
-        box-shadow: none;
-        // &::after {
-        //   // border-color: @B40;
-        // }
-      }
+    &:hover {
+      background-color: @select-option-bgColor-hover;
     }
-    // .@{component-prefix}-checkbox-indeterminate {
-    //   .@{component-prefix}-checkbox-inner {
-    //     &::after {
-    //       border-color: green;
-    //     }
-    //   }
-    // }
-  }
-
-  &-isHover {
-    background-color: @NL97;
-  }
 
-  &-nomargin {
-    margin-top: 0;
-  }
+    .ald-select-single-check {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      // width: 26px;
+      width: 1em;
+      margin-right: 8px;
+      margin-left: 12px;
+    }
 
-  &-disabled {
-    color: @NL80;
-    text-shadow: none;
-    background-color: @white;
-    cursor: not-allowed !important;
-  }
+    .ald-select-multiple-checkbox {
+      width: 16px;
+      height: 16px;
+      margin-right: 10px;
+      margin-left: 14px;
+      pointer-events: none;
 
-  &-isSelected,
-  &-all-isSelected {
-    color: @NL0;
-    font-weight: normal;
-    // background-color: @NL97;
-  }
-}
+      .ant-checkbox {
+        top: 0;
+      }
+    }
 
-.@{select-prefix-cls-legacy}-list-option-all {
-  position: relative;
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  max-width: 100%;
-  height: @select-option-height-lg;
-  // margin-right: 8px;
-  padding: 8px 12px 8px 36px;
-  overflow: hidden;
-  color: @NL0;
-  font-size: 12px;
-  line-height: @select-option-line-height-lg;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  cursor: pointer;
-  transition: background-color 0.3s ease;
-  user-select: none;
-
-  &:not(&-disabled):hover {
-    background-color: @NL97;
+    .ant-select-item-option-content {
+      color: @select-option-color;
+      font-weight: 400;
+    }
   }
 }
-
-.@{select-prefix-cls-legacy}-footer-button-group {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  box-sizing: border-box;
-  width: 100%;
-  height: 52px;
-  margin-top: 4px;
-  padding: 0 20px;
-}
-
-.@{select-prefix-cls-legacy}-footer-button-group:first-child button {
-  margin-right: 8px;
-}
-
-.@{select-prefix-cls-legacy}-list-search-bar {
-  box-sizing: border-box;
-  max-width: 100%;
-  padding: 0 20px 16px 12px;
-}
-
-.@{select-prefix-cls-legacy}-list-group {
-  padding: 6px 12px;
-  // color: @color-background-button-primary-hover;
-  font-weight: normal;
-  font-size: 12px;
-  line-height: 20px;
-}