@nutui/nutui-react 2.0.0-alpha.3 → 2.0.0-alpha.5

package/dist/packages/badge/badge.scss

@@ -1,7 +1,6 @@
 .nut-badge {
   position: relative;
   display: inline-block;
-  margin-right: 40px;
 
   &__icon {
     display: flex;

package/dist/packages/cellgroup/cellgroup.scss

@@ -27,25 +27,29 @@
     overflow: hidden;
     background-color: $cell-group-background-color;
     margin: 10px 0;
+    .nut-cell {
+      margin: 0;
+      box-shadow: none;
+      border-radius: 0;
+    }
   }
 
-  .nut-cell {
-    margin: 0;
-    box-shadow: none;
-    border-radius: 0;
-    &__divider {
-      position: absolute;
-      box-sizing: border-box;
-      pointer-events: none;
-      right: $cell-divider-right;
-      bottom: 0;
-      left: $cell-divider-left;
-      transform: scaleY(0.5);
-      border-bottom: $cell-divider-border-bottom;
-    }
-    &:last-child {
+  &__wrap--divider {
+    .nut-cell {
       &__divider {
-        border: 0 !important;
+        position: absolute;
+        box-sizing: border-box;
+        pointer-events: none;
+        right: $cell-divider-right;
+        bottom: 0;
+        left: $cell-divider-left;
+        transform: scaleY(0.5);
+        border-top: $cell-divider-border-bottom;
+      }
+      &:last-child {
+        .nut-cell__divider {
+          border-top: 0 !important;
+        }
       }
     }
   }

package/dist/packages/checkbox/checkbox.scss

@@ -1,47 +1,44 @@
 
-.nut-theme-dark {
-  .nut-checkbox {
-    &__label {
-      color: $dark1;
-      &--disabled {
-        color: $checkbox-label-disable-color;
-      }
-    }
-  }
-}
-
 .nut-checkbox {
   display: flex;
   align-items: center;
+
   &--reverse {
     flex-direction: row-reverse;
+
     .nut-checkbox__label {
       margin-right: $checkbox-label-margin-left;
       margin-left: 0;
     }
   }
+
   &__label {
     margin-left: $checkbox-label-margin-left;
     font-size: $checkbox-label-font-size;
     color: $checkbox-label-color;
+
     &--disabled {
       color: $checkbox-label-disable-color;
     }
   }
+
   &__icon {
     color: $primary-color;
     font-size: $checkbox-icon-font-size;
     transition-duration: 0.3s;
     transition-property: color, border-color, background-color;
   }
+
   &__icon--unchecked {
     color: $checkbox-icon-disable-color;
     font-size: $checkbox-icon-font-size;
   }
+
   &__icon--indeterminate {
     color: $primary-color;
     font-size: $checkbox-icon-font-size;
   }
+
   &__icon--disable {
     color: $disable-color;
     font-size: $checkbox-icon-font-size;

package/dist/packages/circleprogress/circleprogress.scss

@@ -1,12 +1,3 @@
-.nut-theme-dark {
-  .nut-circleprogress-text {
-    color: $dark1;
-  }
-}
-
-.demo-circleprogress {
-  min-height: 100vh;
-}
 .nut-circleprogress {
   position: relative;
 

package/dist/packages/empty/empty.scss

@@ -1,12 +1,3 @@
-.nut-theme-dark {
-  .nut-empty {
-    background: $dark6;
-    &__description {
-      color: $dark1;
-    }
-  }
-}
-
 .nut-empty {
   box-sizing: border-box;
   display: flex;

package/dist/packages/input/input.scss

@@ -1,196 +1,34 @@
-.nut-theme-dark {
-  .nut-input {
-    background: $dark4;
-    &-label {
-      color: $dark1;
-      .label-string {
-        color: $dark1;
-      }
-    }
-    .input-text,
-    &__text--readonly {
-      color: $dark1;
-    }
-    &-left-icon,
-    &-right-icon {
-      i {
-        color: $dark1;
-      }
-    }
-    &-inner {
-      .nut-input-clear {
-        color: $dark1;
-      }
-    }
-  }
-}
-input,
-textarea {
-  font: inherit;
-}
-
 .nut-input {
   position: relative;
+  display: flex;
+  align-items: center;
+  flex: 1;
   width: 100%;
   padding: $input-padding;
-  display: flex;
   line-height: 24px;
   background: $white;
   font-size: $input-font-size;
   box-sizing: border-box;
-  &.center {
-    align-items: center;
-  }
-  &.nut-input-border {
-    border-bottom: 1px solid $input-border-bottom;
+  border-bottom: $input-border-bottom-width solid $input-border-bottom;
+
+  .nut-icon {
+    color: #c8c9cc;
   }
-  input {
-    width: 230px;
+
+  .nut-input-native {
+    width: 100%;
     color: $gray1;
     flex: 1;
-    padding: 0 10px;
-    padding-right: 35px;
-    outline: 0 none;
-    border: 0;
-    text-decoration: none;
-  }
-  .label-string {
-    color: $gray1;
-  }
-  &__clear {
-    width: 16px;
-    height: 16px;
-    position: absolute;
-    right: 15px;
-  }
-  &__disabled {
-    color: $input-disabled-color !important;
-    input:disabled {
-      background: none;
-      color: $input-disabled-color;
-      cursor: not-allowed;
-      opacity: 1;
-      -webkit-text-fill-color: $input-disabled-color;
-    }
-  }
-  &__require {
-    color: $primary-color;
-    display: inline-block;
-    margin-right: 5px;
-  }
-
-  .input-text,
-  &__text--readonly {
-    width: 90%;
     padding: 0;
-    line-height: inherit;
-    text-align: left;
-    outline: 0 none;
     border: 0;
+    outline: 0 none;
+    font: inherit;
     text-decoration: none;
-    background: transparent;
-    resize: none;
-    color: $gray1;
-  }
-
-  &-label {
-    width: 80px;
-    overflow: hidden;
-    margin-right: 6px;
-    text-align: left;
-  }
-  &-value {
-    flex: 1;
-    vertical-align: middle;
   }
-  &-right-mark {
-    .nut-input-main-con {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
 
-    .nut-input-inner {
-      flex: 1;
-    }
-    .nut-input-button,
-    .nut-input-right-icon {
-      width: auto;
-    }
-  }
-  &-inner {
-    position: relative;
-    display: flex;
-    align-items: center;
-  }
-  &-box {
-    position: relative;
-    width: 100%;
-  }
-  &-disabled-mask {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    z-index: 2;
-  }
-  &-error-message {
-    color: $input-required-color;
-    font-size: 12px;
-  }
-  &-word-limit {
-    display: flex;
-    justify-content: flex-end;
-    margin-top: 4px;
-    color: #808080;
-    font-size: 12px;
-  }
-  &-left-icon,
-  &-right-icon {
-    display: flex;
-    align-items: center;
-    font-size: 0;
-    i {
-      color: $gray1;
-    }
-  }
-  &-clear,
-  &-right-icon {
-    margin-left: 4px;
-  }
-  &-left-icon {
-    margin-right: 4px;
-  }
-  &-clear-box {
-    height: 100%;
-    .nut-input-clear {
-      vertical-align: -2px;
-    }
-  }
-  &-clear-wrap {
-    width: 16px;
-    height: 16px;
-  }
-  &-clear {
-    width: 16px;
-    height: 16px;
-    color: #c8c9cc;
-    cursor: pointer;
-  }
-  .nut-button {
-    margin-left: 10px;
-  }
-  &.nut-input-required {
-    &::before {
-      position: absolute;
-      left: 14px;
-      color: $input-required-color;
-      content: '*';
-    }
-  }
   &-disabled {
     color: $input-disabled-color !important;
+
     input:disabled {
       background: none;
       color: $input-disabled-color;
@@ -199,9 +37,4 @@ textarea {
       -webkit-text-fill-color: $input-disabled-color;
     }
   }
-  &-error,
-  &-error::placeholder {
-    color: $input-required-color;
-    -webkit-text-fill-color: $input-required-color;
-  }
 }

package/dist/packages/tabbar/tabbar.scss

@@ -1,46 +1,40 @@
-.nut-theme-dark {
-  .nut-tabbar {
-    background: $dark4;
-  }
-}
 
 .nut-tabbar {
   border: 0px;
   box-shadow: $tabbar-box-shadow;
   border-bottom: $tabbar-border-bottom;
   border-top: $tabbar-border-top;
-  height: $tabbar-height;
   width: 100%;
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
   box-sizing: border-box;
   background: $white;
 
+  &__wrap {
+    width: 100%;
+    height: $tabbar-height;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+  }
+
   &:last-child {
     border-right: 0;
   }
 
-  &__bottom {
+  &__fixed {
     position: fixed;
     bottom: 0px;
     left: 0px;
-    z-index: 888;
   }
 
-  &__safebottom {
-    bottom: constant(safe-area-inset-bottom);
-    bottom: env(safe-area-inset-bottom);
-
-    &::after {
-      content: '';
-      z-index: 90;
-      position: fixed;
-      left: 0;
-      bottom: 0;
-      height: env(safe-area-inset-bottom);
-      width: 100%;
-      background-color: #fff;
-    }
+  &__safe-area {
+    display: block;
+    width: 100%;
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
   }
 }

package/dist/packages/tabbaritem/tabbaritem.scss

@@ -1,13 +1,3 @@
-.nut-theme-dark {
-  .nut-tabbar-item {
-    color: $dark1;
-
-    &--active {
-      color: $primary-color;
-    }
-  }
-}
-
 .nut-tabbar-item {
   display: flex;
   flex-direction: column;
@@ -16,11 +6,11 @@
   flex: 1;
   text-align: center;
   text-decoration: none;
-  color: $gray1;
+  color: $tabbar-inactive-color;
   height: 100%;
 
-  &--active {
-    color: $primary-color;
+  &-active {
+    color: $tabbar-active-color;
   }
 
   &__icon-box {
@@ -30,67 +20,16 @@
     align-items: center;
     position: relative;
 
-    &__tips {
-      position: absolute;
-      background: $tabbar-active-color;
-      border: 1px solid $white;
-      border-radius: 7px;
-      text-align: center;
-      top: calc(50% - 6px);
-      right: calc(50% - 16px);
-      box-shadow: 0 0 0 1px $white;
-      font-size: $font-size-1;
-      color: $primary-text-color;
-      z-index: 1;
-    }
-
-    &__dot {
-      position: absolute;
-      width: 7px;
-      height: 7px;
-      border: 0;
-      border-radius: 7px;
-      padding: 0px;
-      background: $tabbar-active-color;
-      top: $tabbar-dot-top;
-      right: calc(50% - $tabbar-dot-right);
-      transform: translate(50%, -50%);
-    }
-
-    &__num {
-      line-height: 1;
-      font-size: $tabbar-item-text-font-size;
-      color: $primary-text-color;
-      padding: 1px 2px 2px 3px;
-      top: calc(-50% + 6px);
-      right: calc(-50%);
-    }
-
-    &__nums {
-      line-height: 1;
-      font-size: $tabbar-item-text-font-size;
-      color: $primary-text-color;
-      padding: 2px 1px 2px 2px;
-      top: calc(-50% + 6px);
-      right: calc(-50% - 8px);
-    }
-
-    &__icon {
-      display: block;
-      background-size: 100% 100%;
-      background-position: center center;
-    }
-
-    &--nav-word {
+    &-nav {
       display: block;
-      font-size: $font-size-0;
-      margin-top: $tabbar-word-margin-top;
+      font-size: $tabbar-text-font-size;
+      margin-top: $tabbar-text-margin-top;
     }
 
-    &--big-word {
-      font-size: $font-size-large;
+    &-large {
+      font-size: $tabbar-text-large-font-size;
       margin-top: 0;
-      line-height: $tabbar-item-text-line-height;
+      line-height: $tabbar-text-line-height;
     }
   }
 }