@sdata/web-vue 1.5.0 → 1.7.0

package/es/tabs/style/rtl.scss

@@ -0,0 +1,107 @@
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+@use '@components/tabs/style/token.scss' as *;
+$tabs-prefix-cls: string.unquote('#{theme.$prefix}-tabs');
+.#{$tabs-prefix-cls}-rtl {
+  direction: rtl;
+
+  &.#{$tabs-prefix-cls}-left {
+    flex-direction: row-reverse;
+  }
+
+  &.#{$tabs-prefix-cls}-right {
+    flex-direction: row;
+  }
+
+  .#{$tabs-prefix-cls} {
+    &-close-icon {
+      margin-right: $tabs-margin-close-icon-left;
+      margin-left: 0;
+    }
+
+    &-left-icon,
+    &-right-icon {
+      margin-right: $tabs-padding-header-wrapper-horizontal;
+      margin-left: $tabs-spacing-nav-icon-header;
+    }
+  }
+
+  .#{$tabs-prefix-cls}-nav-type-line {
+    > .#{$tabs-prefix-cls}-nav-type-horizontal {
+      .#{$tabs-prefix-cls}-header-scroll {
+        > .#{$tabs-prefix-cls}-header-title {
+          &:first-of-type {
+            margin-right: 0;
+          }
+        }
+      }
+    }
+  }
+
+  .#{$tabs-prefix-cls}-nav-type-line,
+  .#{$tabs-prefix-cls}-nav-type-text {
+    > .#{$tabs-prefix-cls}-nav-type-horizontal {
+      .#{$tabs-prefix-cls}-header-no-padding {
+        > .#{$tabs-prefix-cls}-header-title {
+          &:first-of-type {
+            margin-right: 0;
+          }
+        }
+      }
+    }
+  }
+
+  .#{$tabs-prefix-cls}-nav-type-card,
+  .#{$tabs-prefix-cls}-nav-type-card-gutter {
+    .#{$tabs-prefix-cls}-header-title-editable {
+      padding-right: $tabs-card-padding-title-horizontal;
+      padding-left: $tabs-card-padding-title-right_editable;
+    }
+  }
+
+  .#{$tabs-prefix-cls}-nav-type-card .#{$tabs-prefix-cls}-header-title {
+    border-right: $tabs-card-border-width solid $tabs-card-color-title-border;
+    border-left: none;
+
+    &:last-child {
+      border-left: $tabs-card-border-width solid $tabs-card-color-title-border;
+      border-top-left-radius: $tabs-card-border-radius;
+      border-top-right-radius: 0;
+    }
+
+    &:first-child {
+      border-top-left-radius: 0;
+      border-top-right-radius: $tabs-card-border-radius;
+    }
+  }
+
+  .#{$tabs-prefix-cls}-nav-type-card-gutter .#{$tabs-prefix-cls}-header-title {
+    margin-right: $tabs-card-gutter-spacing-horizontal;
+
+    &:first-child {
+      margin-right: 0;
+    }
+  }
+
+  .#{$tabs-prefix-cls}-nav-type-text {
+    .#{$tabs-prefix-cls}-header-title {
+      &:not(:first-of-type)::before {
+        right: -($tabs-text-margin-title-horizontal + ($tabs-text-size-separator-width * 0.5));
+        left: initial;
+      }
+    }
+  }
+
+  .#{$tabs-prefix-cls}-nav-type-capsule.#{$tabs-prefix-cls}-nav-type-horizontal {
+    .#{$tabs-prefix-cls}-header-title:not(:first-of-type) {
+      margin-right: $tabs-capsule-margin-title-horizontal;
+      margin-left: 0;
+
+      &::before {
+        right: -($tabs-capsule-margin-title-horizontal * 0.5) -
+          ($tabs-capsule-size-separator-width * 0.5);
+        left: initial;
+      }
+    }
+  }
+}

package/es/tabs/style/token.scss

@@ -0,0 +1,241 @@
+@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 *;
+
+$tabs-size-mini-font-size: global.$font-size-body-1;
+
+$tabs-size-small-font-size: global.$font-size-body-3;
+
+$tabs-size-default-font-size: global.$font-size-body-3;
+
+$tabs-size-large-font-size: global.$font-size-body-3;
+
+$tabs-size-mini-font-size_card: global.$font-size-body-1;
+
+$tabs-size-small-font-size_card: global.$font-size-body-3;
+
+$tabs-size-default-font-size_card: global.$font-size-body-3;
+
+$tabs-size-large-font-size_card: global.$font-size-body-3;
+
+$tabs-size-default-font-size_text: global.$font-size-body-3;
+
+$tabs-size-default-font-size_rounded: global.$font-size-body-3;
+
+$tabs-size-mini-font-size_capsule: global.$font-size-body-1;
+
+$tabs-size-small-font-size_capsule: global.$font-size-body-3;
+
+$tabs-size-default-font-size_capsule: global.$font-size-body-3;
+
+$tabs-size-large-font-size_capsule: global.$font-size-body-3;
+
+$tabs-size-mini-font-size_rounded: global.$font-size-body-1;
+
+$tabs-size-small-font-size_rounded: global.$font-size-body-3;
+
+$tabs-size-default-font-size_rounded: global.$font-size-body-3;
+
+$tabs-size-large-font-size_rounded: global.$font-size-body-3;
+
+$tabs-size-mini-header-height_line: global.$size-8;
+
+$tabs-size-small-header-height_line: global.$size-9;
+
+$tabs-size-default-header-height_line: global.$size-10;
+
+$tabs-size-large-header-height_line: global.$size-11;
+
+$tabs-size-mini-header-height: global.$size-6;
+
+$tabs-size-small-header-height: global.$size-7;
+
+$tabs-size-default-header-height: global.$size-8;
+
+$tabs-size-large-header-height: global.$size-9;
+
+$tabs-size-mini-header-height_capsule: global.$size-6;
+
+$tabs-size-small-header-height_capsule: global.$size-7;
+
+$tabs-size-default-header-height_capsule: global.$size-8;
+
+$tabs-size-large-header-height_capsule: global.$size-9;
+
+$tabs-size-mini-header-height_rounded: global.$size-6;
+
+$tabs-size-small-header-height_rounded: global.$size-7;
+
+$tabs-size-default-header-height_rounded: global.$size-8;
+
+$tabs-size-large-header-height_rounded: global.$size-9;
+
+$tabs-size-default-header-height_text: global.$size-8;
+
+$tabs-size-default-header-height_rounded: global.$size-8;
+
+$tabs-padding-title-text-vertical: 1px;
+
+$tabs-padding-title-text-horizontal: global.$spacing-4;
+
+$tabs-color-title-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
+
+$tabs-color-title-text_active: global.$color-primary-6;
+
+$tabs-color-title-text_hover: $tabs-color-title-text;
+
+$tabs-color-title-text_disabled: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-4'));
+
+$tabs-color-title-text_disabled_active: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-primary-light-3')
+);
+
+$tabs-line-size-header-border: global.$border-1;
+
+$tabs-line-color-header-border: var(string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3'));
+
+$tabs-line-size-ink-stroke: 2px;
+
+$tabs-line-color-ink-bg: global.$color-primary-6;
+
+$tabs-line-color-ink-bg_disabled: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-primary-light-3')
+);
+
+$tabs-line-font-title-text-weight_active: global.$font-weight-500;
+
+$tabs-line-margin-title-horizontal: global.$spacing-10;
+
+$tabs-line-margin-title-horizontal_first: global.$spacing-7;
+
+$tabs-line-margin-title-vertical: global.$spacing-6;
+
+$tabs-line-padding-title-horizontal_vertical: global.$spacing-8;
+
+$tabs-line-color-title-bg: global.$color-transparent;
+
+$tabs-line-color-title-bg_active: global.$color-transparent;
+
+$tabs-line-color-title-bg_hover: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2'));
+
+$tabs-line-font-title-text-weight_hover: global.$font-weight-400;
+
+$tabs-line-border-radius: global.$radius-small;
+
+$tabs-card-border-width: global.$border-1;
+
+$tabs-card-color-title-border: var(string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3'));
+
+$tabs-card-padding-title-horizontal: global.$spacing-7;
+
+$tabs-card-padding-title-right_editable: global.$spacing-6;
+
+$tabs-card-border-radius: global.$radius-small;
+
+$tabs-card-color-title-bg: global.$color-transparent;
+
+$tabs-card-color-title-bg_hover: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-3'));
+
+$tabs-card-color-title-bg_disabled: $tabs-card-color-title-bg;
+
+$tabs-card-color-title-bg_active: global.$color-transparent;
+
+$tabs-card-border-content-width: global.$border-1;
+
+$tabs-card-gutter-spacing-horizontal: global.$spacing-2;
+
+$tabs-card-gutter-color-title-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-1'));
+
+$tabs-card-gutter-color-title-bg_hover: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-fill-3')
+);
+
+$tabs-card-gutter-color-title-bg_active: global.$color-transparent;
+
+$tabs-card-gutter-color-title-bg_disabled: $tabs-card-gutter-color-title-bg;
+
+$tabs-text-size-separator-height: global.$size-3;
+
+$tabs-text-size-separator-width: 2px;
+
+$tabs-text-color-separator-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-3'));
+
+$tabs-text-margin-title-horizontal: global.$spacing-4;
+
+$tabs-text-color-title-bg: global.$color-transparent;
+
+$tabs-text-color-title-bg_active: global.$color-transparent;
+
+$tabs-text-color-title-bg_disabled: global.$color-transparent;
+
+$tabs-text-color-title-bg_disabled_active: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-primary-light-3')
+);
+
+$tabs-text-color-title-bg_hover: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2'));
+
+$tabs-rounded-padding-title-horizontal: global.$spacing-7;
+
+$tabs-rounded-margin-title-horizontal: global.$spacing-6;
+
+$tabs-rounded-color-title-bg: global.$color-transparent;
+
+$tabs-rounded-color-title-bg_active: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2')
+);
+
+$tabs-rounded-color-title-bg_disabled: global.$color-transparent;
+
+$tabs-rounded-color-title-bg_hover: $tabs-rounded-color-title-bg_active;
+
+$tabs-capsule-color-header-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2'));
+
+$tabs-capsule-margin-title-horizontal: 3px;
+
+$tabs-capsule-padding-title-horizontal: global.$spacing-6;
+
+$tabs-capsule-padding-header-vertical: 3px;
+
+$tabs-capsule-padding-header-horizontal: 3px;
+
+$tabs-capsule-border-header-radius: global.$radius-small;
+
+$tabs-capsule-color-title-bg: global.$color-transparent;
+
+$tabs-capsule-color-title-bg_active: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-2'));
+
+$tabs-capsule-color-title-bg_hover: $tabs-capsule-color-title-bg_active;
+
+$tabs-capsule-size-separator-width: 1px;
+
+$tabs-capsule-size-separator-height: 14px;
+
+$tabs-capsule-color-separator-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-3'));
+
+$tabs-margin-close-icon-left: global.$spacing-4;
+
+$tabs-size-icon: global.$size-3;
+
+$tabs-size-icon-bg: global.$size-4;
+
+$tabs-card-color-close-icon-bg_hover: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-fill-4')
+);
+
+$tabs-margin-add-icon-left: global.$spacing-4;
+
+$tabs-color-icon: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
+
+$tabs-color-icon_disabled: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-4'));
+
+$tabs-spacing-nav-icon-header: global.$spacing-3;
+
+$tabs-padding-header-wrapper-horizontal: global.$spacing-5;
+
+$tabs-padding-header-wrapper-vertical: global.$spacing-3;
+
+$tabs-content-padding: global.$spacing-7;

package/es/tabs/style/vertical.scss

@@ -0,0 +1,160 @@
+@use '@style/theme/index.scss' as theme;
+@use '@style/theme/index.scss' as global;
+@use 'sass:string';
+@use '@components/tabs/style/token.scss' as *;
+$tabs-prefix-cls: string.unquote('#{theme.$prefix}-tabs');
+
+$tabs-prefix-cls-vertical: string.unquote('#{$tabs-prefix-cls}-vertical');
+
+/* Vertical */
+.#{$tabs-prefix-cls} {
+  &-vertical {
+    // overflow: hidden;
+  }
+
+  &-nav-vertical {
+    float: left;
+    height: 100%;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: initial;
+      clear: both;
+      width: $tabs-line-size-header-border;
+      height: 100%;
+    }
+
+    .#{$tabs-prefix-cls}-nav-add-btn {
+      height: auto;
+      margin-top: $tabs-margin-add-icon-left;
+      margin-left: 0;
+      padding: 0 $tabs-card-padding-title-horizontal;
+    }
+  }
+
+  &-nav-right {
+    float: right;
+  }
+
+  &-nav-vertical {
+    flex-direction: column;
+  }
+
+  &-nav-vertical &-nav-tab {
+    flex-direction: column;
+    height: 100%;
+  }
+
+  &-nav-vertical &-nav-ink {
+    position: absolute;
+    right: 0;
+    bottom: initial;
+    left: initial;
+    width: $tabs-line-size-ink-stroke;
+    transition:
+      top theme.$transition-duration-2 theme.$transition-timing-function-standard,
+      height theme.$transition-duration-2 theme.$transition-timing-function-standard;
+  }
+
+  &-nav-vertical &-nav-tab-list {
+    height: auto;
+
+    &-overflow-scroll {
+      padding: $tabs-padding-header-wrapper-vertical 0;
+    }
+  }
+
+  &-nav-vertical &-tab {
+    display: block;
+    margin: 0;
+    margin-top: $tabs-line-margin-title-vertical;
+    white-space: nowrap;
+
+    &:first-of-type {
+      margin-top: 0;
+    }
+  }
+
+  &-nav-right::before {
+    right: unset;
+    left: 0;
+  }
+
+  &-nav-right &-nav-ink {
+    right: unset;
+    left: 0;
+  }
+
+  &-nav-vertical {
+    position: relative;
+    box-sizing: border-box;
+    height: 100%;
+  }
+
+  &-nav-vertical#{&}-nav-type-line &-tab {
+    padding: 0 $tabs-line-padding-title-horizontal_vertical;
+  }
+
+  &-nav-vertical#{&}-nav-type-card &-tab {
+    position: relative;
+    margin: 0;
+    border: $tabs-card-border-width solid $tabs-card-color-title-border;
+    border-bottom-color: global.$color-transparent;
+
+    &:first-child {
+      border-top-left-radius: $tabs-card-border-radius;
+    }
+
+    &-active,
+    &-active:hover {
+      border-right-color: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-2'));
+      border-bottom-color: global.$color-transparent;
+    }
+
+    &:last-child {
+      border-bottom: $tabs-card-border-width solid $tabs-card-color-title-border;
+      border-bottom-left-radius: $tabs-card-border-radius;
+    }
+  }
+
+  &-nav-vertical#{&}-nav-type-card-gutter &-tab {
+    position: relative;
+    margin-left: 0;
+    border-radius: $tabs-card-border-radius 0 0 $tabs-card-border-radius;
+
+    &:not(:first-of-type) {
+      margin-top: 4px;
+    }
+
+    &-active,
+    &-active:hover {
+      border-right-color: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-2'));
+      border-bottom-color: $tabs-card-color-title-border;
+    }
+  }
+
+  &-vertical &-content {
+    width: auto;
+    height: 100%;
+    padding: 0;
+  }
+
+  &-right#{&}-vertical &-content {
+    padding-right: $tabs-content-padding;
+  }
+
+  &-left#{&}-vertical &-content {
+    padding-left: $tabs-content-padding;
+  }
+
+  &-vertical#{&}-type-card,
+  &-vertical#{&}-type-card-gutter {
+    > .#{$tabs-prefix-cls}-content {
+      border: $tabs-card-border-content-width solid $tabs-line-color-header-border;
+      border-left: none;
+    }
+  }
+}