@sdata/web-vue 1.6.0 → 1.7.0

package/es/list/style/token.less

@@ -1,55 +0,0 @@
-@import url('../../style/theme/index.less');
-
-@list-border-width: 1px;
-@list-border-color: var(~'@{sd-cssvars-prefix}-color-neutral-3');
-@list-border-radius: @radius-medium;
-
-@list-color-text: var(~'@{sd-cssvars-prefix}-color-text-1');
-@list-font-size: @font-size-body-3;
-@list-line-height: @line-height-base;
-
-@list-color-text-header: var(~'@{sd-cssvars-prefix}-color-text-1');
-@list-color-bg-item-hover: var(~'@{sd-cssvars-prefix}-color-fill-1');
-@list-font-size-header: @font-size-title-1;
-@list-font-weight-header: @font-weight-500;
-@list-line-height-header: 1.5;
-
-/**********************************************
- * size:  small / default / large
- **********************************************/
-@list-size-small-padding-vertical-header: @spacing-4;
-@list-size-small-padding-horizontal-header: @spacing-8;
-@list-size-small-padding-vertical-item: 9px;
-@list-size-small-padding-horizontal-item: @spacing-8;
-
-@list-size-default-padding-vertical-header: @spacing-6;
-@list-size-default-padding-horizontal-header: @spacing-8;
-@list-size-default-padding-vertical-item: 13px;
-@list-size-default-padding-horizontal-item: @spacing-8;
-
-@list-size-large-padding-vertical-header: @spacing-7;
-@list-size-large-padding-horizontal-header: @spacing-8;
-@list-size-large-padding-vertical-item: 17px;
-@list-size-large-padding-horizontal-item: @spacing-8;
-
-// meta
-@list-meta-font-weight-title: @font-weight-500;
-@list-meta-color-title: var(~'@{sd-cssvars-prefix}-color-text-1');
-@list-mete-color-description: var(~'@{sd-cssvars-prefix}-color-text-2');
-@list-meta-margin-right-avatar: @spacing-7;
-@list-meta-margin-bottom-title: @spacing-1;
-@list-meta-padding-horizontal: @spacing-none;
-@list-meta-padding-vertical: @spacing-2;
-
-// actions
-@list-action-gap: @spacing-8;
-@list-action-margin-top: @spacing-2;
-
-// pagination
-@list-pagination-margin-top: @spacing-9;
-
-// vue覆盖token
-@list-size-medium-padding-vertical-header: @list-size-default-padding-vertical-header;
-@list-size-medium-padding-horizontal-header: @list-size-default-padding-horizontal-header;
-@list-size-medium-padding-vertical-item: @list-size-default-padding-vertical-item;
-@list-size-medium-padding-horizontal-item: @list-size-default-padding-horizontal-item;

package/es/mention/style/token.less

@@ -1,9 +0,0 @@
-@import url('../../style/theme/index.less');
-
-@mentions-padding-horizontal: @spacing-6;
-
-@mentions-padding-vertical: @spacing-2;
-
-@mentions-font-size: @font-size-body-3;
-
-@mentions-line-height: @line-height-base;

package/es/menu/style/index.less

@@ -1,618 +0,0 @@
-@import url('../../style/mixins/index.less');
-@import url('./token.less');
-@import url('../../dropdown/style/token.less');
-
-@menu-prefix-cls: ~'@{prefix}-menu';
-@trigger-menu-prefix-cls: ~'@{prefix}-trigger-menu';
-
-.applyStyleToItem(@style) {
-  .@{menu-prefix-cls}-item,
-  .@{menu-prefix-cls}-group-title,
-  .@{menu-prefix-cls}-pop-header,
-  .@{menu-prefix-cls}-inline-header {
-    @style();
-  }
-}
-
-@keyframes ~'@{prefix}-menu-selected-item-label-enter' {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-.@{menu-prefix-cls} {
-  position: relative;
-  box-sizing: border-box;
-  width: 100%;
-  font-size: @menu-font-size;
-  line-height: @menu-line-height;
-  transition: width @transition-duration-2 @transition-timing-function-standard;
-
-  &:focus-visible {
-    outline: 3px solid var(~'@{sd-cssvars-prefix}-color-primary-light-2');
-  }
-
-  // 设置菜单层级的缩进
-  &-indent {
-    display: inline-block;
-    width: @menu-item-indent-spacing;
-  }
-
-  .text-color-transition() {
-    transition: color @transition-duration-2 @transition-timing-function-linear;
-  }
-
-  // menu-item 一些与 theme 和 mode 无关的样式
-  .item-base() {
-    @style: {
-      position: relative;
-      box-sizing: border-box;
-      border-radius: @menu-border-radius;
-      cursor: pointer;
-
-      &.@{menu-prefix-cls}-disabled {
-        cursor: not-allowed;
-      }
-
-      &.@{menu-prefix-cls}-selected {
-        font-weight: @menu-font-weight-item-selected;
-        .text-color-transition();
-
-        svg {
-          .text-color-transition();
-        }
-      }
-
-      .@{prefix}-icon,
-      .@{menu-prefix-cls}-icon {
-        margin-right: @menu-margin-right-item-prefix-icon;
-      }
-
-      .@{menu-prefix-cls}-icon {
-        .@{prefix}-icon {
-          margin-right: 0;
-        }
-      }
-    };
-
-    .applyStyleToItem(@style);
-  }
-
-  .item-mode(@mode) {
-    @style-both: {
-      padding: 0 ~'@{menu-@{mode}-item-padding-horizontal}';
-      line-height: ~'@{menu-@{mode}-item-height}';
-
-      .@{menu-prefix-cls}-icon-suffix .@{prefix}-icon {
-        margin-right: 0;
-      }
-    };
-
-    @style-vertical-only: {
-      margin-bottom: @menu-item-gap;
-      &:not(.@{menu-prefix-cls}-has-icon) {
-        .text-ellipsis();
-      }
-
-      &.@{menu-prefix-cls}-has-icon {
-        display: flex;
-        align-items: center;
-
-        > .@{menu-prefix-cls}-indent-list,
-        > .@{menu-prefix-cls}-icon {
-          flex: none;
-        }
-
-        .@{menu-prefix-cls}-icon {
-          line-height: 1;
-        }
-
-        .@{menu-prefix-cls}-title {
-          .text-ellipsis();
-        }
-      }
-
-      .@{menu-prefix-cls}-item-inner {
-        .text-ellipsis();
-
-        width: 100%;
-      }
-
-      .@{menu-prefix-cls}-icon-suffix {
-        position: absolute;
-        right: @menu-vertical-item-padding-horizontal;
-      }
-    };
-
-    @style-horizontal-only: {
-      .@{prefix}-icon,
-      .@{menu-prefix-cls}-icon {
-        margin-right: @menu-horizontal-margin-right-item-prefix-icon;
-      }
-
-      .@{menu-prefix-cls}-icon-suffix {
-        margin-left: @menu-margin-left-item-suffix-icon;
-      }
-    };
-
-    .applyStyleToItem(@style-both);
-    .applyStyleToItem(if(@mode = vertical, @style-vertical-only, @style-horizontal-only));
-  }
-
-  .theme(@theme) {
-    &-@{theme} {
-      background-color: ~'@{menu-@{theme}-color-bg}';
-
-      // 处理普通菜单项的状态变化
-      @item-style: {
-        color: ~'@{menu-@{theme}-color-item_default}';
-        background-color: ~'@{menu-@{theme}-color-bg-item_default}';
-
-        .@{prefix}-icon,
-        .@{menu-prefix-cls}-icon {
-          color: ~'@{menu-@{theme}-color-icon_default}';
-        }
-
-        &:hover {
-          color: ~'@{menu-@{theme}-color-item_hover}';
-          background-color: ~'@{menu-@{theme}-color-bg-item_hover}';
-
-          .@{prefix}-icon,
-          .@{menu-prefix-cls}-icon {
-            color: ~'@{menu-@{theme}-color-icon_hover}';
-          }
-        }
-
-        &.@{menu-prefix-cls}-selected {
-          color: ~'@{menu-@{theme}-color-item_selected}';
-
-          .@{prefix}-icon,
-          .@{menu-prefix-cls}-icon {
-            color: ~'@{menu-@{theme}-color-icon_selected}';
-          }
-        }
-
-        &.@{menu-prefix-cls}-disabled {
-          color: ~'@{menu-@{theme}-color-item_disabled}';
-          background-color: ~'@{menu-@{theme}-color-bg-item_disabled}';
-
-          .@{prefix}-icon,
-          .@{menu-prefix-cls}-icon {
-            color: ~'@{menu-@{theme}-color-icon_disabled}';
-          }
-        }
-      };
-
-      .applyStyleToItem(@item-style);
-
-      // 只有 menuItem 选中时需要背景色
-      .@{menu-prefix-cls}-item.@{menu-prefix-cls}-selected {
-        background-color: ~'@{menu-@{theme}-color-bg-item_selected}';
-      }
-
-      //  子菜单被选中时，没有背景色，所以可以单独设置字体色
-      .@{menu-prefix-cls}-inline-header.@{menu-prefix-cls}-selected {
-        color: ~'@{menu-@{theme}-color-submenu_selected}';
-
-        .@{prefix}-icon,
-        .@{menu-prefix-cls}-icon {
-          color: ~'@{menu-@{theme}-color-submenu_selected}';
-        }
-
-        &:hover {
-          background-color: ~'@{menu-@{theme}-color-bg-submenu_selected_hover}';
-        }
-      }
-
-      // 为水平菜单添加项目选中的样式
-      &.@{menu-prefix-cls}-horizontal {
-        @item-selected-style: {
-          &.@{menu-prefix-cls}-selected {
-            background: none;
-            .text-color-transition();
-
-            &:hover {
-              background-color: ~'@{menu-@{theme}-color-bg-item_hover}';
-            }
-          }
-        };
-
-        .applyStyleToItem(@item-selected-style);
-      }
-
-      // 处理标题样式
-      .@{menu-prefix-cls}-group-title {
-        color: ~'@{menu-@{theme}-color-group-title}';
-        // 快速消除 hover 的特殊样式
-        pointer-events: none;
-      }
-
-      // 展开折叠按钮颜色
-      .@{menu-prefix-cls}-collapse-button {
-        color: ~'@{menu-@{theme}-color-button}';
-        background-color: ~'@{menu-@{theme}-color-bg-button}';
-
-        &:hover {
-          background-color: ~'@{menu-@{theme}-color-bg-button_hover}';
-        }
-      }
-    }
-  }
-
-  .item-base();
-  .theme(light);
-  .theme(dark);
-
-  // 校正 a 标签颜色
-  a,
-  a:hover,
-  a:focus,
-  a:active {
-    color: inherit;
-    text-decoration: none;
-    cursor: inherit;
-  }
-
-  &-inner {
-    box-sizing: border-box;
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-  }
-
-  // 展开折叠图标
-  &-icon-suffix {
-    &.is-open {
-      transform: rotate(180deg);
-    }
-  }
-
-  &-vertical {
-    .item-mode(vertical);
-
-    .@{menu-prefix-cls}-inner {
-      padding: @menu-vertical-padding-vertical @menu-vertical-padding-horizontal;
-    }
-
-    .@{menu-prefix-cls}-item.@{menu-prefix-cls}-item-indented {
-      display: flex;
-    }
-
-    // 为 header 右侧预留下放置 suffixIcon 的空间
-    .@{menu-prefix-cls}-pop-header,
-    .@{menu-prefix-cls}-inline-header {
-      padding-right: @menu-vertical-item-padding-horizontal + 16;
-    }
-  }
-
-  // 水平菜单中，仅允许出现普通 item 和 popSubMenu
-  &-horizontal {
-    width: 100%;
-    height: auto;
-
-    .item-mode(horizontal);
-
-    .@{menu-prefix-cls}-inner {
-      display: flex;
-      align-items: center;
-      padding: @menu-horizontal-padding-vertical @menu-horizontal-padding-horizontal;
-    }
-
-    .@{menu-prefix-cls}-item,
-    .@{menu-prefix-cls}-pop {
-      display: inline-block;
-      flex-shrink: 0;
-      vertical-align: middle;
-
-      &:not(:first-child) {
-        margin-left: @menu-horizontal-item-gap;
-      }
-    }
-
-    .@{menu-prefix-cls}-pop::after {
-      position: absolute;
-      bottom: -$height;
-      left: 0;
-      width: 100%;
-      height: @menu-horizontal-padding-vertical;
-      content: ' ';
-    }
-  }
-
-  // 水平菜单的动态折叠容器
-  &-overflow {
-    &-wrap {
-      width: 100%;
-    }
-
-    &-sub-menu-mirror,
-    &-hidden-menu-item {
-      position: absolute !important;
-      white-space: nowrap;
-      visibility: hidden;
-      pointer-events: none;
-    }
-  }
-
-  // 选中状态下的提示浮标，相对于 MenuItem 定位
-  &-selected-label {
-    position: absolute;
-    right: $left;
-    bottom: -@menu-horizontal-padding-vertical;
-    left: @menu-horizontal-item-padding-horizontal;
-    height: @menu-height-label-item-selected;
-    background-color: @menu-color-label-item-selected;
-    animation: ~'@{prefix}-menu-selected-item-label-enter' @transition-duration-2
-      @transition-timing-function-linear;
-  }
-
-  &-pop-button {
-    width: auto;
-    background: none;
-    box-shadow: none;
-
-    &.@{menu-prefix-cls}-collapsed {
-      width: auto;
-    }
-
-    @item-style: {
-      width: @menu-pop-button-size;
-      height: $width;
-      margin-bottom: @menu-pop-button-margin-bottom;
-      line-height: $height;
-      border: 1px solid @menu-pop-button-border-color;
-      border-radius: 50%;
-      box-shadow: @menu-pop-button-box-shadow;
-    };
-
-    .applyStyleToItem(@item-style);
-  }
-
-  // 折叠样式
-  &-collapsed {
-    width: @menu-collapse-width;
-
-    .@{menu-prefix-cls}-inner {
-      padding: @menu-collapse-padding-vertical @menu-collapse-padding-horizontal;
-    }
-
-    .@{menu-prefix-cls}-icon-suffix {
-      display: none;
-    }
-
-    // Hide text after icon when menu is collapsed
-    @style-item-text: {
-      .@{prefix}-icon {
-        margin-right: 100%;
-      }
-    };
-
-    .@{menu-prefix-cls}-has-icon {
-      > *:not(.@{menu-prefix-cls}-icon) {
-        opacity: 0;
-      }
-    }
-
-    .applyStyleToItem(@style-item-text);
-  }
-
-  // 折叠按钮
-  &-collapse-button {
-    position: absolute;
-    right: 12px;
-    bottom: 12px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: @menu-width-collapse-button;
-    height: @menu-height-collapse-button;
-    border-radius: @menu-border-radius-collapse-button;
-    cursor: pointer;
-  }
-
-  // sub-menu-inline 的内容区域样式
-  &-inline-content {
-    height: auto;
-    overflow: hidden;
-    transition: height @transition-duration-2 @transition-timing-function-standard;
-
-    &-hide {
-      height: 0;
-    }
-  }
-
-  // 弹出的 ToolTip 中 a 标签的样式
-  &-item-tooltip a {
-    color: inherit;
-    cursor: text;
-
-    &:hover,
-    &:focus,
-    &:active {
-      color: inherit;
-    }
-  }
-
-  // 弹出菜单浮层三角箭头
-  &-pop-trigger {
-    &.@{prefix}-trigger-position-bl {
-      transform: translateY(@menu-horizontal-padding-vertical);
-
-      .@{prefix}-trigger-arrow {
-        z-index: 0;
-        border-top: 1px solid @menu-color-border-popup;
-        border-left: 1px solid @menu-color-border-popup;
-      }
-    }
-
-    &.@{prefix}-trigger-position-rt {
-      transform: translateX(@menu-vertical-padding-horizontal);
-
-      .@{prefix}-trigger-arrow {
-        z-index: 0;
-        border-bottom: 1px solid @menu-color-border-popup;
-        border-left: 1px solid @menu-color-border-popup;
-      }
-    }
-
-    &.@{menu-prefix-cls}-pop-trigger-dark {
-      .@{prefix}-trigger-arrow {
-        background-color: @menu-dark-color-bg;
-        border-color: @menu-dark-color-bg;
-      }
-    }
-  }
-}
-
-// trigger 里的 menu
-.@{trigger-menu-prefix-cls} {
-  position: relative;
-  box-sizing: border-box;
-  max-height: @dropdown-max-height;
-  padding: @dropdown-padding-vertical 0;
-  overflow: auto;
-  background-color: @dropdown-color-bg;
-  border: 1px solid @dropdown-color-border;
-  border-radius: @dropdown-border-radius;
-  box-shadow: @dropdown-box-shadow;
-
-  &-hidden {
-    display: none;
-  }
-
-  &-item,
-  &-pop-header {
-    position: relative;
-    // 避免 Trigger 的小箭头位于其上方
-    z-index: 1;
-    box-sizing: border-box;
-    width: 100%;
-    height: @dropdown-option-height;
-    padding: 0 @dropdown-option-padding-horizontal;
-
-    // default
-    color: @dropdown-option-color-text_default;
-    font-size: @dropdown-font-size;
-    line-height: $height;
-    text-align: left;
-    background-color: @dropdown-option-color-bg_default;
-    cursor: pointer;
-    .text-ellipsis();
-
-    // selected
-    &.@{trigger-menu-prefix-cls}-selected {
-      color: @dropdown-option-color-text_selected;
-      font-weight: @dropdown-option-font-weight_selected;
-      background-color: @dropdown-option-color-bg_selected;
-      transition: all @transition-duration-1 @transition-timing-function-linear;
-    }
-
-    // hover
-    &:hover {
-      color: @dropdown-option-color-text_hover;
-      background-color: @dropdown-option-color-bg_hover;
-    }
-
-    // disabled
-    &.@{trigger-menu-prefix-cls}-disabled {
-      color: @dropdown-option-color-text_disabled;
-      background-color: @dropdown-option-color-bg_disabled;
-      cursor: not-allowed;
-    }
-  }
-
-  .@{trigger-menu-prefix-cls}-has-icon {
-    display: flex;
-    align-items: center;
-
-    .@{trigger-menu-prefix-cls}-icon {
-      margin-right: 8px;
-      line-height: 1;
-    }
-
-    > * {
-      flex: none;
-    }
-
-    .@{trigger-menu-prefix-cls}-title {
-      flex: auto;
-      .text-ellipsis();
-    }
-  }
-
-  &-pop-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    .@{trigger-menu-prefix-cls}-icon-suffix {
-      margin-left: @dropdown-margin-left-suffix-icon;
-    }
-  }
-
-  &-group {
-    &:first-child &-title {
-      padding-top: @dropdown-group-title-padding-top - @dropdown-padding-vertical;
-    }
-  }
-
-  &-group-title {
-    box-sizing: border-box;
-    width: 100%;
-    padding: @dropdown-group-title-padding-top @dropdown-group-title-padding-horizontal 0
-      @dropdown-group-title-padding-horizontal;
-    color: @dropdown-group-title-color-text;
-    font-size: @dropdown-group-title-font-size;
-    line-height: @dropdown-group-title-height;
-    .text-ellipsis();
-  }
-
-  &-pop-trigger {
-    // 下拉框的 menu 弹出不需要小箭头
-    .@{prefix}-trigger-arrow {
-      display: none;
-    }
-  }
-
-  &-dark {
-    background-color: @dropdown-dark-color-bg;
-    border-color: @dropdown-dark-color-border;
-
-    .@{trigger-menu-prefix-cls}-item,
-    .@{trigger-menu-prefix-cls}-pop-header {
-      // default
-      color: @dropdown-dark-option-color-text_default;
-      background-color: @dropdown-dark-option-color-bg_default;
-
-      // selected
-      &.@{trigger-menu-prefix-cls}-selected {
-        color: @dropdown-dark-option-color-text_selected;
-        background-color: @dropdown-dark-option-color-bg_selected;
-
-        &:hover {
-          color: @dropdown-dark-option-color-text_selected;
-        }
-      }
-
-      // hover
-      &:hover {
-        color: @dropdown-dark-option-color-text_hover;
-        background-color: @dropdown-dark-option-color-bg_hover;
-      }
-
-      // disabled
-      &.@{trigger-menu-prefix-cls}-disabled {
-        color: @dropdown-dark-option-color-text_disabled;
-        background-color: @dropdown-dark-option-color-bg_disabled;
-      }
-    }
-
-    .@{trigger-menu-prefix-cls}-group-title {
-      color: @dropdown-dark-group-title-color-text;
-    }
-  }
-}