oxy-uni-ui 1.2.3 → 2.1.0

package/components/oxy-select/index.scss

@@ -8,18 +8,22 @@
   flex: 1;
   box-sizing: border-box;
   position: relative;
+  text-align: left;
   .oxy-select__label {
     margin: auto 0;
-    margin-right: $-input-cell-padding;
+    color: $-select-label-color;
+    margin-right: $-select-label-gap;
+    box-sizing: border-box;
+    font-size: $-select-fs;
   }
   .oxy-select__icon {
     position: absolute;
     right: 0;
-    font-size: $-input-icon-size;
-    color: $-input-icon-color;
+    font-size: $-select-icon-size;
+    color: $-select-icon-color;
   }
   .oxy-select__icon-clear {
-    color: $-input-clear-color;
+    color: $-select-clear-icon-color;
   }
   .oxy-select__icon-arrow {
     transition: transform .2s;
@@ -32,32 +36,47 @@
     flex: 1;
   }
   .oxy-select__wrapper {
-    font-size: $-input-fs;
-    border: 1px solid $-input-border-color;
+    font-size: $-select-fs;
+    color: $-select-text-color;
+    border: 1px solid $-color-border;
     box-sizing: border-box;
-    border-radius: 4px;
-    padding: 0 5px;
-    padding-left: $-input-cell-padding;
+    border-radius: $-select-wrapper-radius;
+    padding: 0 $-select-wrapper-padding-x;
     position: relative;
     /* #ifndef APP-NVUE */
     display: flex;
     user-select: none;
     /* #endif */
     flex-direction: row;
-    align-items: center;
-    border-bottom: solid 1px $-input-border-color;
     width: 100%;
     flex: 1;
-    min-height: $-input-inner-height;
+    min-height: $-select-wrapper-min-height;
+    transition: all 0.2s;
+
+    &:hover:not(.is-disabled):not(.is-readonly) {
+      border-color: $-color-theme;
+    }
+
+    &.is-focus:not(.is-disabled):not(.is-readonly) {
+      border-color: $-color-theme;
+      box-shadow: $-select-focus-shadow;
+    }
 
     &.is-disabled {
-      background-color: $-input-disabled-color;
+      background-color: $-color-bg;
+      border-color: $-color-border-light;
       cursor: not-allowed;
+      color: $-color-tip;
+    }
+
+    &.is-readonly {
+      background-color: transparent;
+      border-color: transparent;
+      padding: 0;
     }
   }
   .oxy-select__input-box {
     width: 100%;
-    // height: $-input-inner-height;
     position: relative;
     /* #ifndef APP-NVUE */
     display: flex;
@@ -65,71 +84,99 @@
     flex: 1;
     flex-direction: row;
     align-items: center;
+    overflow: hidden;
   }
 
   .oxy-select__tags {
     width: 100%;
     display: flex;
     flex-wrap: wrap;
-    &-item {
-      font-size: 12px;
-      border: 1px solid #d9ecff;
-      border-radius: 4px;
-      white-space: nowrap;
-      height: 24px;
-      padding: 0 4px;
-      line-height: 22px;
-      box-sizing: border-box;
-      margin: 2px 2px;
-      display: flex;
-      max-width: 100%;
-      align-items: center;
-      background-color: #f4f4f5;
-      border-color: #e9e9eb;
-      color: #909399;
-      &:first-child {
-        margin-left: 0;
-      }
-      &-text {
-        font-size: 12px;
-        white-space: nowrap;
-        line-height: 22px;
-        color: #909399;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-    }
-    .oxy-select__icon-error{
-      margin-left: 4px;
+    min-width: 0;
+    padding: 12rpx 0;
+  }
+
+  .oxy-select__tags-item {
+    display: inline-flex;
+    min-width: 0;
+    max-width: 100%;
+    margin: 8rpx 8rpx 8rpx 0;
+  }
+
+  :deep(.oxy-select__tags-item-tag.oxy-tag.is-round) {
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+    min-height: 56rpx;
+    max-width: 100%;
+    height: 56rpx;
+    padding: 0 20rpx;
+    background-color: $-color-bg;
+    border-color: $-color-border-light;
+    border-radius: $-select-tag-radius;
+    color: $-color-secondary;
+    font-size: $-select-tag-font-size;
+    line-height: 52rpx;
+    transition: all 0.2s;
+
+    &:hover {
+      border-color: $-color-theme;
+      color: $-color-theme;
     }
   }
 
+  :deep(.oxy-select__tags-item-tag .oxy-tag__text) {
+    display: inline-block;
+    min-width: 0;
+    max-width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 1.2;
+    vertical-align: middle;
+  }
+
+  :deep(.oxy-select__tags-item-tag .oxy-tag__close) {
+    margin-left: 12rpx;
+    margin-right: 0;
+    height: auto;
+    line-height: 1;
+    color: $-color-aid;
+  }
+
+  :deep(.oxy-select__tags-item-tag .oxy-tag__close:active) {
+    color: $-color-danger;
+  }
+
+  .oxy-select__tags-item-text {
+    font-size: $-select-tag-font-size;
+  }
+
   .oxy-select__input {
     flex: 1;
-    font-size: 14px;
-    height: 22px;
-    line-height: 22px;
+    font-size: $-fs-content;
+    height: 52rpx;
+    line-height: 52rpx;
   }
 
   .oxy-select__input-plac {
-    color: $-input-placeholder-color;
+    color: $-color-tip;
   }
 
   .oxy-select__selector__down {
-    top: calc(100% + 12px);
+    top: calc(100% + 24rpx);
 
     .oxy-select__selector-arrow {
       transform: rotateX(0deg);
-      top: -6px;
+      top: -12rpx;
     }
   }
 
   .oxy-select__selector__upwards {
-    bottom: calc(100% + 12px);
+    bottom: calc(100% + 24rpx);
 
     .oxy-select__selector-arrow {
       transform: rotateX(180deg);
-      bottom: -6px;
+      bottom: -12rpx;
     }
   }
 
@@ -140,17 +187,50 @@
     position: absolute;
     left: 0;
     width: 100%;
-    background-color: #FFFFFF;
-    border: 1px solid #EBEEF5;
-    border-radius: 6px;
-    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-    z-index: 3;
-    padding: 4px 0;
+    background-color: $-color-white;
+    border: 1px solid $-color-border-light;
+    border-radius: $-select-dropdown-radius;
+    box-shadow: $-select-dropdown-shadow;
+    z-index: 100;
+    padding: 16rpx 0;
+    overflow: hidden;
+  }
+
+  .oxy-select__dropdown-transition {
+    .oxy-select__selector {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+      will-change: transform, opacity;
+      transition-property: opacity, transform;
+      transition-duration: 0.2s;
+      transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
+    }
+
+    .oxy-select__selector__down {
+      transform-origin: center top;
+    }
+
+    .oxy-select__selector__upwards {
+      transform-origin: center bottom;
+    }
+
+    &.oxy-fade-enter,
+    &.oxy-fade-leave-to {
+      .oxy-select__selector.oxy-select__selector__down {
+        opacity: 0;
+        transform: translateY(-12rpx) scale(0.98);
+      }
+
+      .oxy-select__selector.oxy-select__selector__upwards {
+        opacity: 0;
+        transform: translateY(12rpx) scale(0.98);
+      }
+    }
   }
 
   .oxy-select__selector-scroll {
     /* #ifndef APP-NVUE */
-    max-height: 200px;
+    max-height: 480rpx;
     box-sizing: border-box;
     /* #endif */
   }
@@ -159,36 +239,56 @@
   .oxy-select__selector-item {
     /* #ifndef APP-NVUE */
     display: flex;
-    // cursor: pointer;
     /* #endif */
-    line-height: $-input-inner-height;
-    font-size: 14px;
-    text-align: center;
-    padding: 0px 10px;
+    min-height: 88rpx;
+    line-height: 1.4;
+    font-size: $-fs-content;
+    padding: 20rpx 32rpx;
+    box-sizing: border-box;
+    transition: background-color 0.2s;
   }
 
   .oxy-select__selector-item {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    color: $-color-content;
+    cursor: pointer;
+
+    &:hover:not(.oxy-select__selector__disabled) {
+      background-color: $-color-bg;
+    }
+
+    &.oxy-select_selector-item_active {
+      color: $-color-theme;
+      background-color: $-select-active-bg;
+      font-weight: 500;
+    }
   }
 
-  .oxy-select__selector-empty:last-child,
-  .oxy-select__selector-item:last-child {
-    /* #ifndef APP-NVUE */
-    border-bottom: none;
-    /* #endif */
+  .oxy-select__selector__disabled {
+    color: $-color-tip;
+    cursor: not-allowed;
+    background-color: transparent !important;
   }
 
-  .oxy-select_selector-item_active {
-    color: $-color-theme;
-    font-weight: bold;
-    border-radius: 3px;
+  .oxy-select__loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 40rpx 0;
+    color: $-color-aid;
+    font-size: $-fs-secondary;
+
+    &-icon {
+      margin-right: 16rpx;
+      animation: rotate 1s linear infinite;
+    }
   }
 
-  .oxy-select__selector__disabled {
-    opacity: 0.4;
-    cursor: default;
+  @keyframes rotate {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
   }
 
   /* picker 弹出层通用的指示小三角 */
@@ -200,48 +300,61 @@
     height: 0;
     border-color: transparent;
     border-style: solid;
-    border-width: 6px;
+    border-width: 12rpx;
   }
 
   .oxy-select__selector-arrow {
-    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
+    filter: $-select-dropdown-filter-shadow;
 
     left: 10%;
-    margin-right: 3px;
+    margin-right: 8rpx;
     border-top-width: 0;
-    border-bottom-color: #EBEEF5;
+    border-bottom-color: $-color-border-light;
   }
 
   .oxy-select__selector-arrow::after {
     content: " ";
-    top: 1px;
-    margin-left: -6px;
+    top: 2rpx;
+    margin-left: -12rpx;
     border-top-width: 0;
-    border-bottom-color: #fff;
+    border-bottom-color: $-color-white;
   }
 
   .oxy-select__input-text {
-    // width: 280px;
-    width: 90%;
-    color: $-input-color;
+    width: 100%;
+    font-size: $-select-fs;
+    color: $-select-text-color;
+    outline: none;
+    border: none;
+    background: none;
     white-space: nowrap;
     text-overflow: ellipsis;
-    -o-text-overflow: ellipsis;
     overflow: hidden;
   }
 
   .oxy-select__input-selector {
     position: absolute;
     z-index: 1;
+    left: 0;
+    right: 60rpx;
+    width: auto;
+    &::-webkit-input-placeholder {
+      color: $-select-placeholder-color;
+    }
   }
 
   .oxy-select__input-filter {
     width: auto;
-    margin-left: 6px;
+    min-width: 80rpx;
+    margin-left: 8rpx;
+    flex: 1;
+    &::-webkit-input-placeholder {
+      color: $-select-placeholder-color;
+    }
   }
 
   .oxy-select__input-placeholder {
-    color: $-input-placeholder-color;
+    color: $-select-placeholder-color;
   }
 
   .oxy-select--mask {
@@ -252,4 +365,15 @@
     left: 0;
     z-index: 2;
   }
+
+  @include when(no-border) {
+    .oxy-select__wrapper {
+      border: 0;
+      padding: 0;
+      min-height: $-select-no-border-min-height;
+      &.is-focus:not(.is-disabled):not(.is-readonly) {
+        box-shadow: none;
+      }
+    }
+  }
 }