@nutui/nutui-react 2.0.0-alpha.1 → 2.0.0-alpha.11

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

@@ -1,16 +1,5 @@
 @import '../../styles/mixins/text-ellipsis.scss';
 
-.nut-theme-dark {
-  .nut-menu {
-    .nut-menu__bar {
-      background-color: $dark6;
-      .nut-menu__item {
-        color: $gray6;
-      }
-    }
-  }
-}
-
 .nut-menu {
   &.scroll-fixed {
     position: fixed;
@@ -18,58 +7,58 @@
     z-index: $menu-scroll-fixed-z-index;
     width: 100%;
   }
+}
 
-  .nut-menu-relative {
-    position: relative;
-  }
-
-  .nut-menu__bar {
-    position: relative;
-    display: flex;
-    line-height: $menu-bar-line-height;
-    background-color: $white;
-    box-shadow: $menu-bar-box-shadow;
+.nut-menu-relative {
+  position: relative;
+}
 
-    &.opened {
-      z-index: $menu-bar-opened-z-index;
-    }
+.nut-menu__bar {
+  position: relative;
+  display: flex;
+  line-height: $menu-bar-line-height;
+  background-color: $white;
+  box-shadow: $menu-bar-box-shadow;
 
-    .nut-menu__item {
-      flex: 1;
-      text-align: center;
-      font-size: $menu-item-font-size;
-      color: $menu-item-text-color;
-      min-width: 0;
+  &.opened {
+    z-index: $menu-bar-opened-z-index;
+  }
+}
 
-      &.active {
-        color: $menu-item-active-text-color;
-      }
+.nut-menu__item {
+  flex: 1;
+  text-align: center;
+  font-size: $menu-item-font-size;
+  color: $menu-item-text-color;
+  min-width: 0;
 
-      &.disabled {
-        color: $menu-item-disabled-color;
-      }
+  &.active {
+    color: $menu-item-active-text-color;
+  }
 
-      .nut-menu__title-icon {
-        transition: all 0.2s linear;
-      }
+  &.disabled {
+    color: $menu-item-disabled-color;
+  }
+}
 
-      .nut-menu__title {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        max-width: 100%;
+.nut-menu__title-icon {
+  transition: all 0.2s linear;
+}
 
-        .nut-menu__title-text {
-          @include text-ellipsis;
-          display: block;
-          padding-left: $menu-title-text-padding-left;
-          padding-right: $menu-title-text-padding-right;
-        }
+.nut-menu__title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 100%;
 
-        &.active .nut-menu__title-icon {
-          transform: rotate(180deg);
-        }
-      }
-    }
+  &.active .nut-menu__title-icon {
+    transform: rotate(180deg);
   }
 }
+
+.nut-menu__title-text {
+  @include text-ellipsis;
+  display: block;
+  padding-left: $menu-title-text-padding-left;
+  padding-right: $menu-title-text-padding-right;
+}

package/dist/packages/menuitem/menuitem.scss

@@ -1,14 +1,4 @@
 
-.nut-theme-dark {
-  .nut-menu-item__content {
-    background: $dark6;
-
-    .nut-menu-item__option {
-      color: $dark1;
-    }
-  }
-}
-
 .nut-menu-item__content {
   padding: $menu-item-content-padding;
   max-height: $menu-item-content-max-height;
@@ -22,25 +12,25 @@
     opacity: 0;
     position: fixed;
   }
+}
 
-  .nut-menu-item__option {
-    color: $title-color;
-    font-size: $font-size-2;
-    padding-top: $menu-item-option-padding-top;
-    padding-bottom: $menu-item-option-padding-bottom;
-    display: flex;
-    align-items: center;
+.nut-menu-item__option {
+  color: $title-color;
+  font-size: $font-size-2;
+  padding-top: $menu-item-option-padding-top;
+  padding-bottom: $menu-item-option-padding-bottom;
+  display: flex;
+  align-items: center;
 
-    &.active {
-      font-weight: 500;
-      color: $menu-item-active-text-color;
-    }
+  &.active {
+    font-weight: 500;
+    color: $menu-item-active-text-color;
+  }
 
-    i {
-      margin-right: $menu-item-option-i-margin-right;
-      display: inline-flex;
-      align-items: center;
-    }
+  i {
+    margin-right: $menu-item-option-i-margin-right;
+    display: inline-flex;
+    align-items: center;
   }
 }
 

package/dist/packages/navbar/navbar.scss

@@ -1,36 +1,3 @@
-.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;
@@ -41,19 +8,11 @@
   padding: $navbar-padding;
   background: $navbar-background;
   box-shadow: $navbar-box-shadow;
-  font-size: $navbar-title-base-font;
+  font-size: $navbar-font-size;
   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;
@@ -71,29 +30,6 @@
     padding-top: env(safe-area-inset-top);
   }
 
-  &--clickable {
-    &::before {
-      position: absolute;
-      content: ' ';
-      top: 50%;
-      left: 50%;
-      width: 100%;
-      height: 100%;
-      background-color: $black;
-      border: inherit;
-      border-color: $black;
-      border-radius: inherit;
-      transform: translate(-50%, -50%);
-      opacity: 0;
-    }
-  }
-
-  .nutui-iconfont {
-    .nut-icon-left {
-      text-align: left;
-    }
-  }
-
   &__title {
     min-width: 53%;
     margin: 0 auto;
@@ -101,35 +37,9 @@
     display: flex;
     align-items: center;
     justify-content: center;
-
-    .title {
-      min-width: $navbar-title-width;
-      font-size: $navbar-title-font;
-      font-weight: $navbar-title-font-weight;
-      color: $navbar-title-font-color;
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 1;
-      overflow: hidden;
-    }
-
-    &.icon {
-      .icon {
-        margin: $navbar-title-icon-margin;
-      }
-    }
-
-    .nut-icon {
-      display: inline;
-    }
-
-    &-description {
-      font-size: $cell-description-font-size;
-    }
-
-    .text__title {
-      display: inline-block;
-    }
+    font-size: $navbar-title-font-size;
+    font-weight: $navbar-title-font-weight;
+    color: $navbar-title-font-color;
 
     .nut-tabs__titles {
       background: $white;
@@ -148,11 +58,9 @@
     display: none;
   }
 
-  &__left {
-    font-size: $cell-extra-font-size;
-    color: $gray2;
+  &__left,
+  &__right {
     position: absolute;
-    left: 0;
     top: 0;
     bottom: 0;
     display: flex;
@@ -161,24 +69,17 @@
     padding: 0 16px;
   }
 
-  &__right {
-    font-size: $cell-extra-font-size;
-    color: $gray2;
-    position: absolute;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    display: flex;
-    align-items: center;
-    padding: 0 16px;
-    cursor: pointer;
-
-    .rightIcon {
-      margin-left: 16px;
+  &__left {
+    left: 0;
+    &__back {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 10px;
     }
+  }
 
-    .leftIcon {
-      margin-left: 16px;
-    }
+  &__right {
+    right: 0;
   }
 }

package/dist/packages/noticebar/noticebar.scss

@@ -1,23 +1,6 @@
-.nut-theme-dark {
-  .nut-noticebar {
-    .wrap {
-      .content {
-        a {
-          color: $noticebar-color;
-        }
-      }
-    }
-    .nut-noticebar-vertical {
-      .horseLamp_list {
-        .custom-item {
-          color: $noticebar-color;
-        }
-      }
-    }
-  }
-}
 .nut-noticebar {
   width: 100%;
+
   .nut-noticebar-page {
     display: flex;
     padding: $noticebar-box-padding;
@@ -27,11 +10,14 @@
     align-items: center;
     background: $noticebar-background;
     color: $noticebar-color;
+
     &.wrapable {
       height: auto;
-      padding: $noticebar-wrapable-padding;
+      padding: $noticebar-wrap-padding;
+
       .wrap {
         height: auto;
+
         .content {
           position: relative;
           white-space: normal;
@@ -44,12 +30,14 @@
       position: relative;
       padding-right: 40px;
     }
+
     .left-icon {
       height: $noticebar-left-icon-width;
       min-width: $noticebar-left-icon-width;
       margin: $noticebar-lefticon-margin;
       background-size: 100% 100%;
     }
+
     .right-icon {
       display: flex;
       align-items: center;
@@ -57,6 +45,7 @@
       width: $noticebar-right-icon-width;
       margin: $noticebar-righticon-margin;
     }
+
     .wrap {
       display: flex;
       flex: 1;
@@ -65,9 +54,11 @@
       overflow: hidden;
       position: relative;
     }
+
     .content {
       position: absolute;
       white-space: nowrap;
+
       &.nut-ellipsis {
         max-width: 100%;
         white-space: nowrap;
@@ -75,13 +66,16 @@
         text-overflow: ellipsis;
       }
     }
+
     // 只跑一次
     .play {
       animation: nut-notice-bar-play linear both running;
     }
+
     .play-infinite {
       animation: nut-notice-bar-play-infinite linear infinite both running;
     }
+
     .play-vertical {
       animation: nut-notice-bar-play-vertical linear infinite both running;
     }
@@ -98,6 +92,7 @@
       transform: translate3d(-100%, 0, 0);
     }
   }
+
   // 垂直方向的滚动
   @keyframes nut-notice-bar-play-vertical {
     to {
@@ -116,6 +111,7 @@
     padding: $noticebar-box-padding;
     background: $noticebar-background;
     color: $noticebar-color;
+
     .left-icon {
       height: $noticebar-left-icon-width;
       min-width: $noticebar-left-icon-width;
@@ -124,11 +120,13 @@
       display: flex;
       align-self: center;
     }
+
     .horseLamp_list {
       margin: 0;
       padding: 0;
       display: block;
       flex: 1;
+
       .horseLamp_list_item {
         display: flex;
         align-items: center;
@@ -136,6 +134,7 @@
         width: 100%;
       }
     }
+
     .nut-noticebar__inner {
       display: flex;
       height: 100%;

package/dist/packages/notify/notify.scss

@@ -50,7 +50,7 @@
   text-align: center;
   word-wrap: break-word;
   height: $notify-height;
-
+  line-height: $notify-line-height;
   &--popup-top {
     position: fixed;
     top: 0;