@sdata/web-vue 1.6.0 → 1.7.0

package/es/tabs/style/index.less

@@ -1,700 +0,0 @@
-@import url('./token.less');
-@import url('../../style/mixins/index');
-
-@tabs-prefix-cls: ~'@{prefix}-tabs';
-
-.get-title-padding(@header-height, @font-size, @padding-vertical ) {
-  // prettier-ignore
-  @result: max(0, round((@header-height / 2) - @line-height-base * (@font-size / 2) - @padding-vertical));
-}
-
-// tabs icon style
-
-.icon-hover(@tabs-prefix-cls, @tabs-size-icon, @tabs-size-icon-bg);
-
-.@{tabs-prefix-cls} {
-  & &-icon-hover {
-    color: @tabs-color-icon;
-    font-size: @tabs-size-icon;
-    user-select: none;
-  }
-
-  &-dropdown-icon {
-    margin-left: @tabs-spacing-nav-icon-header;
-    font-size: @tabs-size-icon;
-    user-select: none;
-  }
-
-  &-tab-close-btn {
-    margin-left: @tabs-margin-close-icon-left;
-    user-select: none;
-  }
-
-  &-nav-add-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0 @tabs-margin-add-icon-left;
-    font-size: @tabs-size-icon;
-    user-select: none;
-  }
-
-  &-add {
-    position: relative;
-  }
-
-  &-nav-button {
-    &-left {
-      margin-right: @tabs-spacing-nav-icon-header;
-      margin-left: @tabs-padding-header-wrapper-horizontal;
-    }
-
-    &-right {
-      margin-right: @tabs-padding-header-wrapper-horizontal;
-      margin-left: @tabs-spacing-nav-icon-header;
-    }
-
-    &-up {
-      margin-bottom: @tabs-padding-header-wrapper-horizontal;
-    }
-
-    &-down {
-      margin-top: @tabs-padding-header-wrapper-horizontal;
-    }
-
-    &-disabled {
-      color: @tabs-color-icon_disabled;
-      cursor: not-allowed;
-    }
-  }
-}
-
-.@{tabs-prefix-cls} {
-  position: relative;
-  overflow: hidden;
-
-  &-nav {
-    position: relative;
-    flex-shrink: 0;
-
-    &::before {
-      position: absolute;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      display: block;
-      clear: both;
-      height: @tabs-line-size-header-border;
-      background-color: @tabs-line-color-header-border;
-      content: '';
-    }
-  }
-
-  &-nav-tab {
-    display: flex;
-    flex: 1;
-    overflow: hidden;
-  }
-
-  &-nav-tab-list {
-    position: relative;
-    display: inline-block;
-    white-space: nowrap;
-    transition: transform @transition-duration-2 @transition-timing-function-standard;
-  }
-
-  &-nav-extra {
-    display: flex;
-    align-items: center;
-    width: auto;
-    line-height: @tabs-size-default-header-height;
-
-    .@{tabs-prefix-cls}-nav-add-btn {
-      padding-left: 0;
-    }
-  }
-
-  &-tab {
-    display: inline-flex;
-    align-items: center;
-    box-sizing: border-box;
-    padding: .get-title-padding(
-        @tabs-size-default-header-height,
-        @tabs-size-default-font-size,
-        @tabs-padding-title-text-vertical
-      )
-      [] 0;
-    color: @tabs-color-title-text;
-    font-size: @tabs-size-default-font-size;
-    line-height: 1.5715;
-    outline: none;
-    cursor: pointer;
-    transition: color @transition-duration-2 @transition-timing-function-linear;
-
-    &-title {
-      display: inline-block;
-    }
-
-    &:hover {
-      color: @tabs-color-title-text_hover;
-      font-weight: @tabs-line-font-title-text-weight_hover;
-    }
-
-    &-disabled,
-    &-disabled:hover {
-      color: @tabs-color-title-text_disabled;
-      cursor: not-allowed;
-    }
-
-    &-active,
-    &-active:hover {
-      color: @tabs-color-title-text_active;
-      font-weight: @tabs-line-font-title-text-weight_active;
-
-      &.@{tabs-prefix-cls}-tab-disabled {
-        color: @tabs-color-title-text_disabled_active;
-      }
-    }
-  }
-
-  &-nav-ink {
-    position: absolute;
-    top: initial;
-    right: initial;
-    bottom: 0;
-    height: @tabs-line-size-ink-stroke;
-    background-color: @tabs-line-color-ink-bg;
-    transition:
-      left @transition-duration-2 @transition-timing-function-standard,
-      width @transition-duration-2 @transition-timing-function-standard;
-
-    &.@{tabs-prefix-cls}-header-ink-no-animation {
-      transition: none;
-    }
-
-    &-disabled {
-      background-color: @tabs-line-color-ink-bg_disabled;
-    }
-  }
-}
-
-// card card-gutter 类型
-
-.@{tabs-prefix-cls} {
-  // type = line
-  &-nav-type-line &-nav-extra {
-    line-height: @tabs-size-default-header-height_line;
-  }
-
-  &-nav-type-line &-tab {
-    margin: 0 (@tabs-line-margin-title-horizontal / 2);
-    padding: .get-title-padding(
-        @tabs-size-default-header-height_line,
-        @tabs-size-default-font-size,
-        @tabs-padding-title-text-vertical
-      )
-      [] 0;
-    line-height: 1.5715;
-
-    &-title {
-      position: relative;
-      display: inline-block;
-      padding: @tabs-padding-title-text-vertical 0;
-
-      &::before {
-        position: absolute;
-        inset: 0 -@tabs-padding-title-text-horizontal;
-        z-index: -1;
-        background-color: @tabs-line-color-title-bg;
-        border-radius: @tabs-line-border-radius;
-        opacity: 1;
-        transition:
-          background-color @transition-duration-2 @transition-timing-function-linear,
-          opacity @transition-duration-2 @transition-timing-function-linear;
-        content: '';
-      }
-    }
-
-    &:hover {
-      .@{tabs-prefix-cls}-tab-title::before {
-        background-color: @tabs-line-color-title-bg_hover;
-      }
-    }
-
-    &-active,
-    &-active:hover {
-      .@{tabs-prefix-cls}-tab-title::before {
-        background-color: @tabs-line-color-title-bg_active;
-      }
-    }
-
-    &-disabled,
-    &-disabled:hover {
-      .@{tabs-prefix-cls}-tab-title::before {
-        opacity: 0;
-      }
-    }
-
-    &:focus-visible {
-      .@{tabs-prefix-cls}-tab-title::before {
-        border: 2px solid @color-primary-6;
-      }
-    }
-  }
-
-  &-nav-type-line&-nav-horizontal > &-tab:first-of-type {
-    margin-left: @tabs-line-margin-title-horizontal_first;
-  }
-
-  // headerPadding=false & type === line/text & horizontal
-  &-nav-type-line&-nav-horizontal &-nav-tab-list-no-padding > &-tab:first-of-type,
-  &-nav-text&-nav-horizontal &-nav-tab-list-no-padding > &-tab:first-of-type {
-    margin-left: 0;
-  }
-
-  // type = card card-gutter
-  &-nav-type-card,
-  &-nav-type-card-gutter {
-    .@{tabs-prefix-cls}-tab {
-      position: relative;
-      padding: .get-title-padding(
-          (@tabs-size-default-header-height - @tabs-card-border-width * 2),
-          @tabs-size-default-font-size_card,
-          0
-        )
-        [] @tabs-card-padding-title-horizontal;
-      font-size: @tabs-size-default-font-size_card;
-      border: @tabs-card-border-width solid @tabs-card-color-title-border;
-      transition:
-        padding @transition-duration-2 @transition-timing-function-linear,
-        color @transition-duration-2 @transition-timing-function-linear;
-
-      &-closable {
-        padding-right: @tabs-card-padding-title-right_editable;
-      }
-
-      &-closable:not(.@{tabs-prefix-cls}-tab-active):hover .@{prefix}-icon-hover:hover::before {
-        background-color: @tabs-card-color-close-icon-bg_hover;
-      }
-
-      &:focus-visible::before {
-        position: absolute;
-        inset: -1px 0 -1px -1px;
-        border: 2px solid @color-primary-6;
-        content: '';
-      }
-
-      &:last-child:focus-visible::before {
-        right: -1px;
-      }
-    }
-  }
-
-  &-nav-type-card,
-  &-nav-type-card-gutter {
-    .@{tabs-prefix-cls}-nav-add-btn {
-      height: @tabs-size-default-header-height;
-    }
-  }
-
-  &-nav-type-card &-tab {
-    background-color: @tabs-card-color-title-bg;
-    border-right: none;
-
-    &:last-child {
-      border-right: @tabs-card-border-width solid @tabs-card-color-title-border;
-      border-top-right-radius: @tabs-card-border-radius;
-    }
-
-    &:first-child {
-      border-top-left-radius: @tabs-card-border-radius;
-    }
-
-    &:hover {
-      background-color: @tabs-card-color-title-bg_hover;
-    }
-
-    &-disabled,
-    &-disabled:hover {
-      background-color: @tabs-card-color-title-bg_disabled;
-    }
-
-    &-active,
-    &-active:hover {
-      background-color: @tabs-card-color-title-bg_active;
-      border-bottom-color: var(~'@{sd-cssvars-prefix}-color-bg-2');
-    }
-  }
-
-  &-nav-type-card-gutter &-tab {
-    margin-left: @tabs-card-gutter-spacing-horizontal;
-    background-color: @tabs-card-gutter-color-title-bg;
-    border-right: @tabs-card-border-width solid @tabs-card-color-title-border;
-    border-radius: @tabs-card-border-radius @tabs-card-border-radius 0 0;
-
-    &:hover {
-      background-color: @tabs-card-gutter-color-title-bg_hover;
-    }
-
-    &-disabled,
-    &-disabled:hover {
-      background-color: @tabs-card-gutter-color-title-bg_disabled;
-    }
-
-    &-active,
-    &-active:hover {
-      background-color: @tabs-card-gutter-color-title-bg_active;
-      border-bottom-color: var(~'@{sd-cssvars-prefix}-color-bg-2');
-    }
-
-    &:first-child {
-      margin-left: 0;
-    }
-  }
-
-  // type = text
-  &-nav-type-text {
-    &::before {
-      display: none;
-    }
-
-    .@{tabs-prefix-cls}-tab {
-      position: relative;
-      margin: 0 (@tabs-text-margin-title-horizontal + (@tabs-text-size-separator-width / 2));
-      padding: .get-title-padding(
-          @tabs-size-default-header-height_text,
-          @tabs-size-default-font-size,
-          0
-        )
-        [] 0;
-      font-size: @tabs-size-default-font-size_text;
-      line-height: 1.5715;
-
-      &:not(:first-of-type)::before {
-        position: absolute;
-        top: 50%;
-        left: -(@tabs-text-margin-title-horizontal + (@tabs-text-size-separator-width / 2));
-        display: block;
-        width: @tabs-text-size-separator-width;
-        height: @tabs-text-size-separator-height;
-        background-color: @tabs-text-color-separator-bg;
-        transform: translateY(-50%);
-        content: '';
-      }
-
-      &-title {
-        padding-right: @tabs-text-margin-title-horizontal;
-        padding-left: @tabs-text-margin-title-horizontal;
-        background-color: @tabs-text-color-title-bg;
-      }
-
-      &-title:hover {
-        background-color: @tabs-text-color-title-bg_hover;
-      }
-
-      &-active {
-        .@{tabs-prefix-cls}-tab-title,
-        .@{tabs-prefix-cls}-tab-title:hover {
-          background-color: @tabs-text-color-title-bg_active;
-        }
-      }
-
-      &-disabled {
-        .@{tabs-prefix-cls}-tab-title,
-        .@{tabs-prefix-cls}-tab-title:hover {
-          background-color: @tabs-text-color-title-bg_disabled;
-        }
-      }
-
-      &-active&-disabled {
-        .@{tabs-prefix-cls}-tab-title,
-        .@{tabs-prefix-cls}-tab-title:hover {
-          background-color: @tabs-text-color-title-bg_disabled_active;
-        }
-      }
-
-      &:focus-visible {
-        .@{tabs-prefix-cls}-tab-title {
-          margin: -2px;
-          border: 2px solid @color-primary-6;
-        }
-      }
-    }
-  }
-
-  &-nav-type-rounded {
-    &::before {
-      display: none;
-    }
-
-    .@{tabs-prefix-cls}-tab {
-      margin: 0 (@tabs-rounded-margin-title-horizontal / 2);
-      padding: .get-title-padding(
-          @tabs-size-default-header-height_rounded,
-          @tabs-size-default-font-size_rounded,
-          0
-        )
-        [] 0;
-      padding-right: @tabs-rounded-padding-title-horizontal;
-      padding-left: @tabs-rounded-padding-title-horizontal;
-      font-size: @tabs-size-default-font-size_rounded;
-      background-color: @tabs-rounded-color-title-bg;
-      border-radius: @tabs-size-default-header-height_rounded;
-
-      &:hover {
-        background-color: @tabs-rounded-color-title-bg_hover;
-      }
-
-      &-disabled:hover {
-        background-color: @tabs-rounded-color-title-bg_disabled;
-      }
-
-      &-active,
-      &-active:hover {
-        background-color: @tabs-rounded-color-title-bg_active;
-      }
-
-      &:focus-visible {
-        border-color: @color-primary-6;
-      }
-    }
-  }
-
-  &-nav-type-capsule {
-    &::before {
-      display: none;
-    }
-
-    .@{tabs-prefix-cls}-nav-tab:not(.@{tabs-prefix-cls}-nav-tab-scroll) {
-      justify-content: flex-end;
-    }
-
-    .@{tabs-prefix-cls}-nav-tab-list {
-      padding: @tabs-capsule-padding-header-vertical @tabs-capsule-padding-header-horizontal;
-      line-height: 1;
-      background-color: @tabs-capsule-color-header-bg;
-      border-radius: @tabs-capsule-border-header-radius;
-    }
-
-    .@{tabs-prefix-cls}-tab {
-      position: relative;
-      padding: 0 @tabs-capsule-padding-title-horizontal - 2;
-      font-size: @tabs-size-default-font-size_capsule;
-      line-height: (
-        @tabs-size-default-header-height_capsule - @tabs-capsule-padding-header-vertical * 2
-      );
-      background-color: @tabs-capsule-color-title-bg;
-
-      &:hover {
-        background-color: @tabs-capsule-color-title-bg_hover;
-      }
-
-      &-disabled:hover {
-        background-color: unset;
-      }
-
-      &-active,
-      &-active:hover {
-        background-color: @tabs-capsule-color-title-bg_active;
-
-        &::before,
-        & + .@{tabs-prefix-cls}-tab::before {
-          opacity: 0;
-        }
-      }
-
-      &:focus-visible {
-        border-color: @color-primary-6;
-      }
-    }
-
-    &.@{tabs-prefix-cls}-nav-horizontal .@{tabs-prefix-cls}-tab:not(:first-of-type) {
-      margin-left: @tabs-capsule-margin-title-horizontal;
-
-      &::before {
-        position: absolute;
-        top: 50%;
-        left: -(@tabs-capsule-margin-title-horizontal / 2) -
-          (@tabs-capsule-size-separator-width / 2) - 2;
-        display: block;
-        width: @tabs-capsule-size-separator-width;
-        height: @tabs-capsule-size-separator-height;
-        background-color: @tabs-capsule-color-separator-bg;
-        transform: translateY(-50%);
-        transition: all @transition-duration-2 @transition-timing-function-linear;
-        content: '';
-      }
-    }
-  }
-}
-
-//   /** header */
-
-.@{tabs-prefix-cls} {
-  &-nav {
-    position: relative;
-    display: flex;
-    align-items: center;
-    overflow: hidden;
-  }
-
-  &-content {
-    box-sizing: border-box;
-    width: 100%;
-    padding-top: @tabs-content-padding;
-    overflow: hidden;
-
-    &-hide {
-      display: none;
-    }
-
-    .@{tabs-prefix-cls}-content-list {
-      display: flex;
-      width: 100%;
-    }
-
-    .@{tabs-prefix-cls}-content-item {
-      flex-shrink: 0;
-      width: 100%;
-      height: 0;
-      overflow: hidden;
-
-      &.@{tabs-prefix-cls}-content-item-active {
-        height: auto;
-      }
-    }
-  }
-
-  &-type-card,
-  &-type-card-gutter {
-    > .@{tabs-prefix-cls}-content {
-      border: @tabs-card-border-content-width solid @tabs-line-color-header-border;
-      border-top: none;
-    }
-  }
-
-  &-content-animation {
-    transition: all @transition-duration-2 @transition-timing-function-standard;
-  }
-
-  &-horizontal&-justify {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-
-    .@{tabs-prefix-cls}-content,
-    .@{tabs-prefix-cls}-content-list,
-    .@{tabs-prefix-cls}-pane {
-      height: 100%;
-    }
-  }
-}
-
-@sizes: mini, small, large;
-
-.for(@data, @i: 1) when (@i =< length(@data)) {
-  @size: extract(@data, @i);
-
-  .@{tabs-prefix-cls}-nav-size-@{size} {
-    &.@{tabs-prefix-cls}-nav-type-line {
-      @height: ~'tabs-size-@{size}-header-height_line';
-      @font-size: ~'tabs-size-@{size}-font-size';
-
-      .@{tabs-prefix-cls}-nav-extra {
-        font-size: @@font-size;
-        line-height: @@height;
-      }
-
-      .@{tabs-prefix-cls}-tab {
-        padding-top: @padding;
-        padding-bottom: @padding;
-        font-size: @@font-size;
-
-        @padding: .get-title-padding(@@height, @@font-size, @tabs-padding-title-text-vertical) [];
-      }
-
-      .@{tabs-prefix-cls}-nav-extra {
-        font-size: @@font-size;
-        line-height: @@height;
-      }
-    }
-
-    &.@{tabs-prefix-cls}-nav-type-card,
-    &.@{tabs-prefix-cls}-nav-type-card-gutter {
-      @card-font-size: ~'tabs-size-@{size}-font-size_card';
-      @card-height: ~'tabs-size-@{size}-header-height';
-
-      .@{tabs-prefix-cls}-tab {
-        padding-top: .get-title-padding(
-            @@card-height - @tabs-card-border-width * 2,
-            @@card-font-size,
-            @tabs-padding-title-text-vertical
-          )
-          [];
-        padding-bottom: $padding-top;
-        font-size: @@card-font-size;
-      }
-
-      .@{tabs-prefix-cls}-nav-extra {
-        font-size: @@card-font-size;
-        line-height: @@card-height;
-      }
-
-      .@{tabs-prefix-cls}-nav-add-btn {
-        height: @@card-height;
-      }
-    }
-
-    &.@{tabs-prefix-cls}-nav-type-capsule {
-      @capsule-font-size: ~'tabs-size-@{size}-font-size_capsule';
-      @capsule-height: ~'tabs-size-@{size}-header-height_capsule';
-
-      .@{tabs-prefix-cls}-tab {
-        font-size: @@capsule-font-size;
-        line-height: @@capsule-height - @tabs-capsule-padding-header-vertical * 2;
-      }
-
-      .@{tabs-prefix-cls}-nav-extra {
-        font-size: @@capsule-font-size;
-        line-height: @@capsule-height;
-      }
-    }
-
-    &.@{tabs-prefix-cls}-nav-type-rounded {
-      @rounded-font-size: ~'tabs-size-@{size}-font-size_rounded';
-      @rounded-height: ~'tabs-size-@{size}-header-height_rounded';
-
-      .@{tabs-prefix-cls}-tab {
-        padding-top: .get-title-padding(@@rounded-height, @@rounded-font-size, 0) [];
-        padding-bottom: $padding-top;
-        font-size: @@rounded-font-size;
-      }
-
-      .@{tabs-prefix-cls}-nav-extra {
-        font-size: @@rounded-font-size;
-        line-height: @@rounded-height;
-      }
-    }
-  }
-
-  .for(@data, (@i + 1));
-}
-
-.for(@sizes);
-
-@import url('./vertical.less');
-@import url('./rtl.less');
-
-@{sd-theme-tag}[sd-theme='dark'] {
-  .@{tabs-prefix-cls}-nav-type-capsule {
-    .@{tabs-prefix-cls}-tab {
-      &-active {
-        background-color: var(~'@{sd-cssvars-prefix}-color-fill-3');
-      }
-
-      &:hover {
-        background-color: var(~'@{sd-cssvars-prefix}-color-fill-3');
-      }
-    }
-  }
-}