theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

💄(component): [tag] 优化 tag 样式

Browse Source
This commit is contained in:
sight 2022-09-03 23:50:13 +08:00
parent c847602387
commit edda3c5099
2 changed files with 30 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
package/component/src/component/tag/index.less
View File

@ -9,16 +9,16 @@
gray: #808080; gray: #808080;
} }
@tag-size-default: 24px; @tag-size-default: 28px;
@tag-size-default-font-size: 12px; @tag-size-default-font-size: 14px;
@tag-size-lg: @tag-size-default + 2px; @tag-size-lg: @tag-size-default + 4px;
@tag-size-md: @tag-size-default; @tag-size-md: @tag-size-default;
@tag-size-sm: @tag-size-default - 2px; @tag-size-sm: @tag-size-default - 4px;
@tag-size-xs: @tag-size-default - 2px * 2; @tag-size-xs: @tag-size-default - 4px * 2;
@tag-size-lg-font-size: @tag-size-default-font-size + 2px; @tag-size-lg-font-size: @tag-size-default-font-size;
@tag-size-md-font-size: @tag-size-default-font-size; @tag-size-md-font-size: @tag-size-default-font-size;
@tag-size-sm-font-size: @tag-size-default-font-size - 2px; @tag-size-sm-font-size: @tag-size-default-font-size - 2px;
@tag-size-xs-font-size: @tag-size-default-font-size - 2px * 2; @tag-size-xs-font-size: @tag-size-default-font-size - 2px;
@tag-border-width: 1px; @tag-border-width: 1px;
.layui-tag { .layui-tag {
@ -27,8 +27,8 @@
vertical-align: middle; vertical-align: middle;
box-sizing: border-box; box-sizing: border-box;
height: @tag-size-md; height: @tag-size-md;
line-height: @tag-size-md - @tag-border-width * 2; line-height: @tag-size-md;
padding: 0 6px; padding: 0 8px;
font-size: @tag-size-md-font-size; font-size: @tag-size-md-font-size;
font-weight: 500; font-weight: 500;
color: currentColor; color: currentColor;
@ -37,18 +37,6 @@
border-color: transparent; border-color: transparent;
border-radius: var(--global-border-radius); border-radius: var(--global-border-radius);
&-checkable {
cursor: pointer;
}
&-checkable:hover {
opacity: 0.7;
}
&-checked {
background-color: darken(red, 10%) !important;
}
&-icon { &-icon {
margin-right: 4px; margin-right: 4px;
} }
@ -93,46 +81,46 @@
&-size-lg { &-size-lg {
height: @tag-size-lg; height: @tag-size-lg;
font-size: @tag-size-lg-font-size; font-size: @tag-size-lg-font-size;
line-height: @tag-size-lg - @tag-border-width * 2; line-height: @tag-size-lg;
.layui-icon { .layui-icon {
font-size: @tag-size-lg-font-size - 2px; font-size: @tag-size-lg-font-size;
} }
} }
&-size-md { &-size-md {
height: @tag-size-md; height: @tag-size-md;
font-size: @tag-size-md-font-size; font-size: @tag-size-md-font-size;
line-height: @tag-size-md - @tag-border-width * 2; line-height: @tag-size-md;
.layui-icon { .layui-icon {
font-size: @tag-size-md-font-size - 2px; font-size: @tag-size-md-font-size;
} }
} }
&-size-sm { &-size-sm {
height: @tag-size-sm; height: @tag-size-sm;
font-size: @tag-size-sm-font-size; font-size: @tag-size-sm-font-size;
line-height: @tag-size-sm - @tag-border-width * 2; line-height: @tag-size-sm;
.layui-icon { .layui-icon {
font-size: @tag-size-sm-font-size - 2px; font-size: @tag-size-sm-font-size;
} }
} }
&-size-xs { &-size-xs {
height: @tag-size-xs; height: @tag-size-xs;
font-size: @tag-size-xs-font-size; font-size: @tag-size-xs-font-size;
line-height: @tag-size-xs - @tag-border-width * 2; line-height: @tag-size-xs;
.layui-icon { .layui-icon {
font-size: @tag-size-xs-font-size - 2px; font-size: @tag-size-xs-font-size;
} }
} }
& &-close-icon { & &-close-icon {
margin-left: 4px; margin-left: 4px;
font-size: @tag-size-default-font-size - 2px; font-size: @tag-size-default-font-size;
.layui-icon { .layui-icon {

24
package/document-component/src/document/zh-CN/components/tag.md
View File

@ -36,38 +36,38 @@
<lay-space direction="vertical" size="md"> <lay-space direction="vertical" size="md">
<lay-space size="md"> <lay-space size="md">
lg: lg:
<lay-tag size="lg">tag lg</lay-tag> <lay-tag size="lg">标签</lay-tag>
<lay-tag size="lg"><template #icon><lay-icon type="layui-icon-addition" /></template>tag lg</lay-tag> <lay-tag size="lg"><template #icon><lay-icon type="layui-icon-addition" /></template>标签</lay-tag>
<lay-tag size="lg" closable> <lay-tag size="lg" closable>
<template #icon><lay-icon type="layui-icon-addition" /></template> <template #icon><lay-icon type="layui-icon-addition" /></template>
tag lg 标签
</lay-tag> </lay-tag>
</lay-space> </lay-space>
<lay-space size="md"> <lay-space size="md">
md: md:
<lay-tag size="md">tag md</lay-tag> <lay-tag size="md">标签</lay-tag>
<lay-tag size="md"><template #icon><lay-icon type="layui-icon-addition" /></template>tag md</lay-tag> <lay-tag size="md"><template #icon><lay-icon type="layui-icon-addition" /></template>标签</lay-tag>
<lay-tag size="md" closable> <lay-tag size="md" closable>
<template #icon><lay-icon type="layui-icon-addition" /></template> <template #icon><lay-icon type="layui-icon-addition" /></template>
tag md 标签
</lay-tag> </lay-tag>
</lay-space> </lay-space>
<lay-space size="md"> <lay-space size="md">
sm: sm:
<lay-tag size="sm">tag sm</lay-tag> <lay-tag size="sm">标签</lay-tag>
<lay-tag size="sm"><template #icon><lay-icon type="layui-icon-addition" /></template>tag sm</lay-tag> <lay-tag size="sm"><template #icon><lay-icon type="layui-icon-addition" /></template>标签</lay-tag>
<lay-tag size="sm" closable> <lay-tag size="sm" closable>
<template #icon><lay-icon type="layui-icon-addition" /></template> <template #icon><lay-icon type="layui-icon-addition" /></template>
tag sm 标签
</lay-tag> </lay-tag>
</lay-space> </lay-space>
<lay-space size="md"> <lay-space size="md">
xs: xs:
<lay-tag size="xs">tag xs</lay-tag> <lay-tag size="xs">标签</lay-tag>
<lay-tag size="xs"><template #icon><lay-icon type="layui-icon-addition" /></template>tag xs</lay-tag> <lay-tag size="xs"><template #icon><lay-icon type="layui-icon-addition" /></template>标签</lay-tag>
<lay-tag size="xs" closable> <lay-tag size="xs" closable>
<template #icon><lay-icon type="layui-icon-addition" /></template> <template #icon><lay-icon type="layui-icon-addition" /></template>
tag xs 标签
</lay-tag> </lay-tag>
</lay-space> </lay-space>
</lay-space> </lay-space>