UNPKG

1.99 kBtext/lessView Raw
1@import (reference) './imports/global';
2
3/*! AUI Badge */
4aui-badge,
5.aui-badge {
6 background: var(--aui-badge-bg-color); // RGBA
7 border-radius: 2em; // needs to be at least 1em + border-top + border-bottom + padding-top + padding-bottom to get perfectly rounded
8 color: var(--aui-badge-text-color);
9 font-size: @aui-font-size-small;
10 font-weight: @aui-font-weight-normal;
11 line-height: 1;
12 margin: 0;
13 min-height: 1em;
14 min-width: 1em; /* want a capsule style even when single digit */
15 padding: 2px 6px;
16 position: relative;
17 display: inline-flex;
18 align-items: center;
19 justify-content: center;
20 justify-items: center;
21 align-content: center;
22 text-decoration: none;
23 text-shadow: none;
24 text-transform: uppercase;
25
26 // Semantic variations
27
28 &.aui-badge-primary {
29 background-color: var(--aui-badge-primary-bg-color);
30 color: var(--aui-badge-primary-text-color);
31 }
32 &.aui-badge-added {
33 background-color: var(--aui-badge-added-bg-color);
34 color: var(--aui-badge-added-text-color);
35 }
36 &.aui-badge-removed {
37 background-color: var(--aui-badge-removed-bg-color);
38 color: var(--aui-badge-removed-text-color);
39 }
40 &.aui-badge-important {
41 background-color: var(--aui-badge-important-bg-color);
42 color: var(--aui-badge-important-text-color);
43 }
44
45 // Integrations:
46 // Light versions for contexts we know about
47 .aui-button-primary > &,
48 .aui-dropdown2 .active > & {
49 background: var(--aui-badge-on-blue-bg-color);
50 color: var(--aui-badge-on-blue-text-color);
51 }
52
53 .aui-button[disabled] > & {
54 background: var(--aui-badge-bg-color); // RGBA
55 color: inherit;
56 }
57
58 .aui-button-primary[disabled] > & {
59 background: var(--aui-badge-on-blue-bg-color); // RGBA
60 }
61
62 .aui-button > &,
63 .aui-tabs .menu-item & {
64 top: -1px; /* slight tweak to position them in specific contexts */
65 }
66}