taro-ui 3.3.0 → 3.3.2

package/dist/style/components/checkbox.rn.scss

@@ -1,108 +0,0 @@
-@use "sass:math";
-@import '../variables/default.scss';
-@import '../mixins/index.scss';
-
-$component: '.at-checkbox';
-
-#{$component} {
-  position: relative;
-  background-color: $color-bg;
-  @include hairline-top-relative();
-  @include hairline-bottom-relative();
-
-  /* elements */
-  &__option-wrap {
-    padding: $spacing-v-lg $spacing-h-xl $spacing-v-lg 0;
-  }
-
-  &__option-cnt {
-    display: flex;
-    flex-direction: row;
-
-    &--disabled {
-      opacity: $opacity-disabled;
-    }
-  }
-
-  &__title {
-    //  display: inline-flex;
-    color: $at-checkbox-title-color;
-    font-size: $at-checkbox-title-font-size;
-    line-height: $line-height-zh * $at-checkbox-title-font-size;
-    text-align: left;
-  }
-
-  &__icon-cnt {
-    //  display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    margin-top: 4px;
-    margin-right: $spacing-h-lg;
-    width: $at-checkbox-circle-size;
-    min-width: $at-checkbox-circle-size;
-    height: $at-checkbox-circle-size;
-    color: transparent;
-    font-size: $at-checkbox-icon-size;
-    line-height: $at-checkbox-icon-size;
-    border: 2px solid rgba($color: $at-checkbox-icon-color, $alpha: 0.2);
-    border-radius: math.div($at-checkbox-circle-size, 2);
-    background-color: $color-bg;
-    // box-sizing: border-box;
-    //  transition:: all 0.2s;
-    &--check {
-      background-color: $color-brand;
-      font-size: $at-checkbox-icon-size;
-    }
-  }
-
-  &__desc {
-    //  display: block;
-    padding-left: $at-checkbox-circle-size + $spacing-h-lg;
-    color: $at-checkbox-desc-color;
-    font-size: $at-checkbox-desc-font-size;
-    text-align: left;
-    line-height: $line-height-zh * $at-checkbox-desc-font-size;
-    letter-spacing: 0;
-
-    &--disabled {
-      opacity: $opacity-disabled;
-    }
-  }
-
-  &__option {
-    padding-left: $spacing-h-xl;
-    @include active;
-
-    &--disabled {
-      // #{$component}__option-cnt,
-      // #{$component}__desc {
-      //   opacity: $opacity-disabled;
-      // }
-
-      // &:active {
-      //   background-color: $color-bg;
-      // }
-    }
-
-    &--selected {
-      // #{$component}__icon-cnt {
-      //   color: $at-checkbox-icon-color-checked;
-      //   border: none;
-      //   background-color: $at-checkbox-icon-color;
-      // }
-    }
-  }
-  // &__option + &__option {
-  //   #{$component}__option-wrap {
-  //     @include hairline-top();
-  //   }
-  // }
-}
-
-#{$component}__option-wrap {
-  @include hairline-top();
-
-  &--without-border {
-    border-top-width: 0;
-  }
-}

package/dist/style/components/countdown.rn.scss

@@ -1,82 +0,0 @@
-@import '../variables/default.scss';
-@import '../mixins/index.scss';
-
-.at-countdown {
-  // display: inline-block;
-  display: flex;
-  flex-direction: row;
-  min-height: $at-countdown-font-size;
-
-  /* elements */
-  &__item {
-    // display: inline-flex;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-  }
-
-  &__time-box {
-    // display: inline-block;
-    min-width: $at-countdown-font-size;
-  }
-
-  &__time {
-    font: {
-      size: $at-countdown-font-size;
-      style: normal;
-      weight: 400;
-    }
-
-    color: $at-countdown-num-color;
-    text-align: center;
-  }
-
-  &__separator {
-    // display: inline-flex;
-    display: flex;
-    flex-direction: row;
-    padding: 0 $spacing-v-xs;
-    font-size: $font-size-base;
-    text-align: justify;
-    align-items: center;
-  }
-
-  /* modifiers */
-  &--card {
-    display: flex;
-    flex-direction: row;
-
-    &__time-box {
-      // display: inline-block;
-      min-width: $at-countdown-font-size;
-      position: relative;
-      padding: $spacing-v-xs 0;
-      border: 1PX solid $color-border-grey;
-      border-radius: $border-radius-md;
-      background-color: $at-countdown-card-num-bg-color;
-
-      &__crossbar {
-        position: absolute;
-        top: $spacing-v-xs;
-        left: 0;
-        width: 100%;
-        height: 55%;
-        border-bottom-width: 1PX;
-        border-bottom-color: $color-grey-3;
-        z-index: $zindex-divider;
-      }
-    }
-
-    &__time {
-      position: relative;
-      color: $at-countdown-card-num-color;
-      text-align: center;
-      z-index: $zindex-divider + 1;
-      font: {
-        size: $at-countdown-font-size;
-        style: normal;
-        weight: 400;
-      }
-    }
-  }
-}

package/dist/style/components/curtain.rn.scss

@@ -1,129 +0,0 @@
-@use "sass:math";
-@import '../variables/default.scss';
-@import '../mixins/index.scss';
-
-$at-curtain-btn-size: 56px;
-
-.at-curtain {
-  /*  #ifndef  rn  */
-  //  display: block;
-  //  position: fixed;
-  /*  #endif  */
-  /*  #ifdef  rn  */
-  position: absolute;
-  /*  #endif  */
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background-color: rgba($color: #000, $alpha: 0.3);
-  z-index: $zindex-curtain;
-
-  /* elements */
-  &__container {
-    display: flex;
-    position: relative;
-    margin: 0 auto;
-    width: 80%;
-    height: 100%;
-    justify-content: center;
-    align-items: center;
-    /*  #ifndef  rn  */
-    // box-sizing: border-box;
-    /*  #endif  */
-    opacity: 1;
-  }
-
-  &__body {
-    position: relative;
-    width: 100%;
-  }
-
-  &__btn-close {
-    display: flex;
-    position: absolute;
-    width: $at-curtain-btn-size;
-    height: $at-curtain-btn-size;
-    margin-left: -1 * math.div($at-curtain-btn-size, 2);
-    left: 50%;
-    bottom: -($at-curtain-btn-size + 24px);
-    align-items: center;
-    justify-content: center;
-    border: 2PX solid $at-curtain-btn-color;
-    border-radius: math.div($at-curtain-btn-size, 2);
-    /*  #ifndef  rn  */
-    // box-sizing: border-box;
-    /*  #endif  */
-    z-index: $zindex-curtain;
-
-    &__at-icon {
-      color: $at-curtain-btn-color;
-    }
-
-    /*  #ifndef  rn  */
-    // &::before,
-    // &::after {
-    //   content: '';
-    //   position: absolute;
-    //   top: 50%;
-    //   left: 50%;
-    //    display: inline-block;
-    //   width: 34px;
-    //   height: 2PX;
-    //   border-radius: 1PX;
-    //   background: $at-curtain-btn-color;
-    // }
-
-    // &::before {
-    //   transform: translate3d(-50%, -50%, 0) rotate(45deg);
-    // }
-
-    // &::after {
-    //   transform: translate3d(-50%, -50%, 0) rotate(-45deg);
-    // }
-    /*  #endif  */
-
-    &--top {
-      margin-left: -1 * math.div($at-curtain-btn-size, 2);
-      top: -($at-curtain-btn-size + 24px);
-      left: 50%;
-      bottom: auto;
-    }
-
-    &--top-left {
-      top: -($at-curtain-btn-size + 24px);
-      left: 0;
-      bottom: auto;
-    }
-
-    &--top-right {
-      top: -($at-curtain-btn-size + 24px);
-      left: auto;
-      right: 0;
-      bottom: auto;
-    }
-
-    &--bottom {
-      margin-left: -1 * math.div($at-curtain-btn-size, 2);
-      bottom: -($at-curtain-btn-size + 24px);
-      left: 50%;
-    }
-
-    &--bottom-left {
-      bottom: -($at-curtain-btn-size + 24px);
-      left: 0;
-    }
-
-    &--bottom-right {
-      bottom: -($at-curtain-btn-size + 24px);
-      left: auto;
-      right: 0;
-    }
-  }
-
-  /* modifiers */
-  &--closed {
-    display: none;
-    // visibility: hidden;
-  }
-}

package/dist/style/components/divider.rn.scss

@@ -1,33 +0,0 @@
-@import '../variables/default.scss';
-@import '../mixins/index.scss';
-
-.at-divider {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  width: 100%;
-  height: $at-divider-height;
-  font-size: $font-size-base;
-  text-align: center;
-
-  /* elements */
-  &__content {
-    position: relative;
-    padding: 0 $spacing-h-lg;
-    color: $at-divider-content-color;
-    font-size: $at-divider-font-size;
-    background: $color-bg;
-    z-index: $zindex-divider + 1;
-  }
-
-  &__line {
-    position: absolute;
-    top: 50%;
-    left: 0;
-    width: 100%;
-    height: 1PX;
-    background-color: $at-divider-line-color;
-    z-index: $zindex-divider;
-  }
-}

package/dist/style/components/drawer.rn.scss

@@ -1,72 +0,0 @@
-@import '../variables/default.scss';
-@import '../mixins/index.scss';
-
-$at-drawer-duration: 300ms;
-
-.at-drawer {
-  position: absolute;
-  width: 100%;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-
-  /* elements */
-  &__mask {
-    @include overlay;
-  }
-
-  &__content {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    width: $at-drawer-content-width;
-    text-align: left;
-    background-color: $color-bg;
-    // opacity: 0;
-    // overflow-y: auto;
-    z-index: 1;
-
-    &--left {
-      left: 0;
-    }
-
-    &--right {
-      right: 0;
-    }
-  }
-
-  /* modifiers */
-  // &--left {
-  //   .at-drawer__content {
-  //     left: 0;
-  //     //  transform: translateX(-100%);
-  //   }
-  // }
-
-  // &--right {
-  //   .at-drawer__content {
-  //     right: 0;
-  //     //  transform: translateX(100%);
-  //   }
-  // }
-
-  &--show {
-    // .at-drawer__content {
-    //   opacity: 1;
-    //   //  transform: translateX(0%);
-    // }
-  }
-}
-
-// @keyframes anim-show {
-//   100% {
-//     opacity: 1;
-//   }
-// }
-
-// @keyframes anim-hide {
-//   100% {
-//     opacity: 0;
-//   }
-// }

package/dist/style/components/fab.rn.scss

@@ -1,38 +0,0 @@
-@use "sass:math";
-@import '../variables/default.scss';
-@import '../mixins/index.scss';
-
-.at-fab {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 0;
-  width: $at-fab-size;
-  height: $at-fab-size;
-  color: $color-white;
-  font-size: $font-size-base;
-  text-align: center;
-  border-radius: math.div($at-fab-size, 2);
-  background: $at-fab-bg-color;
-  // box-shadow: $at-fab-box-shadow;
-
-  // &:active {
-  //   background: $at-fab-bg-color-active;
-  // }
-
-  /* elements */
-  &__icon {
-    width: $at-fab-icon-size;
-    height: $at-fab-icon-size;
-    font-size: $at-fab-icon-size;
-  }
-
-
-
-  /* modifiers */
-  &--small {
-    width: $at-fab-size-sm;
-    height: $at-fab-size-sm;
-  }
-}
-

package/dist/style/components/flex.rn.scss

@@ -1,159 +0,0 @@
-@use "sass:math";
-@import '../variables/default.scss';
-@import '../mixins/index.scss';
-
-.at-row {
-  @include display-flex();
-
-  width: 100%;
-
-  &__direction {
-    &--row {
-      flex-direction: row;
-    }
-
-    &--column {
-      flex-direction: column;
-    }
-
-    &--row-reverse {
-      flex-direction: row-reverse;
-    }
-
-    &--column-reverse {
-      flex-direction: column-reverse;
-    }
-  }
-
-  &__align {
-    &--start {
-      @include align-items(flex-start);
-    }
-
-    &--end {
-      @include align-items(flex-end);
-    }
-
-    &--center {
-      @include align-items(center);
-    }
-
-    &--stretch {
-      @include align-items(stretch);
-    }
-
-    &--baseline {
-      @include align-items(baseline);
-    }
-  }
-
-  &__justify {
-    &--start {
-      @include justify-content(flex-start);
-    }
-
-    &--end {
-      @include justify-content(flex-end);
-    }
-
-    &--center {
-      @include justify-content(center);
-    }
-
-    &--between {
-      @include justify-content(space-between);
-    }
-
-    &--around {
-      @include justify-content(space-around);
-    }
-  }
-
-  &__align-content {
-    &--start {
-      @include align-content(flex-start);
-    }
-
-    &--end {
-      @include align-content(flex-end);
-    }
-
-    &--center {
-      @include align-content(center);
-    }
-
-    &--between {
-      @include align-content(space-between);
-    }
-
-    &--around {
-      @include align-content(space-around);
-    }
-
-    &--stretch {
-      @include align-content(stretch);
-    }
-  }
-
-  &--no-wrap {
-    @include flex-wrap(nowrap);
-  }
-
-  &--wrap {
-    @include flex-wrap(wrap);
-  }
-
-  &--wrap-reverse {
-    @include flex-wrap(wrap-reverse);
-  }
-}
-
-.at-col {
-  @include flex(1);
-
-  width: 100%;
-
-  /*  #ifndef  rn  */
-  //  display: block;
-  //  white-space: nowrap;
-  // box-sizing: border-box;
-  /*  #endif  */
-  @for $col from 1 through 12 {
-    $width: math.div($col, 12) * 100%;
-
-    &-#{$col} {
-      // @include flex(0, 0, $width);
-      flex-basis: $width;
-      max-width: $width;
-    }
-
-    &__offset-#{$col} {
-      margin-left: $width;
-    }
-  }
-
-  &__align {
-    &--top {
-      @include align-self(flex-start);
-    }
-
-    &--bottom {
-      @include align-self(flex-end);
-    }
-
-    &--center {
-      @include align-self(center);
-    }
-  }
-  /*  #ifndef  rn  */
-  // &--auto {
-  //   max-width: initial;
-  //   //  word-break: keep-all;
-  // }
-
-  // &--wrap {
-  //   //  white-space: normal;
-  //   word-wrap: break-word;
-  // }
-  /*  #endif  */
-}