@atlassian/aui
Version:
Atlassian User Interface library
67 lines (59 loc) • 1.99 kB
text/less
@import (reference) './imports/global';
/*! AUI Badge */
aui-badge,
.aui-badge {
background: var(--aui-badge-bg-color); // RGBA
border-radius: 2em; // needs to be at least 1em + border-top + border-bottom + padding-top + padding-bottom to get perfectly rounded
color: var(--aui-badge-text-color);
font-size: @aui-font-size-small;
font-weight: @aui-font-weight-normal;
line-height: 1;
margin: 0;
min-height: 1em;
min-width: 1em; /* want a capsule style even when single digit */
padding: 2px 6px;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
justify-items: center;
align-content: center;
text-decoration: none;
text-shadow: none;
text-transform: uppercase;
// Semantic variations
&.aui-badge-primary {
background-color: var(--aui-badge-primary-bg-color);
color: var(--aui-badge-primary-text-color);
}
&.aui-badge-added {
background-color: var(--aui-badge-added-bg-color);
color: var(--aui-badge-added-text-color);
}
&.aui-badge-removed {
background-color: var(--aui-badge-removed-bg-color);
color: var(--aui-badge-removed-text-color);
}
&.aui-badge-important {
background-color: var(--aui-badge-important-bg-color);
color: var(--aui-badge-important-text-color);
}
// Integrations:
// Light versions for contexts we know about
.aui-button-primary > &,
.aui-dropdown2 .active > & {
background: var(--aui-badge-on-blue-bg-color);
color: var(--aui-badge-on-blue-text-color);
}
.aui-button[disabled] > & {
background: var(--aui-badge-bg-color); // RGBA
color: inherit;
}
.aui-button-primary[disabled] > & {
background: var(--aui-badge-on-blue-bg-color); // RGBA
}
.aui-button > &,
.aui-tabs .menu-item & {
top: -1px; /* slight tweak to position them in specific contexts */
}
}