atui
Version:
components built with Vue.js
62 lines (55 loc) • 1.18 kB
text/less
// Tag
// --------------------------------------------------
@prefix-cls-tag: e("@{prefix-cls}-tag");
@tag-default-text : #999;
@tag-text : #fff;
@tag-default-bg : #f2f2f2;
.@{prefix-cls-tag} {
display: inline-block;
vertical-align: middle;
min-height: 22px;
// line-height: 22px;
line-height: 1.8;
border-radius: 4px;
padding: 0 8px;
font-size: 10px;
overflow: hidden;
opacity: .85;
background-color: @tag-default-bg;
transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
&:hover {
opacity: 0.3;
}
.@{prefix-cls-tag}-text {
cursor: pointer;
color: @tag-default-text;
text-decoration: none;
}
.@{prefix-cls-tag}-close {
color: @tag-default-text;
opacity: 0.66;
cursor: pointer;
display: inline-block;
// width: 10px;
// height: 10px;
// line-height: 10px;
// font-size: 16px;
transform: scale(.66666667) rotate(0deg);
&:hover {
opacity: 1;
}
}
&-color {
.@{prefix-cls-tag}-text {
color: @tag-text;
}
.@{prefix-cls-tag}-close {
color: @tag-text;
opacity: 0.66;
cursor: pointer;
&:hover {
opacity: 1;
}
}
}
}