zmp-core
Version:
Full featured mobile HTML framework for building iOS & Android apps
47 lines (43 loc) • 1.11 kB
text/less
/* === Badge === */
@import url('./badge-vars.less');
.badge {
display: inline-flex;
align-items: center;
align-content: center;
justify-content: center;
color: var(--zmp-badge-text-color);
background: var(--zmp-badge-bg-color);
position: relative;
box-sizing: border-box;
text-align: center;
vertical-align: middle;
font-weight: var(--zmp-badge-font-weight);
font-size: var(--zmp-badge-font-size);
border-radius: var(--zmp-badge-size);
padding: var(--zmp-badge-padding);
height: var(--zmp-badge-size);
min-width: var(--zmp-badge-size);
.icon &,
.zmp-icons &,
.material-icons & {
position: absolute;
left: 100%;
margin-left: -10px;
top: -2px;
font-family: var(--zmp-font-family);
--zmp-badge-font-size: var(--zmp-badge-in-icon-font-size);
--zmp-badge-size: var(--zmp-badge-in-icon-size);
}
}
.badge[class*='color-'] {
--zmp-badge-bg-color: var(--zmp-theme-color);
}
.if-ios-theme({
@import url('./badge-ios.less');
});
.if-md-theme({
@import url('./badge-md.less');
});
.if-aurora-theme({
@import url('./badge-aurora.less');
});