pragmate-ui/badge/badge.css

An advanced, on-demand React UI library optimized for BeyondJS. Pragmate UI provides modular, responsive, and accessible components with a focus on efficient bundle sizes and a streamlined development process.

.pui-badge__container {
  display: inline-flex;
  position: relative;
  max-width: fit-content;
  align-items: center;
  justify-content: center;
}
.pui-badge__container .pui-badge {
  position: absolute;
  top: -2px;
  right: 0px;
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.3rem;
  justify-content: center;
  min-width: 1.248rem;
  border-radius: 50%;
  background-color: var(--primary);
  font-size: 0.5rem;
}
.pui-badge__container .pui-badge.pui-badge--has-value {
  padding: 0.3rem;
  font-size: 0.65rem;
}
.pui-badge__container .pui-badge.pui-badge--visible {
  height: 0.7rem;
  width: 0.7rem;
}
.pui-badge__container .pui-badge.pui-badge--primary {
  color: var(--on-primary);
  background: var(--primary);
}
.pui-badge__container .pui-badge.pui-badge--secondary {
  color: var(--on-secondary);
  background: var(--secondary);
}
.pui-badge__container .pui-badge.pui-badge--success {
  color: var(--on-success);
  background: var(--success);
}
.pui-badge__container .pui-badge.pui-badge--danger {
  color: var(--on-danger);
  background: var(--danger);
}
.pui-badge__container .pui-badge.pui-badge--warning {
  color: var(--on-warning);
  background: var(--warning);
}
.pui-badge__container .pui-badge.pui-badge--info {
  color: var(--on-info);
  background: var(--info);
}
.pui-badge__container .pui-badge.pui-badge--default {
  color: var(--on-default);
  background: var(--default);
}
.pui-badge__container .pui-badge.dot {
  position: absolute;
  top: 5px;
  right: 10px;
  display: inline-flex;
  padding: 0;
  min-width: 0.5rem;
  font-size: 0;
  height: 0.5rem;
  width: 0.5rem;
  border-radius: 100%;
}


/*# sourceMappingURL=badge.css.map*/