@govbr-ds/core/dist/components/signin/signin.css.map

Padrão Digital de Governo

{"version":3,"file":"components/signin/signin.css","mappings":"AAMA;;ECqBE;EACA;EACA;EACA;EACA;EACA;EAIA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EC9CA;EACA;EAIA;EACA;AFiBF;AC2BE;;EACE;ADxBJ;AGpBE;EFgDI;;IACE;EDxBN;EC0BI;;IACE;EDvBN;AACF;AG9BE;EFgDI;;IACE;EDdN;ECgBI;;IACE;EDbN;AACF;AGxCE;EFgDI;;IACE;EDJN;ECMI;;IACE;EDHN;AACF;AGlDE;EFgDI;;IACE;EDMN;ECJI;;IACE;EDON;AACF;ACDE;;;;EAGE;EACA;EACA;ADIJ;ACEI;;;;EAGE;ADCN;ACJI;;;;EAGE;ADON;ACVI;;;;EAGE;ADaN;AChBI;;;;EAGE;ADmBN;ACbE;;;;EAGE;EACA;EACA;ADgBJ;ACbE;;;;EAGE;EACA;ADgBJ;ACVI;;;;EAGE;EAEE;EACA;ADYR;AClBI;;;;EAGE;EAEE;EACA;ADoBR;AC1BI;;;;EAGE;EAKE;EACA;ADyBR;AClCI;;;;EAGE;EAEE;EACA;ADoCR;AC1BE;;EACE;AD6BJ;AC1BE;;EACE;AD6BJ;AI3JE;;EACE;AJ8JJ;AI3JE;;;EAEE;EACA;EACA;EACA;AJ8JJ;AKrKI;;EACE;ALwKN;AM1KI;;EACE;AN6KN;AC3CE;;;;EAGE;EACA;EACA;AD8CJ;AC3CE;;EACE;EACA;AD8CJ;AC3CM;;EACE;AD8CR;AC1CI;;EACE;EACA;AD6CN;ACtCM;;;;;EACE;AD4CR;ACrCE;;;;;EMtJA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ENkJE;ADiDJ;AC/CI;;;;;;;;;;;;;EAGE;EACA;EACA;AD2DN;ACxDI;;;;;;;;;;;;;EAGE;ADoEN;ACjEI;;;;;EACE;EACA;EACA;EACA;ADuEN;AE9PE;;EACE;AFiQJ;AE5PE;;;;;EAIE;AF+PJ,C","sources":["webpack://core/./src/components/signin/_signin.scss","webpack://core/./src/components/button/_mixins.scss","webpack://core/./src/components/signin/_mixins.scss","webpack://core/./src/partial/scss/mixins/_grid.scss","webpack://core/./src/partial/scss/mixins/_focus.scss","webpack://core/./src/partial/scss/mixins/_hover.scss","webpack://core/./src/partial/scss/mixins/_active.scss","webpack://core/./src/partial/scss/mixins/_states.scss"],"sourcesContent":["@use \"sass:math\";\n @import \"../../partial/scss/base\";\n \n@import \"mixins\";\n@import \"../button/mixins\";\n\n.#{$prefix}sign-in,\n.#{$prefix}button.sign-in {\n  @include button-configs;\n  @include signin-configs;\n}\n","@mixin button-configs {\n  @include button-tokens;\n  @include button-default;\n  @include button-block;\n  @include button-circle;\n  @include button-sizes;\n  @include button-emphasis;\n  @include button-colors;\n  @include button-states;\n  @include button-dark;\n}\n\n@mixin button-magicbutton {\n  --focus-offset: calc((var(--magic-support-size) - var(--magic-size)) * 0.5 + 4px);\n  --button-size: var(--magic-size);\n  background-color: var(--interactive-alternative);\n  color: var(--color-dark);\n  font-size: var(--font-size-scale-up-02);\n  font-weight: var(--font-weight-semi-bold);\n\n  &:not(:disabled) {\n    @include hover(\"color-dark\");\n    @include active(\"color-dark\");\n  }\n}\n\n@mixin button-tokens {\n  --button-radius: 100em;\n  --button-xsmall: 24px;\n  --button-small: 32px;\n  --button-medium: 40px;\n  --button-large: 48px;\n  --button-size: var(--button-medium);\n}\n\n@mixin button-default {\n  align-items: center;\n  background-color: transparent;\n  border: 0;\n  border-radius: var(--button-radius);\n  color: var(--interactive);\n  cursor: pointer;\n  display: inline-flex;\n  font-size: var(--font-size-scale-up-01);\n  font-weight: var(--font-weight-semi-bold);\n  height: var(--button-size);\n  justify-content: center;\n  overflow: hidden;\n  padding: 0 var(--spacing-scale-3x);\n  position: relative;\n  text-align: center;\n  vertical-align: middle;\n  white-space: nowrap;\n  width: auto;\n}\n\n@mixin button-block {\n  &.block {\n    width: 100%;\n  }\n  @each $breakpoint in \"sm\", \"md\", \"lg\", \"xl\" {\n    @include media-breakpoint-up(#{$breakpoint}) {\n      &.block-#{$breakpoint} {\n        width: 100%;\n      }\n      &.auto-#{$breakpoint} {\n        width: auto;\n      }\n    }\n  }\n}\n\n@mixin button-circle {\n  &.circle,\n  &[circle],\n  &.is-circle {\n    border-radius: 50%;\n    padding: 0;\n    width: var(--button-size);\n  }\n}\n\n@mixin button-sizes {\n  @each $size in \"xsmall\", \"small\", \"medium\", \"large\" {\n    &.#{$size},\n    &[#{$size}],\n    &.is-#{$size} {\n      --button-size: var(--button-#{$size});\n    }\n  }\n}\n\n@mixin button-emphasis {\n  &.primary,\n  &[primary],\n  &.is-primary {\n    --interactive-rgb: var(--color-dark-rgb);\n    background-color: var(--interactive-light);\n    color: var(--color-dark);\n  }\n\n  &.secondary,\n  &[secondary],\n  &.is-secondary {\n    background-color: var(--background-light);\n    border: 1px solid var(--interactive);\n  }\n}\n\n@mixin button-colors {\n  @each $color in \"danger\", \"success\", \"warning\", \"info\" {\n    &.#{$color},\n    &[#{$color}],\n    &.is-#{$color} {\n      background-color: var(--#{$color});\n      @if $color != \"warning\" {\n        --interactive-rgb: var(--color-dark-rgb);\n        color: var(--color-dark);\n      } @else {\n        --interactive-rgb: var(--color-light-rgb);\n        color: var(--color-light);\n      }\n    }\n  }\n}\n\n@mixin button-states {\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &:not(:disabled) {\n    --focus-offset: var(--spacing-scale-half);\n    @include focus;\n    @include hover;\n    @include active;\n  }\n\n  &.active,\n  &.is-active,\n  &[active] {\n    --hover: var(--hover-dark);\n    background-color: var(--active);\n    color: var(--color-dark);\n  }\n\n  &.loading {\n    color: transparent !important;\n    cursor: progress;\n\n    &:not(:disabled) {\n      &:hover {\n        background-image: none;\n      }\n    }\n\n    &::before {\n      border-color: var(--interactive) var(--interactive) transparent;\n      border-style: solid;\n    }\n\n    &.primary,\n    &.danger,\n    &.success,\n    &.info {\n      &::before {\n        border-color: var(--background) var(--background) transparent;\n      }\n    }\n  }\n}\n\n@mixin button-dark {\n  &.inverted,\n  &.is-inverted,\n  &[inverted],\n  &.dark-mode {\n    @include dark-mode;\n    color: var(--interactive-dark);\n\n    &.primary,\n    &[primary],\n    &.is-primary {\n      --interactive-rgb: var(--background-dark-rgb);\n      background-color: var(--interactive-dark);\n      color: var(--background-dark);\n    }\n\n    &.secondary,\n    &[secondary],\n    &.is-secondary {\n      background-color: var(--background-dark);\n    }\n\n    &.active {\n      --hover: var(--hover-light);\n      --interactive-rgb: var(--active-rgb);\n      background-color: var(--background-light);\n      color: var(--active);\n    }\n  }\n}\n\n@mixin button-dark-mode {\n  .#{$prefix}button {\n    &.primary,\n    &[primary],\n    &.is-primary {\n      @include light-mode($interactive-rgb: \"background-dark-rgb\");\n      background-color: var(--interactive-dark);\n      color: var(--background-dark);\n    }\n\n    &.secondary,\n    &[secondary],\n    &.is-secondary {\n      background-color: var(--background-dark);\n    }\n  }\n}\n","@mixin signin-configs {\n  @include signin-tokens;\n  @include signin-default;\n  @include signin-dark;\n}\n\n@mixin signin-tokens {\n  --background: var(--gray-2);\n  --sign-in-img: 20px;\n}\n\n@mixin signin-default {\n  background-color: var(--background);\n  padding: 0 var(--spacing-scale-2x);\n\n  img {\n    max-height: var(--sign-in-img);\n  }\n}\n\n@mixin signin-dark {\n  &.inverted,\n  &.is-inverted,\n  &[inverted],\n  &.dark-mode {\n    --background: var(--background-dark);\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","/// Aplica foco: feedback ao navegar por teclado no elemento\n/// @example scss - Uso prático\n///  a {\n///    @include focus;\n///  }\n@mixin focus {\n  &:focus {\n    outline: none;\n  }\n\n  &.focus-visible,\n  &:focus-visible {\n    outline-color: var(--focus);\n    outline-offset: var(--focus-offset);\n    outline-style: var(--focus-style);\n    outline-width: var(--focus-width);\n  }\n}\n\n/// Aplica foco tênue\n/// @example scss - Uso prático\n///  input {\n///    &:focus,\n///    &:focus-visible,\n///    &.focus-visible {\n///      @include focus-soft;\n///    }\n///  }\n@mixin focus-soft {\n  border-color: var(--focus) !important;\n  box-shadow: 0 0 0 var(--surface-width-md) var(--focus);\n  outline: none;\n}\n","/// Aplica hover: feedback ao colocar o cursor no elemento\n/// @param {String} $color [\"interactive\"] - Cor do hover **(Opcional)**\n/// @example scss - Uso prático\n///  a {\n///    @include hover;\n///  }\n@mixin hover($color: \"interactive\") {\n  &:not(:disabled) {\n    &:hover {\n      background-image: linear-gradient(\n        rgba(var(--#{$color}-rgb), var(--hover)),\n        rgba(var(--#{$color}-rgb), var(--hover))\n      );\n    }\n  }\n}\n","/// Aplica active: feedback ao clicar no elemento\n/// @example scss - Uso prático\n///  a {\n///    @include active;\n///  }\n@mixin active($color: \"interactive\") {\n  &:not(:disabled) {\n    &:active {\n      background-image: linear-gradient(\n        rgba(var(--#{$color}-rgb), var(--pressed)),\n        rgba(var(--#{$color}-rgb), var(--pressed))\n      );\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":[],"sourceRoot":""}