zmp-core/components/badge/badge.less

Full featured mobile HTML framework for building iOS & Android apps

/* === 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');
});