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

package/dist/packages/actionsheet/actionsheet.scss

@@ -15,7 +15,7 @@
     border-bottom: 1px solid $actionsheet-border-color;
   }
 
-  &__list {
+  &-list {
     display: block;
     list-style: none;
     padding: 0;
@@ -23,8 +23,8 @@
     border-radius: $actionsheet-border-radius;
   }
 
-  &__cancel,
-  &__item {
+  &-cancel,
+  &-item {
     display: block;
     padding: 10px;
     text-align: $actionsheet-item-text-align;
@@ -50,7 +50,7 @@
     }
   }
 
-  &__cancel {
+  &-cancel {
     margin-top: 5px;
     border-top: 1px solid $actionsheet-border-color;
     border-radius: $actionsheet-border-radius;

package/dist/packages/animatingnumbers/countup.scss

@@ -1,18 +1,18 @@
 .nut-countup {
-  &__list {
+  &-list {
     display: inline-flex;
     height: $countup-height;
     overflow: hidden;
   }
 
-  &__listitem {
+  &-listitem {
     height: $countup-height;
     overflow: hidden;
     color: $color-title;
     font-size: $countup-base-size;
     font-weight: $font-weight-bold;
 
-    &--number {
+    &-number {
       margin: 0 $countup-lr-margin;
       border-radius: $countup-border-radius;
       color: $countup-color;
@@ -20,14 +20,14 @@
     }
   }
 
-  &__separator {
+  &-separator {
     display: flex;
     height: 80%;
     align-items: flex-end;
     color: $countup-bg-color;
   }
 
-  &__number {
+  &-number {
     display: flex;
     flex-direction: column;
     align-items: center;

package/dist/packages/audio/audio.scss

@@ -1,6 +1,6 @@
 
 .nut-audio {
-  &__icon {
+  &-icon {
     position: relative;
     display: inline-block;
 
@@ -20,7 +20,7 @@
       }
     }
 
-    .nut-audio__icon-stop {
+    .nut-audio-icon-stop {
       position: relative;
 
       &::after {
@@ -38,7 +38,7 @@
     }
   }
 
-  &__progress {
+  &-progress {
     display: flex;
     align-items: center;
     width: 100%;
@@ -63,13 +63,13 @@
   }
 
   .custom-button-group {
-    .nut-button--primary {
+    .nut-button-primary {
       margin: 0 5px;
     }
   }
 
   .custom-button-group-disable {
-    .nut-button--primary {
+    .nut-button-primary {
       margin: 0 5px;
       pointer-events: none;
     }
@@ -79,7 +79,7 @@
     color: blue;
   }
 
-  .nut-audio__none-container {
+  .nut-audio-none-container {
     .nut-voice {
       border: 1px solid $color-title;
       align-items: center;

package/dist/packages/avatar/avatar.scss

@@ -22,7 +22,7 @@
     left: 50%;
     transform: translate(-50%, -50%);
   }
-  .nut-icon__img {
+  .nut-icon-img {
     width: 100%;
     height: 100%;
   }

package/dist/packages/badge/badge.scss

@@ -2,7 +2,7 @@
   position: relative;
   display: inline-block;
 
-  &__icon {
+  &-icon {
     position: absolute;
     display: flex;
     justify-content: center;
@@ -23,7 +23,7 @@
     }
   }
 
-  &__sup {
+  &-sup {
     height: $badge-height;
     position: absolute;
     display: flex;
@@ -40,17 +40,17 @@
     min-width: $badge-min-width;
   }
 
-  &__one {
+  &-one {
     height: $badge-height;
     width: $badge-height;
     padding: 0;
   }
 
-  &__content {
+  &-content {
     transform: $badge-content-transform;
   }
 
-  &__dot {
+  &-dot {
     width: $badge-dot-width;
     height: $badge-dot-width;
     border: $badge-border;

package/dist/packages/button/button.scss

@@ -61,251 +61,252 @@
     background: initial;
   }
 
-  &--loading,
-  &--disabled {
+  &-loading,
+  &-disabled {
     &::before {
       display: none;
     }
   }
 
-  &.nut-button--icononly {
+  &.nut-button-icononly {
     width: $button-default-height;
     padding: 0;
   }
 
-  &--default {
+  &-default {
     padding: $button-default-padding;
     border: $button-border-width solid $button-default-border-color;
 
-    &.nut-button--disabled {
+    &.nut-button-disabled {
       color: $color-text-help;
       background: transparent;
     }
 
-    &.nut-button--none {
+    &.nut-button-none {
       background: transparent;
 
-      &.nut-button--disabled {
+      &.nut-button-disabled {
         color: $color-text-help;
       }
     }
 
-    &.nut-button--outline,
-    &.nut-button--dashed {
+    &.nut-button-outline,
+    &.nut-button-dashed {
       background: transparent;
 
-      &.nut-button--disabled {
+      &.nut-button-disabled {
         color: $color-text-help;
         border-color: $button-default-disabled;
       }
     }
   }
 
-  &--normal {
+  &-normal {
     padding: $button-normal-padding;
   }
 
-  &--large {
+  &-large {
     height: $button-large-height;
     padding: $button-large-padding;
     font-size: $button-large-font-size;
   }
 
-  &--small {
+  &-small {
     height: $button-small-height;
     padding: $button-small-padding;
     font-size: $button-small-font-size;
   }
 
-  &--mini {
+  &-mini {
     height: $button-mini-height;
     padding: $button-mini-padding;
     font-size: $button-mini-font-size;
   }
 
-  &--primary {
+  &-primary {
     color: $button-primary-color;
     background: $button-primary-background-color;
     background-origin: border-box;
     border: $button-border-width solid transparent;
 
-    &.nut-button--disabled {
+    &.nut-button-disabled {
       background: $button-primary-disabled;
       border-color: $button-primary-disabled;
     }
 
-    &.nut-button--none {
+    &.nut-button-none {
       background: transparent;
       color: $button-primary-border-color;
 
-      &.nut-button--disabled {
+      &.nut-button-disabled {
         color: $button-primary-disabled;
       }
     }
 
-    &.nut-button--dashed,
-    &.nut-button--outline {
+    &.nut-button-outline {
       background: transparent;
       color: $button-primary-border-color;
-      border-color: $button-primary-border-color;
+      border: $button-border-width solid $button-primary-border-color;
 
-      &.nut-button--disabled {
+      &.nut-button-disabled {
+        color: $button-primary-disabled;
+        border-color: $button-primary-disabled;
+      }
+    }
+
+    &.nut-button-dashed {
+      background: transparent;
+      color: $button-primary-border-color;
+      border: $button-border-width dashed $button-primary-border-color;
+
+      &.nut-button-disabled {
         color: $button-primary-disabled;
         border-color: $button-primary-disabled;
       }
     }
   }
 
-  &--success {
+  &-success {
     color: $button-success-color;
     background: $button-success-background-color;
     background-origin: border-box;
     border: $button-border-width solid transparent;
 
-    &.nut-button--disabled {
+    &.nut-button-disabled {
       background: $button-success-disabled;
       border-color: $button-success-disabled;
     }
 
-    &.nut-button--outline,
-    &.nut-button--dashed {
+    &.nut-button-outline,
+    &.nut-button-dashed {
       color: $button-success-border-color;
       border-color: $button-success-border-color;
       background: transparent;
 
-      &.nut-button--disabled {
+      &.nut-button-disabled {
         color: $button-primary-disabled;
         border-color: $button-primary-disabled;
       }
     }
 
-    &.nut-button--none {
+    &.nut-button-none {
       color: $button-success-border-color;
     }
   }
 
-  &--info {
+  &-info {
     color: $button-info-color;
     background: $button-info-background-color;
     background-origin: border-box;
     border: $button-border-width solid transparent;
 
-    &.nut-button--disabled {
+    &.nut-button-disabled {
       background: $button-info-disabled;
       border-color: $button-info-disabled;
     }
 
-    &.nut-button--outline,
-    &.nut-button--dashed {
+    &.nut-button-outline,
+    &.nut-button-dashed {
       color: $button-info-border-color;
       border-color: $button-info-border-color;
       background: transparent;
 
-      &.nut-button--disabled {
+      &.nut-button-disabled {
         color: $button-primary-disabled;
         border-color: $button-primary-disabled;
       }
     }
 
-    &.nut-button--none {
+    &.nut-button-none {
       color: $button-info-border-color;
     }
   }
 
-  &--danger {
+  &-danger {
     color: $button-danger-color;
     background: $button-danger-background-color;
     background-origin: border-box;
     border: $button-border-width solid transparent;
 
-    &.nut-button--disabled {
+    &.nut-button-disabled {
       background: $button-danger-disabled;
       border-color: $button-danger-disabled;
     }
 
-    &.nut-button--outline,
-    &.nut-button--dashed {
+    &.nut-button-outline,
+    &.nut-button-dashed {
       color: $button-danger-border-color;
       border-color: $button-danger-border-color;
       background: transparent;
 
-      &.nut-button--disabled {
+      &.nut-button-disabled {
         color: $button-danger-disabled;
         border-color: $button-danger-disabled;
       }
     }
 
-    &.nut-button--none {
+    &.nut-button-none {
       color: $button-danger-border-color;
     }
   }
 
-  &--warning {
+  &-warning {
     color: $button-warning-color;
     background: $button-warning-background-color;
     background-origin: border-box;
     border: $button-border-width solid transparent;
 
-    &.nut-button--disabled {
+    &.nut-button-disabled {
       background: $button-warning-disabled;
       border-color: $button-warning-disabled;
     }
 
-    &.nut-button--outline,
-    &.nut-button--dashed {
+    &.nut-button-outline,
+    &.nut-button-dashed {
       color: $button-warning-border-color;
       border-color: $button-warning-border-color;
       background: transparent;
 
-      &.nut-button--disabled {
+      &.nut-button-disabled {
         color: $button-warning-disabled;
         border-color: $button-warning-disabled;
       }
     }
 
-    &.nut-button--none {
+    &.nut-button-none {
       color: $button-warning-border-color;
     }
   }
 
-  &--block {
+  &-block {
     display: block;
     width: 100%;
   }
 
-  &--solid {
+  &-solid {
     color: $button-primary-color;
     background: $button-primary-background-color;
     background-origin: border-box;
     border: $button-border-width solid transparent;
 
-    &.nut-button--disabled {
+    &.nut-button-disabled {
       color: #ffffff;
       background: $button-default-disabled;
     }
   }
 
-  &.nut-button--outline,
-  &.nut-button--dashed {
+  &.nut-button-outline,
+  &.nut-button-dashed {
     background: transparent;
-    border-width: 1px;
-  }
-
-  &.nut-button--outline {
-    border-style: solid;
-  }
-
-  &.nut-button--dashed {
-    border-style: dashed;
   }
 
-  &.nut-button--none {
+  &.nut-button-none {
     background: transparent;
     border-color: transparent;
     background: transparent;
   }
 
-  &--disabled {
+  &-disabled {
     cursor: not-allowed;
     font-weight: 400;
     color: #ffffff;
@@ -313,16 +314,16 @@
     border-color: $button-default-disabled;
   }
 
-  &--loading {
+  &-loading {
     cursor: default;
     opacity: 0.9;
   }
 
-  &--round {
+  &-round {
     border-radius: $button-border-radius;
   }
 
-  &--square {
+  &-square {
     border-radius: $button-square-border-radius;
   }
 }

package/dist/packages/calendar/calendar.scss

@@ -182,16 +182,15 @@
     }
 
     &-disabled {
-      color: $color-text-disabled !important;
-
+      color: $calendar-disable-color !important;
       .nut-calendar-day-info-curr {
         display: none;
       }
     }
 
     &-choose-disabled {
-      background-color: $calendar-choose-background-color-disabled;
-      color: $color-text-disabled !important;
+      background-color: $calendar-choose-disable-background-color;
+      color: $calendar-disable-color !important;
 
       .nut-calendar-day-info-curr {
         display: none;
@@ -200,7 +199,7 @@
 
     &-choose {
       background-color: $calendar-choose-background-color;
-      color: $color-primary;
+      color: $calendar-choose-color;
     }
   }
 

package/dist/packages/calendarcard/calendarcard.scss

@@ -82,11 +82,11 @@
 
     &.mid {
       background-color: $calendar-choose-background-color;
-      color: $color-primary;
+      color: $calendar-choose-color;
     }
 
     &.weekend {
-      color: $color-primary;
+      color: $calendar-choose-color;
     }
 
     .nut-calendar-day-info {
@@ -97,7 +97,7 @@
     &.prev,
     &.next,
     &.disabled {
-      color: $color-text-disabled;
+      color: $calendar-disable-color;
       cursor: not-allowed;
     }
   }

package/dist/packages/card/card.scss

@@ -38,13 +38,13 @@
       margin-top: 9px;
 
       .nut-price {
-        .nut-price__big {
+        .nut-price-big {
           font-size: 18px;
         }
 
-        .nut-price__symbol,
-        .nut-price__point,
-        .nut-price__small {
+        .nut-price-symbol,
+        .nut-price-point,
+        .nut-price-small {
           font-size: 12px;
         }
       }
@@ -54,10 +54,10 @@
           margin-left: 2px;
           color: #d2a448;
 
-          .nut-price__big,
-          .nut-price__symbol,
-          .nut-price__point,
-          .nut-price__small {
+          .nut-price-big,
+          .nut-price-symbol,
+          .nut-price-point,
+          .nut-price-small {
             font-size: 12px;
           }
         }

package/dist/packages/cascader/cascader.scss

@@ -52,14 +52,14 @@
         color: $cascader-item-active-color;
       }
 
-      .nut-cascader-item__icon-check {
+      .nut-cascader-item-icon-check {
         visibility: visible;
         color: inherit;
       }
     }
   }
 
-  &-item__title {
+  &-item-title {
     flex: 1;
   }
 

package/dist/packages/checkbox/checkbox.scss

@@ -72,6 +72,7 @@
       color: $color-text-disabled;
       border: 1px solid $checkbox-button-background;
     }
+
     &-icon {
       position: absolute;
       right: 0;
@@ -85,6 +86,7 @@
       display: flex;
       align-items: flex-end;
       justify-content: flex-end;
+
       &-checked {
         width: 12px;
         height: 12px;
@@ -92,9 +94,18 @@
         color: $white;
         top: 50%;
         left: 50%;
-        transform: translate(-2px, -2px);
+        transform: translate(-3px, -3px);
       }
+
       // background-color: $color-primary;
+      .nut-icon {
+        font-size: 12px;
+        &:before {
+          top: auto;
+          bottom: -22px;
+          margin-left: 6px;
+        }
+      }
     }
   }