@nutui/nutui-react 1.5.1 → 1.5.2-beta.0

package/dist/packages/price/price.scss

@@ -1,37 +0,0 @@
-.nut-price {
-  font-size: $font-size-3;
-  display: inline;
-  color: $primary-color;
-  &__symbol,
-  &__integer,
-  &__decimal {
-    display: inline-block;
-  }
-  &__symbol {
-    font-size: $price-symbol-medium-size;
-    &-large {
-      font-size: $price-symbol-big-size;
-    }
-    &-small {
-      font-size: $price-symbol-small-size;
-    }
-  }
-  &__integer {
-    font-size: $price-integer-medium-size;
-    &-large {
-      font-size: $price-integer-big-size;
-    }
-    &-small {
-      font-size: $price-integer-small-size;
-    }
-  }
-  &__decimal {
-    font-size: $price-decimal-medium-size;
-    &-large {
-      font-size: $price-decimal-big-size;
-    }
-    &-small {
-      font-size: $price-decimal-small-size;
-    }
-  }
-}

package/dist/packages/progress/progress.scss

@@ -1,114 +0,0 @@
-
-.nut-theme-dark {
-  .nut-progress {
-    &-text {
-      .nut-icon-checked {
-        color: rgba(38, 191, 38, 1) !important;
-      }
-    }
-  }
-}
-
-.nut-progress {
-  display: flex;
-  align-items: center;
-  position: relative;
-  width: 100%;
-
-  .nut-progress-text {
-    color: $progress-text-color;
-  }
-
-  &-outer {
-    flex: auto;
-    border-radius: $progress-border-radius;
-
-    .nut-progress-text {
-      color: $progress-text-inner-color;
-    }
-
-    .nut-progress-active:before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      border-radius: $progress-border-radius;
-      animation: progressActive 2s ease-in-out infinite;
-    }
-  }
-
-  &-small {
-    height: $progress-small-height;
-
-    .nut-progress-text {
-      font-size: $progress-small-font-size;
-      padding: $progress-small-padding;
-    }
-  }
-
-  &-base {
-    height: $progress-base-height;
-
-    .nut-progress-text {
-      font-size: $progress-base-font-size;
-      padding: $progress-base-padding;
-    }
-  }
-
-  &-large {
-    height: $progress-large-height;
-
-    .nut-progress-text {
-      font-size: $progress-large-font-size;
-      padding: $progress-large-padding;
-    }
-  }
-
-  &-inner {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    transition: all 0.4s;
-    border-radius: $progress-border-radius;
-  }
-
-  &-text {
-    display: flex;
-    padding: $progress-text-padding;
-    font-size: $progress-text-font-size;
-    line-height: 1;
-    min-width: 35px;
-  }
-
-  &-insidetext {
-    position: absolute;
-    top: $progress-insidetext-position-top;
-    bottom: $progress-insidetext-position-bottom;
-    display: flex;
-    align-items: center;
-    min-width: 0px;
-    transition: all 0.4s;
-    transform: translate(-50%);
-    border-radius: $progress-insidetext-border-radius;
-  }
-
-  @keyframes progressActive {
-    0% {
-      background: rgba(255, 255, 255, 0.1);
-      width: 0;
-    }
-
-    20% {
-      background: rgba(255, 255, 255, 0.5);
-      width: 0;
-    }
-
-    to {
-      background: rgba(255, 255, 255, 0);
-      width: 100%;
-    }
-  }
-}

package/dist/packages/pulltorefresh/pulltorefresh.scss

@@ -1,26 +0,0 @@
-.nut-theme-dark {
-  .nut-pulltorefresh {
-    &-head-content {
-      color: $dark1;
-    }
-  }
-}
-
-.nut-pulltorefresh {
-  &-head {
-    overflow: hidden;
-    position: relative;
-    font-size: 14px;
-
-    &-content {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      color: $title-color;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-  }
-}

package/dist/packages/radio/radio.scss

@@ -1,84 +0,0 @@
-
-.nut-theme-dark {
-  .nut-radio {
-    &__label {
-      color: $dark1;
-      &--disabled {
-        color: $dark2;
-      }
-    }
-    &__button {
-      background: $dark4;
-      color: $dark1;
-      &--active {
-        color: $primary-color;
-      }
-      &--disabled {
-        color: $dark2;
-        border: 1px solid $dark2;
-      }
-    }
-  }
-}
-
-.nut-radio {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-
-  &:last-child {
-    margin-bottom: 0 !important;
-    margin-right: 0 !important;
-  }
-
-  &.nut-radio--reverse {
-    .nut-radio__label {
-      margin-right: $radio-label-margin-left;
-      margin-left: 0;
-    }
-  }
-
-  &__button {
-    display: inline-flex;
-    align-items: center;
-    padding: $radio-button-padding;
-    font-size: $radio-button-font-size;
-    background: $radio-button-background;
-    border-radius: $radio-button-border-radius;
-    color: $radio-label-font-color;
-    box-sizing: border-box;
-    border: 1px solid $radio-button-background;
-
-    &--active {
-      background: $radio-label-button-background;
-      color: $radio-label-font-active-color;
-      border: 1px solid $radio-label-button-border-color;
-    }
-    &--disabled {
-      color: $radio-label-disable-color;
-      border: none;
-    }
-  }
-
-  &__label {
-    margin-left: $radio-label-margin-left;
-    font-size: $radio-label-font-size;
-    color: $radio-label-font-color;
-    &--disabled {
-      color: $radio-label-disable-color;
-    }
-  }
-
-  &__icon {
-    color: $radio-label-font-active-color;
-    transition-duration: 0.3s;
-    transition-property: color, border-color, background-color;
-    font-size: $radio-icon-font-size;
-  }
-  &__icon--unchecked {
-    color: $radio-icon-disable-color;
-  }
-  &__icon--disable {
-    color: $radio-icon-disable-color2;
-  }
-}

package/dist/packages/radiogroup/radiogroup.scss

@@ -1,86 +0,0 @@
-.nut-theme-dark {
-  .nut-radiogroup {
-    &--vertical {
-      .nut-radio {
-        &__label {
-          margin-right: 5px;
-        }
-
-        &__button {
-          background-color: $dark4;
-          border: 1px solid $dark6;
-        }
-
-        &__button--active {
-          border-color: $radio-label-button-border-color;
-        }
-      }
-    }
-
-    &--horizontal {
-      .nut-radio {
-        &__label {
-          margin-right: 5px;
-        }
-
-        &__button {
-          background-color: $dark4;
-          border: 1px solid $dark6;
-        }
-
-        &__button--active {
-          border-color: $radio-label-button-border-color;
-        }
-      }
-    }
-  }
-}
-
-.nut-radiogroup {
-  .nut-radio {
-    margin-bottom: 5px;
-
-    &__label {
-      margin-right: 5px;
-    }
-
-    &__button {
-      background-color: $gray4;
-    }
-  }
-
-  &--vertical {
-    .nut-radio {
-      &.nut-radio--reverse {
-        width: 100%;
-        justify-content: space-between;
-      }
-
-      &__label {
-        margin-right: 5px;
-      }
-
-      &__button {
-        border: 1px solid $gray6;
-      }
-
-      &__button--active {
-        border-color: $radio-label-button-border-color;
-        background-color: $radio-label-button-background;
-      }
-    }
-  }
-
-  &--horizontal {
-    .nut-radio {
-      display: inline-flex;
-      margin-right: 20px;
-
-      &--round {
-        .nut-radio__label {
-          margin: 0 6px;
-        }
-      }
-    }
-  }
-}

package/dist/packages/range/range.scss

@@ -1,224 +0,0 @@
-
-.nut-theme-dark {
-  .nut-range-container {
-    background: $dark5;
-    .min,
-    .max {
-      color: $dark1;
-    }
-    .nut-range {
-      &-mark-text {
-        color: $dark2;
-      }
-      &-button {
-        .number {
-          color: $dark1;
-        }
-      }
-    }
-  }
-}
-
-.nut-range-container {
-  display: flex;
-  position: relative;
-  width: 100%;
-  height: 4px;
-  align-items: center;
-  .min,
-  .max {
-    font-size: $font-size-1;
-    color: $range-tip-font-color;
-    user-select: none;
-  }
-  &-vertical {
-    height: 100%;
-    flex-direction: column;
-    padding: 0px 15px;
-    .nut-range {
-      width: 4px;
-      height: 100%;
-      &-button {
-        &-wrapper,
-        &-wrapper-right {
-          position: absolute;
-          top: initial;
-          bottom: 0px;
-          left: 50%;
-          right: initial;
-          transform: translate3d(-50%, 50%, 0);
-        }
-
-        &-wrapper-left {
-          top: 0px;
-          left: 50%;
-          right: initial;
-          transform: translate3d(-50%, -50%, 0);
-        }
-      }
-      .number {
-        transform: translate3d(100%, 0, 0);
-      }
-      &-vertical {
-        margin: 10px 0px;
-      }
-      &-mark {
-        position: absolute;
-        width: 100%;
-        right: 50%;
-        overflow: visible;
-        font-size: 12px;
-        height: 100%;
-        top: initial;
-        width: 36px;
-        padding: 0px;
-      }
-
-      &-mark-text {
-        width: 20px;
-        position: absolute;
-        display: inline-block;
-        line-height: 16px;
-        color: #999;
-        text-align: center;
-        word-break: keep-all;
-        user-select: none;
-        transform: translateY(-50%);
-        &-active {
-          .nut-range-tick {
-            background: $range-bar-bg-color;
-          }
-        }
-      }
-      &-tick {
-        position: absolute;
-        top: 0px;
-        left: 30px;
-        width: 11px;
-        height: 11px;
-        margin-left: -0px;
-        border-radius: 50%;
-        background-color: $range-bg-color-tick;
-      }
-    }
-  }
-}
-.nut-range {
-  display: block;
-  position: relative;
-  width: 100%;
-  height: 4px;
-  background-color: $range-bg-color;
-  border-radius: 2px;
-  cursor: pointer;
-  &::before {
-    position: absolute;
-    top: -8px;
-    right: 0;
-    bottom: -8px;
-    left: 0;
-    content: '';
-  }
-
-  &-bar {
-    display: block;
-    position: relative;
-    width: 100%;
-    height: 100%;
-    background: $range-bar-bg-color;
-    border-radius: inherit;
-    transition: all 0.2s;
-  }
-
-  &-button {
-    display: block;
-    width: $range-bar-btn-width;
-    height: $range-bar-btn-height;
-    background-color: $range-bar-btn-bg-color;
-    border-radius: 50%;
-    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
-    border: $range-bar-btn-border;
-    outline: none;
-
-    &-wrapper,
-    &-wrapper-right {
-      touch-action: none;
-      position: absolute;
-      top: 50%;
-      right: 0;
-      transform: translate3d(50%, -50%, 0);
-      cursor: grab;
-      outline: none;
-    }
-
-    &-wrapper-left {
-      position: absolute;
-      top: 50%;
-      left: 0;
-      transform: translate3d(-50%, -50%, 0);
-      cursor: grab;
-      outline: none;
-      touch-action: none;
-    }
-
-    .number {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      user-select: none;
-      font-size: $font-size-1;
-      color: $range-tip-font-color;
-      transform: translate3d(0, -100%, 0);
-    }
-  }
-  &-disabled {
-    cursor: not-allowed;
-    opacity: 0.54;
-
-    .nut-range-button-wrapper,
-    .nut-range-button-wrapper-left,
-    .nut-range-button-wrapper-right {
-      cursor: not-allowed;
-    }
-  }
-  &-show-number {
-    margin: 0 15px;
-  }
-
-  &-mark {
-    position: absolute;
-    width: 100%;
-    overflow: visible;
-    top: 50%;
-    font-size: 12px;
-    padding-top: 14px;
-  }
-
-  &-mark-text {
-    position: absolute;
-    display: inline-block;
-    line-height: 16px;
-    color: #999;
-    text-align: center;
-    word-break: keep-all;
-    user-select: none;
-    transform: translateX(-50%);
-    &-active {
-      .nut-range-tick {
-        background: $range-bar-bg-color;
-      }
-    }
-  }
-  &-tick {
-    position: absolute;
-    top: -20px;
-    width: 11px;
-    height: 11px;
-    // margin-left: -11px;
-    left: 0px;
-    border-radius: 50%;
-    background-color: $range-bg-color-tick;
-  }
-}

package/dist/packages/rate/rate.scss

@@ -1,36 +0,0 @@
-
-.nut-rate {
-  display: flex;
-  &-item {
-    display: flex;
-    flex-shrink: 0;
-    position: relative;
-
-    &__icon {
-      color: $rate-icon-color;
-      cursor: pointer;
-      &--disabled {
-        color: $rate-icon-void-color;
-      }
-
-      &.nut-rate-item__icon.nut-rate-item__icon--half {
-        position: absolute;
-        width: 50% !important;
-        left: 0;
-        top: 0;
-        overflow: hidden;
-      }
-
-      &.nut-rate-item__icon::before {
-        position: relative;
-        top: auto;
-        left: auto;
-        transform: none;
-      }
-    }
-
-    &:last-child {
-      margin-right: 0;
-    }
-  }
-}

package/dist/packages/row/row.scss

@@ -1,83 +0,0 @@
-.nut-theme-dark {
-  .flex-content {
-    line-height: $row-content-line-height;
-    color: $row-content-color;
-    text-align: center;
-    border-radius: $row-content-border-radius;
-    background: $dark4;
-    &.flex-content-light {
-      background: $dark8;
-    }
-    &.flex-content-height {
-      height: $row-content-height;
-    }
-  }
-}
-
-.flex-content {
-  line-height: $row-content-line-height;
-  color: $row-content-color;
-  text-align: center;
-  border-radius: $row-content-border-radius;
-  background: $row-content-background-color;
-  font-size: 14px;
-
-  &.flex-content-light {
-    background: $row-content-light-background-color;
-  }
-  &.flex-content-height {
-    height: $row-content-height;
-  }
-}
-.nut-row {
-  width: 100%;
-  overflow: hidden;
-  &:after {
-    display: block;
-    height: 0;
-    clear: both;
-    visibility: hidden;
-    content: '';
-  }
-
-  &-flex {
-    display: flex;
-    &:after {
-      display: none;
-    }
-    .nut-col {
-      float: none;
-    }
-  }
-  &-justify-center {
-    justify-content: center;
-  }
-  &-justify-end {
-    justify-content: flex-end;
-  }
-  &-justify-space-between {
-    justify-content: space-between;
-    align-items: center;
-  }
-  &-justify-space-around {
-    justify-content: space-around;
-  }
-  &-align-flex-start {
-    align-items: flex-start;
-  }
-  &-align-center {
-    align-items: center;
-  }
-  &-align-flex-end {
-    align-items: flex-end;
-  }
-  &-flex-wrap {
-    flex-wrap: wrap;
-  }
-  &-flex-nowrap {
-    flex-wrap: nowrap;
-  }
-  &-flex-reverse {
-    flex-wrap: wrap-reverse;
-  }
-}