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

Padrão Digital de Governo

{"version":3,"file":"components/step/step.min.css","mappings":"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","sources":["webpack://core/./src/components/step/_step.scss","webpack://core/./src/components/step/_mixins.scss","webpack://core/./src/partial/scss/mixins/_grid.scss","webpack://core/./src/partial/scss/mixins/_scrollbar.scss","webpack://core/./src/partial/scss/mixins/_states.scss"],"sourcesContent":["@use \"sass:math\";\n @import \"../../partial/scss/base\";\n \n@import \"mixins\";\n\n.#{$prefix}step {\n  @include step-configs;\n}\n","@mixin step-configs {\n  @include step-tokens;\n  @include step-default;\n  @include step-button;\n  @include step-indicator;\n  @include step-lines;\n  @include step-label;\n  @include step-empty;\n  @include step-simple;\n  @include step-text;\n  @include step-scroll;\n  @include step-states;\n  @include step-dark;\n}\n\n@mixin step-tokens {\n  --step-empty: 16px;\n  --step-empty-border: 4px;\n  --step-line: 1px;\n  --step-size: var(--step-medium);\n  --step-small: 32px;\n  --step-medium: 40px;\n  --step-large: 48px;\n  --step-simple-size: var(--step-simple-medium);\n  --step-simple-medium: 8px;\n  --step-simple-large: 12px;\n  --step-alert-success-icon: \"\\f00c\";\n  --step-alert-warning-icon: \"\\f071\";\n  --step-alert-info-icon: \"\\f12a\";\n  --step-alert-danger-icon: \"\\f00d\";\n}\n\n@mixin step-default {\n  display: flex;\n  padding: var(--spacing-scale-base);\n\n  .step-progress {\n    display: flex;\n    flex-grow: 1;\n  }\n  // Step vertical\n  &.vertical {\n    flex-direction: column;\n\n    .step-progress {\n      flex-direction: column;\n    }\n  }\n}\n\n@mixin step-button {\n  .step-progress-btn {\n    align-items: center;\n    background-color: transparent;\n    border: 0;\n    display: flex;\n    flex-grow: 1;\n    justify-content: center;\n    min-height: var(--step-size);\n    padding: 0;\n    position: relative;\n  }\n\n  &[data-label=\"left\"] {\n    .step-progress-btn {\n      justify-content: end;\n    }\n  }\n\n  &[data-label=\"right\"] {\n    .step-progress-btn {\n      justify-content: start;\n    }\n  }\n  // Vertical\n  &.vertical {\n    .step-progress-btn {\n      justify-content: start;\n    }\n\n    &[data-label=\"left\"] {\n      .step-progress-btn {\n        justify-content: end;\n      }\n    }\n\n    &[data-label=\"right\"] {\n      .step-progress-btn {\n        justify-content: start;\n      }\n    }\n  }\n}\n\n@mixin step-indicator {\n  // Indicador numérico\n  .step-progress-btn {\n    &::before {\n      align-items: center;\n      background-color: var(--background);\n      border: var(--step-line) solid var(--interactive);\n      border-radius: 50%;\n      color: var(--interactive);\n      content: attr(step-num);\n      display: inline-flex;\n      font-size: var(--font-size-scale-up-03);\n      font-weight: var(--font-weight-medium);\n      height: var(--step-size);\n      justify-content: center;\n      left: 0;\n      margin: auto;\n      position: absolute;\n      right: 0;\n      width: var(--step-size);\n      z-index: 2;\n    }\n  }\n  // Indicador icônico\n  .step-icon {\n    align-items: center;\n    color: var(--interactive);\n    display: inline-flex;\n    height: var(--step-size);\n    justify-content: center;\n    position: absolute;\n    width: var(--step-size);\n    z-index: 4;\n  }\n  // Ícone de alerta\n  .step-alert {\n    align-items: center;\n    border-radius: 50%;\n    color: var(--color-dark);\n    display: flex;\n    height: var(--font-size-scale-up-04);\n    justify-content: center;\n    position: absolute;\n    width: var(--font-size-scale-up-04);\n    z-index: 4;\n\n    &::after {\n      display: flex;\n      font-family: \"Font Awesome 5 Free\";\n      font-size: var(--font-size-scale-up-01);\n      font-weight: 900;\n    }\n  }\n  // Indicador acima\n  &[data-label=\"bottom\"] {\n    .step-progress-btn {\n      &::before {\n        top: 0;\n      }\n    }\n\n    .step-icon {\n      top: 0;\n    }\n\n    .step-alert {\n      transform: translate(calc(var(--step-size) * 0.5), calc(var(--step-size) * -0.75));\n    }\n  }\n  // Indicador abaixo\n  &[data-label=\"top\"] {\n    .step-progress-btn {\n      &::before {\n        bottom: 0;\n      }\n    }\n\n    .step-icon {\n      bottom: 0;\n    }\n\n    .step-alert {\n      transform: translate(calc(var(--step-size) * 0.5), calc(var(--step-size) * 0.25));\n    }\n  }\n  // Indicador esquerda\n  &[data-label=\"left\"] {\n    .step-progress-btn {\n      &::before {\n        left: auto;\n        right: 0;\n      }\n    }\n\n    .step-alert {\n      transform: translate(calc(var(--step-size) * 0.4), calc(var(--step-size) * -0.25));\n    }\n  }\n  // Indicador direita\n  &[data-label=\"right\"] {\n    .step-progress-btn {\n      &::before {\n        left: 0;\n        right: auto;\n      }\n    }\n\n    .step-alert {\n      transform: translate(calc(var(--step-size) * 0.65), calc(var(--step-size) * -0.25));\n    }\n  }\n  // Indicador vertical\n  &.vertical {\n    .step-progress-btn {\n      &::before {\n        bottom: 0;\n        left: auto;\n        right: auto;\n        top: 0;\n      }\n    }\n    // Indicador esquerda\n    &[data-label=\"left\"] {\n      .step-progress-btn {\n        &::before {\n          right: 0;\n        }\n      }\n    }\n    // Indicador direita\n    &[data-label=\"right\"] {\n      .step-progress-btn {\n        &::before {\n          left: 0;\n        }\n      }\n    }\n  }\n}\n\n@mixin step-lines {\n  // Linha do tempo\n  .step-progress-btn {\n    &::after {\n      background-color: var(--interactive);\n      content: \"\";\n      display: block;\n      height: var(--step-line);\n      left: 0;\n      position: absolute;\n      right: 0;\n      z-index: 1;\n    }\n\n    &:first-child {\n      &::after {\n        left: 50%;\n      }\n    }\n\n    &:last-child {\n      &::after {\n        right: 50%;\n      }\n    }\n  }\n  // Linha do tempo acima\n  &[data-label=\"bottom\"] {\n    .step-progress-btn {\n      &::after {\n        top: calc(var(--step-size) * 0.5);\n      }\n    }\n  }\n  // Linha do tempo abaixo\n  &[data-label=\"top\"] {\n    .step-progress-btn {\n      &::after {\n        bottom: calc(var(--step-size) * 0.5);\n      }\n    }\n  }\n  // Linha do tempo esquerda\n  &[data-label=\"left\"] {\n    .step-progress-btn {\n      &::after {\n        left: 0;\n      }\n\n      &:first-child {\n        &::after {\n          left: 100%;\n        }\n      }\n\n      &:last-child {\n        &::after {\n          right: 0;\n        }\n      }\n    }\n  }\n  // Linha do tempo direita\n  &[data-label=\"right\"] {\n    .step-progress-btn {\n      &::after {\n        right: 0;\n      }\n\n      &:first-child {\n        &::after {\n          left: 0;\n        }\n      }\n\n      &:last-child {\n        &::after {\n          right: 100%;\n        }\n      }\n    }\n  }\n  // Linha do tempo vertical\n  &.vertical {\n    .step-progress-btn {\n      &::after {\n        bottom: 0;\n        height: auto;\n        left: auto;\n        right: auto;\n        top: 0;\n        width: var(--step-line);\n      }\n\n      &:first-child {\n        &::after {\n          left: auto;\n          top: 50%;\n        }\n      }\n\n      &:last-child {\n        &::after {\n          bottom: 50%;\n          right: auto;\n        }\n      }\n    }\n    // Linha do tempo esquerda\n    &[data-label=\"left\"] {\n      .step-progress-btn {\n        &::after {\n          right: calc(var(--step-size) * 0.5);\n        }\n      }\n    }\n    // Linha do tempo direita\n    &[data-label=\"right\"] {\n      .step-progress-btn {\n        &::after {\n          left: calc(var(--step-size) * 0.5);\n        }\n      }\n    }\n  }\n}\n\n@mixin step-label {\n  // Rótulo\n  .step-info {\n    color: var(--interactive);\n    display: inline-block;\n    font-size: var(--font-size-scale-up-01);\n    font-weight: var(--font-weight-medium);\n  }\n  // Rótulo acima\n  &[data-label=\"bottom\"] {\n    .step-info {\n      margin-top: var(--step-size);\n      padding-top: var(--spacing-scale-2x);\n    }\n  }\n  // Rótulo abaixo\n  &[data-label=\"top\"] {\n    .step-info {\n      margin-bottom: var(--step-size);\n      padding-bottom: var(--spacing-scale-2x);\n    }\n  }\n  // Rótulo esquerda\n  &[data-label=\"left\"] {\n    .step-info {\n      display: none;\n    }\n    @include media-breakpoint-up(sm) {\n      .step-info {\n        background-color: var(--background);\n        display: inline-block;\n        margin-right: var(--step-size);\n        padding: var(--spacing-scale-2x);\n        position: relative;\n        z-index: 3;\n      }\n    }\n  }\n  // Rótulo direita\n  &[data-label=\"right\"] {\n    .step-info {\n      display: none;\n    }\n    @include media-breakpoint-up(sm) {\n      .step-info {\n        background-color: var(--background);\n        display: inline-block;\n        margin-left: var(--step-size);\n        padding: var(--spacing-scale-2x);\n        position: relative;\n        z-index: 3;\n      }\n    }\n  }\n  // Rótulo vertical\n  &.vertical {\n    // Rótulo esquerda\n    &[data-label=\"left\"] {\n      .step-info {\n        display: inline-block;\n        margin-left: 0;\n        margin-right: var(--step-size);\n        padding: var(--spacing-scale-2x);\n      }\n    }\n    // Rótulo direita\n    &[data-label=\"right\"] {\n      .step-info {\n        display: inline-block;\n        margin-left: var(--step-size);\n        margin-right: 0;\n        padding: var(--spacing-scale-2x);\n      }\n    }\n  }\n}\n\n@mixin step-empty {\n  // Step vazio\n  &[data-type=\"void\"] {\n    .step-progress-btn {\n      &::before {\n        content: \"\";\n        height: var(--step-empty);\n        width: var(--step-empty);\n      }\n    }\n\n    .step-info {\n      height: 0;\n      overflow: hidden;\n      position: absolute;\n      width: 0;\n    }\n  }\n}\n\n@mixin step-simple {\n  // Step simples\n  &[data-type=\"simple\"] {\n    align-items: center;\n    display: flex;\n    justify-content: center;\n\n    .step-progress {\n      align-items: center;\n      display: flex;\n      justify-content: center;\n    }\n\n    .step-progress-btn {\n      flex-grow: 0;\n      width: 24px;\n\n      &::before {\n        background-color: var(--gray-20);\n        border-color: var(--gray-20);\n        content: \"\";\n        height: var(--step-simple-size);\n        width: var(--step-simple-size);\n      }\n\n      &::after {\n        content: none;\n      }\n    }\n\n    .step-info {\n      height: 0;\n      overflow: hidden;\n      position: absolute;\n      width: 0;\n    }\n  }\n}\n\n@mixin step-text {\n  // Step textual\n  &[data-type=\"text\"] {\n    align-items: center;\n    display: flex;\n    justify-content: center;\n\n    .step-progress {\n      align-items: center;\n      display: flex;\n      justify-content: center;\n    }\n\n    .step-progress-btn {\n      height: 0;\n      min-height: var(--font-size-scale-base);\n      overflow: hidden;\n      position: absolute;\n      width: 0;\n\n      &::before {\n        background-color: transparent;\n        border: 0;\n        color: var(--color);\n        font-size: var(--font-size-scale-base);\n        font-weight: var(--font-weight-regular);\n        width: auto;\n      }\n\n      &::after {\n        content: none;\n      }\n    }\n\n    .step-info {\n      height: 0;\n      overflow: hidden;\n      position: absolute;\n      width: 0;\n    }\n  }\n}\n\n@mixin step-scroll {\n  &[scroll],\n  &[data-scroll] {\n    overflow-x: auto;\n    overflow-y: hidden;\n    @include scrollbar;\n\n    .step-progress-btn {\n      min-width: 200px;\n    }\n\n    &.vertical {\n      overflow-x: hidden;\n      overflow-y: auto;\n\n      .step-progress-btn {\n        min-height: 100px;\n        min-width: auto;\n      }\n    }\n  }\n}\n\n@mixin step-states {\n  .step-progress-btn {\n    // Concluído, Info, Alerta, Erro\n    @each $state in \"success\", \"info\", \"warning\", \"danger\" {\n      &[data-alert=\"#{$state}\"] {\n        @if $state == \"warning\" {\n          color: var(--color-light);\n        } @else {\n          color: var(--#{$state});\n        }\n\n        .step-info {\n          @if $state == \"warning\" {\n            color: var(--color);\n          } @else {\n            color: var(--#{$state});\n          }\n        }\n\n        .step-alert {\n          background-color: var(--#{$state});\n\n          &::after {\n            content: var(--step-alert-#{$state}-icon);\n            @if $state == \"warning\" {\n              color: var(--color-light);\n            }\n          }\n        }\n      }\n    }\n    // Ativo\n    &.active,\n    &[active] {\n      &::before {\n        background-color: var(--active);\n        border-color: var(--active);\n        color: var(--background);\n      }\n\n      .step-icon {\n        color: var(--background);\n      }\n    }\n    // Focus\n    &:focus {\n      outline: none;\n    }\n\n    &.focus-visible,\n    &:focus-visible {\n      &::before {\n        outline-color: var(--focus);\n        outline-offset: var(--focus-offset);\n        outline-style: var(--focus-style);\n        outline-width: var(--focus-width);\n        z-index: 4;\n      }\n    }\n    // Hover\n    &:hover:not(:disabled) {\n      &::before {\n        background-image: linear-gradient(\n          rgba(var(--interactive-rgb), var(--hover)),\n          rgba(var(--interactive-rgb), var(--hover))\n        );\n      }\n    }\n\n    &:disabled {\n      opacity: 1;\n\n      &::before {\n        border-color: rgba(var(--interactive-rgb), var(--disabled));\n      }\n\n      .step-icon {\n        color: rgba(var(--interactive-rgb), var(--disabled));\n      }\n    }\n  }\n  // Step vazio\n  &[data-type=\"void\"] {\n    .step-progress-btn {\n      // Ativo\n      &.active,\n      &[active] {\n        .step-alert {\n          border: var(--step-empty-border) solid var(--active);\n          height: calc(var(--font-size-scale-up-04) + var(--step-empty-border));\n          width: calc(var(--font-size-scale-up-04) + var(--step-empty-border));\n        }\n      }\n      // Focus\n      &[data-alert] {\n        &.focus-visible,\n        &:focus-visible {\n          &::before {\n            outline: none;\n          }\n\n          .step-alert {\n            outline-color: var(--focus);\n            outline-offset: var(--focus-offset);\n            outline-style: var(--focus-style);\n            outline-width: var(--focus-width);\n            z-index: 4;\n          }\n        }\n      }\n    }\n  }\n  // Step textual\n  &[data-type=\"text\"] {\n    .step-progress-btn {\n      cursor: default;\n\n      &.active,\n      &[active] {\n        height: auto;\n        position: static;\n        width: auto;\n\n        &::before {\n          background-color: transparent;\n          border: 0;\n          color: var(--color);\n          position: static;\n        }\n      }\n\n      &:focus,\n      &.focus-visible,\n      &:focus-visible {\n        &::before {\n          outline: none;\n        }\n      }\n\n      &:hover {\n        &::before {\n          background-image: none;\n        }\n      }\n    }\n  }\n}\n\n@mixin step-dark-mode {\n  @include dark-mode;\n\n  .step-progress-btn {\n    // Concluído, Info, Alerta, Erro\n    @each $state in \"success\", \"info\", \"warning\", \"danger\" {\n      &[data-alert=\"#{$state}\"] {\n        @if $state != \"warning\" {\n          color: var(--#{$state}-alternative);\n        }\n\n        .step-info {\n          @if $state != \"warning\" {\n            color: var(--#{$state}-alternative);\n          }\n        }\n\n        .step-alert {\n          &::after {\n            content: var(--step-alert-#{$state}-icon);\n          }\n        }\n      }\n    }\n    // Ativo\n    &.active,\n    &[active] {\n      color: var(--color-dark);\n\n      &::before {\n        background-color: var(--background-light);\n        border-color: var(--background-light);\n        color: var(--active);\n      }\n\n      .step-icon {\n        color: var(--active);\n      }\n    }\n  }\n\n  &[data-type=\"void\"] {\n    .step-progress-btn {\n      // Ativo\n      &.active,\n      &[active] {\n        .step-alert {\n          border-color: var(--color-dark);\n        }\n      }\n    }\n  }\n\n  &[data-type=\"text\"] {\n    .step-progress-btn {\n      &::before {\n        background-color: transparent;\n        color: var(--color);\n      }\n    }\n  }\n}\n\n@mixin step-dark {\n  &.inverted,\n  &.dark-mode {\n    @include step-dark-mode;\n  }\n}\n","// Dependência para calcular divisão\n@use \"sass:math\";\n\n/// Aplica os estilos **a partir** do breakpoint informado\n/// @group 02\n/// @param {String} $breakpoint - **Usar**: xs, sm, md, lg ou xl\n/// @example scss - Aplicar estilos em **lg** e **xl**\n///  .#{$prefix}cookiebar {\n///    @include media-breakpoint-up(lg) {\n///      ...\n///    }\n///  }\n@mixin media-breakpoint-up($breakpoint) {\n  $size: map-get($breakpoints, $breakpoint);\n  @media (min-width: $size) {\n    @content;\n  }\n}\n\n/// Aplica os estilos **até** o breakpoint informado\n/// @group 02\n/// @param {String} $breakpoint - **Usar**: xs, sm, md, lg ou xl\n/// @example scss - Aplicar estilos em **xs**, **sm** e **md**\n///  .#{$prefix}cookiebar {\n///    @include media-breakpoint-down(md) {\n///      ...\n///    }\n///  }\n@mixin media-breakpoint-down($breakpoint) {\n  $value: map-get($breakpoints, next-breakpoint($breakpoint)) - 1px;\n  @media (max-width: $value) {\n    @content;\n  }\n}\n\n/// Cria containers e linhas da Grid\n/// @group 03\n/// @param {String} $breakpoint - **Usar**: xs, sm, md, lg ou xl\n/// @example scss - Uso prático\n///  @include make-grid(lg);\n@mixin make-grid($breakpoint) {\n  $breakpoint-name: map-get($breakpoints-name, $breakpoint);\n  $breakpoint-width: map-get($breakpoints, $breakpoint);\n  @media (min-width: $breakpoint-width) {\n    .container,\n    .container-sm,\n    .container-md,\n    .container-lg,\n    .container-xl,\n    .container-fluid {\n      --grid-margin: var(--grid-#{$breakpoint-name}-margin);\n    }\n\n    .row {\n      --grid-gutter: var(--grid-#{$breakpoint-name}-gutter);\n    }\n    @if $breakpoint == \"sm\" {\n      .container,\n      .container-sm {\n        --grid-maxwidth: calc(var(--grid-breakpoint-#{$breakpoint}) - var(--grid-#{$breakpoint-name}-margin));\n      }\n    }\n    @if $breakpoint == \"md\" {\n      .container,\n      .container-sm,\n      .container-md {\n        --grid-maxwidth: calc(var(--grid-breakpoint-#{$breakpoint}) - var(--grid-#{$breakpoint-name}-margin));\n      }\n    }\n    @if $breakpoint == \"lg\" {\n      .container,\n      .container-sm,\n      .container-md,\n      .container-lg {\n        --grid-maxwidth: calc(var(--grid-breakpoint-#{$breakpoint}) - var(--grid-#{$breakpoint-name}-margin));\n      }\n    }\n    @if $breakpoint == \"xl\" {\n      .container,\n      .container-sm,\n      .container-md,\n      .container-lg,\n      .container-xl {\n        --grid-maxwidth: calc(var(--grid-breakpoint-#{$breakpoint}) - var(--grid-#{$breakpoint-name}-margin));\n      }\n    }\n    @include make-columns($grid-desktop-columns, $breakpoint);\n  }\n}\n\n/// Cria as colunas da Grid.\n/// @group 03\n/// @param {Number} $columns - **Usar**: 4, 8 ou 12\n/// @param {String} $breakpoint [null] - **Usar**: xs, sm, md, lg ou xl **(Opcional)**\n/// @example scss - Criar classes até 4 colunas\n///  @include make-columns(4);\n/// @example scss - Criar classes até 8 colunas para breakpoint **sm**\n///  @include make-columns(8, \"sm\");\n@mixin make-columns($columns, $breakpoint: null) {\n  .col#{if($breakpoint, \"-#{$breakpoint}\", \"\")} {\n    flex: 1 0 0%;\n    min-width: math.div(1, $columns) * 100%;\n  }\n  .col#{if($breakpoint, \"-#{$breakpoint}\", \"\")}-auto {\n    flex: 0 0 auto;\n    width: auto;\n  }\n  @for $i from 1 through $columns {\n    .col#{if($breakpoint, \"-#{$breakpoint}\", \"\")}-#{$i} {\n      flex-basis: math.div($i, $columns) * 100%;\n      max-width: math.div($i, $columns) * 100%;\n    }\n  }\n}\n","@mixin scrollbar {\n  &::-webkit-scrollbar {\n    height: var(--spacing-scale-base);\n    width: var(--spacing-scale-base);\n  }\n\n  &::-webkit-scrollbar-track {\n    background: var(--gray-10);\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background: var(--gray-30);\n  }\n\n  &:hover {\n    &::-webkit-scrollbar-thumb {\n      background: var(--gray-40);\n    }\n  }\n}\n","// Desabilitado\n@mixin disabled {\n  cursor: not-allowed;\n  opacity: var(--disabled);\n\n  * {\n    pointer-events: none;\n  }\n}\n\n// Dark mode\n@mixin dark-mode(\n  $color: \"color-dark\",\n  $color-rgb: \"color-dark-rgb\",\n  $text-color: $color,\n  $interactive: \"interactive-dark\",\n  $interactive-rgb: \"interactive-dark-rgb\",\n  $visited: \"visited-dark\",\n  $hover: \"hover-dark\",\n  $pressed: \"pressed-dark\",\n  $focus-color: \"focus-color-dark\",\n  $focus: $focus-color\n) {\n  --color: var(--#{$color});\n  --color-rgb: var(--#{$color-rgb});\n  --text-color: var(--#{$text-color});\n  --interactive: var(--#{$interactive});\n  --interactive-rgb: var(--#{$interactive-rgb});\n  --visited: var(--#{$visited});\n  --hover: var(--#{$hover});\n  --pressed: var(--#{$pressed});\n  --focus-color: var(--#{$focus-color});\n  --focus: var(--#{$focus});\n}\n@mixin light-mode(\n  $color: \"color-light\",\n  $color-rgb: \"color-light-rgb\",\n  $text-color: $color,\n  $interactive: \"interactive-light\",\n  $interactive-rgb: \"interactive-light-rgb\",\n  $visited: \"visited-light\",\n  $hover: \"hover-light\",\n  $pressed: \"pressed-light\",\n  $focus-color: \"focus-color-light\",\n  $focus: $focus-color\n) {\n  --color: var(--#{$color});\n  --color-rgb: var(--#{$color-rgb});\n  --text-color: var(--#{$text-color});\n  --interactive: var(--#{$interactive});\n  --interactive-rgb: var(--#{$interactive-rgb});\n  --visited: var(--#{$visited});\n  --hover: var(--#{$hover});\n  --pressed: var(--#{$pressed});\n  --focus-color: var(--#{$focus-color});\n  --focus: var(--#{$focus});\n}\n"],"names":[],"ignoreList":[],"sourceRoot":""}