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

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/picker/picker.scss

@@ -2,22 +2,27 @@
 .nut-theme-dark {
   .nut-picker {
     background-color: $dark6;
+
     &__title {
       color: $dark1;
     }
+
     &__confirm-btn {
-      color: $dark1;
+      color: $picker-ok-color;
       cursor: pointer;
     }
+
     .nut-picker__control {
       background-color: $dark10;
     }
+
     .nut-picker-indicator {
       background-color: $dark7;
       z-index: 0;
       border-top: 1px solid $gray2;
       border-bottom: 1px solid $gray2;
     }
+
     .nut-picker-mask {
       position: absolute;
       top: 0;
@@ -35,16 +40,19 @@
       background-repeat: no-repeat;
       z-index: 3;
     }
+
     .nut-picker-list {
       .nut-picker-roller {
         &-item {
           color: $white;
+
           &-tile {
             color: $white;
           }
         }
       }
     }
+
     &-roller-mask {
       background-image: linear-gradient(
           180deg,
@@ -61,6 +69,7 @@
     &-content {
       color: $dark1;
     }
+
     &-item {
       color: $dark1;
     }
@@ -71,25 +80,37 @@
   background-color: $background-color3;
   width: 100%;
 }
+
 .nut-picker__control {
   display: flex;
   height: 56px;
   font-size: 16px;
   align-items: center;
   justify-content: space-between;
-  padding: 15px;
+  padding: $picker-bar-button-padding;
 
   .nut-picker__cancel-btn {
-    color: #fa2c19;
+    color: $picker-cancel-color;
+    font-size: $picker-bar-cancel-font-size;
+  }
+
+  .nut-picker__confirm-btn {
+    color: $picker-ok-color;
+    font-size: $picker-bar-ok-font-size;
   }
+
   .nut-picker__title {
     flex: 1;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     text-align: center;
+    color: $picker-bar-title-color;
+    font-size: $picker-bar-title-font-size;
+    font-weight: $picker-bar-title-font-weight;
   }
 }
+
 .nut-picker__panel {
   display: flex;
   position: relative;
@@ -97,10 +118,13 @@
   .nut-picker-indicator {
     position: absolute;
     top: 108px;
-    height: 36px;
+    height: $picker-item-height;
     width: 100%;
-    border-top: 1px solid #ececec;
-    border-bottom: 1px solid #ececec;
+    border: $picker-item-active-line-border;
+    border-left: 0;
+    border-right: 0;
+    color: $picker-item-text-color;
+    font-size: $picker-item-text-font-size;
     z-index: 3;
   }
 }
@@ -108,12 +132,14 @@
 .nut-picker-list {
   flex: 1;
   position: relative;
-  height: 252px;
+  height: $picker-list-height;
   overflow: hidden;
   text-align: center;
+
   .nut-picker-list-panel {
     transform-style: preserve-3d;
   }
+
   .nut-picker-mask {
     position: absolute;
     top: 0;
@@ -132,31 +158,36 @@
     position: absolute;
     top: 108px;
     width: 100%;
-    height: 36px;
+    height: $picker-item-height;
   }
+
   .nut-picker-content {
     background: #fff;
     z-index: 2;
     overflow: hidden;
   }
+
   .nut-picker-item,
   .nut-picker-roller-item {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    height: 36px;
-    line-height: 36px;
-    color: #262626;
-    font-size: 14px;
+    height: $picker-item-height;
+    line-height: $picker-item-height;
+    color: $picker-item-text-color;
+    font-size: $picker-item-text-font-size;
     text-align: center;
   }
+
   .nut-picker-item {
     font-size: 16px;
     background: #fff;
   }
+
   .nut-picker-roller {
     z-index: 1;
     transform-style: preserve-3d;
+
     .nut-picker-roller-item {
       backface-visibility: hidden;
       -moz-backface-visibility: hidden;
@@ -167,20 +198,22 @@
       color: $gray1;
     }
 
-    .nut-picker-roller-item-tile {
+    .nut-picker-roller-item-title {
       display: block;
       width: 100%;
       height: 36px;
       line-height: 36px;
       color: $gray1;
-      font-size: 14px;
+      font-size: $picker-bar-title-font-size;
     }
+
     .nut-picker-roller-item-hidden {
       visibility: hidden;
       opacity: 0;
     }
   }
 }
+
 .nut-picker-placeholder {
   height: 1px;
 }

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;