antd-mini
Version:
antd-mini 是支付宝小程序 UI 组件库,遵循 Ant Design 规范。
85 lines (81 loc) • 1.99 kB
text/less
@import '../style/mixins/hairline.less';
@import (reference) './variable.less';
@tagPrefix: ant-tag;
.@{tagPrefix} {
position: relative;
display: inline-flex;
align-items: center;
padding: 2 * @rpx 8 * @rpx;
font-size: 22 * @rpx;
line-height: 30 * @rpx;
box-sizing: border-box;
border-radius: @corner-radius-sm;
color: @tag-base-color;
&-icon-container {
margin-right: 6 * @rpx;
display: flex;
justify-content: center;
align-self: center;
align-items: center;
.ant-icon {
font-size: 24 * @rpx;
}
}
&-primary {
background-color: @tag-primary-color;
&.@{tagPrefix}-fill-light {
color: @tag-primary-color;
background-color: @tag-primary-light-color;
}
&.@{tagPrefix}-outline {
color: @tag-primary-color;
border-color: @tag-primary-color-faded;
}
}
&-warning {
background-color: @tag-warning-color;
&.@{tagPrefix}-fill-light {
color: @tag-warning-color;
background-color: @tag-warning-light-color;
}
&.@{tagPrefix}-outline {
color: @tag-warning-color;
border-color: @tag-warning-color-faded;
}
}
&-danger {
background-color: @tag-danger-color;
&.@{tagPrefix}-fill-light {
color: @tag-danger-color;
background-color: @tag-danger-light-color;
}
&.@{tagPrefix}-outline {
color: @tag-danger-color;
border-color: @tag-danger-color-faded;
}
}
&-success {
background-color: @tag-success-color;
&.@{tagPrefix}-fill-light {
color: @tag-success-color;
background-color: @tag-success-light-color;
}
&.@{tagPrefix}-outline {
color: @tag-success-color;
border-color: @tag-success-color-faded;
}
}
&-image {
background-color: rgb(0 0 0 / 50%);
}
&-outline {
border-width: 2rpx;
border-style: solid;
background-color: @tag-base-color;
}
&-content {
display: flex;
justify-content: center;
align-items: center;
}
}