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

Padrão Digital de Governo

{"version":3,"file":"components/header/header.css","mappings":"AAKA;ECQE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EAIA;EACA;EACA;EACA;EACA;ADlBF;ACoBE;;EAEE;ADlBJ;ACqBE;EACE;ADnBJ;ACsBE;EACE;EACA;ADpBJ;AEnBE;EFTF;ICqDI;EDrBF;AACF;AC0BI;EACE;ADxBN;ACuBI;EACE;ADrBN;ACoBI;EACE;ADlBN;ACyBE;EACE;EACA;EACA;EACA;EACA;ADvBJ;ACyBI;;EAEE;ADvBN;AC0BI;EACE;ADxBN;AC2BI;EACE;EACA;EACA;EACA;ADzBN;AC+BM;EACE;AD7BR;ACoCM;EACE;ADlCR;AE3DE;EDoGE;IACE;IACA;EDtCJ;ECwCI;IACE;EDtCN;ECyCI;IACE;EDvCN;AACF;AC8CE;EACE;EACA;EACA;AD5CJ;ACgDQ;EACE;EACA;AD9CV;AGvFE;;;;;;;EF0IU;AD1CZ;AC8CQ;EACE;EACA;EACA;EACA;AD5CV;AC8CU;EACE;AD5CZ;ACkDQ;EACE;ADhDV;AErFE;ED2IQ;IACE;EDnDV;AACF;AC0DM;;EACE;EACA;ADvDR;AC0DM;;EACE;ADvDR;AC0DM;;EACE;ADvDR;AC6DQ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AD3DV;AC6DU;EACE;AD3DZ;ACgEM;EACE;AD9DR;ACiEM;EACE;AD/DR;ACmEI;EACE;ADjEN;ACoEI;EACE;ADlEN;ACqEI;EACE;EACA;ADnEN;ACqEM;EACE;EACA;EACA;ADnER;AC0EM;EACE;ADxER;AC+EM;EACE;AD7ER;ACoFM;EACE;ADlFR;AEpKE;EDgQM;;IACE;IACA;IACA;EDxFR;EC2FM;;IACE;EDxFR;AACF;AEhLE;EDkRM;;IACE;ED9FR;ECiGM;;IACE;IACA;IACA;IACA;ED9FR;ECgGQ;;IACE;ED7FV;ECiGM;;IACE;IACA;IACA;IACA;ED9FR;ECgGQ;;IACE;IACA;ED7FV;ECiGM;;IACE;ED9FR;ECmGM;IACE;EDjGR;ECmGQ;IACE;IACA;IACA;IACA;IACA;IACA;EDjGV;ECmGU;IACE;EDjGZ;ECsGM;IACE;EDpGR;ECsGQ;IACE;EDpGV;ECyGI;IACE;EDvGN;AACF;AC8GE;EACE;EACA;EACA;AD5GJ;AC+GM;EACE;AD7GR;ACiHI;EACE;EACA;AD/GN;ACkHI;EACE;EACA;EACA;EACA;EACA;ADhHN;ACsHM;EACE;ADpHR;AE9PE;EDyXE;IACE;IACA;EDxHJ;EC0HI;IACE;EDxHN;EC2HI;IACE;EDzHN;EC4HI;IACE;ED1HN;AACF;AE7QE;ED6YE;IACE;IACA;ED7HJ;EC+HI;IACE;ED7HN;AACF;ACoIE;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ADnIJ;ACqII;EACE;EACA;EACA;ADnIN;ACqIM;EACE;ADnIR;ACsIM;EACE;ADpIR;ACsIQ;EACE;ADpIV;ACwIM;;;EAEE;EACA;EACA;EACA;ADrIR;ACyII;EACE;EACA;ADvIN;AC0II;EACE;ADxIN;AC0IM;EACE;ADxIR;AC8II;EACE;AD5IN;AEpUE;EDsdE;IACE;IACA;IACA;ED/IJ;ECkJM;IACE;EDhJR;ECqJE;IACE;EDnJJ;AACF;ACsJE;EACE;EACA;EACA;ADpJJ;ACyJE;EACE;EACA;ADvJJ;AC0JM;EACE;ADxJR;AE7VE;ED2fI;IACE;ED3JN;EC8JI;IACE;ED5JN;EC+JI;IACE;IACA;ED7JN;EC+JM;IACE;ED7JR;ECiKI;IACE;ED/JN;ECkKI;IACE;IACA;IACA;EDhKN;ECmKI;IACE;EDjKN;ECoKI;IACE;EDlKN;ECoKM;IACE;EDlKR;AACF;AE7XE;EDqiBI;IACE;EDrKN;AACF;AC2KE;EACE;EACA;EACA;EACA;ADzKJ;AC2KI;;;;EAIE;ADzKN;AC4KI;EACE;AD1KN,C","sources":["webpack://core/./src/components/header/_header.scss","webpack://core/./src/components/header/_mixins.scss","webpack://core/./src/partial/scss/mixins/_grid.scss","webpack://core/./src/partial/scss/mixins/_icons.scss"],"sourcesContent":["@use \"sass:math\";\n @import \"../../partial/scss/base\";\n \n@import \"mixins\";\n\n.#{$prefix}header {\n  @include header-configs;\n}\n","@mixin header-configs {\n  @include header-tokens;\n  @include header-default;\n  @include header-sizes;\n  @include header-logo;\n  @include header-actions;\n  @include header-menu;\n  @include header-search;\n  @include header-compact;\n  @include header-sticky;\n}\n\n@mixin header-tokens {\n  --header-padding: var(--header-padding-medium);\n  --header-padding-small: var(--spacing-scale-base);\n  --header-padding-medium: var(--spacing-scale-2x);\n  --header-padding-large: var(--spacing-scale-3x);\n\n  --header-logo-size: var(--header-logo-medium);\n  --header-logo-small: 16px;\n  --header-logo-medium: 24px;\n  --header-logo-large: 40px;\n\n  --header-title-size: var(--font-size-scale-base);\n\n  --header-subtitle-size: var(--font-size-scale-down-01);\n\n  --header-logo-desktop-width: 120px;\n  --header-logo-desktop-height: 48px;\n  --header-logo-compact: 60px;\n  --header-logo-compact-height: 32px;\n  --header-logo-mobile-width: 80px;\n  --header-logo-mobile-height: 40px;\n}\n\n@mixin header-default {\n  background: var(--background);\n  box-shadow: var(--surface-shadow-sm);\n  display: flex;\n  padding: var(--header-padding) 0;\n  position: relative;\n\n  .header-top,\n  .header-bottom {\n    display: flex;\n  }\n\n  .header-top {\n    justify-content: flex-end;\n  }\n\n  .header-bottom {\n    justify-content: space-between;\n    margin-top: var(--header-padding-small);\n  }\n\n  // Tablet\n  @include media-breakpoint-up(sm) {\n    --header-padding: var(--header-padding-medium);\n  }\n}\n\n@mixin header-sizes {\n  @each $size in \"small\", \"medium\", \"large\" {\n    &.#{$size} {\n      --header-padding: var(--header-padding-#{$size});\n    }\n  }\n}\n\n@mixin header-logo {\n  // Mobile\n  .header-logo {\n    align-items: center;\n    display: flex;\n    flex: 1;\n    float: left;\n    gap: var(--spacing-scale-2x);\n\n    img,\n    svg {\n      max-height: var(--header-logo-size);\n    }\n\n    .br-divider {\n      display: none;\n    }\n\n    .header-sign {\n      color: var(--color);\n      display: none;\n      font-weight: 500;\n      overflow: hidden;\n    }\n  }\n\n  &[data-no-logo] {\n    .header-logo {\n      img {\n        display: none;\n      }\n    }\n  }\n\n  &[data-no-sign] {\n    .header-logo {\n      .header-sign {\n        display: none;\n      }\n    }\n  }\n\n  // Tablet\n  @include media-breakpoint-up(sm) {\n    .header-logo {\n      --header-logo-size: var(--header-logo-large);\n      margin: 0;\n\n      .br-divider {\n        display: block;\n      }\n\n      .header-sign {\n        display: block;\n      }\n    }\n  }\n}\n\n@mixin header-actions {\n  // Mobile\n  .header-actions {\n    align-items: center;\n    display: flex;\n    justify-content: flex-end;\n\n    .dropdown {\n      &.show {\n        .#{$prefix}list {\n          display: block;\n          z-index: var(--z-index-layer-1);\n        }\n\n        .#{$prefix}button.active {\n          @include icon {\n            transform: rotate(180deg);\n          }\n        }\n\n        .#{$prefix}notification {\n          display: block;\n          right: -16px;\n          width: 100vw;\n          z-index: var(--z-index-layer-1);\n\n          div.close {\n            display: none;\n          }\n        }\n      }\n\n      &:not(.show) {\n        .#{$prefix}notification {\n          display: none;\n        }\n      }\n\n      @include media-breakpoint-down(md) {\n        &:not(.show) {\n          .#{$prefix}list {\n            display: none;\n          }\n        }\n      }\n    }\n\n    .header-links,\n    .header-functions {\n      .#{$prefix}list {\n        background: var(--background);\n        left: -4em;\n      }\n\n      .#{$prefix}item {\n        white-space: nowrap;\n      }\n\n      ul {\n        display: none;\n      }\n    }\n\n    .header-functions {\n      .#{$prefix}list {\n        .#{$prefix}button {\n          --button-size: auto;\n          --button-font-size: var(--font-size-scale-base);\n          --button-font-weight: var(--item-font-weight);\n          border-radius: 0;\n          color: var(--color);\n          font-size: var(--font-size-scale-base);\n          font-weight: var(--item-font-weight);\n          justify-content: flex-start;\n          padding: var(--item-padding);\n          width: 100%;\n\n          .text {\n            margin-left: var(--spacing-scale-2x);\n          }\n        }\n      }\n\n      .#{$prefix}item {\n        padding: 0;\n      }\n\n      ul {\n        display: none;\n      }\n    }\n\n    .header-login {\n      margin-left: var(--spacing-scale-base);\n    }\n\n    .sign-in {\n      --button-padding: 0 var(--spacing-scale-2x);\n    }\n\n    .avatar {\n      align-items: center;\n      display: flex;\n\n      .#{$prefix}list {\n        min-width: 200px;\n        right: 0;\n        top: 100%;\n      }\n    }\n  }\n\n  &[data-no-links] {\n    .header-actions {\n      .header-links {\n        display: none;\n      }\n    }\n  }\n\n  &[data-no-functions] {\n    .header-actions {\n      .header-functions {\n        display: none;\n      }\n    }\n  }\n\n  &[data-no-login] {\n    .header-actions {\n      .header-login {\n        display: none;\n      }\n    }\n  }\n\n  // Tablet\n  @include media-breakpoint-up(sm) {\n    .header-actions {\n      .header-links,\n      .header-functions {\n        .#{$prefix}list {\n          background: var(--background);\n          left: auto;\n          right: 0;\n        }\n\n        .#{$prefix}notification {\n          width: 100vw;\n        }\n      }\n    }\n  }\n\n  // Desktop\n  @include media-breakpoint-up(lg) {\n    .header-actions {\n      .header-links,\n      .header-functions {\n        [data-toggle=\"dropdown\"] {\n          display: none;\n        }\n\n        .#{$prefix}list {\n          box-shadow: none;\n          display: flex;\n          margin-right: var(--spacing-scale-2x);\n          position: static;\n\n          .header {\n            display: none;\n          }\n        }\n\n        .#{$prefix}item {\n          --focus-offset: var(--spacing-scale-half);\n          --interactive-rgb: var(--interactive-light-rgb);\n          color: var(--interactive-light);\n          padding: 0;\n\n          &:not(:last-child) {\n            border-bottom: 0;\n            margin-right: var(--spacing-scale-3x);\n          }\n        }\n\n        .#{$prefix}notification {\n          width: 50vw;\n        }\n      }\n\n      .header-functions {\n        .#{$prefix}list {\n          margin-right: 0;\n\n          .#{$prefix}button {\n            --button-size: var(--button-small);\n            border-radius: 50%;\n            color: var(--interactive);\n            justify-content: center;\n            padding: 0;\n            width: var(--button-size);\n\n            .text {\n              display: none;\n            }\n          }\n        }\n\n        .#{$prefix}item {\n          margin-right: var(--spacing-scale-base);\n\n          &:not(:last-child) {\n            margin-right: var(--spacing-scale-base);\n          }\n        }\n      }\n\n      .header-search-trigger {\n        display: none;\n      }\n    }\n  }\n}\n\n@mixin header-menu {\n  // Mobile\n  .header-menu {\n    align-items: center;\n    display: flex;\n    flex: 1;\n\n    .header-menu-trigger {\n      + .header-info {\n        margin-left: var(--spacing-scale-2x);\n      }\n    }\n\n    .header-title {\n      color: var(--color);\n      font-size: var(--header-title-size);\n    }\n\n    .header-subtitle {\n      color: var(--color);\n      display: none;\n      font-size: var(--header-subtitle-size);\n      font-weight: 500;\n      margin-top: var(--spacing-scale-half);\n    }\n  }\n\n  &[data-no-subtitle] {\n    .header-menu {\n      .header-subtitle {\n        display: none;\n      }\n    }\n  }\n\n  // Tablet\n  @include media-breakpoint-up(sm) {\n    .header-menu {\n      --header-title-size: var(--font-size-scale-up-02);\n      align-items: flex-start;\n\n      .header-menu-trigger {\n        margin-top: 3px;\n      }\n\n      .header-info {\n        padding-top: var(--spacing-scale-half);\n      }\n\n      .header-subtitle {\n        display: block;\n      }\n    }\n  }\n\n  // Desktop\n  @include media-breakpoint-up(lg) {\n    .header-menu {\n      --header-title-size: var(--font-size-scale-up-03);\n      --header-subtitle-size: var(--font-size-scale-base);\n\n      .header-info {\n        padding-top: 0;\n      }\n    }\n  }\n}\n\n@mixin header-search {\n  // Mobile\n  .header-search,\n  &.compact .header-search {\n    align-items: center;\n    background: var(--background);\n    bottom: 0;\n    display: none;\n    left: 0;\n    padding: 0 var(--spacing-scale-2x);\n    position: absolute;\n    right: 0;\n    top: 0;\n\n    .#{$prefix}input {\n      align-items: center;\n      display: flex;\n      flex: 1;\n\n      label {\n        display: none;\n      }\n\n      input {\n        border-color: transparent;\n\n        &:not(:focus) {\n          background: var(--gray-2);\n        }\n      }\n\n      .icon,\n      .#{$prefix}button {\n        --focus-offset: 0;\n        bottom: auto;\n        right: 4px;\n        top: auto;\n      }\n    }\n\n    .search-close {\n      --focus-offset: calc(var(--spacing-scale-half) * -1);\n      display: none;\n    }\n\n    &.active {\n      display: flex;\n\n      .search-close {\n        display: inline-flex;\n      }\n    }\n  }\n\n  &[data-no-search] {\n    .header-search {\n      display: none;\n    }\n  }\n\n  // Desktop\n  @include media-breakpoint-up(lg) {\n    .header-search {\n      display: flex;\n      padding: 0;\n      position: static;\n\n      &.active {\n        .search-close {\n          display: none;\n        }\n      }\n    }\n\n    .#{$prefix}input {\n      min-width: 385px;\n    }\n  }\n\n  .br-input.has-icon .br-button.circle {\n    margin-top: 0;\n    position: absolute;\n    right: 4px;\n  }\n}\n\n@mixin header-compact {\n  &.compact {\n    --header-logo-size: var(--header-logo-small);\n    --header-padding: var(--header-padding-small);\n\n    .header-actions {\n      .header-search-trigger {\n        display: block;\n      }\n    }\n\n    // Tablet\n    @include media-breakpoint-up(sm) {\n      .container-lg {\n        position: relative;\n      }\n\n      .header-top {\n        display: block;\n      }\n\n      .header-logo {\n        --header-logo-size: var(--header-logo-small);\n        float: left;\n\n        .br-divider {\n          display: none;\n        }\n      }\n\n      .header-sign {\n        display: none;\n      }\n\n      .header-actions {\n        float: right;\n        margin-top: var(--spacing-scale-2x);\n        position: relative;\n      }\n\n      .header-bottom {\n        clear: left;\n      }\n\n      .header-menu {\n        --header-title-size: var(--font-size-scale-up-01);\n\n        .header-menu-trigger {\n          margin-top: 0;\n        }\n      }\n    }\n\n    // Desktop\n    @include media-breakpoint-up(lg) {\n      .header-menu {\n        --header-title-size: var(--font-size-scale-up-02);\n      }\n    }\n  }\n}\n\n@mixin header-sticky {\n  &[data-sticky] {\n    position: sticky;\n    top: 0;\n    transition: all 150ms ease;\n    z-index: var(--z-index-layer-2);\n\n    .header-logo img,\n    .header-actions,\n    .header-menu-trigger,\n    .header-title {\n      transition: all 150ms ease;\n    }\n\n    .header-logo img {\n      margin-right: var(--spacing-scale-base);\n    }\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 icon-size($value) {\n  @include icon {\n    --icon-size: #{$value};\n  }\n}\n\n@mixin icon {\n  .svg-inline--fa,\n  .fa,\n  .fab,\n  .fad,\n  .fal,\n  .far,\n  .fas {\n    @content;\n  }\n}\n"],"names":[],"sourceRoot":""}