@sdata/web-vue 1.6.0 → 1.7.0

package/es/card/style/index.less

@@ -1,216 +0,0 @@
-@import url('../../style/mixins/index.less');
-@import url('./token.less');
-
-@card-prefix-cls: ~'@{prefix}-card';
-
-.@{card-prefix-cls} {
-  position: relative;
-  background: @card-color-bg;
-  border-radius: @card-border-radius-no-border;
-  transition: box-shadow @transition-duration-2 @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: @line-height-base;
-      .text-ellipsis();
-    }
-
-    &-extra {
-      color: @card-color-title-extra;
-      .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 @transition-duration-2 @transition-timing-function-linear;
-      .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;
-      .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 @transition-duration-2 @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;
-  }
-
-  // 不同尺寸
-  .size(@name, @size) {
-    &-size-@{name} {
-      font-size: ~'@{card-size-@{size}-font-size}';
-
-      .@{card-prefix-cls}-header {
-        height: ~'@{card-size-@{size}-height-title}';
-        padding: ~'@{card-size-@{size}-padding-vertical-title}'
-          ~'@{card-size-@{size}-padding-horizontal-title}';
-      }
-
-      .@{card-prefix-cls}-header-title,
-      .@{card-prefix-cls}-meta-title {
-        font-size: ~'@{card-size-@{size}-font-size-title}';
-      }
-
-      .@{card-prefix-cls}-header-extra {
-        font-size: ~'@{card-size-@{size}-font-size-title-extra}';
-      }
-
-      .@{card-prefix-cls}-body {
-        padding: ~'@{card-size-@{size}-padding-vertical-body}'
-          ~'@{card-size-@{size}-padding-horizontal-body}';
-      }
-    }
-  }
-
-  .size(medium, default);
-  .size(small, small);
-}
-
-// dark mode
-@{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.less

@@ -1,69 +0,0 @@
-@import url('../../style/theme/index.less');
-
-@card-size-small-height-title: @size-10;
-
-@card-size-small-font-size-title: @font-size-title-1;
-
-@card-size-small-font-size-title-extra: @font-size-body-3;
-
-@card-size-small-font-size: @font-size-body-3;
-
-@card-size-small-padding-horizontal-title: @spacing-7;
-
-@card-size-small-padding-vertical-title: @spacing-4;
-
-@card-size-small-padding-horizontal-body: @spacing-7;
-
-@card-size-small-padding-vertical-body: @spacing-6;
-
-@card-size-default-height-title: 46px;
-
-@card-size-default-font-size-title: @font-size-title-1;
-
-@card-size-default-font-size-title-extra: @font-size-body-3;
-
-@card-size-default-font-size: @font-size-body-3;
-
-@card-size-default-padding-horizontal-title: @spacing-7;
-
-@card-size-default-padding-vertical-title: @spacing-5;
-
-@card-size-default-padding-horizontal-body: @spacing-7;
-
-@card-size-default-padding-vertical-body: @spacing-7;
-
-@card-line-height: @line-height-base;
-
-@card-font-weight-title: @font-weight-500;
-
-@card-margin-top-meta-footer: @spacing-8;
-
-@card-margin-top-meta-description: @spacing-2;
-
-@card-margin-right-action-item: @spacing-6;
-
-@card-color-bg: var(~'@{sd-cssvars-prefix}-color-bg-2');
-
-@card-color-border: var(~'@{sd-cssvars-prefix}-color-neutral-3');
-
-@card-color-title: var(~'@{sd-cssvars-prefix}-color-text-1');
-
-@card-color-title-extra: @color-primary-6;
-
-@card-color-body: var(~'@{sd-cssvars-prefix}-color-text-2');
-
-@card-color-action: var(~'@{sd-cssvars-prefix}-color-text-2');
-
-@card-color-action_hover: @color-primary-6;
-
-@card-color-box-shadow: rgb(var(~'@{sd-cssvars-prefix}-gray-2'));
-
-@card-color-box-shadow_dark: rgba(var(~'@{sd-cssvars-prefix}-gray-1'), 40%);
-
-@card-border-width: @border-1;
-
-@card-border-width-title-bottom: @border-1;
-
-@card-border-radius: @radius-small;
-
-@card-border-radius-no-border: @radius-none;

package/es/carousel/style/index.less

@@ -1,399 +0,0 @@
-@import url('./token.less');
-@import url('./slide.less');
-
-@carousel-prefix-cls: ~'@{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;
-    }
-
-    .item-position(@direction) {
-      .@{carousel-prefix-cls}-item-slide-out {
-        display: block;
-        animation: ~'@{prefix}-carousel-slide-@{direction}-out';
-      }
-
-      .@{carousel-prefix-cls}-item-slide-in {
-        display: block;
-        animation: ~'@{prefix}-carousel-slide-@{direction}-in';
-      }
-
-      &.@{carousel-prefix-cls}-negative {
-        .@{carousel-prefix-cls}-item-slide-out {
-          animation: ~'@{prefix}-carousel-slide-@{direction}-out-reverse';
-        }
-
-        .@{carousel-prefix-cls}-item-slide-in {
-          animation: ~'@{prefix}-carousel-slide-@{direction}-in-reverse';
-        }
-      }
-    }
-
-    &.@{carousel-prefix-cls}-horizontal {
-      .item-position(x);
-    }
-
-    &.@{carousel-prefix-cls}-vertical {
-      .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: ~'@{prefix}-carousel-card-middle-to-bottom';
-    }
-
-    // prev 右边对齐容器中线
-    .@{carousel-prefix-cls}-item-prev {
-      transform: translateX(-100%) translateZ(-200px);
-      opacity: 0.4;
-      animation: ~'@{prefix}-carousel-card-top-to-middle';
-    }
-
-    // next 左边对齐容器中线
-    .@{carousel-prefix-cls}-item-next {
-      transform: translateX(0%) translateZ(-200px);
-      opacity: 0.4;
-      animation: ~'@{prefix}-carousel-card-bottom-to-middle';
-    }
-
-    // current 居中
-    .@{carousel-prefix-cls}-item-current {
-      transform: translateX(-50%) translateZ(0);
-      opacity: 1;
-      animation: ~'@{prefix}-carousel-card-middle-to-top';
-    }
-
-    &.@{carousel-prefix-cls}-negative {
-      > * {
-        animation: ~'@{prefix}-carousel-card-middle-to-bottom-reverse';
-      }
-
-      // prev 右边对齐容器中线
-      .@{carousel-prefix-cls}-item-prev {
-        animation: ~'@{prefix}-carousel-card-bottom-to-middle-reverse';
-      }
-
-      // next 左边对齐容器中线
-      .@{carousel-prefix-cls}-item-next {
-        animation: ~'@{prefix}-carousel-card-top-to-middle-reverse';
-      }
-
-      // current 居中
-      .@{carousel-prefix-cls}-item-current {
-        animation: ~'@{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 + $padding);
-      }
-
-      &.@{carousel-prefix-cls}-indicator-line {
-        bottom: -(@carousel-indicator-position + @carousel-indicator-line-size-height + $padding);
-      }
-
-      &.@{carousel-prefix-cls}-indicator-slider {
-        bottom: -(@carousel-indicator-position + @carousel-indicator-slider-size-height + $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: $width;
-        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;
-    }
-  }
-}
-
-@{sd-theme-tag}[sd-theme='dark'] {
-  .@{carousel-prefix-cls}-arrow > div {
-    background-color: rgb(@dark-gray-1, 0.3);
-
-    &:hover {
-      background-color: rgb(@dark-gray-1, 0.5);
-    }
-  }
-
-  .@{carousel-prefix-cls}-indicator-item,
-  .@{carousel-prefix-cls}-indicator-slider {
-    background-color: rgb(@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/token.less

@@ -1,33 +0,0 @@
-@import url('../../style/theme/index.less');
-
-@carousel-content-border-radius: 0;
-
-// arrow
-@carousel-arrow-position: @spacing-6;
-@carousel-arrow-size: @size-6;
-@carousel-arrow-font-size: @font-size-body-3;
-@carousel-arrow-color-icon: var(~'@{sd-cssvars-prefix}-color-white');
-@carousel-arrow-color-bg: rgba(@color-white, 0.3);
-@carousel-arrow-color-bg_hover: rgba(@color-white, 0.5);
-
-// indicator
-@carousel-indicator-size-wrapper: @size-12;
-@carousel-indicator-color-bg-wrapper: rgba(0, 0, 0, 0.15);
-
-@carousel-indicator-dot-size: 6px;
-@carousel-indicator-line-size-width: @size-3;
-@carousel-indicator-line-size-height: @size-1;
-@carousel-indicator-slider-size-width: @size-12;
-@carousel-indicator-slider-size-height: @size-1;
-
-@carousel-indicator-position: @spacing-6;
-@carousel-indicator-gap: @spacing-4;
-@carousel-indicator-border-radius: @radius-medium;
-@carousel-indicator-color_default: rgba(@color-white, 0.3);
-@carousel-indicator-color_active: var(~'@{sd-cssvars-prefix}-color-white');
-
-@carousel-indicator-outer-border-radius: 20px;
-@carousel-indicator-outer-padding: @spacing-2;
-@carousel-indicator-outer-color_default: rgba(var(~'@{sd-cssvars-prefix}-gray-4'), 0.5);
-@carousel-indicator-outer-color_active: var(~'@{sd-cssvars-prefix}-color-fill-4');
-@carousel-indicator-outer-color-bg: @color-transparent;