diff --git a/examples/sites/demos/pc/app/dropdown/visible-arrow.spec.ts b/examples/sites/demos/pc/app/dropdown/visible-arrow.spec.ts index fd4432a20a..0cb17672df 100644 --- a/examples/sites/demos/pc/app/dropdown/visible-arrow.spec.ts +++ b/examples/sites/demos/pc/app/dropdown/visible-arrow.spec.ts @@ -17,5 +17,5 @@ test('显示箭头', async ({ page }) => { await dropdownTrigger.hover() await expect(dropDownMenu).toBeVisible() await expect(arrow).toBeVisible() - await expect(arrow).toHaveCSS('top', '-6px') + await expect(arrow).toHaveCSS('top', '-8px') }) diff --git a/packages/renderless/src/dropdown-item/vue.ts b/packages/renderless/src/dropdown-item/vue.ts index 49789e3182..ecf40e7fbc 100644 --- a/packages/renderless/src/dropdown-item/vue.ts +++ b/packages/renderless/src/dropdown-item/vue.ts @@ -58,7 +58,7 @@ export const api = [ 'getTip' ] -const initState = ({ reactive, computed, api, props, parent, dropdownMenuVm }) => { +const initState = ({ reactive, computed, api, props, parent, dropdownMenuVm, dropdownVm }) => { const state: IDropdownItemState = reactive({ checkedStatus: dropdownMenuVm?.checkedStatus, sort: props.modelValue, @@ -78,6 +78,7 @@ const initState = ({ reactive, computed, api, props, parent, dropdownMenuVm }) = currentIndex: props.currentIndex, textField: dropdownMenuVm?.textField || props.textField, popperClass: dropdownMenuVm?.popperClass || '', + sizeClass: dropdownVm?.size ? `tiny-dropdown-item--${dropdownVm?.size}` : '', getIcon: computed(() => api.computedGetIcon()), children: [] }) @@ -117,7 +118,8 @@ export const renderless = ( ): IDropdownItemApi => { const api = {} as IDropdownItemApi const dropdownMenuVm = inject('dropdownMenuVm', null) as IDropdownMenuVm - const state: IDropdownItemState = initState({ reactive, computed, api, props, parent, dropdownMenuVm }) + const dropdownVm = inject('dropdownVm', null) + const state: IDropdownItemState = initState({ reactive, computed, api, props, parent, dropdownMenuVm, dropdownVm }) initApi({ api, state, emit, props, parent, dispatch, vm, constants, designConfig }) diff --git a/packages/theme/src/dropdown-item/index.less b/packages/theme/src/dropdown-item/index.less index 33c405947f..d6fe85c580 100644 --- a/packages/theme/src/dropdown-item/index.less +++ b/packages/theme/src/dropdown-item/index.less @@ -20,29 +20,44 @@ .component-css-vars-dropdown-item(); list-style: none; - font-size: var(--ti-dropdown-item-font-size); - color: var(--ti-dropdown-item-text-color); + font-size: var(--tv-DropdownItem-font-size); + height: var(--tv-DropdownItem-height); + line-height: var(--tv-DropdownItem-line-height); + color: var(--tv-DropdownItem-text-color); cursor: pointer; outline: 0; position: relative; word-break: break-all; - max-width: var(--ti-dropdown-item-max-width); + max-width: 100%; + display: flex; + align-items: center; &[class*='tiny-'] { - margin: var(--ti-dropdown-item-margin-top) var(--ti-dropdown-item-margin-right) - var(--ti-dropdown-item-margin-bottom) var(--ti-dropdown-item-margin-left); + padding: var(--tv-DropdownItem-padding); &:last-of-type { - margin-bottom: 0; + margin-bottom: 0px; } } + .@{svg-prefix-cls} { + font-size: var(--tv-DropdownItem-icon-size); + fill: var(--tv-DropdownItem-icon-color); + } + + &:before { + content: ''; + content: ''; + height: 0px; + display: block; + margin: 0px; + } + &__wrap { - line-height: var(--ti-dropdown-item-line-height); - margin: var(--ti-dropdown-item-margin-vertical) var(--ti-dropdown-item-margin-horizontal); - height: var(--ti-dropdown-item-height); display: flex; align-items: center; + height: 100%; + width: 100%; .@{dropdown-item-prefix-cls}--child { position: absolute; @@ -54,13 +69,7 @@ .@{dropdown-item-prefix-cls}__expand { display: flex; align-items: center; - - .@{svg-prefix-cls} { - fill: var(--ti-dropdown-item-icon-color); - font-size: var(--ti-dropdown-item-expand-icon-size); - margin-left: var(--ti-dropdown-item-expand-svg-margin-left); - margin-right: var(--ti-dropdown-item-expand-svg-margin-right); - } + margin-right: var(--tv-DropdownItem-expand-margin-right); & + .@{dropdown-item-prefix-cls}__content { margin-left: 0; @@ -78,24 +87,21 @@ white-space: nowrap; } - .@{svg-prefix-cls} { - margin-right: 4px; - fill: var(--ti-dropdown-item-icon-color); + .@{dropdown-item-prefix-cls}__pre-icon { + margin-right: var(--tv-DropdownItem-pre-icon-margin-right); } } } &:focus, &:not(.is-disabled):hover { - background-color: var(--ti-dropdown-item-hover-bg-color); - color: var(--ti-dropdown-item-hover-text-color); - border-radius: var(--ti-dropdown-item-border-radius); + background-color: var(--tv-DropdownItem-bg-color-hover); & > .@{dropdown-item-prefix-cls}__wrap { & > .@{dropdown-item-prefix-cls}__expand, & > .@{dropdown-item-prefix-cls}__content { .@{svg-prefix-cls} { - fill: var(--ti-dropdown-item-icon-color-hover); + fill: var(--tv-DropdownItem-icon-color-hover); } } @@ -105,66 +111,47 @@ } } - &:not(.is-disabled):active { - background-color: var(--ti-dropdown-item-active-bg-color); - color: var(--ti-dropdown-item-active-text-color); - border-radius: var(--ti-dropdown-item-border-radius); - - & > .@{dropdown-item-prefix-cls}__wrap { - & > .@{dropdown-item-prefix-cls}__expand, - & > .@{dropdown-item-prefix-cls}__content { - .@{svg-prefix-cls} { - fill: var(--ti-dropdown-item-icon-color-active); - } - } - } - } - + // 展开项悬浮激活态 &:not(.is-disabled).has-children:hover { - color: var(--ti-dropdown-item-content-text-hover); - background-color: var(--ti-dropdown-item-content-bg-hover); - - & > .@{dropdown-item-prefix-cls}__wrap { - & > .@{dropdown-item-prefix-cls}__content { - font-weight: var(--ti-dropdown-item-content-font-weight-hover); - } - } + color: var(--tv-DropdownItem-text-color-active); + background-color: transparent; } + // 禁用 &.is-disabled { cursor: not-allowed; - color: var(--ti-dropdown-item-disabled-text-color); + color: var(--tv-DropdownItem-text-color-disabled); & > .@{dropdown-item-prefix-cls}__wrap { & > .@{dropdown-item-prefix-cls}__expand, & > .@{dropdown-item-prefix-cls}__content { svg { - fill: var(--ti-dropdown-item-icon-color-disabled); + fill: var(--tv-DropdownItem-icon-color-disabled); } } } } -} -.@{dropdown-item-prefix-cls}--divided { - position: relative; + // 选中态 + &--check-status { + color: var(--tv-DropdownItem-text-color-active); + font-weight: var(--tv-DropdownItem-font-weight-checked); + } + + // 分割线 + &--divided { + position: relative; - .@{dropdown-item-prefix-cls}__wrap { - border-top: var(--ti-dropdown-item-divided-border-weight) var(--ti-dropdown-item-divided-border-style) - var(--ti-dropdown-item-divided-border-color); + .@{dropdown-item-prefix-cls}__wrap { + border-top: var(--tv-DropdownItem-border-divider); + } } - &:before { - content: ''; - height: var(--ti-dropdown-item-before-height); - display: block; - margin: var(--ti-dropdown-item-before-margin-vertical) var(--ti-dropdown-item-before-margin-horizontal); - background-color: var(--ti-dropdown-item-before-bg-color); + &--small { + height: var(--tv-DropdownItem-height-sm); } -} -.@{dropdown-item-prefix-cls}--check-status { - background-color: var(--ti-dropdown-item-bg-color-selected); - color: var(--ti-dropdown-item-text-color-selected); - font-weight: var(--ti-dropdown-item-font-weight-selected); + &--mini { + height: var(--tv-DropdownItem-height-xs); + } } diff --git a/packages/theme/src/dropdown-item/vars.less b/packages/theme/src/dropdown-item/vars.less index c0dbde4211..42392b7f4e 100644 --- a/packages/theme/src/dropdown-item/vars.less +++ b/packages/theme/src/dropdown-item/vars.less @@ -11,122 +11,52 @@ */ .component-css-vars-dropdown-item() { - // 下拉菜单项高度 - --ti-dropdown-item-height: var(--ti-common-size-height-normal, 32px); - // 下拉菜单项悬浮背景色 - --ti-dropdown-item-hover-bg-color: var(--ti-common-color-bg-normal, #f5f5f5); - // 下拉菜单项选中背景色 - --ti-dropdown-item-bg-color-selected: var(--ti-common-color-bg-white-normal, #ffffff); - // 下拉菜单项选中文本字重 - --ti-dropdown-item-font-weight-selected: var(--ti-common-font-weight-6, 600); - // 下拉菜单项选中文本色 - --ti-dropdown-item-text-color-selected: #1476ff; - // 下拉菜单非禁用项悬浮文本色 - --ti-dropdown-item-hover-text-color: var(--ti-common-color-text-primary, #191919); - // 下拉菜单项点击瞬间背景色 - --ti-dropdown-item-active-bg-color: var(--ti-common-color-bg-white-normal, #ffffff); - // 下拉菜单项点击瞬间文本色 - --ti-dropdown-item-active-text-color: #1476ff; - // 下拉菜单项禁用文本色 - --ti-dropdown-item-disabled-text-color: var(--ti-common-color-text-disabled, #c2c2c2); - // 下拉菜单项文本色 - --ti-dropdown-item-text-color: var(--ti-common-color-text-primary, #191919); - // 下拉菜单项字号 - --ti-dropdown-item-font-size: var(--ti-common-font-size-base, 14px); - // 默认尺寸下拉菜单项的行高 - --ti-dropdown-item-line-height: var(--ti-common-line-height-number, 1.5); - // 下拉菜单项垂直外边距 - --ti-dropdown-item-margin-vertical: var(--ti-common-space-0, 0px); - // 下拉菜单项水平外边距 - --ti-dropdown-item-margin-horizontal: var(--ti-common-space-4x, 16px); - // 拉菜单项底部外边距 - --ti-dropdown-item-margin-bottom: var(--ti-common-space-0, 0px); - // 拉菜单项左边外边距 - --ti-dropdown-item-margin-left: var(--ti-common-space-0, 0px); - // 拉菜单项右边外边距 - --ti-dropdown-item-margin-right: var(--ti-common-space-0, 0px); - // 拉菜单项顶部外边距 - --ti-dropdown-item-margin-top: var(--ti-common-space-0, 0px); - // 下拉菜单项边框圆角 - --ti-dropdown-item-border-radius: var(--ti-common-border-radius-0, 0); - // 下拉菜单项最大宽度 - --ti-dropdown-item-max-width: var(--ti-common-size-auto, auto); - // 下拉项图标默认填充色 - --ti-dropdown-item-icon-color: var(--ti-common-color-icon-normal, #808080); - //下拉项图标悬浮填充色 - --ti-dropdown-item-icon-color-hover: var(--ti-common-color-icon-hover, #191919); - // 下拉项图标激活时填充色 - --ti-dropdown-item-icon-color-active: var(--ti-common-color-icon-white, #fff); - // 下拉项图标禁用填充色 - --ti-dropdown-item-icon-color-disabled: var(--ti-common-color-icon-disabled, #c2c2c2); - // 下拉项展开图标的左侧外边距 - --ti-dropdown-item-expand-svg-margin-left: var(--ti-common-space-0, 0px); - // 下拉项展开图标的右侧外边距 - --ti-dropdown-item-expand-svg-margin-right: var(--ti-common-space-2x, 8px); - // 下拉项内容的左侧外边距 - --ti-dropdown-item-content-margin-left: calc(var(--ti-dropdown-item-expand-icon-size) + var(--ti-common-space-2x)); - // 下拉项内容悬浮时的字重 - --ti-dropdown-item-content-font-weight-hover: var(--ti-common-font-weight-4, normal); - // 有二级菜单下拉项内容悬浮时的文本色 - --ti-dropdown-item-content-text-hover: #1476ff; - // 有二级菜单下拉项内容悬浮时的背景色 - --ti-dropdown-item-content-bg-hover: transparent; - // 下拉项分割线尺寸 - --ti-dropdown-item-divided-border-weight: var(--ti-common-border-weight-normal, 1px); - // 下拉项分割线样式 - --ti-dropdown-item-divided-border-style: var(--ti-common-border-style-solid, solid); - // 下拉项分割线颜色 - --ti-dropdown-item-divided-border-color: var(--ti-common-color-line-dividing, #f0f0f0); - // 下拉项前置伪元素的填充色 - --ti-dropdown-item-before-bg-color: transparent; - // 下拉项前置伪元素的垂直外边距 - --ti-dropdown-item-before-margin-vertical: var(--ti-common-space-0, 0px); - // 下拉项前置伪元素的水平外边距 - --ti-dropdown-item-before-margin-horizontal: var(--ti-common-space-0, 0px); - // 中尺寸下拉项前置伪元素的水平外边距 - --ti-dropdown-item-medium-before-margin-horizontal: var(--ti-common-space-0, 0px); - // 小尺寸下拉项前置伪元素的水平外边距 - --ti-dropdown-item-small-before-margin-horizontal: var(--ti-common-space-0, 0px); - // 迷你尺寸下拉项前置伪元素的水平外边距 - --ti-dropdown-item-mini-before-margin-horizontal: var(--ti-common-space-0, 0px); - // 下拉项前置伪元素的高度 - --ti-dropdown-item-before-height: 0; // TINY-TODO 等设计图出来再优化为变量 - // 中尺寸下拉项前置伪元素的高度 - --ti-dropdown-item-medium-before-height: 6px; - // 小尺寸下拉项前置伪元素的高度 - --ti-dropdown-item-small-before-height: var(--ti-common-size-base, 4px); - // 迷你尺寸下拉项前置伪元素的高度 - --ti-dropdown-item-mini-before-height: 3px; - // 中尺寸下拉菜单菜单项的行高 - --ti-dropdown-item-medium-line-height: var(--ti-common-size-height-normal, 32px); - // 中尺寸下拉菜单菜单项的字号 - --ti-dropdown-item-medium-font-size: var(--ti-common-font-size-1, 14px); - // 中尺寸下拉菜单菜单项的垂直内边距 - --ti-dropdown-item-medium-padding-vertical: var(--ti-common-space-0, 0px); - // 中尺寸下拉菜单菜单项的水平内边距 - --ti-dropdown-item-medium-padding-horizontal: var(--ti-common-space-4x, 16px); - // 中尺寸下拉菜单菜单项分割线的顶部外边距 - --ti-dropdown-item-medium-divided-margin-top: var(--ti-common-space-6, 6px); - // 小尺寸下拉菜单菜单项的行高 - --ti-dropdown-item-small-line-height: var(--ti-common-line-height-5, 36px); - // 小尺寸下拉菜单菜单项的垂直内边距 - --ti-dropdown-item-small-padding-vertical: var(--ti-common-space-0, 0px); - // 小尺寸下拉菜单菜单项的水平内边距 - --ti-dropdown-item-small-padding-horizontal: var(--ti-common-space-4x, 16px); - // 小尺寸下拉菜单菜单项的字号 - --ti-dropdown-item-small-font-size: var(--ti-common-font-size-base, 14px); - // 小尺寸下拉菜单菜单项分割线的顶部外边距 - --ti-dropdown-item-small-divided-margin-top: var(--ti-common-space-base, 4px); - // 迷你尺寸下拉菜单菜单项的行高 - --ti-dropdown-item-mini-line-height: var(--ti-common-line-height-5, 36px); - // 迷你尺寸下拉菜单菜单项的垂直内边距 - --ti-dropdown-item-mini-padding-vertical: var(--ti-common-space-0, 0px); - // 迷你尺寸下拉菜单菜单项的水平内边距 - --ti-dropdown-item-mini-padding-horizontal: var(--ti-common-space-10, 10px); - // 迷你尺寸下拉菜单菜单项的字号 - --ti-dropdown-item-mini-font-size: var(--ti-common-font-size-base, 14px); - // 迷你尺寸下拉菜单菜单项分割线的顶部外边距 - --ti-dropdown-item-mini-divided-margin-top: calc(var(--ti-common-space-1, 1px) * 3); - // 展开图标尺寸 - --ti-dropdown-item-expand-icon-size: var(--ti-common-font-size-2, 16px); + // 默认字号 + --tv-DropdownItem-font-size: var(--tv-font-size-md, 14px); + // 默认行高 + --tv-DropdownItem-line-height: var(--tv-line-height-number, 1.5); + // 默认文本色 + --tv-DropdownItem-text-color: var(--tv-color-text, #191919); + // 选中 / （展开项）激活文本色 + --tv-DropdownItem-text-color-active: var(--tv-color-text-active, #1476ff); + // 禁用文本色 + --tv-DropdownItem-text-color-disabled: var(--tv-color-text-disabled, #c2c2c2); + // 选中文本字重 + --tv-DropdownItem-font-weight-checked: var(--tv-font-weight-bold, 600); + + // 默认图标尺寸 + --tv-DropdownItem-icon-size: var(--tv-icon-size, 16px); + // 默认图标色 + --tv-DropdownItem-icon-color: var(--tv-color-icon, #808080); + //图标悬浮色 + --tv-DropdownItem-icon-color-hover: var(--tv-color-icon-hover, #191919); + // 图标禁用色 + --tv-DropdownItem-icon-color-disabled: var(--tv-color-icon-disabled, #c2c2c2); + + // 菜单项内边距 + --tv-DropdownItem-padding: 0px var(--tv-space-xl, 16px); + // 展开图标的右侧外边距 + --tv-DropdownItem-expand-margin-right: var(--tv-space-md, 8px); + // 前置图标的右侧外边距 + --tv-DropdownItem-pre-icon-margin-right: var(--tv-space-sm, 4px); + // 菜单项内容区的左侧外边距 + --tv-DropdownItem-content-margin-left: calc( + var(--tv-DropdownItem-icon-size) + var(--tv-DropdownItem-expand-margin-right) + ); + // 菜单项文本的左侧外边距 + --tv-DropdownItem-label-margin-left: calc( + var(--tv-DropdownItem-icon-size) + var(--tv-DropdownItem-pre-icon-margin-right) + ); + + // 菜单项高度(默认） + --tv-DropdownItem-height: var(--tv-size-height-md, 32px); + // 菜单项高度(small） + --tv-DropdownItem-height-sm: var(--tv-size-height-sm, 28px); + // 菜单项高度(mini） + --tv-DropdownItem-height-xs: var(--tv-size-height-mi, 24px); + + // 菜单项悬浮背景色 + --tv-DropdownItem-bg-color-hover: var(--tv-color-bg-hover, #f5f5f5); + // 菜单项分割线 + --tv-DropdownItem-border-divider: var(--tv-border-width, 1px) solid var(--tv-color-border-divider, #f0f0f0); } diff --git a/packages/theme/src/dropdown-menu/index.less b/packages/theme/src/dropdown-menu/index.less index 346e824a44..95fc4ff618 100644 --- a/packages/theme/src/dropdown-menu/index.less +++ b/packages/theme/src/dropdown-menu/index.less @@ -20,85 +20,92 @@ .component-css-vars-dropdown-menu(); position: absolute; - padding: var(--ti-dropdown-menu-padding-vertical) var(--ti-dropdown-menu-padding-horizontal); - background-color: var(--ti-dropdown-menu-bg-color); - border-radius: var(--ti-dropdown-menu-border-radius); - box-shadow: var(--ti-dropdown-menu-box-shadow); + padding: var(--tv-DropdownMenu-padding); + background-color: var(--tv-DropdownMenu-bg-color); + border-radius: var(--tv-DropdownMenu-border-radius); + box-shadow: var(--tv-DropdownMenu-box-shadow); width: max-content; - min-width: var(--ti-dropdown-menu-min-width); - margin: var(--ti-dropdown-menu-margin-vertical) 0; - border: var(--ti-dropdown-menu-border-width) solid var(--ti-dropdown-menu-border-color); + min-width: var(--tv-DropdownMenu-min-width); + margin: var(--tv-DropdownMenu-margin-y) 0; .@{dropdown-menu-prefix-cls} { - padding: var(--ti-dropdown-menu-padding-vertical) var(--ti-dropdown-menu-padding-horizontal); + padding: var(--tv-DropdownMenu-padding); } - &:has(.has-children) li:not(.has-children) { + // 带子级节点的兄弟节点文本缩进对齐 + &:has(.has-children) > li:not(.has-children) { .@{dropdown-item-prefix-cls}__content { - margin-left: var(--ti-dropdown-item-content-margin-left); + margin-left: var(--tv-DropdownItem-content-margin-left); } } + // 带自定义图标节点的兄弟节点文本缩进对齐 + &:has(.tiny-dropdown-item__pre-icon) > li:not(li:has(.tiny-dropdown-item__pre-icon)) { + .@{dropdown-item-prefix-cls}__label { + margin-left: var(--tv-DropdownItem-label-margin-left); + } + } + + /* 箭头 */ &.@{css-prefix}popper .popper__arrow, &.@{css-prefix}popper .popper__arrow:after { position: absolute; display: block; width: 0; height: 0; - border-color: var(--ti-dropdown-menu-arrow-after-default-border-color); + border-color: transparent; border-style: solid; } &.@{css-prefix}popper .popper__arrow { - border-width: var(--ti-dropdown-menu-arrow-border-width); - filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03)); + border-width: 8px; + filter: drop-shadow(var(--tv-DropdownMenu-box-shadow)); } &.@{css-prefix}popper .popper__arrow::after { content: ' '; - border-width: var(--ti-dropdown-menu-arrow-border-width); + border-width: 8px; } &.@{css-prefix}popper[x-placement^='top'] { &:has(.popper__arrow) { - margin-bottom: var(--ti-dropdown-menu-arrow-margin-bottom); + margin-bottom: 12px; } } &.@{css-prefix}popper[x-placement^='top'] .popper__arrow { - bottom: -6px; + bottom: -8px; left: 50%; margin-right: 3px; - border-top-color: var(--ti-dropdown-menu-arrow-border-color); + border-bottom-width: 0; } &.@{css-prefix}popper[x-placement^='top'] .popper__arrow:after { bottom: 1px; margin-left: -6px; - border-top-color: var(--ti-dropdown-menu-arrow-after-border-color); + border-top-color: #fff; border-bottom-width: 0; } &.@{css-prefix}popper[x-placement^='bottom'] { &:has(.popper__arrow) { - margin-top: var(--ti-dropdown-menu-arrow-margin-top); + margin-top: 12px; } } &.@{css-prefix}popper[x-placement^='bottom'] .popper__arrow { - top: -6px; + top: -8px; left: 50%; margin-right: 3px; border-top-width: 0; - border-bottom-color: var(--ti-dropdown-menu-arrow-border-color); } &.@{css-prefix}popper[x-placement^='bottom'] .popper__arrow:after { top: 1px; - margin-left: -6px; + margin-left: -8px; border-top-width: 0; - border-bottom-color: var(--ti-dropdown-menu-arrow-after-border-color); + border-bottom-color: #fff; } &.@{css-prefix}popper[x-placement^='right'] { @@ -107,16 +114,15 @@ &.@{css-prefix}popper[x-placement^='right'] .popper__arrow { top: 50%; - left: -6px; + left: -8px; margin-bottom: 3px; - border-right-color: var(--ti-dropdown-menu-arrow-border-color); border-left-width: 0; } &.@{css-prefix}popper[x-placement^='right'] .popper__arrow:after { - bottom: -6px; + bottom: -8px; left: 1px; - border-right-color: var(--ti-dropdown-menu-arrow-after-border-color); + border-right-color: #fff; border-left-width: 0; } @@ -126,73 +132,16 @@ &.@{css-prefix}popper[x-placement^='left'] .popper__arrow { top: 50%; - right: -6px; + right: -8px; margin-bottom: 3px; border-right-width: 0; - border-left-color: var(--ti-dropdown-menu-arrow-border-color); } &.@{css-prefix}popper[x-placement^='left'] .popper__arrow:after { right: 1px; - bottom: -6px; - margin-left: -6px; + bottom: -8px; + margin-left: -8px; border-right-width: 0; - border-left-color: var(--ti-dropdown-menu-arrow-after-border-color); - } -} - -.@{dropdown-menu-prefix-cls}--medium { - padding: var(--ti-dropdown-menu-medium-padding-vertical) var(--ti-dropdown-menu-medium-padding-horizontal); - - .@{dropdown-item-prefix-cls} { - line-height: var(--ti-dropdown-item-medium-line-height); - - font-size: var(--ti-dropdown-item-medium-font-size); - - &.@{dropdown-item-prefix-cls}--divided { - margin-top: var(--ti-dropdown-item-medium-divided-margin-top); - } - - &.@{dropdown-item-prefix-cls}--divided:before { - height: var(--ti-dropdown-item-medium-before-height); - margin: var(--ti-dropdown-item-before-margin-vertical) var(--ti-dropdown-item-medium-before-margin-horizontal); - } - } -} - -.@{dropdown-menu-prefix-cls}--small { - padding: var(--ti-dropdown-menu-small-padding-vertical) var(--ti-dropdown-menu-small-padding-horizontal); - - .@{dropdown-item-prefix-cls} { - line-height: var(--ti-dropdown-item-small-line-height); - - font-size: var(--ti-dropdown-item-small-font-size); - - &.@{dropdown-item-prefix-cls}--divided { - margin-top: var(--ti-dropdown-item-small-divided-margin-top); - } - - &.@{dropdown-item-prefix-cls}--divided:before { - height: var(--ti-dropdown-item-small-before-height); - margin: var(--ti-dropdown-item-before-margin-vertical) var(--ti-dropdown-item-small-before-margin-horizontal); - } - } -} - -.@{dropdown-menu-prefix-cls}--mini { - padding: 3px 0; - - .@{dropdown-item-prefix-cls} { - line-height: var(--ti-dropdown-item-mini-line-height); - font-size: var(--ti-dropdown-item-mini-font-size); - - &.@{dropdown-item-prefix-cls}--divided { - margin-top: var(--ti-dropdown-item-mini-divided-margin-top); - } - - &.@{dropdown-item-prefix-cls}--divided:before { - height: var(--ti-dropdown-item-small-before-height); - margin: var(--ti-dropdown-item-before-margin-vertical) var(--ti-dropdown-item-mini-before-margin-horizontal); - } + border-left-color: #fff; } } diff --git a/packages/theme/src/dropdown-menu/vars.less b/packages/theme/src/dropdown-menu/vars.less index 3967c2b467..99ec165cf0 100644 --- a/packages/theme/src/dropdown-menu/vars.less +++ b/packages/theme/src/dropdown-menu/vars.less @@ -11,42 +11,16 @@ */ .component-css-vars-dropdown-menu() { - // 下拉菜单边框的宽度 - --ti-dropdown-menu-border-width: 0; - // 下拉菜单边框的颜色 - --ti-dropdown-menu-border-color: var(--ti-common-color-light, #ffffff); // 下拉菜单弹框的阴影 - --ti-dropdown-menu-box-shadow: var(--ti-common-shadow-2-down, 0 2px 8px 0 rgba(0, 0, 0, 0.2)); + --tv-DropdownMenu-box-shadow: var(--tv-shadow-3-down); // 下拉菜单弹框的背景色 - --ti-dropdown-menu-bg-color: var(--ti-common-color-bg-white-normal, #ffffff); + --tv-DropdownMenu-bg-color: var(--tv-color-bg-secondary, #ffffff); // 下拉菜单弹框的圆角 - --ti-dropdown-menu-border-radius: var(--ti-common-border-radius-normal, 6px); + --tv-DropdownMenu-border-radius: var(--tv-border-radius-md, 6px); // 下拉菜单的最小宽度 - --ti-dropdown-menu-min-width: 124px; + --tv-DropdownMenu-min-width: 124px; // 下拉菜单弹框与触发按钮的距离 - --ti-dropdown-menu-margin-vertical: var(--ti-common-space-base, 4px); - // 下拉菜单弹框的垂直内边距 - --ti-dropdown-menu-padding-vertical: var(--ti-common-space-2x, 8px); - // 下拉菜单弹框的水平内边距 - --ti-dropdown-menu-padding-horizontal: var(--ti-common-space-0, 0px); - // 下拉菜单中尺寸的弹框垂直内边距 - --ti-dropdown-menu-medium-padding-vertical: var(--ti-common-space-6, 6px); - // 下拉菜单中尺寸的弹框水平内边距 - --ti-dropdown-menu-medium-padding-horizontal: var(--ti-common-space-0, 0px); - // 下拉菜单小尺寸的弹框垂直内边距 - --ti-dropdown-menu-small-padding-vertical: var(--ti-common-space-6, 6px); - // 下拉菜单小尺寸的弹框水平内边距 - --ti-dropdown-menu-small-padding-horizontal: var(--ti-common-space-0, 0px); - // 下拉菜单弹框箭头的尺寸 - --ti-dropdown-menu-arrow-border-width: 6px; - // 下拉菜单带箭头弹框的底部外边距 - --ti-dropdown-menu-arrow-margin-bottom: var(--ti-common-space-3x, 12px); - // 下拉菜单带箭头弹框的顶部外边距 - --ti-dropdown-menu-arrow-margin-top: var(--ti-common-space-3x, 12px); - // 下拉菜单弹框箭头的边框色 - --ti-dropdown-menu-arrow-border-color: var(--ti-common-color-line-normal, #c2c2c2); - // 下拉菜单弹框箭头的颜色 - --ti-dropdown-menu-arrow-after-border-color: var(--ti-common-color-light, #ffffff); - // 下拉菜单弹框周边的填充色 - --ti-dropdown-menu-arrow-after-default-border-color: var(--ti-common-color-transparent, transparent); + --tv-DropdownMenu-margin-y: var(--tv-space-sm, 4px); + //下拉菜单弹框的内边距 + --tv-DropdownMenu-padding: var(--tv-space-md, 8px) 0px; } diff --git a/packages/vue/src/dropdown-item/src/pc.vue b/packages/vue/src/dropdown-item/src/pc.vue index 5db7193e55..469177400b 100644 --- a/packages/vue/src/dropdown-item/src/pc.vue +++ b/packages/vue/src/dropdown-item/src/pc.vue @@ -14,13 +14,15 @@
  • - + + {{ label }}