amis-rev-ui 6.13.0

package/scss/components/_carousel.scss

@@ -0,0 +1,292 @@
+@mixin arrow-control {
+  width: 10%;
+  min-width: var(--Carousel-arrowControl-width);
+  height: 100%;
+  cursor: pointer;
+  top: 0;
+  bottom: 0;
+  position: absolute;
+  transition-duration: var(--Carousel-transitionDuration);
+  svg {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    right: 50%;
+    transform: translate(-50%, -50%);
+    width: var(--Carousel-svg-width);
+  }
+}
+
+.#{$ns}Carousel {
+  min-width: var(--Carousel-minWidth);
+  height: var(--Carousel-height);
+  position: relative;
+  display: block;
+  background: var(--Carousel-bg);
+
+  &.#{$ns}Carousel--light {
+    .#{$ns}Carousel-dot {
+      background: var(--Carousel--light-control);
+    }
+
+    svg {
+      fill: var(--Carousel--light-control);
+    }
+
+    .#{$ns}Carousel-item {
+      .title,
+      .description {
+        color: var(--Carousel--light-control);
+      }
+    }
+  }
+
+  &.#{$ns}Carousel--dark {
+    .#{$ns}Carousel-dot {
+      background: var(--Carousel--dark-control);
+    }
+
+    svg {
+      fill: var(--Carousel--dark-control);
+    }
+
+    .#{$ns}Carousel-item {
+      .title,
+      .description {
+        color: var(--Carousel--dark-control);
+      }
+    }
+  }
+
+  &-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+
+    .#{$ns}Carousel-item {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      transition-duration: var(--Carousel-transitionDuration);
+      transition-timing-function: ease-out;
+      transition-property: transform, opacity;
+
+      &.fade {
+        opacity: 0;
+      }
+
+      &.fade.in {
+        opacity: 1;
+      }
+
+      &.slide {
+        transform: translateX(100%);
+      }
+
+      &.slide.in {
+        transform: translateX(0);
+      }
+
+      &.slide.out {
+        transform: translateX(-100%);
+      }
+
+      &.slideRight {
+        transform: translateX(-100%);
+      }
+
+      &.slideRight.in {
+        transform: translateX(0);
+      }
+
+      &.slideRight.out {
+        transform: translateX(100%);
+      }
+
+      .title {
+        position: absolute;
+        bottom: var(--Carousel-imageTitle-bottom);
+        text-align: center;
+        width: 100%;
+        opacity: 0.8;
+      }
+
+      .description {
+        position: absolute;
+        bottom: var(--Carousel-imageDescription-bottom);
+        text-align: center;
+        width: 100%;
+        opacity: 0.8;
+      }
+
+      .image {
+        width: 100%;
+        height: 100%;
+        background-size: cover;
+      }
+    }
+  }
+
+  &-image {
+    width: 100%;
+    height: 100%;
+  }
+
+  &-image .#{$ns}Image-origin {
+    height: 100%;
+    width: 100%;
+  }
+
+  &-dotsControl {
+    position: absolute;
+    bottom: 0px;
+    width: 100%;
+    z-index: 100;
+    text-align: center;
+
+    .#{$ns}Carousel-dot {
+      cursor: pointer;
+      display: inline-block;
+      height: var(--Carousel-dot-width);
+      width: var(--Carousel-dot-height);
+      border-radius: var(--Carousel-dot-borderRadius);
+      margin: var(--Carousel-dot-margin);
+      transition-duration: var(--Carousel-transitionDuration);
+      opacity: 0.3;
+
+      &.is-active {
+        opacity: 1;
+      }
+    }
+  }
+
+  .#{$ns}Carousel-leftArrow {
+    @include arrow-control;
+    display: none;
+    left: 0;
+  }
+
+  .#{$ns}Carousel-rightArrow {
+    @include arrow-control;
+    display: none;
+    right: 0;
+  }
+
+  &.#{$ns}Carousel-arrow--always {
+    .#{$ns}Carousel-leftArrow {
+      display: block;
+    }
+    .#{$ns}Carousel-rightArrow {
+      display: block;
+    }
+  }
+
+  &:hover {
+    .#{$ns}Carousel-leftArrow {
+      display: block;
+    }
+    .#{$ns}Carousel-rightArrow {
+      display: block;
+    }
+  }
+
+  &-arrowsControl {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 100;
+    text-align: center;
+  }
+
+  &-vertical.#{$ns}Carousel {
+    .#{$ns}Carousel {
+      &-dotsControl {
+        right: 0;
+        bottom: auto;
+        height: 100%;
+        width: auto;
+        display: flex;
+        flex-direction: column;
+        top: 0;
+        justify-content: center;
+      }
+
+      &-leftArrow,
+      &-rightArrow {
+        height: 10%;
+        width: 100%;
+        left: 0;
+        right: 0;
+        bottom: unset;
+      }
+
+      &-leftArrow {
+        top: 0;
+        svg {
+          transform: translate(-50%, -50%) rotate(90deg);
+        }
+      }
+
+      &-rightArrow {
+        bottom: 0;
+        top: unset;
+        svg {
+          transform: translate(-50%, -50%) rotate(90deg);
+        }
+      }
+
+      &-item.slide {
+        transform: translateY(100%);
+      }
+
+      &-item.slide.in {
+        transform: translateY(0);
+      }
+
+      &-item.slide.out {
+        transform: translateY(-100%);
+      }
+
+      &-item.slideRight {
+        transform: translateY(-100%);
+      }
+
+      &-item.slideRight.in {
+        transform: translateY(0);
+      }
+
+      &-item.slideRight.out {
+        transform: translateY(100%);
+      }
+    }
+  }
+
+  img {
+    pointer-events: none;
+  }
+}
+
+.#{$ns}Marquee-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.#{$ns}Marquee-content {
+  display: flex;
+  align-items: center;
+  will-change: transform;
+  height: 100%;
+}
+
+.#{$ns}Marquee-item {
+  width: 100%;
+  height: 100%;
+  flex: 0 0 auto;
+}

package/scss/components/_cascader.scss

@@ -0,0 +1,157 @@
+.#{$ns}Cascader-tabs {
+  display: flex;
+  &.scrollable {
+    display: block;
+    overflow-x: auto;
+    white-space: nowrap;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+}
+.#{$ns}Cascader-tab {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  width: calc((100vw - 20px) / 3);
+  height: px2rem(260px);
+  overflow-y: auto;
+  display: inline-block;
+  padding-left: px2rem(10px);
+  border: 1px solid var(--Cascader-border-color);
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+.#{$ns}Cascader {
+  width: 100%;
+  padding: 0 10px;
+  &-Nav {
+    overflow-x: auto;
+    &Item {
+      display: inline-block;
+      margin-right: px2rem(10px);
+      list-style: none;
+      cursor: pointer;
+      user-select: none;
+      padding: 0 px2rem(6px);
+    }
+  }
+  &-btnGroup {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: px2rem(60px);
+  }
+  &-options {
+    box-sizing: border-box;
+    height: var(--Cascader-option-height);
+    padding-top: px2rem(6px);
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    margin: 0;
+    padding: 0;
+  }
+  &-option {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: px2rem(6px) 0 px2rem(6px) px2rem(10px);
+    font-size: var(--fontSizeMd);
+    line-height: var(--Cascader-option-lineHeight);
+    cursor: pointer;
+    position: relative;
+
+    &.is-active {
+      background-color: var(--Cascader-border-active-bg-color);
+    }
+
+    &.selected {
+      .#{$ns}Cascader-option--text {
+        color: var(--primary);
+      }
+    }
+    &.disabled {
+      span {
+        color: gray;
+      }
+    }
+    &--text {
+      flex: 1;
+      min-width: 0;
+      min-height: 0;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      line-clamp: 2;
+      box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      user-select: none;
+
+      &.disabled {
+        color: var(--Cascader-option-disable-color);
+      }
+    }
+
+    & > .#{$ns}Checkbox {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      flex-direction: row;
+      margin: 0;
+      align-items: center;
+      justify-content: flex-start;
+
+      > i + span {
+        flex: 1;
+        min-width: 0;
+      }
+    }
+
+    &-arrow {
+      flex-shrink: 0;
+      min-width: 0;
+      min-height: 0;
+      text-align: right;
+      padding-right: px2rem(6px);
+      width: 20px;
+      > svg {
+        transform: scale(0.8);
+        transition: transform var(--animation-duration);
+        display: inline-block;
+        color: var(--Form-select-caret-iconColor);
+        width: 10px;
+        height: 10px;
+        top: 0;
+      }
+    }
+
+    &-selectedNum {
+      min-width: px2rem(16px);
+      height: px2rem(16px);
+      line-height: px2rem(16px);
+      border-radius: 100%;
+      text-align: center;
+      background: var(--Form-select-menu-onActive-color);
+      color: var(--white) !important;
+      font-size: var(--fontSizeSm);
+      display: inline-block;
+      position: absolute;
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+  &-icon {
+    color: var(--primary);
+  }
+  &-tab {
+    padding: 0;
+  }
+
+  &-btnCancel {
+    color: var(--PopUp-cancelAction-color);
+  }
+}

package/scss/components/_chart.scss

@@ -0,0 +1,22 @@
+.#{$ns}Chart {
+  position: relative;
+
+  &-placeholder {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  &-content {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  > .visibility-sensor {
+    height: 100%; // 修复图表高度为 0 时，visibility-sensor 无法触发的问题
+  }
+}

package/scss/components/_city-area.scss

@@ -0,0 +1,37 @@
+.#{$ns}CityArea {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  text-align: right;
+
+  &-popup {
+    height: px2rem(280px);
+  }
+  &-Input {
+    margin-top: var(--gap-xs);
+    outline: none;
+    vertical-align: top;
+    border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor);
+    border-radius: var(--Form-input-borderRadius);
+    line-height: var(--Form-input-lineHeight);
+    padding: var(--Form-input-paddingY) var(--Form-input-paddingX);
+    font-size: var(--Form-input-fontSize);
+    display: inline-flex !important;
+
+    &.is-focused,
+    &:hover {
+      border: none !important;
+    }
+
+    &::placeholder {
+      color: var(--Form-input-placeholderColor);
+      user-select: none;
+    }
+
+    &:focus {
+      border-color: var(--Form-input-onFocused-borderColor);
+      box-shadow: var(--Form-input-boxShadow);
+      background: var(--Form-input-onFocused-bg);
+    }
+  }
+}

package/scss/components/_code.scss

@@ -0,0 +1,10 @@
+.#{$ns}Code {
+  &--dark {
+    background-color: #1e1e1e;
+    border-radius: var(--borderRadius);
+  }
+
+  &-pre-wrap {
+    padding: var(--sizes-size-5);
+  }
+}

package/scss/components/_collapse-group.scss

@@ -0,0 +1,83 @@
+.#{$ns}CollapseGroup {
+  .#{$ns}Collapse {
+    border-radius: 0;
+  }
+
+  .#{$ns}Collapse:first-child {
+    border-radius: 4px 4px 0 0;
+    & > .#{$ns}Collapse-header {
+      border-radius: 4px 4px 0 0;
+    }
+  }
+
+  .#{$ns}Collapse:not(.#{$ns}Collapse--title-bottom):last-child {
+    border-radius: 0 0 4px 4px;
+    & > .#{$ns}Collapse-header {
+      border-radius: 0 0 4px 4px;
+    }
+    &
+      > .#{$ns}Collapse-contentWrapper
+      > .#{$ns}Collapse-body
+      > .#{$ns}Collapse-content {
+      border-radius: 0 0 4px 4px;
+    }
+  }
+
+  .#{$ns}Collapse.is-active:not(.#{$ns}Collapse--title-bottom):last-child {
+    & > .#{$ns}Collapse-header {
+      border-radius: 0px;
+    }
+  }
+
+  .#{$ns}Collapse--title-bottom:last-child {
+    border-radius: 0 0 4px 4px;
+    & > .#{$ns}Collapse-header {
+      border-radius: 0 0 4px 4px;
+    }
+  }
+
+  .#{$ns}Collapse:first-child:nth-last-child(1) {
+    border-radius: 4px;
+    & > .#{$ns}Collapse-header {
+      border-radius: 4px;
+    }
+  }
+
+  .#{$ns}Collapse:not(:last-child):not(.is-mobile) {
+    border-bottom: none;
+  }
+
+  &.icon-position-right {
+    .#{$ns}Collapse-header {
+      .#{$ns}Collapse-arrow-wrap {
+        float: right;
+        margin-right: 0;
+      }
+
+      .#{$ns}Collapse-icon-tranform {
+        float: right;
+      }
+    }
+  }
+
+  &.icon-position-right {
+    .#{$ns}Collapse-header {
+      &.noTitle {
+        text-align: right;
+        .#{$ns}Collapse-arrow-wrap {
+          float: none;
+        }
+      }
+    }
+  }
+
+  &.is-mobile {
+    &.icon-position-right {
+      .#{$ns}Collapse-header {
+        .#{$ns}Collapse-arrow-wrap {
+          margin-right: px2rem(-18px);
+        }
+      }
+    }
+  }
+}