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;
}
@tag-size-default: 24px;
@tag-size-default-font-size: 12px;
@tag-size-lg: @tag-size-default + 2px;
@tag-size-default: 28px;
@tag-size-default-font-size: 14px;
@tag-size-lg: @tag-size-default + 4px;
@tag-size-md: @tag-size-default;
@tag-size-sm: @tag-size-default - 2px;
@tag-size-xs: @tag-size-default - 2px * 2;
@tag-size-lg-font-size: @tag-size-default-font-size + 2px;
@tag-size-sm: @tag-size-default - 4px;
@tag-size-xs: @tag-size-default - 4px * 2;
@tag-size-lg-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-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;
.layui-tag {
@ -27,8 +27,8 @@
vertical-align: middle;
box-sizing: border-box;
height: @tag-size-md;
line-height: @tag-size-md - @tag-border-width * 2;
padding: 0 6px;
line-height: @tag-size-md;
padding: 0 8px;
font-size: @tag-size-md-font-size;
font-weight: 500;
color: currentColor;
@ -37,18 +37,6 @@
border-color: transparent;
border-radius: var(--global-border-radius);
&-checkable {
cursor: pointer;
}
&-checkable:hover {
opacity: 0.7;
}
&-checked {
background-color: darken(red, 10%) !important;
}
&-icon {
margin-right: 4px;
}
@ -93,46 +81,46 @@
&-size-lg {
height: @tag-size-lg;
font-size: @tag-size-lg-font-size;
line-height: @tag-size-lg - @tag-border-width * 2;
line-height: @tag-size-lg;
.layui-icon {
font-size: @tag-size-lg-font-size - 2px;
font-size: @tag-size-lg-font-size;
}
}
&-size-md {
height: @tag-size-md;
font-size: @tag-size-md-font-size;
line-height: @tag-size-md - @tag-border-width * 2;
line-height: @tag-size-md;
.layui-icon {
font-size: @tag-size-md-font-size - 2px;
font-size: @tag-size-md-font-size;
}
}
&-size-sm {
height: @tag-size-sm;
font-size: @tag-size-sm-font-size;
line-height: @tag-size-sm - @tag-border-width * 2;
line-height: @tag-size-sm;
.layui-icon {
font-size: @tag-size-sm-font-size - 2px;
font-size: @tag-size-sm-font-size;
}
}
&-size-xs {
height: @tag-size-xs;
font-size: @tag-size-xs-font-size;
line-height: @tag-size-xs - @tag-border-width * 2;
line-height: @tag-size-xs;
.layui-icon {
font-size: @tag-size-xs-font-size - 2px;
font-size: @tag-size-xs-font-size;
}
}
& &-close-icon {
margin-left: 4px;
font-size: @tag-size-default-font-size - 2px;
font-size: @tag-size-default-font-size;
.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 size="md">
lg:
<lay-tag size="lg">tag lg</lay-tag>
<lay-tag size="lg"><template #icon><lay-icon type="layui-icon-addition" /></template>tag lg</lay-tag>
<lay-tag size="lg">标签</lay-tag>
<lay-tag size="lg"><template #icon><lay-icon type="layui-icon-addition" /></template>标签</lay-tag>
<lay-tag size="lg" closable>
<template #icon><lay-icon type="layui-icon-addition" /></template>
tag lg
标签
</lay-tag>
</lay-space>
<lay-space size="md">
md:
<lay-tag size="md">tag md</lay-tag>
<lay-tag size="md"><template #icon><lay-icon type="layui-icon-addition" /></template>tag md</lay-tag>
<lay-tag size="md">标签</lay-tag>
<lay-tag size="md"><template #icon><lay-icon type="layui-icon-addition" /></template>标签</lay-tag>
<lay-tag size="md" closable>
<template #icon><lay-icon type="layui-icon-addition" /></template>
tag md
标签
</lay-tag>
</lay-space>
<lay-space size="md">
sm:
<lay-tag size="sm">tag sm</lay-tag>
<lay-tag size="sm"><template #icon><lay-icon type="layui-icon-addition" /></template>tag sm</lay-tag>
<lay-tag size="sm">标签</lay-tag>
<lay-tag size="sm"><template #icon><lay-icon type="layui-icon-addition" /></template>标签</lay-tag>
<lay-tag size="sm" closable>
<template #icon><lay-icon type="layui-icon-addition" /></template>
tag sm
标签
</lay-tag>
</lay-space>
<lay-space size="md">
xs:
<lay-tag size="xs">tag xs</lay-tag>
<lay-tag size="xs"><template #icon><lay-icon type="layui-icon-addition" /></template>tag xs</lay-tag>
<lay-tag size="xs">标签</lay-tag>
<lay-tag size="xs"><template #icon><lay-icon type="layui-icon-addition" /></template>标签</lay-tag>
<lay-tag size="xs" closable>
<template #icon><lay-icon type="layui-icon-addition" /></template>
tag xs
标签
</lay-tag>
</lay-space>
</lay-space>