vue-antd-ui
Version:
An enterprise-class UI design language and Vue-based implementation
120 lines (104 loc) • 2.42 kB
text/less
@import "../../style/themes/default";
@import "../../style/mixins/index";
@tag-prefix-cls: ~"@{ant-prefix}-tag";
.@{tag-prefix-cls} {
.reset-component;
display: inline-block;
line-height: 20px;
height: 22px;
padding: 0 7px;
border-radius: @border-radius-base;
border: @border-width-base @border-style-base @border-color-base;
background: @tag-default-bg;
font-size: @tag-font-size;
transition: all 0.3s @ease-out;
opacity: 1;
margin-right: 8px;
cursor: pointer;
white-space: nowrap;
&:hover {
opacity: 0.85;
}
&,
a,
a:hover {
color: @tag-default-color;
}
>a:first-child:last-child {
display: inline-block;
margin: 0 -8px;
padding: 0 8px;
}
.@{iconfont-css-prefix}-cross {
.iconfont-size-under-12px(10px);
cursor: pointer;
margin-left: 3px;
transition: all .3s;
color: @text-color-secondary;
font-weight: bold;
&:hover {
color: @heading-color;
}
}
&-has-color {
border-color: transparent;
&,
a,
a:hover,
.@{iconfont-css-prefix}-cross,
.@{iconfont-css-prefix}-cross:hover {
color: #fff;
}
}
&-checkable {
background-color: transparent;
border-color: transparent;
&:not(&-checked):hover {
color: @primary-color;
}
&:active,
&-checked {
color: #fff;
}
&-checked {
background-color: @primary-6;
}
&:active {
background-color: @primary-7;
}
}
&-close {
width: 0 ;
padding: 0;
margin: 0;
}
&-zoom-enter,
&-zoom-appear {
animation: antFadeIn .2s @ease-in-out-circ;
animation-fill-mode: both;
}
&-zoom-leave {
animation: antZoomOut .3s @ease-in-out-circ;
animation-fill-mode: both;
}
@colors: pink, magenta, red, volcano, orange, yellow, gold, cyan, lime, green, blue, geekblue, purple;
// mixin to iterate over colors and create CSS class for each one
.make-color-classes(@i: length(@colors)) when (@i > 0) {
.make-color-classes(@i - 1);
@color: extract(@colors, @i);
@lightColor: "@{color}-1";
@lightBorderColor: "@{color}-3";
@darkColor: "@{color}-6";
&-@{color} {
color: @@darkColor;
background: @@lightColor;
border-color: @@lightBorderColor;
}
&-@{color}-inverse {
background: @@darkColor;
border-color: @@darkColor;
color: #fff;
}
}
.make-color-classes();
}