@nutui/nutui-react-taro 1.4.9-beta.1 → 1.4.9-beta.2

package/dist/packages/datepicker/datepicker.scss

@@ -1,3 +0,0 @@
-
-.nut-datepicker {
-}

package/dist/packages/form/form.scss

@@ -1,3 +1,4 @@
+
 .form-layout-right .nut-form-item__label {
   text-align: right;
   font-size: 14px;

package/dist/packages/formitem/formitem.scss

@@ -1,3 +1,4 @@
+
 .nut-theme-dark {
   .nut-form-item {
     &__body {
@@ -9,8 +10,10 @@
     }
   }
 }
+
 .nut-form-item {
   display: flex;
+
   &::before {
     position: absolute;
     box-sizing: border-box;
@@ -21,6 +24,7 @@
     left: 16px;
     transform: scaleX(0);
   }
+
   &.error {
     &.line {
       &::before {
@@ -40,6 +44,7 @@
     display: inline-block !important;
     word-wrap: break-word;
     text-align: $form-item-label-text-align;
+
     .required {
       &::before {
         content: '*';
@@ -48,16 +53,20 @@
       }
     }
   }
+
   &__body {
     flex: 1;
     display: flex !important;
     flex-direction: column;
+
     &__slots {
       text-align: $form-item-body-slots-text-align;
+
       .nut-input {
         padding: 0;
         border: 0;
       }
+
       .nut-input-text {
         font-size: $form-item-body-font-size;
         text-align: $form-item-body-input-text-align;
@@ -68,16 +77,20 @@
         text-decoration: none;
         background: transparent;
       }
+
       .nut-range-container {
         min-height: 24px;
       }
+
       .nut-textarea {
         padding: 0 !important;
+
         .nut-textarea__textarea {
           text-align: $form-item-body-input-text-align;
         }
       }
     }
+
     &__tips {
       text-align: $form-item-tip-text-align;
       font-size: $form-item-tip-font-size;

package/dist/packages/menuitem/menuitem.scss

@@ -2,6 +2,7 @@
 .nut-theme-dark {
   .nut-menu-item__content {
     background: $dark6;
+
     .nut-menu-item__option {
       color: $dark1;
     }
@@ -48,6 +49,7 @@
   z-index: 2052;
   overflow: hidden;
 }
+
 .nut-menu-item__wrap-up {
   bottom: $menu-bar-line-height;
 }
@@ -100,11 +102,13 @@
   opacity: 0;
   transform: translate(0, 30px);
 }
+
 .menu-item-up-enter-done {
   opacity: 1;
   transform: translate(0, 0);
   transition: all 100ms;
 }
+
 .menu-item-up-exit {
   opacity: 1;
   transition: all 100ms;

package/dist/packages/navbar/navbar.scss

@@ -1,30 +1,39 @@
+
 .nut-theme-dark {
   .nut-navbar {
     background: $dark5;
     color: $dark1;
     box-shadow: none;
+
     .title {
       color: $dark1;
     }
+
     &__left {
       color: $dark2;
+
       i {
         color: $dark2 !important;
       }
     }
+
     &__right {
       color: $dark1;
     }
+
     &--border {
       border-bottom: none;
     }
   }
+
   .nut-tabs__titles-item__text {
     background: $dark5;
     color: $dark1;
   }
 }
+
 .nut-navbar {
+  width: $navbar-width;
   position: relative;
   display: flex;
   align-items: center;
@@ -37,26 +46,32 @@
   color: $navbar-color;
   margin-bottom: $navbar-margin-bottom;
   overflow: hidden;
+
   &:active::before {
     opacity: 0.1;
   }
+
   &--border {
     border-bottom: 1px solid #eee;
   }
+
   &--fixed {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
   }
+
   &--placeholder {
     display: inline-block;
     width: 100%;
   }
+
   &--safe-area-inset-top {
     padding-top: constant(safe-area-inset-top);
     padding-top: env(safe-area-inset-top);
   }
+
   &--clickable {
     &::before {
       position: absolute;
@@ -87,6 +102,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+
     .title {
       min-width: $navbar-title-width;
       font-size: $navbar-title-font;
@@ -97,23 +113,28 @@
       -webkit-line-clamp: 1;
       overflow: hidden;
     }
+
     &.icon {
       .icon {
         margin: $navbar-title-icon-margin;
       }
     }
+
     .nut-icon {
       display: inline;
     }
+
     &-desc {
       font-size: $cell-title-desc-font;
     }
+
     .text__title {
       display: inline-block;
     }
 
     .nut-tabs__titles {
       background: $white;
+
       &-item__text {
         color: $title-color;
       }
@@ -140,6 +161,7 @@
     cursor: pointer;
     padding: 0 16px;
   }
+
   &__right {
     font-size: $cell-desc-font;
     color: $gray2;
@@ -151,9 +173,11 @@
     align-items: center;
     padding: 0 16px;
     cursor: pointer;
+
     .rightIcon {
       margin-left: 16px;
     }
+
     .leftIcon {
       margin-left: 16px;
     }

package/dist/packages/numberkeyboard/numberkeyboard.scss

@@ -1,3 +1,4 @@
+
 .nut-theme-dark {
   .nut-numberkeyboard {
     background-color: $dark5;

package/dist/packages/searchbar/searchbar.scss

@@ -1,3 +1,4 @@
+
 .nut-theme-dark {
   .nut-searchbar {
     background: $dark5;

package/dist/packages/sidenavbar/sidenavbar.scss

@@ -1,10 +1,13 @@
+
 .nut-theme-dark {
   .nut-sidenavbar {
     background-color: $dark4;
+
     &__title {
       background: $dark4;
       color: $white;
     }
+
     &__content {
       .nut-subsidenavbar__list {
         .nut-subsidenavbar__title {
@@ -16,6 +19,7 @@
 }
 
 $nutSidenavbarItemHeight: 40px;
+
 .nut-sidenavbar {
   color: #1d1d21;
   font-size: 14px;
@@ -23,6 +27,7 @@ $nutSidenavbarItemHeight: 40px;
   overflow: auto;
   display: block;
   background-color: $gray6;
+
   .arrow-icon {
     position: absolute;
     width: 0;
@@ -31,31 +36,37 @@ $nutSidenavbarItemHeight: 40px;
     top: 18px;
     cursor: pointer;
   }
+
   .arrow-down {
     border-top: 4px solid #909ca4;
     border-left: 4px solid transparent;
     border-right: 4px solid transparent;
   }
+
   .arrow-up {
     border-bottom: 4px solid #909ca4;
     border-left: 4px solid transparent;
     border-right: 4px solid transparent;
   }
+
   &__head {
     height: $nutSidenavbarItemHeight;
     background: #eeeff2;
     padding: 10px;
   }
+
   &__title {
     height: $nutSidenavbarItemHeight;
     padding: 10px 8px 10px 20px;
     background: $gray4;
     color: $gray1;
   }
+
   &__content {
     position: relative;
     display: block;
   }
+
   &__list {
     &.nutShow {
       .nut-sidenavbar__content {
@@ -63,6 +74,7 @@ $nutSidenavbarItemHeight: 40px;
         overflow: inherit;
       }
     }
+
     &.nutHide {
       .nut-sidenavbar__content {
         height: 0;
@@ -73,6 +85,7 @@ $nutSidenavbarItemHeight: 40px;
 
   .border-bt {
     position: relative;
+
     &:after {
       content: '';
       position: absolute;

package/dist/packages/skeleton/skeleton.scss

@@ -1,10 +1,13 @@
+
 .nut-skeleton {
   display: inline-block;
   position: relative;
   overflow: hidden;
   vertical-align: middle;
+
   .nut-skeleton-content {
     display: flex;
+
     .avatarClass {
       margin-right: 20px;
       background: rgb(239, 239, 239);
@@ -16,6 +19,7 @@
       height: 100%;
       background: rgb(239, 239, 239);
       margin-top: 10px;
+
       &:last-child {
         width: 70% !important;
       }
@@ -28,6 +32,7 @@
     .skeleton-content-line {
       display: flex;
       flex-direction: column;
+
       .skeleton-title {
         width: 30%;
         height: 15px;
@@ -52,10 +57,12 @@
     background-repeat: no-repeat;
     animation: backpos 2s ease-in-out 0s infinite;
   }
+
   @keyframes backpos {
     0% {
       background-position-x: -500px;
     }
+
     to {
       background-position-x: calc(500px + 100%);
     }

package/dist/packages/table/table.scss

@@ -1,6 +1,8 @@
+
 .nut-theme-dark {
   .nut-table {
     margin-bottom: 3px;
+
     &__main {
       color: $dark1;
       background-color: $dark5;
@@ -25,12 +27,15 @@
         }
       }
     }
+
     .nut-table__nodata {
       background-color: $dark6;
+
       .nut-table__nodata {
         color: $dark1;
       }
     }
+
     &__summary {
       color: $dark1;
       background-color: $dark4;
@@ -42,12 +47,14 @@
     }
   }
 }
+
 .nut-table {
   display: flex;
   width: 100%;
   flex-direction: column;
   font-size: $font-size-2;
   color: $title-color;
+
   &__main {
     display: table;
     width: 100%;
@@ -55,34 +62,41 @@
     overflow-x: hidden;
     color: $title-color;
     background-color: $background-color3;
+
     &--striped {
       .nut-table__main__head {
         &__tr {
           background-color: $table-tr-even-bg-color;
         }
       }
+
       .nut-table__main__body {
         &__tr:nth-child(odd) {
           background-color: $table-tr-odd-bg-color;
         }
       }
+
       .nut-table__main__body {
         &__tr:nth-child(even) {
           background-color: $table-tr-even-bg-color;
         }
       }
     }
+
     &__head,
     &__body {
       &__tr {
         display: table-row;
+
         &__th {
           display: table-cell;
           padding: $table-cols-padding;
         }
+
         &__td {
           display: table-cell;
           padding: $table-cols-padding;
+
           &__nodata {
             display: flex;
             height: 50px;
@@ -90,34 +104,42 @@
             justify-content: center;
           }
         }
+
         &--border {
           border: 1px solid $table-border-color;
         }
+
         &--alignleft,
         &--align {
           text-align: left;
         }
+
         &--aligncenter {
           text-align: center;
         }
+
         &--alignright {
           text-align: right;
         }
       }
     }
+
     &__head {
       display: table-header-group;
     }
+
     &__body {
       display: table-row-group;
     }
   }
+
   &__summary {
     display: flex;
     align-items: center;
     height: 30px;
     padding: $table-cols-padding;
   }
+
   &__nodata {
     color: $title-color;
     background-color: $background-color3;

package/dist/packages/tabs/tabs.scss

@@ -49,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;
 
@@ -109,6 +109,49 @@
         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;
+            }
+          }
+        }
+      }
+    }
   }
 
   .nut-tabs__titles {
@@ -169,7 +212,6 @@
       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;

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;
     }