@sdata/web-vue 1.6.0 → 1.7.0

package/es/card/style/index.scss

@@ -0,0 +1,270 @@
+@use '@style/theme/index.scss' as theme;
+@use '@style/theme/index.scss' as global;
+@use 'sass:string';
+@use 'sass:map';
+@use '@style/theme/legacy-less-var.scss' as legacyLessVar;
+@use '@style/mixins/index.scss' as *;
+@use '@components/card/style/token.scss' as *;
+
+$card-prefix-cls: string.unquote('#{theme.$prefix}-card');
+
+$__less-vars: (
+  'card-border-radius': $card-border-radius,
+  'card-border-radius-no-border': $card-border-radius-no-border,
+  'card-border-width': $card-border-width,
+  'card-border-width-title-bottom': $card-border-width-title-bottom,
+  'card-color-action': $card-color-action,
+  'card-color-action_hover': $card-color-action_hover,
+  'card-color-bg': $card-color-bg,
+  'card-color-body': $card-color-body,
+  'card-color-border': $card-color-border,
+  'card-color-box-shadow': $card-color-box-shadow,
+  'card-color-box-shadow_dark': $card-color-box-shadow_dark,
+  'card-color-title': $card-color-title,
+  'card-color-title-extra': $card-color-title-extra,
+  'card-size-small-font-size': $card-size-small-font-size,
+  'card-size-small-height-title': $card-size-small-height-title,
+  'card-size-small-padding-vertical-title': $card-size-small-padding-vertical-title,
+  'card-size-small-padding-horizontal-title': $card-size-small-padding-horizontal-title,
+  'card-size-small-font-size-title': $card-size-small-font-size-title,
+  'card-size-small-font-size-title-extra': $card-size-small-font-size-title-extra,
+  'card-size-small-padding-vertical-body': $card-size-small-padding-vertical-body,
+  'card-size-small-padding-horizontal-body': $card-size-small-padding-horizontal-body,
+  'card-size-default-font-size': $card-size-default-font-size,
+  'card-size-default-height-title': $card-size-default-height-title,
+  'card-size-default-padding-vertical-title': $card-size-default-padding-vertical-title,
+  'card-size-default-padding-horizontal-title': $card-size-default-padding-horizontal-title,
+  'card-size-default-font-size-title': $card-size-default-font-size-title,
+  'card-size-default-font-size-title-extra': $card-size-default-font-size-title-extra,
+  'card-size-default-padding-vertical-body': $card-size-default-padding-vertical-body,
+  'card-size-default-padding-horizontal-body': $card-size-default-padding-horizontal-body,
+  'card-font-weight-title': $card-font-weight-title,
+  'card-margin-right-action-item': $card-margin-right-action-item,
+  'card-margin-top-meta-description': $card-margin-top-meta-description,
+  'card-margin-top-meta-footer': $card-margin-top-meta-footer,
+  'line-height-base': theme.$line-height-base,
+  'prefix': theme.$prefix,
+  'sd-theme-tag': global.$sd-theme-tag,
+  'transition-duration-2': theme.$transition-duration-2,
+  'transition-timing-function-linear': theme.$transition-timing-function-linear,
+);
+
+@function less-var($name, $fallback: null) {
+  @return legacyLessVar.get($__less-vars, $name, $fallback);
+}
+
+.#{$card-prefix-cls} {
+  position: relative;
+  background: $card-color-bg;
+  border-radius: $card-border-radius-no-border;
+  transition: box-shadow theme.$transition-duration-2 theme.$transition-timing-function-linear;
+
+  &-header {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    overflow: hidden;
+    border-bottom: $card-border-width-title-bottom solid $card-color-border;
+
+    &-no-title::before {
+      display: block;
+      content: ' ';
+    }
+
+    &-title {
+      flex: 1;
+      color: $card-color-title;
+      font-weight: $card-font-weight-title;
+      line-height: theme.$line-height-base;
+
+      @include text-ellipsis();
+    }
+
+    &-extra {
+      color: $card-color-title-extra;
+
+      @include text-ellipsis();
+    }
+  }
+
+  &-body {
+    color: $card-color-body;
+  }
+
+  &-cover {
+    overflow: hidden;
+
+    > * {
+      display: block;
+      width: 100%;
+    }
+  }
+
+  &-actions {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: $card-margin-top-meta-footer;
+
+    &::before {
+      visibility: hidden;
+      content: '';
+    }
+
+    &-right {
+      display: flex;
+      align-items: center;
+    }
+
+    &-item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: $card-color-action;
+      cursor: pointer;
+      transition: color theme.$transition-duration-2 theme.$transition-timing-function-linear;
+
+      @include text-ellipsis();
+
+      &:hover {
+        color: $card-color-action_hover;
+      }
+
+      &:not(:last-child) {
+        margin-right: $card-margin-right-action-item;
+      }
+    }
+  }
+
+  &-meta {
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      &:last-child {
+        margin-top: $card-margin-top-meta-footer;
+      }
+
+      &-only-actions::before {
+        visibility: hidden;
+        content: '';
+      }
+
+      .#{$card-prefix-cls}-actions {
+        margin-top: 0;
+      }
+    }
+
+    &-title {
+      color: $card-color-title;
+      font-weight: $card-font-weight-title;
+
+      @include text-ellipsis();
+    }
+
+    &-description:not(:first-child) {
+      margin-top: $card-margin-top-meta-description;
+    }
+  }
+
+  &-grid {
+    position: relative;
+    box-sizing: border-box;
+    width: 33.33%;
+    box-shadow:
+      $card-border-width 0 0 0 $card-color-border,
+      0 $card-border-width 0 0 $card-color-border,
+      $card-border-width $card-border-width 0 0 $card-color-border,
+      $card-border-width 0 0 0 $card-color-border inset,
+      0 $card-border-width 0 0 $card-color-border inset;
+
+    &::before {
+      position: absolute;
+      inset: 0;
+      transition: box-shadow theme.$transition-duration-2 theme.$transition-timing-function-linear;
+      content: '';
+      pointer-events: none;
+    }
+
+    &-hoverable:hover {
+      z-index: 1;
+
+      &::before {
+        box-shadow: 0 4px 10px $card-color-box-shadow;
+      }
+    }
+
+    // 避免 Card 的背景色遮住由 box-shadow 实现的 Grid 的边框
+    .#{$card-prefix-cls} {
+      background: none;
+      box-shadow: none;
+    }
+  }
+
+  // 以下为特殊状态的补充
+  &-contain-grid:not(#{&}-loading) > &-body {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0 (-$card-border-width);
+    padding: 0;
+  }
+
+  &-hoverable:hover {
+    box-shadow: 0 4px 10px $card-color-box-shadow;
+  }
+
+  &-bordered {
+    border: $card-border-width solid $card-color-border;
+    border-radius: $card-border-radius;
+
+    .#{$card-prefix-cls}-cover {
+      border-radius: $card-border-radius $card-border-radius 0 0;
+    }
+  }
+
+  &-loading &-body {
+    overflow: hidden;
+    text-align: center;
+  }
+
+  // 不同尺寸
+  @mixin size($name, $size) {
+    &-size-#{$name} {
+      font-size: less-var('card-size-#{$size}-font-size');
+
+      .#{$card-prefix-cls}-header {
+        height: less-var('card-size-#{$size}-height-title');
+        padding: less-var('card-size-#{$size}-padding-vertical-title')
+          less-var('card-size-#{$size}-padding-horizontal-title');
+      }
+
+      .#{$card-prefix-cls}-header-title,
+      .#{$card-prefix-cls}-meta-title {
+        font-size: less-var('card-size-#{$size}-font-size-title');
+      }
+
+      .#{$card-prefix-cls}-header-extra {
+        font-size: less-var('card-size-#{$size}-font-size-title-extra');
+      }
+
+      .#{$card-prefix-cls}-body {
+        padding: less-var('card-size-#{$size}-padding-vertical-body')
+          less-var('card-size-#{$size}-padding-horizontal-body');
+      }
+    }
+  }
+
+  @include size(medium, default);
+  @include size(small, small);
+}
+
+// dark mode
+#{global.$sd-theme-tag}[sd-theme='dark'] {
+  .#{$card-prefix-cls}-grid-hoverable:hover::before,
+  .#{$card-prefix-cls}-hoverable:hover {
+    box-shadow: 0 4px 10px $card-color-box-shadow_dark;
+  }
+}

package/es/card/style/token.scss

@@ -0,0 +1,75 @@
+@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 *;
+
+$card-size-small-height-title: global.$size-10;
+
+$card-size-small-font-size-title: global.$font-size-title-1;
+
+$card-size-small-font-size-title-extra: global.$font-size-body-3;
+
+$card-size-small-font-size: global.$font-size-body-3;
+
+$card-size-small-padding-horizontal-title: global.$spacing-7;
+
+$card-size-small-padding-vertical-title: global.$spacing-4;
+
+$card-size-small-padding-horizontal-body: global.$spacing-7;
+
+$card-size-small-padding-vertical-body: global.$spacing-6;
+
+$card-size-default-height-title: 46px;
+
+$card-size-default-font-size-title: global.$font-size-title-1;
+
+$card-size-default-font-size-title-extra: global.$font-size-body-3;
+
+$card-size-default-font-size: global.$font-size-body-3;
+
+$card-size-default-padding-horizontal-title: global.$spacing-7;
+
+$card-size-default-padding-vertical-title: global.$spacing-5;
+
+$card-size-default-padding-horizontal-body: global.$spacing-7;
+
+$card-size-default-padding-vertical-body: global.$spacing-7;
+
+$card-line-height: $line-height-base;
+
+$card-font-weight-title: global.$font-weight-500;
+
+$card-margin-top-meta-footer: global.$spacing-8;
+
+$card-margin-top-meta-description: global.$spacing-2;
+
+$card-margin-right-action-item: global.$spacing-6;
+
+$card-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-2'));
+
+$card-color-border: var(string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3'));
+
+$card-color-title: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+
+$card-color-title-extra: global.$color-primary-6;
+
+$card-color-body: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
+
+$card-color-action: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
+
+$card-color-action_hover: global.$color-primary-6;
+
+$card-color-box-shadow: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-gray-2')));
+
+$card-color-box-shadow_dark: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-gray-1')), 40%);
+
+$card-border-width: global.$border-1;
+
+$card-border-width-title-bottom: global.$border-1;
+
+$card-border-radius: global.$radius-small;
+
+$card-border-radius-no-border: global.$radius-none;

package/es/carousel/style/index.css

@@ -165,17 +165,13 @@
 .sd-carousel-indicator-position-outer {
   margin-bottom: 30px;
 }
-.sd-carousel-slide,
-.sd-carousel-card,
-.sd-carousel-fade {
+.sd-carousel-slide, .sd-carousel-card, .sd-carousel-fade {
   position: relative;
   width: 100%;
   height: 100%;
   overflow: hidden;
 }
-.sd-carousel-slide > *,
-.sd-carousel-card > *,
-.sd-carousel-fade > * {
+.sd-carousel-slide > *, .sd-carousel-card > *, .sd-carousel-fade > * {
   position: absolute;
   top: 0;
   left: 0;
@@ -339,15 +335,14 @@
   bottom: -20px;
 }
 .sd-carousel-indicator-outer.sd-carousel-indicator-slider {
-  bottom: -16px;
+  bottom: -20px;
   padding: 0;
-  background-color: rgba(var(--gray-4), 0.5);
+  background-color: rgb(var(--gray-4), 0.5);
 }
 .sd-carousel-indicator-outer .sd-carousel-indicator-item {
-  background-color: rgba(var(--gray-4), 0.5);
+  background-color: rgb(var(--gray-4), 0.5);
 }
-.sd-carousel-indicator-outer .sd-carousel-indicator-item:hover,
-.sd-carousel-indicator-outer .sd-carousel-indicator-item-active {
+.sd-carousel-indicator-outer .sd-carousel-indicator-item:hover, .sd-carousel-indicator-outer .sd-carousel-indicator-item-active {
   background-color: var(--color-fill-4);
 }
 .sd-carousel-indicator-item {
@@ -356,8 +351,7 @@
   border-radius: var(--border-radius-medium);
   cursor: pointer;
 }
-.sd-carousel-indicator-item:hover,
-.sd-carousel-indicator-item-active {
+.sd-carousel-indicator-item:hover, .sd-carousel-indicator-item-active {
   background-color: var(--color-white);
 }
 .sd-carousel-indicator-dot .sd-carousel-indicator-item {
@@ -435,24 +429,25 @@
 .sd-carousel:hover .sd-carousel-arrow-hover div {
   opacity: 1;
 }
-body[sd-theme='dark'] .sd-carousel-arrow > div {
+
+:where(body, [sd-theme])[sd-theme=dark] .sd-carousel-arrow > div {
   background-color: rgba(23, 23, 26, 0.3);
 }
-body[sd-theme='dark'] .sd-carousel-arrow > div:hover {
+:where(body, [sd-theme])[sd-theme=dark] .sd-carousel-arrow > div:hover {
   background-color: rgba(23, 23, 26, 0.5);
 }
-body[sd-theme='dark'] .sd-carousel-indicator-item,
-body[sd-theme='dark'] .sd-carousel-indicator-slider {
+:where(body, [sd-theme])[sd-theme=dark] .sd-carousel-indicator-item,
+:where(body, [sd-theme])[sd-theme=dark] .sd-carousel-indicator-slider {
   background-color: rgba(23, 23, 26, 0.3);
 }
-body[sd-theme='dark'] .sd-carousel-indicator-item-active,
-body[sd-theme='dark'] .sd-carousel-indicator-item:hover {
+:where(body, [sd-theme])[sd-theme=dark] .sd-carousel-indicator-item-active,
+:where(body, [sd-theme])[sd-theme=dark] .sd-carousel-indicator-item:hover {
   background-color: var(--color-white);
 }
-body[sd-theme='dark'] .sd-carousel-indicator-outer.sd-carousel-indicator-slider {
-  background-color: rgba(var(--gray-4), 0.5);
+:where(body, [sd-theme])[sd-theme=dark] .sd-carousel-indicator-outer.sd-carousel-indicator-slider {
+  background-color: rgb(var(--gray-4), 0.5);
 }
-body[sd-theme='dark'] .sd-carousel-indicator-outer .sd-carousel-indicator-item:hover,
-body[sd-theme='dark'] .sd-carousel-indicator-outer .sd-carousel-indicator-item-active {
+:where(body, [sd-theme])[sd-theme=dark] .sd-carousel-indicator-outer .sd-carousel-indicator-item:hover,
+:where(body, [sd-theme])[sd-theme=dark] .sd-carousel-indicator-outer .sd-carousel-indicator-item-active {
   background-color: var(--color-fill-4);
-}
+}

package/es/carousel/style/index.d.ts

@@ -1,2 +1,2 @@
-import '../../style/index.less';
-import './index.less';
+import '../../style/index.scss';
+import './index.scss';

package/es/carousel/style/index.js

@@ -1,2 +1,2 @@
-import "../../style/index.less";
-import "./index.less";
+import "../../style/index.scss";
+import "./index.scss";