muCSS/css/mu.component.badge.css at main · Digicreon/muCSS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
/*
 * µCSS Component: Badge
 */

.badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.2em 0.55em;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	vertical-align: baseline;
	border: 1px solid transparent;
	border-radius: 0.25rem;
	color: var(--mu-contrast-inverse);
	background-color: var(--mu-contrast);
}
a.badge, button.badge {
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.15s ease-in-out;
}
a.badge:hover, button.badge:hover { opacity: 0.85; }

.badge-pill { padding: 0.25em 0.6em; border-radius: 50rem; }
.badge-sm { padding: 0.15em 0.4em; font-size: 0.6875rem; }
.badge-lg { padding: 0.3em 0.7em; font-size: 0.875rem; }

.badge-primary   { color: var(--mu-primary-inverse);   background-color: var(--mu-primary);   border-color: var(--mu-primary); }
.badge-secondary { color: var(--mu-secondary-inverse); background-color: var(--mu-secondary); border-color: var(--mu-secondary); }
.badge-tertiary  { color: var(--mu-tertiary-inverse);  background-color: var(--mu-tertiary);  border-color: var(--mu-tertiary); }
.badge-contrast  { color: var(--mu-contrast-inverse);  background-color: var(--mu-contrast);  border-color: var(--mu-contrast); }
.badge-success   { color: var(--mu-success-inverse);   background-color: var(--mu-success);   border-color: var(--mu-success); }
.badge-info      { color: var(--mu-info-inverse);      background-color: var(--mu-info);      border-color: var(--mu-info); }
.badge-warning   { color: var(--mu-warning-inverse);   background-color: var(--mu-warning);   border-color: var(--mu-warning); }
.badge-error     { color: var(--mu-error-inverse);     background-color: var(--mu-error);     border-color: var(--mu-error); }
.badge-accent    { color: var(--mu-accent-inverse);    background-color: var(--mu-accent);    border-color: var(--mu-accent); }
.badge-pop       { color: var(--mu-pop-inverse);       background-color: var(--mu-pop);       border-color: var(--mu-pop); }
.badge-spark     { color: var(--mu-spark-inverse);     background-color: var(--mu-spark);     border-color: var(--mu-spark); }

.badge-outline { background-color: transparent; }
.badge-outline.badge-primary   { color: var(--mu-primary); }
.badge-outline.badge-secondary { color: var(--mu-secondary); }
.badge-outline.badge-tertiary  { color: var(--mu-tertiary); }
.badge-outline.badge-contrast  { color: var(--mu-contrast); }
.badge-outline.badge-success   { color: var(--mu-success); }
.badge-outline.badge-info      { color: var(--mu-info); }
.badge-outline.badge-warning   { color: var(--mu-warning); }
.badge-outline.badge-error     { color: var(--mu-error); }
.badge-outline.badge-accent    { color: var(--mu-accent); }
.badge-outline.badge-pop       { color: var(--mu-pop); }
.badge-outline.badge-spark     { color: var(--mu-spark); }

.badge-attached {
	position: absolute;
	top: -0.4em;
	right: -0.4em;
	min-width: 1.2em;
	min-height: 1.2em;
	padding: 0.15em 0.35em;
	font-size: 0.625rem;
	border-radius: 50rem;
}