@nutui/nutui-react 2.0.0-alpha.9 → 2.0.0-beta.1

package/dist/packages/calendar/calendar.scss

@@ -2,19 +2,18 @@
 .nut-calendar {
   position: relative;
   display: flex;
+  flex-direction: column;
   flex: 1;
-  color: $calendar-base-color;
-  font-size: $calendar-base-font;
+  font-size: $calendar-base-font-size;
   background-color: $white;
   color: $gray1;
   overflow: hidden;
   height: 100%;
-  flex-direction: column;
 
-  &.nut-calendar-tile {
+  &.nut-calendar-title {
     .nut-calendar-header {
       .calendar-title {
-        font-size: $calendar-base-font;
+        font-size: $calendar-base-font-size;
       }
     }
   }
@@ -27,191 +26,176 @@
     height: 100%;
   }
 
-  .nut-calendar-content {
-    overflow-y: auto;
-  }
-
   ::-webkit-scrollbar {
     display: none;
   }
 
   // 头部导航
-  .nut-calendar-header {
+  &-header {
     display: flex;
     flex-direction: column;
     text-align: center;
-    padding-top: 1px;
-    background-color: $white;
+  }
 
-    .calendar-title {
-      font-size: $calendar-title-font;
-      font-weight: $calendar-title-font-weight;
-      line-height: 44px;
-    }
+  &-title {
+    font-size: $calendar-title-font-size;
+    font-weight: $calendar-title-font-weight;
+    line-height: 44px;
+  }
 
-    .calendar-curr-month {
-      padding: 7px 0;
-      line-height: 22px;
-      font-size: $calendar-sub-title-font;
-    }
+  &-sub-title {
+    padding: 7px 0;
+    line-height: 22px;
+    font-size: $calendar-sub-title-font-size;
+  }
 
-    .calendar-top-slot {
-      height: $calendar-top-slot-height;
-    }
+  &-header-buttons {
+    height: $calendar-header-height;
+  }
 
-    .calendar-weeks {
-      display: flex;
-      align-items: center;
-      justify-content: space-around;
-      height: 36px;
-      border-radius: 0px 0px 12px 12px;
-      box-shadow: 0px 4px 10px 0px rgba($color: #000000, $alpha: 0.06);
-
-      .calendar-week-item {
-        &:first-of-type,
-        &:last-of-type {
-          color: $calendar-day67-font-color;
-        }
-      }
+  &-weeks {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    height: 36px;
+    border-radius: 0px 0px 12px 12px;
+    box-shadow: 0px 4px 10px 0px rgba($color: #000000, $alpha: 0.06);
+  }
+
+  &-week-item {
+    &:first-of-type,
+    &:last-of-type {
+      color: $calendar-day67-color;
     }
   }
 
-  // 月份
-  .nut-calendar-content {
+  // 内容区域
+  &-content {
     flex: 1;
     width: 100%;
     display: block;
+    overflow-y: auto;
+  }
+
+  &-pannel {
+    position: relative;
+    width: 100%;
+    height: auto;
+    display: block;
+    box-sizing: border-box;
+
+    // .viewArea {
+    //   display: block;
+    // }
+
+    .calendar-loading-tip {
+      height: 50px;
+      line-height: 50px;
+      text-align: center;
+      position: absolute;
+      top: -50px;
+      left: 0;
+      right: 0;
+      font-size: $font-size-1;
+      color: $text-color;
+    }
+  }
 
-    .calendar-months-panel {
-      position: relative;
+  &-month {
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+  }
+
+  &-month-title {
+    height: 23px;
+    line-height: 23px;
+    margin: 8px 0;
+  }
+
+  &-days {
+    overflow: hidden;
+  }
+
+  &-day {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    position: relative;
+    float: left;
+    width: $calendar-day-width;
+    height: $calendar-day-height;
+    font-weight: $calendar-day-font-weight;
+    margin-bottom: 4px;
+
+    &:nth-child(7n + 0),
+    &:nth-child(7n + 1) {
+      color: $calendar-day67-color;
+    }
+
+    &-info-curr {
+      position: absolute;
+      bottom: 5px;
+      width: 100%;
+      font-size: 12px;
+      line-height: 14px;
+    }
+
+    &-info {
+      position: absolute;
+      bottom: 5px;
       width: 100%;
-      height: auto;
-      display: block;
-      box-sizing: border-box;
+      font-size: 12px;
+      line-height: 14px;
+    }
 
-      .viewArea {
-        display: block;
-      }
+    &-info-top {
+      position: absolute;
+      width: 100%;
+      top: 5px;
+    }
 
-      .calendar-month {
-        display: flex;
-        flex-direction: column;
-        text-align: center;
-      }
+    &-info-bottom {
+      position: absolute;
+      width: 100%;
+      bottom: 5px;
+    }
 
-      div:nth-of-type(2) {
-        .calendar-month-title {
-          padding-top: 0;
-        }
-      }
+    &-active {
+      background-color: $calendar-active-background-color;
+      color: $primary-text-color !important;
+      border-radius: $calendar-day-active-border-radius;
 
-      .calendar-loading-tip {
-        height: 50px;
-        line-height: 50px;
-        text-align: center;
-        position: absolute;
-        top: -50px;
-        left: 0;
-        right: 0;
-        font-size: $calendar-text-font;
-        color: $text-color;
+      &.active-start {
+        border-radius: 0px;
+        border-top-left-radius: $calendar-day-active-border-radius;
+        border-bottom-left-radius: $calendar-day-active-border-radius;
       }
 
-      .calendar-month-title {
-        height: 23px;
-        line-height: 23px;
-        margin: 8px 0;
+      &.active-end {
+        border-radius: 0px;
+        border-top-right-radius: $calendar-day-active-border-radius;
+        border-bottom-right-radius: $calendar-day-active-border-radius;
       }
 
-      .calendar-month-con {
-        overflow: hidden;
-
-        .calendar-month-item {
-          .calendar-month-day:nth-child(7n + 0),
-          .calendar-month-day:nth-child(7n + 1) {
-            color: $calendar-day67-font-color;
-          }
-        }
-
-        .calendar-month-day {
-          float: left;
-          width: $calendar-day-width;
-          height: $calendar-day-height;
-          font-weight: $calendar-day-font-weight;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          flex-direction: column;
-          position: relative;
-
-          .calendar-curr-tips {
-            position: absolute;
-            width: 100%;
-          }
-
-          .calendar-curr-tip-curr {
-            position: absolute;
-            bottom: 6px;
-            width: 100%;
-            font-size: 12px;
-            line-height: 14px;
-          }
-
-          .calendar-day-tip {
-            position: absolute;
-            bottom: 6px;
-            width: 100%;
-            font-size: 12px;
-            line-height: 14px;
-            color: $calendar-primary-color;
-          }
-
-          .calendar-curr-tips-top {
-            top: 6px;
-          }
-
-          .calendar-curr-tips-bottom {
-            bottom: 6px;
-          }
-
-          &-active {
-            background-color: $calendar-primary-color;
-            color: $primary-text-color !important;
-            border-radius: $calendar-day-active-border-radius;
-
-            .calendar-curr-tips {
-              visibility: hidden;
-            }
-
-            .calendar-curr-tip-curr {
-              visibility: hidden;
-            }
-
-            .calendar-day-tip {
-              color: $primary-text-color;
-            }
-          }
-
-          &-disabled {
-            color: $calendar-disable-color !important;
-          }
-
-          &-choose {
-            background-color: $calendar-choose-color;
-            color: $calendar-choose-font-color;
-          }
-
-          .calendar-day {
-            padding: 2px 0;
-            font-size: $calendar-day-font;
-          }
-        }
+      .nut-calendar-day-info {
+        color: $primary-text-color;
       }
     }
+
+    &-disabled {
+      color: $calendar-disable-color !important;
+    }
+
+    &-choose {
+      background-color: $calendar-choose-background-color;
+      color: $calendar-choose-color;
+    }
   }
 
   // 底部导航
-  .nut-calendar-footer {
+  &-footer {
     display: flex;
     height: 62px;
     width: 100%;

package/dist/packages/card/card.scss

@@ -1,13 +1,5 @@
 @import '../../styles/mixins/text-ellipsis.scss';
 
-.nut-theme-dark {
-  .nut-card {
-    .nut-card__right {
-      color: $dark1;
-    }
-  }
-}
-
 .nut-card {
   width: 100%;
   display: flex;
@@ -15,6 +7,8 @@
     width: 120px;
     height: 120px;
     flex-shrink: 0;
+    background-color: $card-left-background-color;
+    border-radius: $card-left-border-radius;
     > img {
       display: block;
       width: 100%;
@@ -24,12 +18,12 @@
   .nut-card__right {
     flex: 1;
     padding: 0 10px 8px;
-    .nut-card__right__title {
+    .nut-card__right-title {
       @include moreline-ellipsis();
       line-height: 1.5;
       font-size: 14px;
     }
-    .nut-card__right__price {
+    .nut-cardright-price {
       display: flex;
       align-items: center;
       height: 18px;
@@ -45,7 +39,7 @@
           font-size: 12px;
         }
       }
-      .nut-card__right__price__origin {
+      .nut-cardright-price-origin {
         &.nut-price {
           margin-left: 2px;
           color: #d2a448;
@@ -58,7 +52,7 @@
         }
       }
     }
-    .nut-card__right__other {
+    .nut-cardright-other {
       display: flex;
       align-items: center;
       padding: 5px 0 2px;
@@ -68,11 +62,11 @@
         font-size: $font-size-0;
       }
     }
-    .nut-card__right__shop {
+    .nut-cardright-shop {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      .nut-card__right__shop__name {
+      .nut-cardright-shop-name {
         line-height: 1.5;
         color: #999;
         font-size: 12px;

package/dist/packages/cascader/cascader.scss

@@ -4,18 +4,6 @@
   font-size: $cascader-font-size;
   line-height: $cascader-line-height;
 
-  &__title {
-    background-color: $gray6;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: $cascader-title-padding;
-    font-weight: bold;
-    line-height: $cascader-title-line-height;
-    color: $gray1;
-    font-size: $cascader-title-font-size;
-  }
-
   .nut-tabs__titles {
     padding: $cascader-tabs-item-padding;
     background: $gray6;

package/dist/packages/collapseitem/collapseitem.scss

@@ -1,54 +1,3 @@
-.nut-theme-dark {
-  .nut-collapse {
-    &-item__header {
-      background-color: $dark6;
-
-      .nut-collapse-item__title {
-        color: $dark1;
-      }
-
-      .nut-collapse-item__icon-box {
-        .nut-collapse-item__icon {
-          i {
-            color: $dark1 !important;
-          }
-        }
-      }
-
-      .nut-collapse-item__sub-title {
-        color: $dark2;
-      }
-
-      &::after {
-        border-bottom: 1px solid $dark4;
-      }
-    }
-
-    .nut-collapse-item__header--disabled {
-      .nut-collapse-item__title {
-        color: $dark2;
-      }
-
-      .nut-collapse-item__icon-box {
-        .nut-collapse-item__icon {
-          i {
-            color: $dark2 !important;
-          }
-        }
-      }
-    }
-
-    &-item__content {
-      background-color: $dark6;
-      color: $dark1;
-
-      &-text {
-        color: $dark1;
-      }
-    }
-  }
-}
-
 .nut-collapse-item {
   &__header {
     position: relative;
@@ -79,23 +28,9 @@
     color: $collapse-item-color;
     display: flex;
     align-items: center;
-
-    &-icon-left {
-      margin-right: $collapse-item-icon-margin-right;
-      display: flex;
-      align-items: center;
-      color: $collapse-item-icon-color;
-    }
-
-    &-icon-right {
-      margin-left: $collapse-item-icon-margin-left;
-      display: flex;
-      align-items: center;
-      color: $collapse-item-icon-color;
-    }
   }
 
-  &__sub-title {
+  &__extra {
     flex: 1;
     display: flex;
     justify-content: flex-end;
@@ -103,19 +38,13 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    color: $collapse-item-sub-title-color;
+    color: $collapse-item-extra-color;
   }
 
   &__icon-box {
     display: flex;
     padding-right: 40px;
     position: relative;
-
-    .nut-collapse-item__icon {
-      i {
-        color: $collapse-item-icon-color;
-      }
-    }
   }
 
   &__icon {
@@ -129,18 +58,12 @@
     transition: transform 0.3s;
   }
 
-  &__header--disabled {
+  &__header.disabled {
     color: $collapse-item-disabled-color;
 
     .nut-collapse-item__title {
       color: $collapse-item-disabled-color;
     }
-
-    .nut-collapse-item__icon {
-      i {
-        color: $collapse-item-disabled-color !important;
-      }
-    }
   }
 
   &__content {

package/dist/packages/countdown/countdown.scss

@@ -1,3 +1,5 @@
 .nut-countdown {
   display: $countdown-display;
+  color: $countdown-color;
+  font-size: $countdown-font-size;
 }

package/dist/packages/divider/divider.scss

@@ -17,9 +17,9 @@
     flex: 1;
   }
 
-  &.nut-divider__center,
-  &.nut-divider__left,
-  &.nut-divider__right {
+  &__center,
+  &__left,
+  &__right {
     &::before {
       margin-right: $divider-before-margin-right;
     }
@@ -29,25 +29,26 @@
     }
   }
 
-  &.nut-divider__left {
+  &__left {
     &::before {
       max-width: 10%;
     }
   }
 
-  &.nut-divider__right {
+  &__right {
     &::after {
       max-width: 10%;
     }
   }
 
-  &.nut-divider__hairline {
+  &__hairline {
     &::before,
     &::after {
       transform: scaleY(0.5);
     }
   }
-  &.nut-divider__vertical {
+
+  &__vertical {
     position: relative;
     top: $divider-vertical-top;
     display: inline-block;

package/dist/packages/ellipsis/ellipsis.scss

@@ -15,3 +15,7 @@
   position: absolute;
   top: -999999px;
 }
+
+.nut-ellipsis-width {
+  width: fit-content;
+}

package/dist/packages/formitem/formitem.scss

@@ -1,16 +1,3 @@
-
-.nut-theme-dark {
-  .nut-form-item {
-    &__body {
-      &__slots {
-        .nut-input-text {
-          color: $dark1;
-        }
-      }
-    }
-  }
-}
-
 .nut-form-item {
   display: flex;
 
@@ -86,6 +73,7 @@
         padding: 0 !important;
 
         .nut-textarea__textarea {
+          font: inherit;
           text-align: $form-item-body-input-text-align;
         }
       }