pragmate-ui/chips/chips.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-chip {
  padding: 0.438rem 1rem;
  border-radius: 1rem;
  font-size: 13px;
  display: flex;
  flex-direction: row;
  width: fit-content;
  gap: 0.6rem;
  align-items: center;
}
.pui-chip.pui-chip--default {
  background: var(--default);
  color: var(--on-default);
}
.pui-chip.pui-chip--default .pui-icon {
  fill: var(--on-default);
  height: 0.75rem;
  width: 0.75rem;
}
.pui-chip.pui-chip--primary {
  background: var(--primary);
  color: var(--on-primary);
}
.pui-chip.pui-chip--primary .pui-icon {
  fill: var(--on-primary);
  height: 0.75rem;
  width: 0.75rem;
}
.pui-chip.pui-chip--secondary {
  background: var(--secondary);
  color: var(--on-secondary);
}
.pui-chip.pui-chip--secondary .pui-icon {
  fill: var(--on-secondary);
  height: 0.75rem;
  width: 0.75rem;
}
.pui-chip.pui-chip--tertiary {
  background: var(--tertiary);
  color: var(--on-tertiary);
}
.pui-chip.pui-chip--tertiary .pui-icon {
  fill: var(--on-tertiary);
  height: 0.75rem;
  width: 0.75rem;
}
.pui-chip.pui-chip--success {
  background: var(--success);
  color: var(--on-success);
}
.pui-chip.pui-chip--success .pui-icon {
  fill: var(--on-success);
  height: 0.75rem;
  width: 0.75rem;
}
.pui-chip.pui-chip--info {
  background: var(--info);
  color: var(--on-info);
}
.pui-chip.pui-chip--info .pui-icon {
  fill: var(--on-info);
  height: 0.75rem;
  width: 0.75rem;
}
.pui-chip.pui-chip--warning {
  background: var(--warning);
  color: var(--on-warning);
}
.pui-chip.pui-chip--warning .pui-icon {
  fill: var(--on-warning);
  height: 0.75rem;
  width: 0.75rem;
}
.pui-chip.pui-chip--danger {
  background: var(--danger);
  color: var(--on-danger);
}
.pui-chip.pui-chip--danger .pui-icon {
  fill: var(--on-danger);
  height: 0.75rem;
  width: 0.75rem;
}

.pui-chip__container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.25rem;
  width: fit-content;
}
.pui-chip__container .content-chip {
  display: flex;
  gap: 0.5rem;
}
.pui-chip__container .content-chip .pui-chip.is-clickable {
  cursor: pointer;
}


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