@aplus-frontend/ui
Version:
67 lines (64 loc) • 1.68 kB
text/less
@import '../mixins/mixins.less';
.b(tag, {
&-wrapper {
text-wrap: nowrap;
white-space: nowrap;
display: inline-flex;
max-width: 100%;
}
&-wrapper &-inner-wrapper {
border-radius: 4px;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
&--large {
padding: 6px;
line-height: @line-height-lg;
font-size: @font-size-lg;
}
&--middle {
line-height: @line-height-base;
padding: 3px 6px;
font-size: @font-size-base;
}
&--small {
padding: 0 4px;
line-height: @line-height-base;
font-size: @font-size-base;
border-radius: 2px;
}
}
&-wrapper-purely {
& > * {
background-color: var(--tag-main-color-background);
color: var(--ap-text-color-2);
}
}
&-wrapper-border {
& > * {
outline: 1px solid var(--tag-main-color);
outline-offset: -1px;
background-color: var(--tag-main-color-opacity);
color: var(--tag-main-color);
}
}
&-wrapper-purely &-inner-wrapper--disabled {
background-color: rgba(#8896b0,0.15);
}
&-wrapper-purely &-inner-wrapper--disabled-admin {
background-color: rgba(#333,0.15);
}
&-wrapper-border &-inner-wrapper--disabled {
outline: 1px solid #DEE4ED;
outline-offset: -1px;
background-color: #526a900f;
color: #8896b0;
}
&-wrapper-border &-inner-wrapper--disabled-admin {
outline: 1px solid #d9d9d9;
outline-offset: -1px;
background-color: #9999990f;
color: #999;
}
});