feat(carousel): [carousel] modify smb theme

opentiny · Sep 19, 2024 · 9bfddd0 · 9bfddd0
1 parent f0a1244
commit 9bfddd0
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 12 deletions.
diff --git a/examples/sites/demos/pc/app/carousel/show-title-composition-api.vue b/examples/sites/demos/pc/app/carousel/show-title-composition-api.vue
@@ -21,7 +21,7 @@ import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@ope
 }
 
 .carousel-item-demo:nth-child(2n) {
-  background-color: #fafafa;
+  background-color: #f0f0f0;
 }
 
 .carousel-item-demo:nth-child(2n + 1) {

diff --git a/examples/sites/demos/pc/app/carousel/show-title.vue b/examples/sites/demos/pc/app/carousel/show-title.vue
@@ -28,7 +28,7 @@ export default {
 }
 
 .carousel-item-demo:nth-child(2n) {
-  background-color: #fafafa;
+  background-color: #f0f0f0;
 }
 
 .carousel-item-demo:nth-child(2n + 1) {

diff --git a/packages/theme/src/carousel-item/index.less b/packages/theme/src/carousel-item/index.less
@@ -38,12 +38,13 @@
       height: var(--ti-carousel-item-title-height);
       width: 100%;
       line-height: var(--ti-carousel-item-title-height);
-      color: var(--ti-carousel-item-title-text-color, #fff);
+      color: var(--ti-carousel-item-title-text-color);
       text-align: left;
       background: var(--ti-carousel-item-title-bg-color);
+      opacity: 0.3;
 
       span {
-        padding: 0 12px;
+        padding: 0 16px;
         font-size: var(--ti-carousel-item-title-span-font-size);
         width: 80%;
         display: inline-block;

diff --git a/packages/theme/src/carousel-item/vars.less b/packages/theme/src/carousel-item/vars.less
@@ -11,9 +11,9 @@
 */
 
 .component-css-vars-carousel-item() {
-  --ti-carousel-item-title-height: var(--ti-common-size-height-small, 32px);
-  --ti-carousel-item-title-text-color: var(--ti-common-color-light, #fff);
-  --ti-carousel-item-title-bg-color: var(--ti-common-color-bg-dark-disabled);
+  --ti-carousel-item-title-height: var(--ti-common-size-height-medium);
+  --ti-carousel-item-title-text-color: var(--ti-common-color-light);
+  --ti-carousel-item-title-bg-color: var(--ti-common-color-bg-primary);
   --ti-carousel-item-title-span-font-size: var(--ti-common-font-size-base, 12px);
   --ti-carousel-mask-bg-color: var(--ti-common-color-light, #fff);
 }
diff --git a/packages/theme/src/carousel/index.less b/packages/theme/src/carousel/index.less
@@ -128,6 +128,10 @@
       margin-right: var(--ti-carousel-indicator-margin-right);
       cursor: pointer;
 
+      &:last-child {
+        margin-right: 0;
+      }
+
       &:hover button {
         opacity: var(--ti-carousel-hover-opacity);
       }
@@ -212,7 +216,7 @@
       left: auto;
       right: 16px;
       bottom: 0;
-      margin: 0 0 8px;
+      margin: 0 0 16px;
       transform: none;
       background: transparent;
     }

diff --git a/packages/theme/src/carousel/vars.less b/packages/theme/src/carousel/vars.less
@@ -44,11 +44,11 @@
   // 指示器按钮高度
   --ti-carousel-indicator-button-height: var(--ti-common-size-2x, 8px);
   // 非当前指示器背景色
-  --ti-carousel-indicator-button-bg-color: var(--ti-common-color-text-secondary);
+  --ti-carousel-indicator-button-bg-color: #e6e6e6;
   // 指示器项右外边距
   --ti-carousel-indicator-margin-right: var(--ti-common-space-3x);
   // 当前指示器右边距
-  --ti-carousel-indicator-active-width: var(--ti-common-size-5x);
+  --ti-carousel-indicator-active-width: var(--ti-common-size-3x);
   // 指示器项垂直内边距(hide)
   --ti-carousel-indicator-padding-vertical: var(--ti-common-space-0, 0px);
   // 指示器项水平内边距
@@ -58,15 +58,15 @@
   // 当前指示器背景色
   --ti-carousel-indicator-active-background-color: var(--ti-common-color-primary-active);
   // 当前指示器的宽度
-  --ti-carousel-indicator-active-button-width: var(--ti-common-size-5x);
+  --ti-carousel-indicator-active-button-width: var(--ti-common-size-3x);
   // 当前指示器圆角
   --ti-carousel-indicator-active-border-radius: var(--ti-common-space-base);
   //  幻灯片外的指示器动画(hide)
   --ti-carousel-indicator-active-transition: none;
   // 幻灯片外的指示器默认背景色
   --ti-carousel-outside-button-bg-color: var(--ti-common-color-dark, #000);
   // 幻灯片外的当前指示器背景色
-  --ti-carousel-outside-button-active-bg-color: var(--ti-common-color-primary-active);
+  --ti-carousel-outside-button-active-bg-color: var(--ti-common-color-text-secondary);
   // 标签按钮的字号(hide)
   --ti-carousel-labels-button-font-size: var(--ti-common-font-size-base, 12px);
   // 正常透明度颜色