@nutui/nutui-react 1.1.5-beta.4 → 1.2.0-beta.2

package/dist/packages/cell/cell.scss

@@ -2,11 +2,10 @@
 .nut-cell {
   position: relative;
   display: flex;
-  align-items: center;
   width: 100%;
-  line-height: 20px;
-  padding: 13px 16px;
-  background: $white;
+  line-height: $cell-line-height;
+  padding: $cell-padding;
+  background: $cell-background;
   border-radius: $cell-border-radius;
   box-shadow: 0px 1px 7px 0px rgba(237, 238, 241, 1);
   font-size: $cell-title-font;
@@ -16,7 +15,22 @@
 
   &:last-child {
     &::after {
-      border: 0;
+      border: 0 !important;
+    }
+  }
+
+  &--center {
+    align-items: center;
+  }
+
+  &--large {
+    font-size: $cell-large-title-font;
+    padding: $cell-large-padding;
+    .nut-cell__title-desc {
+      font-size: $cell-large-title-desc-font;
+    }
+    .nut-cell__subtitle {
+      font-size: $cell-large-title-desc-font;
     }
   }
 
@@ -25,10 +39,9 @@
     box-sizing: border-box;
     content: ' ';
     pointer-events: none;
-    right: 16px;
+    right: $cell-after-right;
     bottom: 0;
     left: 16px;
-    border-bottom: 2px solid #f5f6f7;
     transform: scaleY(0.5);
   }
 
@@ -52,27 +65,28 @@
       content: ' ';
     }
   }
+  &__icon {
+    display: flex;
+    flex-direction: row;
+    margin-right: $cell-default-icon-margin;
+  }
 
   &__title {
     display: flex;
     flex-direction: column;
     flex: 1;
-    &--icon {
-      flex-direction: row;
-      overflow: hidden;
-    }
-  }
-  &__icon {
-    margin-right: 10px;
   }
   &__subtitle {
     font-size: $cell-title-desc-font;
   }
-  &__desc {
+  &__value {
     display: inline-block;
     text-align: right;
     font-size: $cell-desc-font;
     color: $cell-desc-color;
+    &--alone {
+      color: $cell-color;
+    }
   }
   &__link {
     color: #979797;

package/dist/packages/cellgroup/cellgroup.scss

@@ -9,6 +9,15 @@
     margin-top: 30px;
     margin-bottom: 10px;
   }
+  &__desc {
+    display: inherit;
+    padding: $cell-group-desc-padding;
+    color: $cell-group-desc-color;
+    font-size: $cell-group-desc-font-size;
+    line-height: $cell-group-desc-line-height;
+    margin-top: 10px;
+    margin-bottom: 10px;
+  }
   &__wrap {
     display: inherit;
     border-radius: $cell-border-radius;
@@ -21,4 +30,9 @@
       border-radius: 0;
     }
   }
+  .nut-cell {
+    &::after {
+      border-bottom: $cell-after-border-bottom;
+    }
+  }
 }

package/dist/packages/divider/divider.scss

@@ -1,16 +1,17 @@
 .nut-divider {
   display: flex;
   align-items: center;
-  font-size: 14px;
-  color: #909ca4;
-  margin: 8px 0;
-  width: 100%;
+  font-size: $divider-text-font-size;
+  color: $divider-text-color;
+  margin: $divider-margin;
+  //   width: 100%;
 
   &::before,
   &::after {
     content: '';
-    border: 1px solid currentColor;
-    border-width: 1px 0 0;
+    border: $divider-line-height solid currentColor;
+    border-width: $divider-line-height 0 0;
+    height: $divider-line-height;
     flex: 1;
   }
 
@@ -18,11 +19,11 @@
   &.nut-divider__left,
   &.nut-divider__right {
     &::before {
-      margin-right: 8px;
+      margin-right: $divider-before-margin-right;
     }
 
     &::after {
-      margin-left: 8px;
+      margin-left: $divider-after-margin-left;
     }
   }
 
@@ -51,4 +52,12 @@
       transform: scaleY(0.5);
     }
   }
+  &.nut-divider__vertical {
+    position: relative;
+    top: $divider-vertical-top;
+    display: inline-block;
+    height: $divider-vertical-height;
+    border-left: 1px solid $divider-vertical-border-left;
+    margin: $divider-vertical-margin;
+  }
 }

package/dist/packages/indicator/indicator.scss

@@ -0,0 +1,63 @@
+.nut-indicator {
+  &__block {
+    display: block;
+    width: 100%;
+  }
+  &__align__left {
+    text-align: left;
+  }
+  &__align__right {
+    text-align: right;
+  }
+  &__align__center {
+    text-align: center;
+  }
+  &__dot,
+  &__number {
+    margin: 0 $indicator-dot-margin;
+    &:first-child {
+      margin-left: $indicator-dot-first-margin;
+    }
+    &:last-child {
+      margin-right: $indicator-dot-last-margin;
+    }
+  }
+  &__dot {
+    display: inline-block;
+    vertical-align: middle;
+    width: $indicator-dot-size;
+    height: $indicator-dot-size;
+    border-radius: 50%;
+    background-color: $indicator-dot-color;
+  }
+  &__number {
+    display: inline-block;
+    position: relative;
+    width: $indicator-size;
+    height: $indicator-size;
+    text-align: center;
+    font-size: $indicator-number-font-size;
+    line-height: $indicator-size;
+    color: $indicator-white;
+    vertical-align: middle;
+    border: 1px solid $indicator-white;
+    border-radius: 50%;
+    background-color: $indicator-color;
+    box-shadow: 0 0 1px 1px $indicator-color;
+  }
+  &__vertical {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    .nut-indicator__dot {
+      margin: $indicator-dot-vertical-margin 0;
+      &:first-child {
+        margin-top: $indicator-dot-first-margin;
+      }
+      &:last-child {
+        margin-bottom: $indicator-dot-last-margin;
+      }
+    }
+  }
+}

package/dist/packages/timedetail/timedetail.scss

@@ -0,0 +1,26 @@
+.nut-timedetail {
+  display: flex;
+  align-content: flex-start;
+  flex-wrap: wrap;
+  padding: 0 0 50px 13px;
+
+  &__item {
+    width: 100px;
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    background-color: #f6f7f9;
+    border-radius: 5px;
+    color: #333;
+    font-size: 14px;
+    border: 1px solid transparent;
+    font-weight: 700;
+  }
+  &__item-active {
+    background-color: #fa2c1926;
+    border: 1px solid #fa2c19;
+    color: #fa2c19;
+  }
+}

package/dist/packages/timepannel/timepannel.scss

@@ -0,0 +1,7 @@
+.nut-timepannel {
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  color: #666;
+  font-size: 14px;
+}

package/dist/packages/timeselect/timeselect.scss

@@ -0,0 +1,34 @@
+
+.nut-timeselect {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  &__title {
+    height: 50px;
+    line-height: 50px;
+    margin-bottom: 10px;
+    font-size: 14px;
+    color: #1a1a1a;
+    text-align: center;
+  }
+
+  &__content {
+    display: flex;
+    flex: 1;
+  }
+
+  &__content-left {
+    width: 140px;
+    min-width: 140px;
+    height: 100%;
+    overflow: auto;
+    background-color: #f6f7f9;
+  }
+
+  .nut-timepannel-active {
+    background-color: #fff;
+    color: #333;
+    font-weight: 700;
+  }
+}