@govbr-ds/core/dist/components/step/step.css

Padrão Digital de Governo

@charset "UTF-8";
.br-step {
  --step-empty: 16px;
  --step-empty-border: 4px;
  --step-line: 1px;
  --step-size: var(--step-medium);
  --step-small: 32px;
  --step-medium: 40px;
  --step-large: 48px;
  --step-simple-size: var(--step-simple-medium);
  --step-simple-medium: 8px;
  --step-simple-large: 12px;
  --step-alert-success-icon: "";
  --step-alert-warning-icon: "";
  --step-alert-info-icon: "";
  --step-alert-danger-icon: "";
  display: flex;
  padding: var(--spacing-scale-base);
}
.br-step .step-progress {
  display: flex;
  flex-grow: 1;
}
.br-step.vertical {
  flex-direction: column;
}
.br-step.vertical .step-progress {
  flex-direction: column;
}
.br-step .step-progress-btn {
  align-items: center;
  background-color: transparent;
  border: 0;
  display: flex;
  flex-grow: 1;
  justify-content: center;
  min-height: var(--step-size);
  padding: 0;
  position: relative;
}
.br-step[data-label=left] .step-progress-btn {
  justify-content: end;
}
.br-step[data-label=right] .step-progress-btn {
  justify-content: start;
}
.br-step.vertical .step-progress-btn {
  justify-content: start;
}
.br-step.vertical[data-label=left] .step-progress-btn {
  justify-content: end;
}
.br-step.vertical[data-label=right] .step-progress-btn {
  justify-content: start;
}
.br-step .step-progress-btn::before {
  align-items: center;
  background-color: var(--background);
  border: var(--step-line) solid var(--interactive);
  border-radius: 50%;
  color: var(--interactive);
  content: attr(step-num);
  display: inline-flex;
  font-size: var(--font-size-scale-up-03);
  font-weight: var(--font-weight-medium);
  height: var(--step-size);
  justify-content: center;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: var(--step-size);
  z-index: 2;
}
.br-step .step-icon {
  align-items: center;
  color: var(--interactive);
  display: inline-flex;
  height: var(--step-size);
  justify-content: center;
  position: absolute;
  width: var(--step-size);
  z-index: 4;
}
.br-step .step-alert {
  align-items: center;
  border-radius: 50%;
  color: var(--color-dark);
  display: flex;
  height: var(--font-size-scale-up-04);
  justify-content: center;
  position: absolute;
  width: var(--font-size-scale-up-04);
  z-index: 4;
}
.br-step .step-alert::after {
  display: flex;
  font-family: "Font Awesome 5 Free";
  font-size: var(--font-size-scale-up-01);
  font-weight: 900;
}
.br-step[data-label=bottom] .step-progress-btn::before {
  top: 0;
}
.br-step[data-label=bottom] .step-icon {
  top: 0;
}
.br-step[data-label=bottom] .step-alert {
  transform: translate(calc(var(--step-size) * 0.5), calc(var(--step-size) * -0.75));
}
.br-step[data-label=top] .step-progress-btn::before {
  bottom: 0;
}
.br-step[data-label=top] .step-icon {
  bottom: 0;
}
.br-step[data-label=top] .step-alert {
  transform: translate(calc(var(--step-size) * 0.5), calc(var(--step-size) * 0.25));
}
.br-step[data-label=left] .step-progress-btn::before {
  left: auto;
  right: 0;
}
.br-step[data-label=left] .step-alert {
  transform: translate(calc(var(--step-size) * 0.4), calc(var(--step-size) * -0.25));
}
.br-step[data-label=right] .step-progress-btn::before {
  left: 0;
  right: auto;
}
.br-step[data-label=right] .step-alert {
  transform: translate(calc(var(--step-size) * 0.65), calc(var(--step-size) * -0.25));
}
.br-step.vertical .step-progress-btn::before {
  bottom: 0;
  left: auto;
  right: auto;
  top: 0;
}
.br-step.vertical[data-label=left] .step-progress-btn::before {
  right: 0;
}
.br-step.vertical[data-label=right] .step-progress-btn::before {
  left: 0;
}
.br-step .step-progress-btn::after {
  background-color: var(--interactive);
  content: "";
  display: block;
  height: var(--step-line);
  left: 0;
  position: absolute;
  right: 0;
  z-index: 1;
}
.br-step .step-progress-btn:first-child::after {
  left: 50%;
}
.br-step .step-progress-btn:last-child::after {
  right: 50%;
}
.br-step[data-label=bottom] .step-progress-btn::after {
  top: calc(var(--step-size) * 0.5);
}
.br-step[data-label=top] .step-progress-btn::after {
  bottom: calc(var(--step-size) * 0.5);
}
.br-step[data-label=left] .step-progress-btn::after {
  left: 0;
}
.br-step[data-label=left] .step-progress-btn:first-child::after {
  left: 100%;
}
.br-step[data-label=left] .step-progress-btn:last-child::after {
  right: 0;
}
.br-step[data-label=right] .step-progress-btn::after {
  right: 0;
}
.br-step[data-label=right] .step-progress-btn:first-child::after {
  left: 0;
}
.br-step[data-label=right] .step-progress-btn:last-child::after {
  right: 100%;
}
.br-step.vertical .step-progress-btn::after {
  bottom: 0;
  height: auto;
  left: auto;
  right: auto;
  top: 0;
  width: var(--step-line);
}
.br-step.vertical .step-progress-btn:first-child::after {
  left: auto;
  top: 50%;
}
.br-step.vertical .step-progress-btn:last-child::after {
  bottom: 50%;
  right: auto;
}
.br-step.vertical[data-label=left] .step-progress-btn::after {
  right: calc(var(--step-size) * 0.5);
}
.br-step.vertical[data-label=right] .step-progress-btn::after {
  left: calc(var(--step-size) * 0.5);
}
.br-step .step-info {
  color: var(--interactive);
  display: inline-block;
  font-size: var(--font-size-scale-up-01);
  font-weight: var(--font-weight-medium);
}
.br-step[data-label=bottom] .step-info {
  margin-top: var(--step-size);
  padding-top: var(--spacing-scale-2x);
}
.br-step[data-label=top] .step-info {
  margin-bottom: var(--step-size);
  padding-bottom: var(--spacing-scale-2x);
}
.br-step[data-label=left] .step-info {
  display: none;
}
@media (min-width: 576px) {
  .br-step[data-label=left] .step-info {
    background-color: var(--background);
    display: inline-block;
    margin-right: var(--step-size);
    padding: var(--spacing-scale-2x);
    position: relative;
    z-index: 3;
  }
}
.br-step[data-label=right] .step-info {
  display: none;
}
@media (min-width: 576px) {
  .br-step[data-label=right] .step-info {
    background-color: var(--background);
    display: inline-block;
    margin-left: var(--step-size);
    padding: var(--spacing-scale-2x);
    position: relative;
    z-index: 3;
  }
}
.br-step.vertical[data-label=left] .step-info {
  display: inline-block;
  margin-left: 0;
  margin-right: var(--step-size);
  padding: var(--spacing-scale-2x);
}
.br-step.vertical[data-label=right] .step-info {
  display: inline-block;
  margin-left: var(--step-size);
  margin-right: 0;
  padding: var(--spacing-scale-2x);
}
.br-step[data-type=void] .step-progress-btn::before {
  content: "";
  height: var(--step-empty);
  width: var(--step-empty);
}
.br-step[data-type=void] .step-info {
  height: 0;
  overflow: hidden;
  position: absolute;
  width: 0;
}
.br-step[data-type=simple] {
  align-items: center;
  display: flex;
  justify-content: center;
}
.br-step[data-type=simple] .step-progress {
  align-items: center;
  display: flex;
  justify-content: center;
}
.br-step[data-type=simple] .step-progress-btn {
  flex-grow: 0;
  width: 24px;
}
.br-step[data-type=simple] .step-progress-btn::before {
  background-color: var(--gray-20);
  border-color: var(--gray-20);
  content: "";
  height: var(--step-simple-size);
  width: var(--step-simple-size);
}
.br-step[data-type=simple] .step-progress-btn::after {
  content: none;
}
.br-step[data-type=simple] .step-info {
  height: 0;
  overflow: hidden;
  position: absolute;
  width: 0;
}
.br-step[data-type=text] {
  align-items: center;
  display: flex;
  justify-content: center;
}
.br-step[data-type=text] .step-progress {
  align-items: center;
  display: flex;
  justify-content: center;
}
.br-step[data-type=text] .step-progress-btn {
  height: 0;
  min-height: var(--font-size-scale-base);
  overflow: hidden;
  position: absolute;
  width: 0;
}
.br-step[data-type=text] .step-progress-btn::before {
  background-color: transparent;
  border: 0;
  color: var(--color);
  font-size: var(--font-size-scale-base);
  font-weight: var(--font-weight-regular);
  width: auto;
}
.br-step[data-type=text] .step-progress-btn::after {
  content: none;
}
.br-step[data-type=text] .step-info {
  height: 0;
  overflow: hidden;
  position: absolute;
  width: 0;
}
.br-step[scroll], .br-step[data-scroll] {
  overflow-x: auto;
  overflow-y: hidden;
}
.br-step[scroll]::-webkit-scrollbar, .br-step[data-scroll]::-webkit-scrollbar {
  height: var(--spacing-scale-base);
  width: var(--spacing-scale-base);
}
.br-step[scroll]::-webkit-scrollbar-track, .br-step[data-scroll]::-webkit-scrollbar-track {
  background: var(--gray-10);
}
.br-step[scroll]::-webkit-scrollbar-thumb, .br-step[data-scroll]::-webkit-scrollbar-thumb {
  background: var(--gray-30);
}
.br-step[scroll]:hover::-webkit-scrollbar-thumb, .br-step[data-scroll]:hover::-webkit-scrollbar-thumb {
  background: var(--gray-40);
}
.br-step[scroll] .step-progress-btn, .br-step[data-scroll] .step-progress-btn {
  min-width: 200px;
}
.br-step[scroll].vertical, .br-step[data-scroll].vertical {
  overflow-x: hidden;
  overflow-y: auto;
}
.br-step[scroll].vertical .step-progress-btn, .br-step[data-scroll].vertical .step-progress-btn {
  min-height: 100px;
  min-width: auto;
}
.br-step .step-progress-btn[data-alert=success] {
  color: var(--success);
}
.br-step .step-progress-btn[data-alert=success] .step-info {
  color: var(--success);
}
.br-step .step-progress-btn[data-alert=success] .step-alert {
  background-color: var(--success);
}
.br-step .step-progress-btn[data-alert=success] .step-alert::after {
  content: var(--step-alert-success-icon);
}
.br-step .step-progress-btn[data-alert=info] {
  color: var(--info);
}
.br-step .step-progress-btn[data-alert=info] .step-info {
  color: var(--info);
}
.br-step .step-progress-btn[data-alert=info] .step-alert {
  background-color: var(--info);
}
.br-step .step-progress-btn[data-alert=info] .step-alert::after {
  content: var(--step-alert-info-icon);
}
.br-step .step-progress-btn[data-alert=warning] {
  color: var(--color-light);
}
.br-step .step-progress-btn[data-alert=warning] .step-info {
  color: var(--color);
}
.br-step .step-progress-btn[data-alert=warning] .step-alert {
  background-color: var(--warning);
}
.br-step .step-progress-btn[data-alert=warning] .step-alert::after {
  content: var(--step-alert-warning-icon);
  color: var(--color-light);
}
.br-step .step-progress-btn[data-alert=danger] {
  color: var(--danger);
}
.br-step .step-progress-btn[data-alert=danger] .step-info {
  color: var(--danger);
}
.br-step .step-progress-btn[data-alert=danger] .step-alert {
  background-color: var(--danger);
}
.br-step .step-progress-btn[data-alert=danger] .step-alert::after {
  content: var(--step-alert-danger-icon);
}
.br-step .step-progress-btn.active::before, .br-step .step-progress-btn[active]::before {
  background-color: var(--active);
  border-color: var(--active);
  color: var(--background);
}
.br-step .step-progress-btn.active .step-icon, .br-step .step-progress-btn[active] .step-icon {
  color: var(--background);
}
.br-step .step-progress-btn:focus {
  outline: none;
}
.br-step .step-progress-btn.focus-visible::before, .br-step .step-progress-btn:focus-visible::before {
  outline-color: var(--focus);
  outline-offset: var(--focus-offset);
  outline-style: var(--focus-style);
  outline-width: var(--focus-width);
  z-index: 4;
}
.br-step .step-progress-btn:hover:not(:disabled)::before {
  background-image: linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)));
}
.br-step .step-progress-btn:disabled {
  opacity: 1;
}
.br-step .step-progress-btn:disabled::before {
  border-color: rgba(var(--interactive-rgb), var(--disabled));
}
.br-step .step-progress-btn:disabled .step-icon {
  color: rgba(var(--interactive-rgb), var(--disabled));
}
.br-step[data-type=void] .step-progress-btn.active .step-alert, .br-step[data-type=void] .step-progress-btn[active] .step-alert {
  border: var(--step-empty-border) solid var(--active);
  height: calc(var(--font-size-scale-up-04) + var(--step-empty-border));
  width: calc(var(--font-size-scale-up-04) + var(--step-empty-border));
}
.br-step[data-type=void] .step-progress-btn[data-alert].focus-visible::before, .br-step[data-type=void] .step-progress-btn[data-alert]:focus-visible::before {
  outline: none;
}
.br-step[data-type=void] .step-progress-btn[data-alert].focus-visible .step-alert, .br-step[data-type=void] .step-progress-btn[data-alert]:focus-visible .step-alert {
  outline-color: var(--focus);
  outline-offset: var(--focus-offset);
  outline-style: var(--focus-style);
  outline-width: var(--focus-width);
  z-index: 4;
}
.br-step[data-type=text] .step-progress-btn {
  cursor: default;
}
.br-step[data-type=text] .step-progress-btn.active, .br-step[data-type=text] .step-progress-btn[active] {
  height: auto;
  position: static;
  width: auto;
}
.br-step[data-type=text] .step-progress-btn.active::before, .br-step[data-type=text] .step-progress-btn[active]::before {
  background-color: transparent;
  border: 0;
  color: var(--color);
  position: static;
}
.br-step[data-type=text] .step-progress-btn:focus::before, .br-step[data-type=text] .step-progress-btn.focus-visible::before, .br-step[data-type=text] .step-progress-btn:focus-visible::before {
  outline: none;
}
.br-step[data-type=text] .step-progress-btn:hover::before {
  background-image: none;
}
.br-step.inverted, .br-step.dark-mode {
  --color: var(--color-dark);
  --color-rgb: var(--color-dark-rgb);
  --text-color: var(--color-dark);
  --interactive: var(--interactive-dark);
  --interactive-rgb: var(--interactive-dark-rgb);
  --visited: var(--visited-dark);
  --hover: var(--hover-dark);
  --pressed: var(--pressed-dark);
  --focus-color: var(--focus-color-dark);
  --focus: var(--focus-color-dark);
}
.br-step.inverted .step-progress-btn[data-alert=success], .br-step.dark-mode .step-progress-btn[data-alert=success] {
  color: var(--success-alternative);
}
.br-step.inverted .step-progress-btn[data-alert=success] .step-info, .br-step.dark-mode .step-progress-btn[data-alert=success] .step-info {
  color: var(--success-alternative);
}
.br-step.inverted .step-progress-btn[data-alert=success] .step-alert::after, .br-step.dark-mode .step-progress-btn[data-alert=success] .step-alert::after {
  content: var(--step-alert-success-icon);
}
.br-step.inverted .step-progress-btn[data-alert=info], .br-step.dark-mode .step-progress-btn[data-alert=info] {
  color: var(--info-alternative);
}
.br-step.inverted .step-progress-btn[data-alert=info] .step-info, .br-step.dark-mode .step-progress-btn[data-alert=info] .step-info {
  color: var(--info-alternative);
}
.br-step.inverted .step-progress-btn[data-alert=info] .step-alert::after, .br-step.dark-mode .step-progress-btn[data-alert=info] .step-alert::after {
  content: var(--step-alert-info-icon);
}
.br-step.inverted .step-progress-btn[data-alert=warning] .step-alert::after, .br-step.dark-mode .step-progress-btn[data-alert=warning] .step-alert::after {
  content: var(--step-alert-warning-icon);
}
.br-step.inverted .step-progress-btn[data-alert=danger], .br-step.dark-mode .step-progress-btn[data-alert=danger] {
  color: var(--danger-alternative);
}
.br-step.inverted .step-progress-btn[data-alert=danger] .step-info, .br-step.dark-mode .step-progress-btn[data-alert=danger] .step-info {
  color: var(--danger-alternative);
}
.br-step.inverted .step-progress-btn[data-alert=danger] .step-alert::after, .br-step.dark-mode .step-progress-btn[data-alert=danger] .step-alert::after {
  content: var(--step-alert-danger-icon);
}
.br-step.inverted .step-progress-btn.active, .br-step.inverted .step-progress-btn[active], .br-step.dark-mode .step-progress-btn.active, .br-step.dark-mode .step-progress-btn[active] {
  color: var(--color-dark);
}
.br-step.inverted .step-progress-btn.active::before, .br-step.inverted .step-progress-btn[active]::before, .br-step.dark-mode .step-progress-btn.active::before, .br-step.dark-mode .step-progress-btn[active]::before {
  background-color: var(--background-light);
  border-color: var(--background-light);
  color: var(--active);
}
.br-step.inverted .step-progress-btn.active .step-icon, .br-step.inverted .step-progress-btn[active] .step-icon, .br-step.dark-mode .step-progress-btn.active .step-icon, .br-step.dark-mode .step-progress-btn[active] .step-icon {
  color: var(--active);
}
.br-step.inverted[data-type=void] .step-progress-btn.active .step-alert, .br-step.inverted[data-type=void] .step-progress-btn[active] .step-alert, .br-step.dark-mode[data-type=void] .step-progress-btn.active .step-alert, .br-step.dark-mode[data-type=void] .step-progress-btn[active] .step-alert {
  border-color: var(--color-dark);
}
.br-step.inverted[data-type=text] .step-progress-btn::before, .br-step.dark-mode[data-type=text] .step-progress-btn::before {
  background-color: transparent;
  color: var(--color);
}

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