framework/less/common/Badge.less
Sami Mazouz ef20e29b20
[1.x] Custom Colorising with CSS Custom Properties (#3001)
* Start of conversion to CSS variables
* Use variable for Badge colors
* Use variable for avatar bg
* Use variable for user card bg
* Use css variables for hero
* Use css variables for buttons
* Use css variables for sidenav links
* Cleaner style attr

Co-authored-by: David Wheatley <hi@davwheat.dev>
2021-08-16 10:17:48 +01:00

39 lines
558 B
Plaintext

.Badge {
.Badge--size(22px);
background: var(--badge-bg);
color: var(--badge-color);
display: inline-block;
vertical-align: middle;
text-align: center;
.box-shadow(0 2px 4px @shadow-color);
.Badge-label {
display: none;
}
}
.Badge--size(@size) {
width: @size;
height: @size;
border-radius: @size / 2;
line-height: @size - 1px;
&, .Badge-icon {
font-size: 0.56 * @size;
}
}
.badges {
margin: 0;
padding: 0;
list-style: none;
&, > li {
display: inline-block;
}
}
.Badge--hidden {
background: #888;
}