@douyinfe/semi-foundation 2.9.1 → 2.10.0-beta.0

package/carousel/variables.scss

@@ -0,0 +1,46 @@
+$color-carousel_indicator_theme_dark-bg-default: rgba(var(--semi-black), .5); // 深色主题指示器背景颜色 - 默认
+$color-carousel_indicator_theme_dark-bg-hover: rgba(var(--semi-black), .7); // 深色主题指示器背景颜色 - 悬浮
+$color-carousel_indicator_theme_dark-bg-active: rgba(var(--semi-black), 1); // 深色主题指示器背景颜色 - 选中
+
+$color-carousel_indicator_theme_primary-bg-default: rgba(var(--semi-blue-6), .4); // 主要主题指示器背景颜色 - 默认
+$color-carousel_indicator_theme_primary-bg-hover: rgba(var(--semi-blue-6), .7); // 主要主题指示器背景颜色 - 悬浮
+$color-carousel_indicator_theme_primary-bg-active: rgba(var(--semi-blue-6), 1); // 主要主题指示器背景颜色 - 选中
+
+$color-carousel_indicator_theme_light-bg-default: rgba(var(--semi-white), .4); // 浅色主题指示器背景颜色 - 默认
+$color-carousel_indicator_theme_light-bg-hover: rgba(var(--semi-white), .7); // 浅色主题指示器背景颜色 - 悬浮
+$color-carousel_indicator_theme_light-bg-active: rgba(var(--semi-white), 1); // 浅色主题指示器背景颜色 - 选中
+
+$color-carousel_arrow_theme_dark-bg-default: rgba(var(--semi-black), .5); // 深色主题箭头背景颜色 - 默认
+$color-carousel_arrow_theme_dark-bg-hover: rgba(var(--semi-black), 1); // 深色主题箭头背景颜色 - 悬浮
+
+$color-carousel_arrow_theme_primary-bg-default:  rgba(var(--semi-blue-6), .4); // 主要主题箭头背景颜色 - 默认
+$color-carousel_arrow_theme_primary-bg-hover:  rgba(var(--semi-blue-6), 1); // 主要主题箭头背景颜色 - 悬浮
+
+$color-carousel_arrow_theme_light-bg-default: rgba(var(--semi-white), .4); // 浅色主题箭头背景颜色 - 默认
+$color-carousel_arrow_theme_light-bg-hover: rgba(var(--semi-white), 1); // 浅色主题箭头背景颜色 - 悬浮
+
+$width-carousel_indicator_line: 240px; // 条状指示器最大宽度
+$width-carousel_indicator_columnar_small: 4px; // 小尺寸柱状指示器宽度
+$width-carousel_indicator_columnar_medium: 6px; // 中等尺寸柱状指示器宽度
+$width-carousel_indicator_dot_small:8px; // 小尺寸点状指示器宽度
+$width-carousel_indicator_dot_medium: 12px; // 中等尺寸点状指示器宽度
+$width-carousel_arrow: 32px; // 箭头宽度
+
+$height-carousel_indicator_columnar_small_default: 12px; // 小尺寸柱状指示器高度 - 默认
+$height-carousel_indicator_columnar_small_active: 20px; // 小尺寸柱状指示器高度 - 选中
+$height-carousel_indicator_columnar_medium_default: 20px; // 中等尺寸柱状指示器高度 - 默认
+$height-carousel_indicator_columnar_medium_active: 28px; // 中等尺寸柱状指示器高度 - 选中
+
+$height-carousel_indicator_line_small: 4px; // 小尺寸条状指示器高度
+$height-carousel_indicator_line_medium: 6px; // 中等尺寸条状指示器高度
+
+$radius-carousel_indicator_dot: 50%; // 点状指示器圆角
+
+$spacing-carousel_indicator-padding: 32px; // 指示器内边距
+
+$spacing-carousel_indicator_columnar-marginX: 4px; // 柱状指示器水平外边距
+$spacing-carousel_indicator_line-marginX: 4px; // 条状指示器水平外边距
+$spacing-carousel_indicator_dot-marginX: 8px; // 点状指示器水平外边距
+
+$spacing-carousel_arrow-left: 20px; // 左侧箭头绝对定位 - left
+$spacing-carousel_arrow-right: 20px; // 右侧箭头绝对定位 - right

package/lib/cjs/carousel/carousel.css

@@ -0,0 +1,341 @@
+/* shadow */
+/* sizing */
+/* spacing */
+.semi-carousel {
+  position: relative;
+  overflow: hidden;
+}
+.semi-carousel-content {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+}
+.semi-carousel-content-item {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.semi-carousel-content-item-current {
+  z-index: 1;
+}
+.semi-carousel-content-fade > * {
+  opacity: 0;
+}
+.semi-carousel-content-fade .semi-carousel-content-item-current {
+  opacity: 1;
+}
+.semi-carousel-content-slide > *:not(.semi-carousel-content-item-current) {
+  visibility: hidden;
+}
+.semi-carousel-content-slide .semi-carousel-content-item-slide-out {
+  display: block;
+  animation: semi-carousel-content-item-keyframe-slide-out;
+}
+.semi-carousel-content-slide .semi-carousel-content-item-slide-in {
+  display: block;
+  animation: semi-carousel-content-item-keyframe-slide-in;
+}
+.semi-carousel-content-reverse .semi-carousel-content-item-slide-out {
+  animation: semi-carousel-content-item-keyframe-slide-out-reverse;
+}
+.semi-carousel-content-reverse .semi-carousel-content-item-slide-in {
+  animation: semi-carousel-content-item-keyframe-slide-in-reverse;
+}
+.semi-carousel-indicator {
+  display: flex;
+  align-items: flex-end;
+  z-index: 2;
+}
+.semi-carousel-indicator-left {
+  position: absolute;
+  left: 32px;
+  bottom: 32px;
+}
+.semi-carousel-indicator-center {
+  position: absolute;
+  left: 50%;
+  bottom: 32px;
+  transform: translate(-50%);
+}
+.semi-carousel-indicator-right {
+  position: absolute;
+  right: 32px;
+  bottom: 32px;
+}
+.semi-carousel-indicator-dot .semi-carousel-indicator-item {
+  border-radius: 50%;
+  cursor: pointer;
+}
+.semi-carousel-indicator-dot .semi-carousel-indicator-item:not(:last-child) {
+  margin-right: 8px;
+}
+.semi-carousel-indicator-dot .semi-carousel-indicator-item-small {
+  width: 8px;
+  height: 8px;
+}
+.semi-carousel-indicator-dot .semi-carousel-indicator-item-medium {
+  width: 12px;
+  height: 12px;
+}
+.semi-carousel-indicator-dot .semi-carousel-indicator-item-primary {
+  background-color: rgba(var(--semi-blue-6), 0.4);
+}
+.semi-carousel-indicator-dot .semi-carousel-indicator-item-primary.semi-carousel-indicator-item-active {
+  background: rgba(var(--semi-blue-6), 1);
+}
+.semi-carousel-indicator-dot .semi-carousel-indicator-item-primary:hover {
+  background-color: rgba(var(--semi-blue-6), 0.7);
+}
+.semi-carousel-indicator-dot .semi-carousel-indicator-item-primary:active {
+  background: rgba(var(--semi-blue-6), 1);
+}
+.semi-carousel-indicator-dot .semi-carousel-indicator-item-light {
+  background-color: rgba(var(--semi-white), 0.4);
+}
+.semi-carousel-indicator-dot .semi-carousel-indicator-item-light.semi-carousel-indicator-item-active {
+  background: rgba(var(--semi-white), 1);
+}
+.semi-carousel-indicator-dot .semi-carousel-indicator-item-light:hover {
+  background-color: rgba(var(--semi-white), 0.7);
+}
+.semi-carousel-indicator-dot .semi-carousel-indicator-item-light:active {
+  background: rgba(var(--semi-white), 1);
+}
+.semi-carousel-indicator-dot .semi-carousel-indicator-item-dark {
+  background-color: rgba(var(--semi-black), 0.5);
+}
+.semi-carousel-indicator-dot .semi-carousel-indicator-item-dark.semi-carousel-indicator-item-active {
+  background-color: rgba(var(--semi-black), 1);
+}
+.semi-carousel-indicator-dot .semi-carousel-indicator-item-dark:hover {
+  background-color: rgba(var(--semi-black), 0.7);
+}
+.semi-carousel-indicator-dot .semi-carousel-indicator-item-dark:active {
+  background: rgba(var(--semi-black), 1);
+}
+.semi-carousel-indicator-line {
+  width: 240px;
+}
+.semi-carousel-indicator-line .semi-carousel-indicator-item {
+  flex: 1;
+  cursor: pointer;
+}
+.semi-carousel-indicator-line .semi-carousel-indicator-item:not(:last-child) {
+  margin-right: 4px;
+}
+.semi-carousel-indicator-line .semi-carousel-indicator-item-small {
+  height: 4px;
+}
+.semi-carousel-indicator-line .semi-carousel-indicator-item-medium {
+  height: 6px;
+}
+.semi-carousel-indicator-line .semi-carousel-indicator-item-primary {
+  background-color: rgba(var(--semi-blue-6), 0.4);
+}
+.semi-carousel-indicator-line .semi-carousel-indicator-item-primary.semi-carousel-indicator-item-active {
+  background: rgba(var(--semi-blue-6), 1);
+}
+.semi-carousel-indicator-line .semi-carousel-indicator-item-primary:hover {
+  background-color: rgba(var(--semi-blue-6), 0.7);
+}
+.semi-carousel-indicator-line .semi-carousel-indicator-item-primary:active {
+  background: rgba(var(--semi-blue-6), 1);
+}
+.semi-carousel-indicator-line .semi-carousel-indicator-item-light {
+  background-color: rgba(var(--semi-white), 0.4);
+}
+.semi-carousel-indicator-line .semi-carousel-indicator-item-light.semi-carousel-indicator-item-active {
+  background: rgba(var(--semi-white), 1);
+}
+.semi-carousel-indicator-line .semi-carousel-indicator-item-light:hover {
+  background-color: rgba(var(--semi-white), 0.7);
+}
+.semi-carousel-indicator-line .semi-carousel-indicator-item-light:active {
+  background: rgba(var(--semi-white), 1);
+}
+.semi-carousel-indicator-line .semi-carousel-indicator-item-dark {
+  background-color: rgba(var(--semi-black), 0.5);
+}
+.semi-carousel-indicator-line .semi-carousel-indicator-item-dark.semi-carousel-indicator-item-active {
+  background: rgba(var(--semi-black), 1);
+}
+.semi-carousel-indicator-line .semi-carousel-indicator-item-dark:hover {
+  background-color: rgba(var(--semi-black), 0.7);
+}
+.semi-carousel-indicator-line .semi-carousel-indicator-item-dark:active {
+  background: rgba(var(--semi-black), 1);
+}
+.semi-carousel-indicator-columnar .semi-carousel-indicator-item {
+  cursor: pointer;
+}
+.semi-carousel-indicator-columnar .semi-carousel-indicator-item:not(:last-child) {
+  margin-right: 4px;
+}
+.semi-carousel-indicator-columnar .semi-carousel-indicator-item-small {
+  width: 4px;
+  height: 12px;
+}
+.semi-carousel-indicator-columnar .semi-carousel-indicator-item-small.semi-carousel-indicator-item-active {
+  height: 20px;
+}
+.semi-carousel-indicator-columnar .semi-carousel-indicator-item-medium {
+  width: 6px;
+  height: 20px;
+}
+.semi-carousel-indicator-columnar .semi-carousel-indicator-item-medium.semi-carousel-indicator-item-active {
+  height: 28px;
+}
+.semi-carousel-indicator-columnar .semi-carousel-indicator-item-primary {
+  background-color: rgba(var(--semi-blue-6), 0.4);
+}
+.semi-carousel-indicator-columnar .semi-carousel-indicator-item-primary.semi-carousel-indicator-item-active {
+  background: rgba(var(--semi-blue-6), 1);
+}
+.semi-carousel-indicator-columnar .semi-carousel-indicator-item-primary:hover {
+  background-color: rgba(var(--semi-blue-6), 0.7);
+}
+.semi-carousel-indicator-columnar .semi-carousel-indicator-item-primary:active {
+  background: rgba(var(--semi-blue-6), 1);
+}
+.semi-carousel-indicator-columnar .semi-carousel-indicator-item-light {
+  background-color: rgba(var(--semi-white), 0.4);
+}
+.semi-carousel-indicator-columnar .semi-carousel-indicator-item-light.semi-carousel-indicator-item-active {
+  background: rgba(var(--semi-white), 1);
+}
+.semi-carousel-indicator-columnar .semi-carousel-indicator-item-light:hover {
+  background-color: rgba(var(--semi-white), 0.7);
+}
+.semi-carousel-indicator-columnar .semi-carousel-indicator-item-light:active {
+  background: rgba(var(--semi-white), 1);
+}
+.semi-carousel-indicator-columnar .semi-carousel-indicator-item-dark {
+  background-color: rgba(var(--semi-black), 0.5);
+}
+.semi-carousel-indicator-columnar .semi-carousel-indicator-item-dark.semi-carousel-indicator-item-active {
+  background: rgba(var(--semi-black), 1);
+}
+.semi-carousel-indicator-columnar .semi-carousel-indicator-item-dark:hover {
+  background-color: rgba(var(--semi-black), 0.7);
+}
+.semi-carousel-indicator-columnar .semi-carousel-indicator-item-dark:active {
+  background: rgba(var(--semi-black), 1);
+}
+.semi-carousel-arrow {
+  display: flex;
+  font-size: 32px;
+  cursor: pointer;
+}
+.semi-carousel-arrow-prev {
+  position: absolute;
+  top: 50%;
+  left: 20px;
+  transform: translateY(-50%);
+  z-index: 2;
+}
+.semi-carousel-arrow-next {
+  position: absolute;
+  top: 50%;
+  right: 20px;
+  transform: translateY(-50%);
+  z-index: 2;
+}
+.semi-carousel-arrow-light {
+  color: rgba(var(--semi-white), 0.4);
+}
+.semi-carousel-arrow-light:hover {
+  color: rgba(var(--semi-white), 1);
+}
+.semi-carousel-arrow-primary {
+  color: rgba(var(--semi-blue-6), 0.4);
+}
+.semi-carousel-arrow-primary:hover {
+  color: rgba(var(--semi-blue-6), 1);
+}
+.semi-carousel-arrow-dark {
+  color: rgba(var(--semi-black), 0.5);
+}
+.semi-carousel-arrow-dark:hover {
+  color: rgba(var(--semi-black), 1);
+}
+.semi-carousel-arrow-hover div {
+  z-index: 2;
+  opacity: 0;
+  transition: all 0.3s;
+}
+.semi-carousel:hover .semi-carousel-arrow-hover div {
+  opacity: 1;
+}
+
+@keyframes semi-carousel-content-item-keyframe-slide-in {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+@keyframes semi-carousel-content-item-keyframe-slide-out {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+@keyframes semi-carousel-content-item-keyframe-slide-in-reverse {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+@keyframes semi-carousel-content-item-keyframe-slide-out-reverse {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
+.semi-rtl .semi-carousel,
+.semi-portal-rtl .semi-carousel {
+  direction: rtl;
+}
+.semi-rtl .semi-carousel-indicator,
+.semi-portal-rtl .semi-carousel-indicator {
+  display: flex;
+}
+.semi-rtl .semi-carousel-indicator-dot .semi-carousel-indicator-item:not(:last-child),
+.semi-portal-rtl .semi-carousel-indicator-dot .semi-carousel-indicator-item:not(:last-child) {
+  margin-right: 0;
+  margin-left: 8px;
+}
+.semi-rtl .semi-carousel-indicator-columnar .semi-carousel-indicator-item:not(:last-child),
+.semi-portal-rtl .semi-carousel-indicator-columnar .semi-carousel-indicator-item:not(:last-child) {
+  margin-right: 0;
+  margin-left: 4px;
+}
+.semi-rtl .semi-carousel-arrow,
+.semi-portal-rtl .semi-carousel-arrow {
+  flex-direction: row-reverse;
+}
+.semi-rtl .semi-carousel-arrow-prev,
+.semi-portal-rtl .semi-carousel-arrow-prev {
+  left: auto;
+  right: 20px;
+  transform: scaleX(-1) translateY(-50%);
+  z-index: 2;
+}
+.semi-rtl .semi-carousel-arrow-next,
+.semi-portal-rtl .semi-carousel-arrow-next {
+  left: 20px;
+  transform: scaleX(-1) translateY(-50%);
+  right: auto;
+  z-index: 2;
+}