@nutui/nutui-react 2.3.0-beta.0 → 2.3.0-beta.1

package/dist/packages/collapseitem/collapseitem.scss

@@ -16,7 +16,7 @@
     display: none;
   }
 
-  &__header {
+  &-header {
     position: relative;
     display: flex;
     width: 100%;
@@ -41,13 +41,13 @@
     }
   }
 
-  &__title {
+  &-title {
     color: $collapse-item-color;
     display: flex;
     align-items: center;
   }
 
-  &__extra {
+  &-extra {
     flex: 1;
     display: flex;
     justify-content: flex-end;
@@ -58,14 +58,14 @@
     color: $collapse-item-extra-color;
   }
 
-  &__icon-box {
+  &-icon-box {
     display: flex;
     padding-right: 40px;
     position: relative;
     color: $color-text;
   }
 
-  &__icon {
+  &-icon {
     display: flex;
     align-items: center;
     position: absolute;
@@ -76,19 +76,19 @@
     transition: transform 0.3s;
   }
 
-  &__header.disabled {
+  &-header.disabled {
     color: $collapse-item-disabled-color;
 
-    .nut-collapse-item__title {
+    .nut-collapse-item-title {
       color: $collapse-item-disabled-color;
     }
 
-    .nut-collapse-item__icon {
+    .nut-collapse-item-icon {
       color: $collapse-item-disabled-color;
     }
   }
 
-  &__content {
+  &-content {
     overflow: hidden;
     display: block;
     color: $collapse-wrapper-content-color;

package/dist/packages/dialog/dialog.scss

@@ -14,7 +14,7 @@
     --nutui-overlay-zIndex: 1200;
   }
 
-  &__outer {
+  &-outer {
     position: fixed;
     max-height: 100%;
     overflow-y: auto;
@@ -32,7 +32,7 @@
     animation-duration: 0.3s;
   }
 
-  &__header {
+  &-header {
     display: block;
     text-align: center;
     font-size: $font-size-large;
@@ -41,7 +41,7 @@
     @include oneline-ellipsis();
   }
 
-  &__content {
+  &-content {
     width: 100%;
     margin: $dialog-content-margin;
     max-height: $dialog-content-max-height;
@@ -54,7 +54,7 @@
     text-align: $dialog-content-text-align;
   }
 
-  &__footer {
+  &-footer {
     display: flex;
     align-items: center;
     width: 100%;
@@ -67,11 +67,11 @@
         min-width: 100%;
         margin: 0;
 
-        &.nut-dialog__footer-ok {
+        &.nut-dialog-footer-ok {
           order: 1;
         }
 
-        &.nut-dialog__footer-cancel {
+        &.nut-dialog-footer-cancel {
           border: 0;
           color: $color-text;
           order: 2;
@@ -86,7 +86,7 @@
       min-width: $dialog-footer-button-min-width;
     }
 
-    &-cancel.nut-dialog__footer-cancel {
+    &-cancel.nut-dialog-footer-cancel {
       margin-right: $dialog-footer-cancel-margin-right;
     }
 

package/dist/packages/divider/divider.scss

@@ -17,9 +17,9 @@
     flex: 1;
   }
 
-  &__center,
-  &__left,
-  &__right {
+  &-center,
+  &-left,
+  &-right {
     &::before {
       margin-right: $divider-spacing;
     }
@@ -29,26 +29,26 @@
     }
   }
 
-  &__left {
+  &-left {
     &::before {
       max-width: $divider-side-width;
     }
   }
 
-  &__right {
+  &-right {
     &::after {
       max-width: $divider-side-width;
     }
   }
 
-  &__hairline {
+  &-hairline {
     &::before,
     &::after {
       transform: scaleY(0.5);
     }
   }
 
-  &__vertical {
+  &-vertical {
     position: relative;
     top: $divider-vertical-top;
     display: inline-block;

package/dist/packages/elevator/elevator.scss

@@ -4,7 +4,7 @@
   position: relative;
   overflow: hidden;
 
-  &__list {
+  &-list {
     display: block;
     position: relative;
     top: 0;
@@ -12,7 +12,7 @@
     font-size: $elevator-list-font-size;
     color: $elevator-list-color;
 
-    &__inner {
+    &-inner {
       height: 100%;
       width: 100%;
       display: block;
@@ -20,10 +20,10 @@
       overflow: auto;
     }
 
-    &__item {
+    &-item {
       display: block;
 
-      &__code {
+      &-code {
         display: flex;
         position: relative;
         height: $elevator-list-item-code-height;
@@ -37,20 +37,20 @@
         background-color: $elevator-list-item-code-background-color;
       }
 
-      &__name {
+      &-name {
         display: flex;
         align-items: center;
         padding: $elevator-list-item-padding;
         height: $elevator-list-item-name-height;
         line-height: $elevator-list-item-name-line-height;
 
-        &--highcolor {
+        &-highcolor {
           color: $color-primary;
         }
       }
     }
 
-    &__fixed {
+    &-fixed {
       width: 100%;
       position: absolute;
       top: 0;
@@ -68,7 +68,7 @@
     }
   }
 
-  &__code--current {
+  &-code-current {
     position: absolute;
     right: $elevator-list-item-code-current-right;
     top: $elevator-list-item-code-current-top;
@@ -82,7 +82,7 @@
     text-align: $elevator-list-item-code-current-text-align;
   }
 
-  &__bars {
+  &-bars {
     position: absolute;
     right: $elevator-bars-right;
     top: $elevator-bars-top;
@@ -95,12 +95,12 @@
     text-align: center;
     z-index: $elevator-bars-z-index;
 
-    &__inner {
-      &__item {
+    &-inner {
+      &-item {
         display: block;
         padding: $elevator-bars-inner-item-padding;
 
-        &--active {
+        &-active {
           font-weight: $font-weight-bold;
           color: $elevator-bars-active-color;
         }

package/dist/packages/form/form.scss

@@ -1,12 +1,12 @@
 
-.form-layout-right .nut-form-item__label {
+.form-layout-right .nut-form-item-label {
   text-align: right;
   font-size: 14px;
   padding-right: 24px;
   white-space: nowrap;
 }
 
-.form-layout-left .nut-form-item__label {
+.form-layout-left .nut-form-item-label {
   position: relative;
   text-align: left;
   font-size: 14px;
@@ -27,14 +27,14 @@
   white-space: nowrap;
 }
 
-.form-layout-top .nut-form-item__label {
+.form-layout-top .nut-form-item-label {
   padding-bottom: 4px;
   display: block;
   font-size: 14px;
   padding-right: 24px;
 }
 
-.form-layout-top .nut-form-item__body {
+.form-layout-top .nut-form-item-body {
   margin-left: 0;
   width: 100%;
 }

package/dist/packages/formitem/formitem.scss

@@ -11,7 +11,7 @@
     }
   }
 
-  &__label {
+  &-label {
     font-size: $form-item-label-font-size;
     font-weight: normal;
     width: $form-item-label-width;
@@ -30,12 +30,12 @@
     }
   }
 
-  &__body {
+  &-body {
     flex: 1;
     display: flex !important;
     flex-direction: column;
 
-    &__slots {
+    &-slots {
       text-align: $form-item-body-slots-text-align;
 
       .nut-input {
@@ -61,14 +61,14 @@
       .nut-textarea {
         padding: 0 !important;
 
-        .nut-textarea__textarea {
+        .nut-textarea-textarea {
           font: inherit;
           text-align: $form-item-body-input-text-align;
         }
       }
     }
 
-    &__tips {
+    &-tips {
       text-align: $form-item-tip-text-align;
       font-size: $form-item-tip-font-size;
       color: $form-item-error-message-color;

package/dist/packages/grid/grid.scss

@@ -4,7 +4,7 @@
   flex-wrap: wrap;
   border: 0 solid $grid-border-color;
 
-  &__border {
+  &-border {
     border-top-width: 1px;
     border-left-width: 1px;
   }

package/dist/packages/griditem/griditem.scss

@@ -5,7 +5,7 @@
 
   $block: &;
 
-  &__text {
+  &-text {
     color: $grid-item-text-color;
     font-size: $grid-item-text-font-size;
     line-height: 1.5;
@@ -13,7 +13,7 @@
     margin: $grid-item-text-margin 0 0 0;
   }
 
-  &__content {
+  &-content {
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
@@ -22,53 +22,53 @@
     background: $grid-item-content-bg-color;
     border: 0 solid $grid-border-color;
 
-    &--border {
+    &-border {
       border-right-width: 1px;
       border-bottom-width: 1px;
     }
 
-    &--surround {
+    &-surround {
       border-top-width: 1px;
       border-left-width: 1px;
     }
 
-    &--center {
+    &-center {
       align-items: center;
       justify-content: center;
     }
 
-    &--square {
+    &-square {
       position: absolute;
       top: 0;
       right: 0;
       left: 0;
     }
 
-    &--reverse {
+    &-reverse {
       flex-direction: column-reverse;
 
-      #{$block}__text {
+      #{$block}-text {
         margin: 0 0 $grid-item-text-margin;
       }
     }
 
-    &--horizontal {
+    &-horizontal {
       flex-direction: row;
 
-      #{$block}__text {
+      #{$block}-text {
         margin: 0 0 0 $grid-item-text-margin;
       }
     }
 
-    &--horizontal#{&}--reverse {
+    &-horizontal#{&}-reverse {
       flex-direction: row-reverse;
 
-      #{$block}__text {
+      #{$block}-text {
         margin: 0 $grid-item-text-margin 0 0;
       }
     }
 
-    &--clickable {
+    &-clickable {
       cursor: pointer;
 
       &::before {

package/dist/packages/imagepreview/imagepreview.scss

@@ -17,7 +17,7 @@
     left: 0;
     right: 0;
     background: transparent;
-    color: $color-title;
+    color: $white;
 
     .arrow {
       position: absolute;

package/dist/packages/infiniteloading/infiniteloading.scss

@@ -21,8 +21,8 @@
         display: flex;
         justify-content: center;
         align-items: center;
-        width: $pulltorefresh-top-icon-width;
-        height: $pulltorefresh-top-icon-height;
+        width: $pulltorefresh-icon-width;
+        height: $pulltorefresh-icon-height;
         margin-bottom: 4px;
       }
     }
@@ -44,8 +44,8 @@
       align-items: center;
 
       &-icons {
-        width: $infiniteloading-bottom-icon-size;
-        height: $infiniteloading-bottom-icon-size;
+        width: $infiniteloading-icon-size;
+        height: $infiniteloading-icon-size;
         margin-right: 8px;
       }
     }

package/dist/packages/noticebar/noticebar.scss

@@ -12,14 +12,14 @@
     color: $noticebar-color;
     border-radius: $noticebar-border-radius;
 
-    &.wrapable {
+    &-wrapable {
       height: auto;
       padding: $noticebar-wrap-padding;
 
-      .wrap {
+      .nut-noticebar-box-wrap {
         height: auto;
 
-        .content {
+        .nut-noticebar-box-wrap-content {
           position: relative;
           white-space: normal;
           word-wrap: break-word;
@@ -27,12 +27,7 @@
       }
     }
 
-    .withicon {
-      position: relative;
-      padding-right: 40px;
-    }
-
-    .left-icon {
+    &-left-icon {
       display: flex;
       height: $noticebar-left-icon-width;
       min-width: $noticebar-left-icon-width;
@@ -40,7 +35,7 @@
       background-size: 100% 100%;
     }
 
-    .right-icon {
+    &-right-icon {
       display: flex;
       align-items: center;
       justify-content: center;
@@ -48,24 +43,24 @@
       margin-left: $noticebar-icon-gap;
     }
 
-    .wrap {
+    &-wrap {
       display: flex;
       flex: 1;
       height: $noticebar-line-height;
       line-height: $noticebar-line-height;
       overflow: hidden;
       position: relative;
-    }
-
-    .content {
-      position: absolute;
-      white-space: nowrap;
 
-      &.nut-ellipsis {
-        max-width: 100%;
+      .nut-noticebar-box-wrap-content {
+        position: absolute;
         white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
+
+        &.nut-ellipsis {
+          max-width: 100%;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
       }
     }
 
@@ -82,24 +77,6 @@
     }
   }
 
-  @keyframes nut-notice-bar-play {
-    to {
-      transform: translate3d(-100%, 0, 0);
-    }
-  }
-
-  @keyframes nut-notice-bar-play-infinite {
-    to {
-      transform: translate3d(-100%, 0, 0);
-    }
-  }
-
-  @keyframes nut-notice-bar-play-vertical {
-    to {
-      transform: translateY($noticebar-height);
-    }
-  }
-
   .nut-noticebar-vertical {
     position: relative;
     display: flex;
@@ -111,7 +88,7 @@
     background: $noticebar-background;
     color: $noticebar-color;
 
-    .left-icon {
+    .nut-noticebar-box-left-icon {
       height: $noticebar-left-icon-width;
       min-width: $noticebar-left-icon-width;
       margin: $noticebar-icon-gap;
@@ -120,13 +97,13 @@
       align-self: center;
     }
 
-    .horseLamp-list {
+    .nut-noticebar-box-horseLamp-list {
       margin: 0;
       padding: 0;
       display: block;
       flex: 1;
 
-      .horseLamp-list-item {
+      &-item {
         display: flex;
         align-items: center;
         height: $noticebar-height;
@@ -134,7 +111,7 @@
       }
     }
 
-    .nut-noticebar__inner {
+    .nut-noticebar-box-wrap {
       display: flex;
       height: 100%;
       width: 100%;
@@ -143,7 +120,7 @@
       flex-direction: column;
     }
 
-    .go {
+    .nut-noticebar-box-right-icon {
       align-self: center;
       display: flex;
       justify-content: center;
@@ -151,4 +128,22 @@
       margin-left: $noticebar-icon-gap;
     }
   }
+
+  @keyframes nut-notice-bar-play {
+    to {
+      transform: translate3d(-100%, 0, 0);
+    }
+  }
+
+  @keyframes nut-notice-bar-play-infinite {
+    to {
+      transform: translate3d(-100%, 0, 0);
+    }
+  }
+
+  @keyframes nut-notice-bar-play-vertical {
+    to {
+      transform: translateY($noticebar-height);
+    }
+  }
 }

package/dist/packages/notify/notify.scss

@@ -52,10 +52,9 @@
   white-space: pre-wrap;
   word-wrap: break-word;
   height: $notify-height;
-  &--popup-top,
-  &--popup-bottom {
+  &-popup-top,
+  &-popup-bottom {
     position: fixed;
-    top: 0;
     left: 0;
     width: 100%;
     overflow-y: auto;
@@ -63,23 +62,31 @@
     z-index: 9999;
   }
 
-  &--base {
+  &-popup-top {
+    top: 0;
+  }
+
+  &-popup-bottom {
+    bottom: 0;
+  }
+
+  &-base {
     background: $notify-base-background-color;
   }
 
-  &--primary {
+  &-primary {
     background: $notify-primary-background-color;
   }
 
-  &--success {
+  &-success {
     background: $notify-success-background-color;
   }
 
-  &--danger {
+  &-danger {
     background: $notify-danger-background-color;
   }
 
-  &--warning {
+  &-warning {
     background: $notify-warning-background-color;
   }
 }

package/dist/packages/pagination/pagination.scss

@@ -3,20 +3,20 @@
   font-size: $pagination-font-size;
   color: $pagination-color;
 
-  &__contain {
+  &-contain {
     display: flex;
   }
 
-  &__simple {
+  &-simple {
     height: 39px;
     width: 124px;
     line-height: 39px;
     text-align: center;
   }
 
-  &__prev,
-  &__item,
-  &__next {
+  &-prev,
+  &-item,
+  &-next {
     height: 39px;
     min-width: 39px;
     flex-shrink: 0;
@@ -30,13 +30,13 @@
     cursor: pointer;
   }
 
-  &__prev,
-  &__item {
+  &-prev,
+  &-item {
     border-right: none;
   }
 
-  &__prev,
-  &__next {
+  &-prev,
+  &-next {
     padding: $pagination-prev-next-padding;
   }