pragmate-ui/components/components.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-button-group > .pragmate-button {
  border: 1px solid var(--outline);
}
.pui-button-group:first-child, .pui-button-group:last-child {
  border-left: none;
  border-right: none;
}
.pragmate-button-group.row {
  flex-direction: row;
}
.pragmate-button-group.column {
  flex-direction: column;
}
.pragmate-button-group.small > .pragmate-button {
  font-size: 12px;
}
.pragmate-button-group.medium > .pragmate-button {
  font-size: 16px;
}
.pragmate-button-group.tall > .pragmate-button {
  font-size: 18px;
}
.pui-button-group {
  display: flex;
  width: max-content;
  flex-shrink: 1;
  flex-wrap: nowrap;
  overflow: hidden;
  border-radius: var(--border-radius-base);
}
.pui-button-group > .pui-button {
  border-radius: 0;
}
.pui-button-group > .pui-button:first-child {
  border-top-left-radius: var(--border-radius-base);
  border-bottom-left-radius: var(--border-radius-base);
}
.pui-button-group > .pui-button:last-child {
  border-top-right-radius: var(--border-radius-base);
  border-bottom-right-radius: var(--border-radius-base);
}
.pui-button,
.btn {
  outline: 0;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: auto;
  background: transparent;
  min-height: 35px;
  height: auto;
  /* max-height: 35px; */
  transition: all 300ms ease-in;
  border-radius: var(--border-radius-base);
  font-weight: 500;
  padding: 0.2rem 1rem;
  display: inline-block;
  border: none;
}
.pui-button:active, .pui-button:hover, .pui-button:focus,
.btn:active,
.btn:hover,
.btn:focus {
  outline: 0;
}
.pui-button.btn--loading .button-label,
.btn.btn--loading .button-label {
  opacity: 0.1;
}
.pui-button .pui-spinner,
.pui-button .pragmate-element-spinner,
.btn .pui-spinner,
.btn .pragmate-element-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.pui-button span,
.btn span {
  position: absolute;
}
.pui-button:disabled,
.btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
.pui-button.has-icon,
.btn.has-icon {
  display: flex !important;
  align-items: center;
  justify-content: center;
  column-gap: 8px;
}
.pui-button.has-icon.icon--right,
.btn.has-icon.icon--right {
  flex-direction: row-reverse;
}
.btn.btn--lg,
.pui-button.btn--lg {
  font-size: 2rem;
  padding: 0.5rem 1rem;
}
.btn.btn--sm,
.pui-button.btn--sm {
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  min-height: 0;
}
.btn.btn--md,
.pui-button.btn--md {
  font-size: 1rem;
}
.btn.btn--xs,
.pui-button.btn--xs {
  padding: 0.5rem;
  font-size: 0.7rem;
  min-height: 0;
}
.btn.btn--block,
.pui-button.btn--block {
  display: block;
  width: 100%;
}
.pui-button.btn-primary,
.btn.btn-primary {
  background-color: var(--primary);
  color: var(--on-primary);
  /**
   * Icon styles
   */
}
.pui-button.btn-primary:hover:not(:disabled), .pui-button.btn-primary.pui-btn--active, .pui-button.btn-primary:focus,
.btn.btn-primary:hover:not(:disabled),
.btn.btn-primary.pui-btn--active,
.btn.btn-primary:focus {
  background-color: var(--primary-30);
  color: var(--primary-90);
}
.pui-button.btn-primary.has-icon svg.pui-icon,
.btn.btn-primary.has-icon svg.pui-icon {
  fill: var(--on-primary);
}
.pui-button.btn-primary:disabled,
.btn.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.pui-button.btn-primary.has-icon svg,
.btn.btn-primary.has-icon svg {
  fill: var(--on-primary);
}
.pui-button.btn-primary.outline,
.btn.btn-primary.outline {
  background-color: transparent;
  border: 1px solid var(--primary);
  color: var(--primary);
}
.pui-button.btn-primary.outline svg.pui-icon,
.btn.btn-primary.outline svg.pui-icon {
  fill: var(--primary);
}
.pui-button.btn-primary.outline:hover:not(:disabled),
.btn.btn-primary.outline:hover:not(:disabled) {
  background-color: var(--primary);
  color: var(--on-primary);
  background-color: var(--primary-30);
}
.pui-button.btn-primary.outline:hover:not(:disabled) svg.pui-icon,
.btn.btn-primary.outline:hover:not(:disabled) svg.pui-icon {
  fill: var(--on-primary);
}
.pui-button.btn-primary.outline:disabled,
.btn.btn-primary.outline:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.pui-button.btn-secondary,
.btn.btn-secondary {
  background-color: var(--secondary);
  color: var(--on-secondary);
  /**
   * Icon styles
   */
}
.pui-button.btn-secondary:hover:not(:disabled), .pui-button.btn-secondary.pui-btn--active, .pui-button.btn-secondary:focus,
.btn.btn-secondary:hover:not(:disabled),
.btn.btn-secondary.pui-btn--active,
.btn.btn-secondary:focus {
  background-color: var(--secondary-30);
  color: var(--secondary-90);
}
.pui-button.btn-secondary.has-icon svg.pui-icon,
.btn.btn-secondary.has-icon svg.pui-icon {
  fill: var(--on-secondary);
}
.pui-button.btn-secondary:disabled,
.btn.btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.pui-button.btn-secondary.has-icon svg,
.btn.btn-secondary.has-icon svg {
  fill: var(--on-secondary);
}
.pui-button.btn-secondary.outline,
.btn.btn-secondary.outline {
  background-color: transparent;
  border: 1px solid var(--secondary);
  color: var(--secondary);
}
.pui-button.btn-secondary.outline svg.pui-icon,
.btn.btn-secondary.outline svg.pui-icon {
  fill: var(--secondary);
}
.pui-button.btn-secondary.outline:hover:not(:disabled),
.btn.btn-secondary.outline:hover:not(:disabled) {
  background-color: var(--secondary);
  color: var(--on-secondary);
  background-color: var(--secondary-30);
}
.pui-button.btn-secondary.outline:hover:not(:disabled) svg.pui-icon,
.btn.btn-secondary.outline:hover:not(:disabled) svg.pui-icon {
  fill: var(--on-secondary);
}
.pui-button.btn-secondary.outline:disabled,
.btn.btn-secondary.outline:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.pui-button.btn-tertiary,
.btn.btn-tertiary {
  background-color: var(--tertiary);
  color: var(--on-tertiary);
  /**
   * Icon styles
   */
}
.pui-button.btn-tertiary:hover:not(:disabled), .pui-button.btn-tertiary.pui-btn--active, .pui-button.btn-tertiary:focus,
.btn.btn-tertiary:hover:not(:disabled),
.btn.btn-tertiary.pui-btn--active,
.btn.btn-tertiary:focus {
  background-color: var(--tertiary-30);
  color: var(--tertiary-90);
}
.pui-button.btn-tertiary.has-icon svg.pui-icon,
.btn.btn-tertiary.has-icon svg.pui-icon {
  fill: var(--on-tertiary);
}
.pui-button.btn-tertiary:disabled,
.btn.btn-tertiary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.pui-button.btn-tertiary.has-icon svg,
.btn.btn-tertiary.has-icon svg {
  fill: var(--on-tertiary);
}
.pui-button.btn-tertiary.outline,
.btn.btn-tertiary.outline {
  background-color: transparent;
  border: 1px solid var(--tertiary);
  color: var(--tertiary);
}
.pui-button.btn-tertiary.outline svg.pui-icon,
.btn.btn-tertiary.outline svg.pui-icon {
  fill: var(--tertiary);
}
.pui-button.btn-tertiary.outline:hover:not(:disabled),
.btn.btn-tertiary.outline:hover:not(:disabled) {
  background-color: var(--tertiary);
  color: var(--on-tertiary);
  background-color: var(--tertiary-30);
}
.pui-button.btn-tertiary.outline:hover:not(:disabled) svg.pui-icon,
.btn.btn-tertiary.outline:hover:not(:disabled) svg.pui-icon {
  fill: var(--on-tertiary);
}
.pui-button.btn-tertiary.outline:disabled,
.btn.btn-tertiary.outline:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.pui-button.btn-success,
.btn.btn-success {
  background-color: var(--success);
  color: var(--on-success);
  /**
   * Icon styles
   */
}
.pui-button.btn-success:hover:not(:disabled), .pui-button.btn-success.pui-btn--active, .pui-button.btn-success:focus,
.btn.btn-success:hover:not(:disabled),
.btn.btn-success.pui-btn--active,
.btn.btn-success:focus {
  background-color: var(--success-30);
  color: var(--success-90);
}
.pui-button.btn-success.has-icon svg.pui-icon,
.btn.btn-success.has-icon svg.pui-icon {
  fill: var(--on-success);
}
.pui-button.btn-success:disabled,
.btn.btn-success:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.pui-button.btn-success.has-icon svg,
.btn.btn-success.has-icon svg {
  fill: var(--on-success);
}
.pui-button.btn-success.outline,
.btn.btn-success.outline {
  background-color: transparent;
  border: 1px solid var(--success);
  color: var(--success);
}
.pui-button.btn-success.outline svg.pui-icon,
.btn.btn-success.outline svg.pui-icon {
  fill: var(--success);
}
.pui-button.btn-success.outline:hover:not(:disabled),
.btn.btn-success.outline:hover:not(:disabled) {
  background-color: var(--success);
  color: var(--on-success);
  background-color: var(--success-30);
}
.pui-button.btn-success.outline:hover:not(:disabled) svg.pui-icon,
.btn.btn-success.outline:hover:not(:disabled) svg.pui-icon {
  fill: var(--on-success);
}
.pui-button.btn-success.outline:disabled,
.btn.btn-success.outline:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.pui-button.btn-error,
.btn.btn-error {
  background-color: var(--error);
  color: var(--on-error);
  /**
   * Icon styles
   */
}
.pui-button.btn-error:hover:not(:disabled), .pui-button.btn-error.pui-btn--active, .pui-button.btn-error:focus,
.btn.btn-error:hover:not(:disabled),
.btn.btn-error.pui-btn--active,
.btn.btn-error:focus {
  background-color: var(--error-30);
  color: var(--error-90);
}
.pui-button.btn-error.has-icon svg.pui-icon,
.btn.btn-error.has-icon svg.pui-icon {
  fill: var(--on-error);
}
.pui-button.btn-error:disabled,
.btn.btn-error:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.pui-button.btn-error.has-icon svg,
.btn.btn-error.has-icon svg {
  fill: var(--on-error);
}
.pui-button.btn-error.outline,
.btn.btn-error.outline {
  background-color: transparent;
  border: 1px solid var(--error);
  color: var(--error);
}
.pui-button.btn-error.outline svg.pui-icon,
.btn.btn-error.outline svg.pui-icon {
  fill: var(--error);
}
.pui-button.btn-error.outline:hover:not(:disabled),
.btn.btn-error.outline:hover:not(:disabled) {
  background-color: var(--error);
  color: var(--on-error);
  background-color: var(--error-30);
}
.pui-button.btn-error.outline:hover:not(:disabled) svg.pui-icon,
.btn.btn-error.outline:hover:not(:disabled) svg.pui-icon {
  fill: var(--on-error);
}
.pui-button.btn-error.outline:disabled,
.btn.btn-error.outline:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.pui-button.btn-warning,
.btn.btn-warning {
  background-color: var(--warning);
  color: var(--on-warning);
  /**
   * Icon styles
   */
}
.pui-button.btn-warning:hover:not(:disabled), .pui-button.btn-warning.pui-btn--active, .pui-button.btn-warning:focus,
.btn.btn-warning:hover:not(:disabled),
.btn.btn-warning.pui-btn--active,
.btn.btn-warning:focus {
  background-color: var(--warning-30);
  color: var(--warning-90);
}
.pui-button.btn-warning.has-icon svg.pui-icon,
.btn.btn-warning.has-icon svg.pui-icon {
  fill: var(--on-warning);
}
.pui-button.btn-warning:disabled,
.btn.btn-warning:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.pui-button.btn-warning.has-icon svg,
.btn.btn-warning.has-icon svg {
  fill: var(--on-warning);
}
.pui-button.btn-warning.outline,
.btn.btn-warning.outline {
  background-color: transparent;
  border: 1px solid var(--warning);
  color: var(--warning);
}
.pui-button.btn-warning.outline svg.pui-icon,
.btn.btn-warning.outline svg.pui-icon {
  fill: var(--warning);
}
.pui-button.btn-warning.outline:hover:not(:disabled),
.btn.btn-warning.outline:hover:not(:disabled) {
  background-color: var(--warning);
  color: var(--on-warning);
  background-color: var(--warning-30);
}
.pui-button.btn-warning.outline:hover:not(:disabled) svg.pui-icon,
.btn.btn-warning.outline:hover:not(:disabled) svg.pui-icon {
  fill: var(--on-warning);
}
.pui-button.btn-warning.outline:disabled,
.btn.btn-warning.outline:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.pui-button.btn-info,
.btn.btn-info {
  background-color: var(--info);
  color: var(--on-info);
  /**
   * Icon styles
   */
}
.pui-button.btn-info:hover:not(:disabled), .pui-button.btn-info.pui-btn--active, .pui-button.btn-info:focus,
.btn.btn-info:hover:not(:disabled),
.btn.btn-info.pui-btn--active,
.btn.btn-info:focus {
  background-color: var(--info-30);
  color: var(--info-90);
}
.pui-button.btn-info.has-icon svg.pui-icon,
.btn.btn-info.has-icon svg.pui-icon {
  fill: var(--on-info);
}
.pui-button.btn-info:disabled,
.btn.btn-info:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.pui-button.btn-info.has-icon svg,
.btn.btn-info.has-icon svg {
  fill: var(--on-info);
}
.pui-button.btn-info.outline,
.btn.btn-info.outline {
  background-color: transparent;
  border: 1px solid var(--info);
  color: var(--info);
}
.pui-button.btn-info.outline svg.pui-icon,
.btn.btn-info.outline svg.pui-icon {
  fill: var(--info);
}
.pui-button.btn-info.outline:hover:not(:disabled),
.btn.btn-info.outline:hover:not(:disabled) {
  background-color: var(--info);
  color: var(--on-info);
  background-color: var(--info-30);
}
.pui-button.btn-info.outline:hover:not(:disabled) svg.pui-icon,
.btn.btn-info.outline:hover:not(:disabled) svg.pui-icon {
  fill: var(--on-info);
}
.pui-button.btn-info.outline:disabled,
.btn.btn-info.outline:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.elevation-1 {
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}

.elevation-2 {
  box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
}

.elevation-3 {
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

.elevation-4 {
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
}

.elevation-5 {
  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.elevation-6 {
  box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
}
a.btn {
  display: flex;
  justify-content: center;
  align-items: center;
}

a:not(a.unstyled):hover {
  color: var(--primary);
}
.list-unstyled {
  padding: 0;
  margin: 0;
}
.pragmate-element-spinner.spinner--xs,
.pragmate-element-spinner.spinner--xs svg {
  height: 30px;
  width: 30px;
}
.pragmate-element-spinner.spinner--sm,
.pragmate-element-spinner.spinner--sm svg {
  height: 40px;
  width: 40px;
}
.pragmate-element-spinner.spinner--md,
.pragmate-element-spinner.spinner--md svg {
  height: 50px;
  width: 50px;
}
.pragmate-element-spinner.spinner--xl,
.pragmate-element-spinner.spinner--xl svg {
  height: 60px;
  width: 60px;
}
@-webkit-keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124;
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124;
  }
}
.pragmate-element-spinner {
  width: 30px;
  height: 30px;
  margin: auto;
  opacity: 0;
}
.pragmate-element-spinner svg {
  -webkit-animation: rotate 1.5s linear infinite;
  animation: rotate 1.5s linear infinite;
  height: 100%;
  width: 100%;
}
.pragmate-element-spinner circle {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  -webkit-animation: dash 1.5s ease-in-out infinite 0s, 6s ease-in-out infinite -0.75s;
  animation: dash 1.5s ease-in-out infinite 0s, 6s ease-in-out infinite -0.75s;
  stroke-linecap: round;
  fill: none;
  stroke-width: 3;
}
.pragmate-element-spinner.is-active {
  opacity: 1;
}
.pragmate-element-spinner.primary svg circle {
  stroke: var(--primary);
}
.pragmate-element-spinner.secondary svg circle {
  stroke: var(--secondary);
}
.pragmate-element-spinner.on-primary svg circle {
  stroke: var(--on-primary);
}
.pragmate-element-spinner.on-secondary svg circle {
  stroke: var(--on-secondary);
}
.pragmate-element-spinner.tertiary svg circle {
  stroke: var(--tertiary);
}
.pragmate-element-spinner.on-tertiary svg circle {
  stroke: var(--on-tertiary);
}
.tippy-box[data-animation=fade][data-state=hidden] {
  opacity: 0;
}

[data-tippy-root] {
  max-width: calc(100vw - 10px);
}

.tippy-box {
  position: relative;
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.4;
  white-space: normal;
  outline: 0;
  transition-property: transform, visibility, opacity;
}

.tippy-box[data-placement^=top] > .tippy-arrow {
  bottom: 0;
}

.tippy-box[data-placement^=top] > .tippy-arrow:before {
  bottom: -7px;
  left: 0;
  border-width: 8px 8px 0;
  border-top-color: initial;
  transform-origin: center top;
}

.tippy-box[data-placement^=bottom] > .tippy-arrow {
  top: 0;
}

.tippy-box[data-placement^=bottom] > .tippy-arrow:before {
  top: -7px;
  left: 0;
  border-width: 0 8px 8px;
  border-bottom-color: initial;
  transform-origin: center bottom;
}

.tippy-box[data-placement^=left] > .tippy-arrow {
  right: 0;
}

.tippy-box[data-placement^=left] > .tippy-arrow:before {
  border-width: 8px 0 8px 8px;
  border-left-color: initial;
  right: -7px;
  transform-origin: center left;
}

.tippy-box[data-placement^=right] > .tippy-arrow {
  left: 0;
}

.tippy-box[data-placement^=right] > .tippy-arrow:before {
  left: -7px;
  border-width: 8px 8px 8px 0;
  border-right-color: initial;
  transform-origin: center right;
}

.tippy-box[data-inertia][data-state=visible] {
  transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
}

.tippy-arrow {
  width: 16px;
  height: 16px;
  color: #333;
}

.tippy-arrow:before {
  content: "";
  position: absolute;
  border-color: transparent;
  border-style: solid;
}

.tippy-content {
  position: relative;
  padding: 5px 9px;
  z-index: 1;
}


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