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

Padrão Digital de Governo

{"version":3,"file":"components/footer/footer.css","mappings":"AAAA,gBAAgB;ACiLhB;AACA;AACA;AACA;AAgBA;AD/LA;ECWE;EACA;EACA;EACA;EACA;EACA;EAIA;EACA;EACA;EACA;EACA;ADXF;ACaE;EACE;EACA;ADXJ;AAjBA;ECiCE;ECfA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AFGF;ACME;EClBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AFeF;ACAE;EAEE;ECHF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AFKF;ACRI;ECNF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AFiBF;ACbE;EACE;ADeJ;ACbI;EACE;EACA;ADeN;ACHE;EACE;EACA;EACA;ADKJ;ACHI;EACE;ADKN;ACEI;;EAEE;EACA;ADAN;AG9DE;EF2DE;;IAMI;IACA;EDEN;AACF;ACwCE;EACE;ADtCJ;ACwCI;EACE;EACA;EACA;EACA;ADtCN;ACyCI;EACE;ADvCN;AC0CI;EACE;ADxCN;AC2CI;EACE;EACA;ADzCN;AC8CI;EACE;EACA;AD5CN;ACkDE;EACE;ADhDJ;ACyDE;EAMA;AD5DF;ACgEE;EACE;AD9DJ;AA1HE;EACE;AA4HJ;AAzHM;;ECoHJ;ADSF;ACPE;;EACE;EACA;EACA;ADUJ;AGlIE;EHQI;ICiGF;IACA;ED6BF;AACF;AA5HM;ECuGJ;ADwBF;ACtBE;EACE;EACA;EACA;ADwBJ;AA9HQ;;EACE;AAiIV;AAhIU;;EACE;AAmIZ;AAlJE;EI2KA;EACA;AJtBF;AIwBE;EACE;AJtBJ;AKrKI;EACE;ALuKN;AI0BE;EACE;AJxBJ;AGrKE;EF0FE;IACE;IACA;ED8EJ;EC3EE;IACE;ED6EJ;AACF;AA7II;EACE;AA+IN,C","sources":["webpack://core/./src/components/footer/_footer.scss","webpack://core/./src/components/footer/_mixins.scss","webpack://core/./src/partial/scss/mixins/_states.scss","webpack://core/./src/partial/scss/mixins/_grid.scss","webpack://core/./src/components/item/_mixins.scss","webpack://core/./src/partial/scss/mixins/_hover.scss"],"sourcesContent":["@use \"sass:math\";\n @import \"../../partial/scss/base\";\n \n@import \"mixins\";\n\n.br-footer {\n  @include footer-configs;\n\n  /// Para utilizar em um shadow dom reutiliza os mixins abaixo\n  .#{$prefix}list {\n    --background: var(--background-dark);\n\n    &.horizontal {\n      .#{$prefix}item,\n      .#{$prefix}list .#{$prefix}item {\n        @include footer-item-2linemax;\n      }\n    }\n  }\n\n  .br-item {\n    &.horizontal {\n      .#{$prefix} {\n        @include footer-list-hide-suport;\n      }\n\n      .#{$prefix}item {\n        @include footer-item-2linemax;\n      }\n\n      .col,\n      [class*=\"col-\"] {\n        .#{$prefix}item.header.active {\n          border-bottom: 1px solid var(--border-color);\n          + .#{$prefix}list {\n            border-bottom: 1px solid var(--border-color);\n          }\n        }\n      }\n    }\n    @include item-center;\n    @include item-brackground-transparent;\n    @include footer-item-hide-suport;\n  }\n\n  &[inverted],\n  &.inverted {\n    .#{$prefix}list {\n      --background: var(--background-light);\n    }\n  }\n}\n","@import \"../item/mixins\";\n\n@mixin footer-configs {\n  @include footer-tokens;\n  @include footer-default;\n  @include footer-dark;\n  @include footer-light;\n  @include footer-logo;\n  @include footer-list;\n  @include footer-social;\n  @include footer-info;\n  @include footer-divider;\n  @include footer-secondary-content;\n}\n\n@mixin footer-tokens {\n  --footer-logo-height: 48px;\n  --footer-logo-width: 180px;\n  --footer-padding: var(--spacing-scale-6x) 0 0;\n  --footer-padding-bottom: 0 0 var(--spacing-scale-6x);\n  --footer-assigns-height: 46px;\n  --footer-assigns-width: 180px;\n}\n\n@mixin footer-default {\n  background: var(--background);\n  border-top: 1px solid var(--border-color);\n  color: var(--color);\n  display: block;\n  padding: var(--footer-padding);\n\n  &.no-divider {\n    border-top: none;\n    padding-top: 0;\n  }\n}\n\n@mixin footer-dark {\n  --background: var(--background-dark);\n  @include dark-mode;\n\n  .#{$prefix}item {\n    @include dark-mode;\n  }\n}\n\n@mixin footer-light {\n  &[inverted],\n  &.inverted {\n    --background: var(--background-light);\n    @include light-mode;\n\n    .#{$prefix}item {\n      @include light-mode;\n    }\n  }\n}\n\n@mixin footer-logo {\n  .logo {\n    padding: var(--footer-padding-bottom);\n\n    img {\n      max-height: var(--footer-logo-height);\n      max-width: var(--footer-logo-width);\n    }\n  }\n}\n\n@mixin footer-list {\n  .#{$prefix}list {\n    @include footer-list-config;\n  }\n}\n\n@mixin footer-list-config {\n  &.horizontal {\n    display: flex;\n    flex-wrap: wrap;\n    padding: var(--footer-padding-bottom);\n\n    .header {\n      width: 100%;\n    }\n\n    //  Para ser compatível com outros navegadores no\n    //  uso máximo de 2 linhas, foram adicionados os\n    //  comandos line-height e max-height.\n\n    .col,\n    [class*=\"col-\"] {\n      flex-grow: 0;\n      padding: 0;\n\n      @include media-breakpoint-down(sm) {\n        flex-basis: 100% !important;\n        max-width: 100%;\n      }\n    }\n  }\n}\n\n@mixin footer-item-hide-suport {\n  @include media-breakpoint-up(md) {\n    .support:last-child {\n      display: none;\n      pointer-events: none;\n    }\n\n    .content {\n      flex: 1;\n    }\n  }\n}\n\n@mixin footer-list-hide-suport {\n  // evita collapse no breakpoint\n  @include media-breakpoint-up(md) {\n    // .#{$prefix}list {\n    background-image: none;\n    max-height: 200em !important;\n    // }\n  }\n}\n\n//  Para ser compatível com outros navegadores no\n//  uso máximo de 2 linhas, foram adicionados os\n//  comandos line-height e max-height.\n@mixin footer-item-2linemax {\n  min-height: 4em;\n\n  .content {\n    height: auto;\n    line-height: 16px;\n    padding: 0 var(--spacing-scale-2x);\n  }\n}\n\n@mixin footer-social {\n  .social-network {\n    border: 0;\n\n    .social-network-title {\n      font-size: var(--font-size-scale-up-01);\n      font-weight: var(--font-weight-extra-bold);\n      margin-bottom: var(--spacing-scale-3x);\n      text-transform: uppercase;\n    }\n\n    a:not(:last-of-type) {\n      margin-right: var(--spacing-scale-2x);\n    }\n\n    a:hover {\n      background-image: none;\n    }\n\n    img {\n      max-height: var(--footer-assigns-height);\n      max-width: var(--footer-assigns-height);\n    }\n  }\n\n  .assigns {\n    img {\n      max-height: var(--footer-assigns-height);\n      max-width: var(--footer-assigns-width);\n    }\n  }\n}\n\n@mixin footer-info {\n  .info {\n    text-align: center;\n  }\n}\n\n/* ----------------------------------------------------------------------- */\n/* Código criado para ajustar os espaçamentos entre as áreas do footer     */\n/* Deve ser removido na V4                                                 */\n/* ----------------------------------------------------------------------- */\n@mixin footer-divider {\n  .#{$prefix}divider {\n    @include footer-divider-config;\n  }\n}\n\n@mixin footer-divider-config {\n  margin-top: 0 !important;\n}\n\n@mixin footer-secondary-content {\n  & .d-none.d-sm-block > .row.align-items-end.justify-content-between.py-5 {\n    padding: var(--footer-padding-bottom) !important;\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","// 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 item-configs {\n  @include item-tokens;\n  @include item-default;\n  @include item-checkbox;\n  @include item-colors;\n  @include item-states;\n  @include item-toggle;\n  @include item-datatoggle-list;\n}\n\n@mixin item-tokens {\n  --item-padding-x: var(--spacing-scale-2x);\n  --item-padding-y: var(--spacing-scale-base);\n  --item-padding: var(--item-padding-y) var(--item-padding-x);\n}\n\n@mixin item-default {\n  --focus-offset: calc(var(--focus-width) * -1);\n  border: 0;\n  color: var(--color);\n  display: block;\n  font-weight: var(--font-weight);\n  padding: var(--item-padding);\n  text-align: left;\n  width: 100%;\n\n  // Regras para Grid interna\n  .row {\n    margin-left: calc(-1 * var(--spacing-scale-base));\n    margin-right: calc(-1 * var(--spacing-scale-base));\n\n    .col,\n    [class*=\"col-\"] {\n      padding-left: var(--spacing-scale-base);\n      padding-right: var(--spacing-scale-base);\n    }\n  }\n\n  // Fix para floats internos\n  &::after {\n    clear: both;\n    content: \"\";\n    display: block;\n  }\n\n  // Transforma curso em cursor pointer quando br-item eh data-toggle\n  &[data-toggle] {\n    cursor: pointer;\n  }\n}\n\n// TODO: migrar customização do Select para o mixin abaixo\n@mixin item-checkbox {\n  &[data-toggle=\"selection\"] {\n    @include hover(\"color\");\n  }\n\n  & > .#{$prefix}checkbox,\n  & > .#{$prefix}radio {\n    &:not(.hidden-label) {\n      margin-bottom: calc(var(--item-padding-y) * -1);\n      margin-left: calc(var(--item-padding-x) * -1);\n      margin-right: calc(var(--item-padding-x) * -1);\n      margin-top: calc(var(--item-padding-y) * -1);\n\n      input {\n        + label {\n          padding-bottom: var(--item-padding-y);\n          padding-top: var(--item-padding-y);\n          top: 1px;\n          width: 100%;\n\n          &::before {\n            left: var(--item-padding-x);\n            top: calc(var(--item-padding-y) - 1px);\n          }\n\n          &:empty {\n            left: 0;\n            top: 1px;\n          }\n        }\n\n        &:hover:not(:disabled) {\n          + label::before {\n            background-image: none;\n          }\n        }\n      }\n    }\n  }\n\n  & > .#{$prefix}checkbox {\n    input:not(:indeterminate) {\n      + label {\n        min-height: calc(var(--checkbox-size) + var(--item-padding-y) * 2);\n\n        &:not(:empty) {\n          padding-left: calc(var(--checkbox-padding) + var(--checkbox-size) + var(--item-padding-x));\n        }\n\n        &::after {\n          left: calc(var(--item-padding-x) + 8px);\n          top: calc(var(--item-padding-y) + 4px);\n        }\n\n        &:empty {\n          min-height: var(--checkbox-size);\n\n          &::after {\n            left: 8px;\n            top: 4px;\n          }\n        }\n      }\n    }\n  }\n\n  .#{$prefix}radio {\n    input {\n      + label {\n        min-height: calc(var(--radio-size) + var(--item-padding-y) * 2);\n        padding-left: calc(var(--spacing-scale-base) + var(--radio-size) + var(--item-padding-x));\n\n        &::after {\n          left: calc(var(--item-padding-x) + var(--radio-bullet-position));\n          top: calc(var(--item-padding-y) + var(--radio-bullet-position) - 1px);\n        }\n\n        &:empty {\n          min-height: var(--radio-size);\n\n          &::after {\n            left: var(--radio-bullet-position);\n            top: var(--radio-bullet-position);\n          }\n        }\n      }\n    }\n  }\n}\n\n@mixin item-colors {\n  @each $key in map-keys($br-colors) {\n    &.#{$key} {\n      @include colorize($key);\n    }\n  }\n}\n\n@mixin item-states {\n  // Selecionado\n  &.selected {\n    @include dark-mode;\n    background-color: var(--selected);\n  }\n\n  // Ativo\n  &.active {\n    @include dark-mode;\n    background-color: var(--active);\n    color: var(--color);\n  }\n\n  // Dark-mode\n  &.inverted,\n  &.dark-mode {\n    @include dark-mode;\n\n    &.active {\n      @include light-mode($interactive-rgb: \"active-rgb\");\n      background-color: var(--background-light);\n      color: var(--active);\n    }\n  }\n}\n\n// TODO: Este mixin ainda é necessário?\n@mixin item-toggle {\n  &[data-toggle] {\n    @include hover(\"color\");\n\n    .content {\n      i {\n        color: var(--interactive);\n      }\n    }\n  }\n}\n\n@mixin item-center {\n  align-items: center;\n  display: flex;\n\n  .content {\n    flex: 1;\n  }\n\n  @include hover;\n}\n\n@mixin item-brackground-transparent {\n  &.active {\n    background: transparent;\n  }\n}\n\n@mixin item-datatoggle-list {\n  // Necessario devido a implementacao do fontawasome seguindo os padroes do projeto. Antes usava-se <i></i>\n  // Css ajusta o alinhamento do item  com o icone quando este faz parte de uma lista.\n  .content {\n    align-items: center;\n    display: flex;\n  }\n\n  // Necessario devido a implementacao do fontawasome seguindo os padroes do projeto. Antes usava-se <i></i>\n  // Css ajusta o tamanho do icone de seta quando item faz parte de uma lista.\n  [class*=\"fa-\"] {\n    height: 16px;\n    width: 14px !important;\n  }\n\n  // Necessario devido a implementacao do fontawasome seguindo os padroes do projeto. Antes usava-se <i></i>\n  // Atribuir a cor azul para seta datatoggle\n  .toogle-icon-interactive {\n    color: var(--interactive);\n  }\n}\n\n@mixin item-align-horizontal-list {\n  flex: 1;\n  height: auto;\n  min-height: 56px;\n  width: auto;\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"],"names":[],"ignoreList":[],"sourceRoot":""}