@sdata/web-vue 1.6.0 → 1.7.0

package/es/carousel/style/index.scss

@@ -0,0 +1,412 @@
+@use '@style/color/colors.scss';
+@use '@style/theme/index.scss' as theme;
+@use '@style/theme/index.scss' as global;
+@use 'sass:string';
+@use '@components/carousel/style/token.scss' as *;
+@use '@components/carousel/style/slide.scss' as *;
+
+$carousel-prefix-cls: string.unquote('#{theme.$prefix}-carousel');
+
+.#{$carousel-prefix-cls} {
+  position: relative;
+
+  &-indicator-position-outer {
+    margin-bottom: $carousel-indicator-position * 2 + $carousel-indicator-dot-size;
+  }
+
+  &-slide,
+  &-card,
+  &-fade {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+
+    > * {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    }
+  }
+
+  &-item-current {
+    z-index: 1;
+  }
+
+  &-slide {
+    > *:not(.#{$carousel-prefix-cls}-item-current) {
+      display: none;
+      visibility: hidden;
+    }
+
+    @mixin item-position($direction) {
+      .#{$carousel-prefix-cls}-item-slide-out {
+        display: block;
+        animation: string.unquote('#{theme.$prefix}-carousel-slide-#{$direction}-out');
+      }
+
+      .#{$carousel-prefix-cls}-item-slide-in {
+        display: block;
+        animation: string.unquote('#{theme.$prefix}-carousel-slide-#{$direction}-in');
+      }
+
+      &.#{$carousel-prefix-cls}-negative {
+        .#{$carousel-prefix-cls}-item-slide-out {
+          animation: string.unquote('#{theme.$prefix}-carousel-slide-#{$direction}-out-reverse');
+        }
+
+        .#{$carousel-prefix-cls}-item-slide-in {
+          animation: string.unquote('#{theme.$prefix}-carousel-slide-#{$direction}-in-reverse');
+        }
+      }
+    }
+
+    &.#{$carousel-prefix-cls}-horizontal {
+      @include item-position(x);
+    }
+
+    &.#{$carousel-prefix-cls}-vertical {
+      @include item-position(y);
+    }
+  }
+
+  &-card {
+    // Get different depth of field relationships by changing the perspective
+    perspective: 800px;
+
+    > * {
+      left: 50%;
+      transform: translateX(-50%) translateZ(-400px);
+      opacity: 0;
+      animation: string.unquote('#{theme.$prefix}-carousel-card-middle-to-bottom');
+    }
+
+    // prev 右边对齐容器中线
+    .#{$carousel-prefix-cls}-item-prev {
+      transform: translateX(-100%) translateZ(-200px);
+      opacity: 0.4;
+      animation: string.unquote('#{theme.$prefix}-carousel-card-top-to-middle');
+    }
+
+    // next 左边对齐容器中线
+    .#{$carousel-prefix-cls}-item-next {
+      transform: translateX(0%) translateZ(-200px);
+      opacity: 0.4;
+      animation: string.unquote('#{theme.$prefix}-carousel-card-bottom-to-middle');
+    }
+
+    // current 居中
+    .#{$carousel-prefix-cls}-item-current {
+      transform: translateX(-50%) translateZ(0);
+      opacity: 1;
+      animation: string.unquote('#{theme.$prefix}-carousel-card-middle-to-top');
+    }
+
+    &.#{$carousel-prefix-cls}-negative {
+      > * {
+        animation: string.unquote('#{theme.$prefix}-carousel-card-middle-to-bottom-reverse');
+      }
+
+      // prev 右边对齐容器中线
+      .#{$carousel-prefix-cls}-item-prev {
+        animation: string.unquote('#{theme.$prefix}-carousel-card-bottom-to-middle-reverse');
+      }
+
+      // next 左边对齐容器中线
+      .#{$carousel-prefix-cls}-item-next {
+        animation: string.unquote('#{theme.$prefix}-carousel-card-top-to-middle-reverse');
+      }
+
+      // current 居中
+      .#{$carousel-prefix-cls}-item-current {
+        animation: string.unquote('#{theme.$prefix}-carousel-card-middle-to-top-reverse');
+      }
+    }
+  }
+
+  &-fade {
+    > * {
+      left: 50%;
+      transform: translateX(-50%);
+      opacity: 0;
+    }
+
+    .#{$carousel-prefix-cls}-item-current {
+      opacity: 1;
+    }
+  }
+
+  // 指示器样式
+  &-indicator {
+    position: absolute;
+    display: flex;
+    margin: 0;
+    padding: 0;
+
+    &-wrapper {
+      position: absolute;
+      z-index: 2;
+
+      &-top {
+        top: 0;
+        right: 0;
+        left: 0;
+        height: $carousel-indicator-size-wrapper;
+        background: linear-gradient(
+          180deg,
+          $carousel-indicator-color-bg-wrapper 0%,
+          rgb(0 0 0 / 0%) 87%
+        );
+      }
+
+      &-bottom {
+        right: 0;
+        bottom: 0;
+        left: 0;
+        height: $carousel-indicator-size-wrapper;
+        background: linear-gradient(
+          180deg,
+          rgb(0 0 0 / 0%) 13%,
+          $carousel-indicator-color-bg-wrapper 100%
+        );
+      }
+
+      &-left {
+        top: 0;
+        left: 0;
+        width: $carousel-indicator-size-wrapper;
+        height: 100%;
+        background: linear-gradient(
+          90deg,
+          $carousel-indicator-color-bg-wrapper 0%,
+          rgb(0 0 0 / 0%) 87%
+        );
+      }
+
+      &-right {
+        top: 0;
+        right: 0;
+        width: $carousel-indicator-size-wrapper;
+        height: 100%;
+        background: linear-gradient(
+          90deg,
+          rgb(0 0 0 / 0%) 13%,
+          $carousel-indicator-color-bg-wrapper 100%
+        );
+      }
+
+      &-outer {
+        right: 0;
+        left: 0;
+        background: none;
+      }
+    }
+
+    &-bottom {
+      bottom: $carousel-indicator-position;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    &-top {
+      top: $carousel-indicator-position;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    &-left {
+      top: 50%;
+      left: $carousel-indicator-position;
+      transform: translate(-50%, -50%) rotate(90deg);
+    }
+
+    &-right {
+      top: 50%;
+      right: $carousel-indicator-position;
+      transform: translate(50%, -50%) rotate(90deg);
+    }
+
+    // Indicator style on the outside
+    &-outer {
+      left: 50%;
+      padding: $carousel-indicator-outer-padding;
+      background-color: $carousel-indicator-outer-color-bg;
+      border-radius: $carousel-indicator-outer-border-radius;
+      transform: translateX(-50%);
+
+      &.#{$carousel-prefix-cls}-indicator-dot {
+        bottom: -(
+            $carousel-indicator-position + $carousel-indicator-dot-size +
+              $carousel-indicator-outer-padding
+          );
+      }
+
+      &.#{$carousel-prefix-cls}-indicator-line {
+        bottom: -(
+            $carousel-indicator-position + $carousel-indicator-line-size-height +
+              $carousel-indicator-outer-padding
+          );
+      }
+
+      &.#{$carousel-prefix-cls}-indicator-slider {
+        bottom: -(
+            $carousel-indicator-position + $carousel-indicator-slider-size-height +
+              $carousel-indicator-outer-padding
+          );
+        padding: 0;
+        background-color: $carousel-indicator-outer-color_default;
+      }
+
+      .#{$carousel-prefix-cls}-indicator-item {
+        background-color: $carousel-indicator-outer-color_default;
+
+        &:hover,
+        &-active {
+          background-color: $carousel-indicator-outer-color_active;
+        }
+      }
+    }
+
+    &-item {
+      display: inline-block;
+      background-color: $carousel-indicator-color_default;
+      border-radius: $carousel-indicator-border-radius;
+      cursor: pointer;
+
+      &:hover,
+      &-active {
+        background-color: $carousel-indicator-color_active;
+      }
+    }
+
+    &-dot {
+      .#{$carousel-prefix-cls}-indicator-item {
+        width: $carousel-indicator-dot-size;
+        height: $carousel-indicator-dot-size;
+        border-radius: 50%;
+
+        &:not(:last-child) {
+          margin-right: $carousel-indicator-gap;
+        }
+      }
+    }
+
+    &-line {
+      .#{$carousel-prefix-cls}-indicator-item {
+        width: $carousel-indicator-line-size-width;
+        height: $carousel-indicator-line-size-height;
+
+        &:not(:last-child) {
+          margin-right: $carousel-indicator-gap;
+        }
+      }
+    }
+
+    &-slider {
+      width: $carousel-indicator-slider-size-width;
+      height: $carousel-indicator-slider-size-height;
+      background-color: $carousel-indicator-color_default;
+      border-radius: $carousel-indicator-border-radius;
+      cursor: pointer;
+
+      .#{$carousel-prefix-cls}-indicator-item {
+        position: absolute;
+        top: 0;
+        height: 100%;
+        transition: left 0.3s;
+      }
+    }
+  }
+
+  &-arrow {
+    > div {
+      position: absolute;
+      z-index: 2;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: $carousel-arrow-size;
+      height: $carousel-arrow-size;
+      color: $carousel-arrow-color-icon;
+      background-color: $carousel-arrow-color-bg;
+      border-radius: 50%;
+      cursor: pointer;
+
+      > svg {
+        color: $carousel-arrow-color-icon;
+        font-size: $carousel-arrow-font-size;
+      }
+
+      &:hover {
+        background-color: $carousel-arrow-color-bg_hover;
+      }
+    }
+
+    &-left {
+      top: 50%;
+      left: $carousel-arrow-position;
+      transform: translateY(-50%);
+    }
+
+    &-right {
+      top: 50%;
+      right: $carousel-arrow-position;
+      transform: translateY(-50%);
+    }
+
+    &-top {
+      top: $carousel-arrow-position;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    &-bottom {
+      bottom: $carousel-arrow-position;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+
+  &-arrow-hover div {
+    opacity: 0;
+    transition: all 0.3s;
+  }
+
+  &:hover {
+    .#{$carousel-prefix-cls}-arrow-hover div {
+      opacity: 1;
+    }
+  }
+}
+
+#{global.$sd-theme-tag}[sd-theme='dark'] {
+  .#{$carousel-prefix-cls}-arrow > div {
+    background-color: rgb(colors.$dark-gray-1, 0.3);
+
+    &:hover {
+      background-color: rgb(colors.$dark-gray-1, 0.5);
+    }
+  }
+
+  .#{$carousel-prefix-cls}-indicator-item,
+  .#{$carousel-prefix-cls}-indicator-slider {
+    background-color: rgb(colors.$dark-gray-1, 0.3);
+  }
+
+  .#{$carousel-prefix-cls}-indicator-item-active,
+  .#{$carousel-prefix-cls}-indicator-item:hover {
+    background-color: $carousel-indicator-color_active;
+  }
+
+  .#{$carousel-prefix-cls}-indicator-outer.#{$carousel-prefix-cls}-indicator-slider {
+    background-color: $carousel-indicator-outer-color_default;
+  }
+
+  .#{$carousel-prefix-cls}-indicator-outer .#{$carousel-prefix-cls}-indicator-item:hover,
+  .#{$carousel-prefix-cls}-indicator-outer .#{$carousel-prefix-cls}-indicator-item-active {
+    background-color: $carousel-indicator-outer-color_active;
+  }
+}

package/es/carousel/style/{slide.less → slide.scss}

@@ -1,4 +1,7 @@
-@keyframes ~'@{prefix}-carousel-slide-x-in' {
+@use 'sass:string';
+@use '@style/theme/index.scss' as *;
+
+@keyframes #{$prefix}-carousel-slide-x-in {
   from {
     transform: translateX(100%);
   }
@@ -8,7 +11,7 @@
   }
 }
 
-@keyframes ~'@{prefix}-carousel-slide-x-out' {
+@keyframes #{$prefix}-carousel-slide-x-out {
   from {
     transform: translateX(0);
   }
@@ -18,7 +21,7 @@
   }
 }
 
-@keyframes ~'@{prefix}-carousel-slide-x-in-reverse' {
+@keyframes #{$prefix}-carousel-slide-x-in-reverse {
   from {
     transform: translateX(-100%);
   }
@@ -28,7 +31,7 @@
   }
 }
 
-@keyframes ~'@{prefix}-carousel-slide-x-out-reverse' {
+@keyframes #{$prefix}-carousel-slide-x-out-reverse {
   from {
     transform: translateX(0);
   }
@@ -38,7 +41,7 @@
   }
 }
 
-@keyframes ~'@{prefix}-carousel-slide-y-in' {
+@keyframes #{$prefix}-carousel-slide-y-in {
   from {
     transform: translateY(100%);
   }
@@ -48,7 +51,7 @@
   }
 }
 
-@keyframes ~'@{prefix}-carousel-slide-y-out' {
+@keyframes #{$prefix}-carousel-slide-y-out {
   from {
     transform: translateY(0);
   }
@@ -58,7 +61,7 @@
   }
 }
 
-@keyframes ~'@{prefix}-carousel-slide-y-in-reverse' {
+@keyframes #{$prefix}-carousel-slide-y-in-reverse {
   from {
     transform: translateY(-100%);
   }
@@ -68,7 +71,7 @@
   }
 }
 
-@keyframes ~'@{prefix}-carousel-slide-y-out-reverse' {
+@keyframes #{$prefix}-carousel-slide-y-out-reverse {
   from {
     transform: translateY(0);
   }
@@ -78,7 +81,7 @@
   }
 }
 
-@keyframes ~'@{prefix}-carousel-card-bottom-to-middle' {
+@keyframes #{$prefix}-carousel-card-bottom-to-middle {
   from {
     transform: translateX(0%) translateZ(-400px);
     opacity: 0;
@@ -90,7 +93,7 @@
   }
 }
 
-@keyframes ~'@{prefix}-carousel-card-middle-to-bottom' {
+@keyframes #{$prefix}-carousel-card-middle-to-bottom {
   from {
     transform: translateX(-100%) translateZ(-200px);
     opacity: 0.4;
@@ -102,7 +105,7 @@
   }
 }
 
-@keyframes ~'@{prefix}-carousel-card-top-to-middle' {
+@keyframes #{$prefix}-carousel-card-top-to-middle {
   from {
     transform: translateX(-50%) translateZ(0);
     opacity: 1;
@@ -114,7 +117,7 @@
   }
 }
 
-@keyframes ~'@{prefix}-carousel-card-middle-to-top' {
+@keyframes #{$prefix}-carousel-card-middle-to-top {
   from {
     transform: translateX(0) translateZ(-200px);
     opacity: 0.4;
@@ -126,7 +129,7 @@
   }
 }
 
-@keyframes ~'@{prefix}-carousel-card-bottom-to-middle-reverse' {
+@keyframes #{$prefix}-carousel-card-bottom-to-middle-reverse {
   from {
     transform: translateX(-100%) translateZ(-400px);
     opacity: 0;
@@ -138,7 +141,7 @@
   }
 }
 
-@keyframes ~'@{prefix}-carousel-card-middle-to-bottom-reverse' {
+@keyframes #{$prefix}-carousel-card-middle-to-bottom-reverse {
   from {
     transform: translateX(0%) translateZ(-200px);
     opacity: 0.4;
@@ -150,7 +153,7 @@
   }
 }
 
-@keyframes ~'@{prefix}-carousel-card-top-to-middle-reverse' {
+@keyframes #{$prefix}-carousel-card-top-to-middle-reverse {
   from {
     transform: translateX(-50%) translateZ(0);
     opacity: 1;
@@ -162,7 +165,7 @@
   }
 }
 
-@keyframes ~'@{prefix}-carousel-card-middle-to-top-reverse' {
+@keyframes #{$prefix}-carousel-card-middle-to-top-reverse {
   from {
     transform: translateX(-100%) translateZ(-200px);
     opacity: 0.4;

package/es/carousel/style/token.scss

@@ -0,0 +1,44 @@
+@use '@style/theme/index.scss' as global;
+
+@forward '@style/theme/index.scss';
+@forward '@style/color/colors.scss' hide $sd-vars-prefix, $sd-cssvars-prefix;
+
+@use 'sass:string';
+@use '@style/theme/index.scss' as *;
+
+$carousel-content-border-radius: 0;
+
+// arrow
+$carousel-arrow-position: global.$spacing-6;
+$carousel-arrow-size: global.$size-6;
+$carousel-arrow-font-size: global.$font-size-body-3;
+$carousel-arrow-color-icon: var(string.unquote('#{global.$sd-cssvars-prefix}-color-white'));
+$carousel-arrow-color-bg: rgba(global.$color-white, 0.3);
+$carousel-arrow-color-bg_hover: rgba(global.$color-white, 0.5);
+
+// indicator
+$carousel-indicator-size-wrapper: global.$size-12;
+$carousel-indicator-color-bg-wrapper: rgb(0 0 0 / 15%);
+
+$carousel-indicator-dot-size: 6px;
+$carousel-indicator-line-size-width: global.$size-3;
+$carousel-indicator-line-size-height: global.$size-1;
+$carousel-indicator-slider-size-width: global.$size-12;
+$carousel-indicator-slider-size-height: global.$size-1;
+
+$carousel-indicator-position: global.$spacing-6;
+$carousel-indicator-gap: global.$spacing-4;
+$carousel-indicator-border-radius: global.$radius-medium;
+$carousel-indicator-color_default: rgba(global.$color-white, 0.3);
+$carousel-indicator-color_active: var(string.unquote('#{global.$sd-cssvars-prefix}-color-white'));
+
+$carousel-indicator-outer-border-radius: 20px;
+$carousel-indicator-outer-padding: global.$spacing-2;
+$carousel-indicator-outer-color_default: rgb(
+  var(string.unquote('#{global.$sd-cssvars-prefix}-gray-4')),
+  0.5
+);
+$carousel-indicator-outer-color_active: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-fill-4')
+);
+$carousel-indicator-outer-color-bg: global.$color-transparent;