@nutui/nutui-react 1.4.8 → 1.4.9-beta.0

package/dist/packages/tabs/tabs.scss

@@ -14,10 +14,6 @@
 
         &.active {
           color: $dark1;
-
-          .nut-tabs__titles-item__text {
-            color: $dark1;
-          }
         }
 
         &__text {
@@ -53,7 +49,7 @@
       box-sizing: border-box;
       flex-direction: column;
       height: 100%;
-      padding: 10px 0 !important;
+      padding: 0 !important;
       width: $tabs-vertical-titles-width;
       flex-shrink: 0;
 
@@ -62,15 +58,15 @@
         overflow-y: auto;
       }
 
-      &-item {
+      .nut-tabs__titles-item {
         height: $tabs-vertical-titles-item-height;
         flex: none;
 
-        &__smile {
+        .nut-tabs__titles-item__smile {
           transition: width 0.3s ease;
         }
 
-        &__line {
+        .nut-tabs__titles-item__line {
           bottom: none;
           transform: translate(0, -50%);
           transition: height 0.3s ease;
@@ -79,13 +75,13 @@
         }
 
         &.active {
-          background-color: $background-color3;
+          background-color: $tabs-horizontal-titles-item-active-background-color;
 
           .nut-tabs__titles-item__line {
             left: 10px;
-            width: 3px;
-            background: $tabs-vertical-tab-line-color;
+            width: $tabs-vertical-titles-item-active-line-width;
             height: $tabs-vertical-titles-item-active-line-height;
+            background: $tabs-vertical-tab-line-color;
           }
 
           .nut-tabs__titles-item__smile {
@@ -113,9 +109,52 @@
         height: 100%;
       }
     }
+
+    .horizontal {
+      .nut-tabs__titles {
+        display: flex;
+        flex-direction: row;
+        padding: 0 !important;
+        width: 100%;
+
+        .nut-tabs__titles-item {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex: 1 0 auto;
+
+          .nut-tabs__titles-item__smile,
+          .nut-tabs__titles-item__line {
+            position: absolute;
+            transition: width 0.3s ease;
+            width: 0;
+            height: 0;
+            content: ' ';
+            bottom: $tabs-horizontal-tab-line-bottom;
+            left: 50%;
+            transform: translate(-50%, 0);
+            overflow: hidden;
+            border-radius: $tabs-horizontal-tab-line-border-radius;
+            opacity: $tabs-horizontal-tab-line-opacity;
+          }
+
+          &.active {
+            color: $tabs-titles-item-active-color;
+            font-weight: $tabs-titles-item-active-font-weight;
+
+            .nut-tabs__titles-item__line {
+              content: ' ';
+              width: $tabs-horizontal-titles-item-active-line-width;
+              height: $tabs-horizontal-titles-item-active-line-height;
+              background: $tabs-horizontal-tab-line-color;
+            }
+          }
+        }
+      }
+    }
   }
 
-  &__titles {
+  .nut-tabs__titles {
     height: $tabs-horizontal-titles-height;
     padding: 0 10px;
     display: flex;
@@ -169,33 +208,26 @@
       }
     }
 
-    &-item {
+    .nut-tabs__titles-item {
       position: relative;
       font-size: $tabs-titles-item-font-size;
       min-width: $tabs-horizontal-titles-item-min-width;
-      width: 0;
       display: flex;
       align-items: center;
       justify-content: center;
       flex: 1 0 auto;
       color: $tabs-titles-item-color;
 
-      &-left-align {
-        flex: none;
-      }
-
-      &__text {
-        color: $gray1;
+      .nut-tabs__titles-item__text {
+        text-align: center;
 
         &.ellipsis {
           @include oneline-ellipsis();
         }
-
-        text-align: center;
       }
 
-      &__smile,
-      &__line {
+      .nut-tabs__titles-item__smile,
+      .nut-tabs__titles-item__line {
         position: absolute;
         transition: width 0.3s ease;
         width: 0;
@@ -206,9 +238,10 @@
         transform: translate(-50%, 0);
         overflow: hidden;
         border-radius: $tabs-horizontal-tab-line-border-radius;
+        opacity: $tabs-horizontal-tab-line-opacity;
       }
 
-      &__smile {
+      .nut-tabs__titles-item__smile {
         .nut-icon {
           position: absolute;
           font-size: 12px;
@@ -218,25 +251,22 @@
         }
       }
 
+      &.nut-tabs__titles-item-left-align {
+        flex: none;
+      }
+
       &.disabled {
         color: $disable-color;
-
-        .nut-tabs__titles-item__text {
-          color: $disable-color;
-        }
       }
 
       &.active {
-        font-weight: 600;
-
-        .nut-tabs__titles-item__text {
-          color: $gray1;
-        }
+        color: $tabs-titles-item-active-color;
+        font-weight: $tabs-titles-item-active-font-weight;
 
         .nut-tabs__titles-item__line {
           content: ' ';
           width: $tabs-horizontal-titles-item-active-line-width;
-          height: 3px;
+          height: $tabs-horizontal-titles-item-active-line-height;
           background: $tabs-horizontal-tab-line-color;
         }
       }

package/dist/packages/timeselect/timeselect.scss

@@ -1,14 +1,18 @@
+
 .nut-theme-dark {
   .nut-timeselect {
     background-color: $dark6;
+
     &__title {
       background-color: $dark6;
       color: $dark1;
     }
+
     &__content {
       &-left {
         background-color: $dark5;
         color: $dark1;
+
         .nut-timepannel-active {
           background-color: $dark6;
           color: $dark1;
@@ -16,9 +20,11 @@
       }
     }
   }
+
   .nut-timedetail__item {
     background-color: $dark4;
     color: $dark1;
+
     &-active {
       background-color: $dark-brand-color;
     }
@@ -53,6 +59,7 @@
     overflow: auto;
     background-color: $background-color2;
     color: $title-color;
+
     .nut-timepannel-active {
       background-color: red;
     }

package/dist/packages/uploader/uploader.scss

@@ -1,9 +1,11 @@
 @import '../../styles/mixins/text-ellipsis.scss';
+
 .nut-theme-dark {
   .nut-uploader {
     // background-color:  $gray2;
     &__preview {
       margin-bottom: 0;
+
       &-img {
         i {
           color: $dark1 !important;
@@ -11,16 +13,19 @@
       }
     }
   }
+
   .nut-progress {
     .nut-progress-text__inner {
       color: $white !important;
     }
   }
+
   .nut-uploader__preview-list {
     background: $dark5;
     color: $dark1;
   }
 }
+
 .nut-uploader {
   position: relative;
   display: flex;
@@ -32,12 +37,31 @@
 
   &__upload {
     position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     background: $uploader-background;
     width: $uploader-picture-width;
     height: $uploader-picture-height;
+    border: $uploader-picture-border;
+    border-radius: $uploader-picture-border-radius;
+  }
+
+  &__icon {
     display: flex;
-    align-items: center;
+    flex-direction: column;
     justify-content: center;
+    align-items: center;
+
+    i {
+      opacity: $uploader-picture-icon-opacity;
+      margin-bottom: $uploader-picture-icon-margin-bottom;
+    }
+
+    &-tip {
+      font-size: $uploader-picture-icon-tip-font-size;
+      color: $uploader-picture-icon-tip-color;
+    }
   }
 
   &__input {
@@ -49,49 +73,67 @@
     overflow: hidden;
     cursor: pointer !important;
     opacity: 0;
+
     &:disabled {
       cursor: not-allowed;
     }
   }
 
+  &__upload-disabled {
+    background: $uploader-background-disabled;
+
+    .nut-uploader__icon {
+      i {
+        opacity: $uploader-picture-icon-opacity-disabled;
+        margin-bottom: $uploader-picture-icon-margin-bottom;
+      }
+    }
+  }
+
   &__preview {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-right: 10px;
-    margin-bottom: 10px;
+    position: relative;
+    margin-right: $uploader-preview-margin-right;
+    margin-bottom: $uploader-preview-margin-bottom;
     box-shadow: 0 2px 10px 0 rgb(0 0 0 / 10%);
+
     &__progress {
       position: absolute;
       left: 0;
       top: 0;
-      width: 100%;
-      height: 100%;
-      background: rgba(0, 0, 0, 0.6);
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
+      width: 100%;
+      height: 100%;
+      background: $uploader-preview-progress-background;
+      border-radius: $uploader-picture-border-radius;
+
+      i {
+        margin-bottom: $uploader-picture-icon-margin-bottom;
+      }
+
       &__msg {
         color: #fff;
         font-size: 12px;
-        margin-top: 6px;
       }
     }
+
     &.list {
       width: 100%;
       margin-right: 0px;
       margin-bottom: 0px;
       margin-top: 10px;
     }
+
     &-list {
       width: 100%;
       height: 32px;
       display: flex;
       flex-direction: column;
       position: relative;
-      padding-right: 20px;
-      background-color: $gray4;
+      background-color: $gray5;
+
       .nut-uploader__preview-img__file__name {
         -webkit-line-clamp: 1;
         padding: 2px;
@@ -103,49 +145,60 @@
         right: 4px;
         top: 6px;
       }
+
       .nut-progress {
         position: absolute;
         left: 0;
         right: 0;
         bottom: 0;
+
         .nut-progress-outer {
           height: 2px !important;
         }
       }
     }
+
+    .close {
+      position: absolute;
+      right: $uploader-preview-close-right;
+      top: $uploader-preview-close-top;
+      transform: translate(50%, -50%);
+    }
+
     &-img {
       position: relative;
       width: $uploader-picture-width;
       height: $uploader-picture-height;
+      border-radius: $uploader-picture-border-radius;
+
       i {
         color: $gray1;
       }
-      .close {
-        position: absolute;
-        right: 0;
-        top: 0;
-        transform: translate(50%, -50%);
-      }
+
       .tips {
         position: absolute;
         bottom: 0;
         left: 0;
-        right: 0;
-        text-align: center;
-        display: flex;
-        align-items: center;
-        justify-content: center;
         font-size: 12px;
         color: $white;
-        height: 0px;
-        transition: height 0.3s;
-        background: rgba(0, 0, 0, 0.54);
+        text-align: center;
+        box-sizing: border-box;
+        height: $uploader-preview-tips-height;
+        line-height: $uploader-preview-tips-height;
+        border-radius: $uploader-picture-border-radius;
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+        padding: $uploader-preview-tips-padding;
+        background: $uploader-preview-tips-background;
         @include oneline-ellipsis();
       }
+
       &__c {
-        height: 100%;
-        width: 100%;
+        max-width: 100%;
+        max-height: 100%;
+        border-radius: 6px;
       }
+
       &__file {
         height: 100%;
         width: 100%;
@@ -159,12 +212,15 @@
           width: 100%;
           font-size: 12px;
           color: $text-color;
+
           &.error {
             color: red !important;
           }
+
           &.success {
             color: #1890ff !important;
           }
+
           .nut-icon-link {
             &::before {
               margin-left: -25%;
@@ -172,6 +228,7 @@
               transform: none;
             }
           }
+
           @include moreline-ellipsis();
         }
       }