@nutui/nutui 3.1.21-beta.0 → 3.1.21-beta.1

package/dist/packages/categorypane/index.scss

@@ -0,0 +1,124 @@
+.nut-categorypane {
+  &__cateList {
+    display: flex;
+    background: rgba(255, 255, 255, 1);
+  }
+
+  &__cateListLeft {
+    background: rgba(246, 247, 249, 1);
+  }
+
+  &__cateListItemChecked,
+  &__cateListItem {
+    width: 100px;
+    height: 50px;
+    font-size: 13px;
+    font-family: PingFangSC;
+    font-weight: normal;
+    color: rgba(51, 51, 51, 1);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: all 0.3s;
+  }
+  &__cateListItemChecked {
+    background: rgba(255, 255, 255, 1);
+    font-weight: 500;
+    transition: all 0.3s;
+  }
+
+  &__cateListRight {
+    padding-left: 15px;
+    background: rgba(255, 255, 255, 1);
+  }
+
+  &__childTitle {
+    margin-top: 15px;
+    margin-bottom: 15px;
+    font-size: 13px;
+    font-family: PingFangSC;
+    font-weight: 500;
+    color: rgba(51, 51, 51, 1);
+  }
+
+  &__childItemList {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  &__childItem {
+    margin-right: 10px;
+  }
+
+  &__childImg {
+    width: 75px;
+    height: 75px;
+    border-radius: 5px;
+  }
+
+  &__skuName {
+    margin-right: 10px;
+    width: 75px;
+    height: 40px;
+    border: 1px solid rgba(153, 153, 153, 1);
+    border-radius: 5px;
+    font-size: 12px;
+    font-family: PingFangSC;
+    font-weight: normal;
+    color: rgba(102, 102, 102, 1);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    &:nth-child(3n) {
+      margin-right: 0;
+    }
+    &:nth-child(n + 4) {
+      margin-top: 15px;
+    }
+  }
+
+  &__skuImg {
+    font-size: 12px;
+    font-family: PingFangSC;
+    font-weight: normal;
+    color: rgba(102, 102, 102, 1);
+    margin-top: 10px;
+    margin-bottom: 10px;
+    text-align: center;
+  }
+
+  &__selfItemList {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  &__selfskuName {
+    margin-left: 15px;
+    margin-top: 15px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 75px;
+    height: 40px;
+    border: 1px solid rgba(153, 153, 153, 1);
+    border-radius: 5px;
+    font-size: 12px;
+    font-family: PingFangSC;
+    font-weight: normal;
+    color: rgba(102, 102, 102, 1);
+  }
+
+  &__skuName {
+    margin-left: 15px;
+    margin-top: 15px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 75px;
+    height: 40px;
+    border: 1px solid rgba(153, 153, 153, 1);
+    border-radius: 5px;
+    font-size: 12px;
+    font-family: PingFangSC;
+    font-weight: normal;
+    color: rgba(102, 102, 102, 1);
+  }
+}

package/dist/packages/cell/index.scss

@@ -0,0 +1,76 @@
+.nut-cell {
+  position: relative;
+  display: flex;
+  width: 100%;
+  line-height: $cell-line-height;
+  padding: $cell-padding;
+  background: $white;
+  border-radius: $cell-border-radius;
+  box-shadow: 0px 1px 7px 0px rgba(237, 238, 241, 1);
+  font-size: $cell-title-font;
+  color: $cell-color;
+  margin: 10px 0;
+  box-sizing: border-box;
+
+  &:last-child {
+    &::after {
+      border: 0 !important;
+    }
+  }
+
+  &::after {
+    position: absolute;
+    box-sizing: border-box;
+    content: ' ';
+    pointer-events: none;
+    right: $cell-after-right;
+    bottom: 0;
+    left: 16px;
+    transform: scaleY(0.5);
+  }
+
+  &:active::before {
+    opacity: 0.1;
+  }
+  &--clickable {
+    cursor: pointer;
+    &::before {
+      position: absolute;
+      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;
+      content: ' ';
+    }
+  }
+
+  &__icon {
+    display: flex;
+    flex-direction: row;
+    margin-right: $cell-default-icon-margin;
+  }
+
+  &__title {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    &-desc {
+      font-size: $cell-title-desc-font;
+    }
+  }
+  &__value {
+    display: inline-block;
+    text-align: right;
+    font-size: $cell-desc-font;
+    color: $cell-desc-color;
+  }
+  &__link {
+    color: #979797;
+  }
+}

package/dist/packages/cellgroup/index.scss

@@ -0,0 +1,38 @@
+.nut-cell-group {
+  display: block;
+  &__title {
+    display: inherit;
+    padding: $cell-group-title-padding;
+    color: $cell-group-title-color;
+    font-size: $cell-group-title-font-size;
+    line-height: $cell-group-title-line-height;
+    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;
+  }
+  &__warp {
+    display: inherit;
+    border-radius: $cell-border-radius;
+    overflow: hidden;
+    background-color: $cell-group-background-color;
+    margin: 10px 0;
+    .nut-cell {
+      margin: 0;
+      box-shadow: none;
+      border-radius: 0;
+    }
+  }
+  .nut-cell {
+    &::after {
+      border-bottom: $cell-after-border-bottom;
+    }
+  }
+}

package/dist/packages/checkbox/index.scss

@@ -0,0 +1,31 @@
+.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;
+  }
+  &__icon--disable {
+    color: $help-color;
+  }
+}

package/dist/packages/circleprogress/index.scss

@@ -0,0 +1,24 @@
+.nut-circleprogress {
+  position: relative;
+
+  &-hover {
+    stroke: $circleprogress-primary-color;
+    transition: stroke-dasharray 0.6s ease 0s, stroke 0.6s ease 0s;
+  }
+
+  &-path {
+    stroke: $circleprogress-path-color;
+  }
+
+  &-text {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    box-sizing: border-box;
+    width: 100%;
+    transform: translateY(-50%);
+    text-align: center;
+    color: $circleprogress-text-color;
+    font-size: $circleprogress-text-size;
+  }
+}

package/dist/packages/col/index.scss

@@ -0,0 +1,24 @@
+.nut-col {
+  float: left;
+  box-sizing: border-box;
+  word-break: break-all;
+
+  &-gutter {
+    &:last-child {
+      padding-right: 0 !important;
+    }
+    &:first-child {
+      padding-left: 0 !important;
+    }
+  }
+}
+
+@for $i from 1 through 24 {
+  .nut-col-offset-#{$i} {
+    margin-left: calc(100 / 24) * $i * 1%;
+  }
+
+  .nut-col-#{$i} {
+    width: calc(100 / 24) * $i * 1%;
+  }
+}

package/dist/packages/collapseitem/index.scss

@@ -0,0 +1,143 @@
+.nut-collapse-item {
+  position: relative;
+  .collapse-item {
+    &::after {
+      position: absolute;
+      box-sizing: border-box;
+      content: ' ';
+      pointer-events: none;
+      right: 16px;
+      bottom: 0;
+      left: 16px;
+      border-bottom: 1px solid #ebedf0;
+      -webkit-transform: scaleY(0.5);
+      transform: scaleY(0.5);
+    }
+    .collapse-title-value {
+      display: inline-block;
+      .collapse-title-icon {
+        top: 2px;
+      }
+    }
+  }
+  .collapse-item {
+    position: relative;
+    display: block;
+    width: 100%;
+    overflow: hidden;
+    padding: $collapse-item-padding;
+    color: $collapse-item-color;
+    font-size: $collapse-item-font-size;
+    line-height: $collapse-item-line-height;
+    background-color: #fff;
+    box-sizing: border-box;
+    .collapse-icon {
+      display: block;
+      position: absolute;
+      top: 50%;
+      // margin-top: -6px;
+      right: 16px;
+      color: $collapse-item-icon-color;
+      // width: 24px;
+      // height: 12px;
+      // line-height: 24px;
+      // background-image: url(https://img13.360buyimg.com/imagetools/jfs/t1/153504/23/6125/464/5fb240abE562ed1c5/382909c698fa3c1f.png);
+      // background-repeat: no-repeat;
+      // background-size: 100% 100%;
+      transition: transform 0.3s;
+    }
+    .col-expanded {
+      transform: rotate(-180deg);
+    }
+    .subTitle {
+      position: absolute;
+      top: 50%;
+      right: 60px;
+      margin-top: -12px;
+      color: $collapse-item-sub-title-color;
+    }
+    .titleIconRight {
+      vertical-align: middle;
+      margin: 0px 0 0 10px;
+    }
+    .titleIconLeft {
+      vertical-align: middle;
+      margin: 0px 10px 0 0;
+    }
+  }
+  // .extraRender {
+  //   display: block;
+  // }
+  .collapse-wrapper,
+  .collapse-extraWrapper {
+    display: block;
+    position: relative;
+    height: 0;
+    overflow: hidden;
+    transition: height 0.3s ease-in-out;
+    .collapse-content,
+    .collapse-extraRender {
+      display: block;
+      padding: $collapse-wrapper-content-padding;
+      color: $collapse-wrapper-content-color;
+      font-size: $collapse-wrapper-content-font-size;
+      line-height: $collapse-wrapper-content-line-height;
+      background-color: $collapse-wrapper-content-background-color;
+    }
+    .empty {
+      padding: $collapse-wrapper-empty-content-padding;
+    }
+  }
+  .collapse-extraWrapper {
+    height: auto;
+    .collapse-extraRender {
+      word-wrap: break-word;
+      word-break: break-all;
+      overflow: hidden;
+    }
+  }
+  .open-style {
+    will-change: height;
+    height: auto;
+  }
+  .close-style {
+    will-change: auto;
+    // height: 0;
+  }
+  .nut-collapse-item-disabled {
+    color: $collapse-item-disabled-color;
+    cursor: not-allowed;
+    pointer-events: none;
+    // .collapse-icon-disabled {
+    //   background-image: url(https://img12.360buyimg.com/imagetools/jfs/t1/150103/9/14710/474/5fb2419aE63e79ef3/8db2699c11139027.png);
+    //   background-repeat: no-repeat;
+    //   background-size: 100% 100%;
+    // }
+    .collapse-icon {
+      color: $collapse-item-disabled-color;
+    }
+  }
+  .titleIconLeft {
+    float: left;
+    .collapse-item {
+      padding: 10px 16px 10px 50px;
+      .collapse-icon {
+        left: 20px;
+      }
+      .subTitle {
+        right: 16px;
+      }
+    }
+  }
+  .titleIconRight {
+    float: right;
+  }
+  .collapse-icon-title {
+    display: inline-block;
+  }
+  // .nut-collapse-item.nut-collapse-item-icon {
+  //     .collapse-icon {
+  //         transform: rotate(0deg);
+  //     }
+  // }
+}