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

Padrão Digital de Governo

{"version":3,"file":"components/header/header.min.css","mappings":"AAKA,WCQE,6CAA8C,CAC9C,gDAAiD,CACjD,+CAAgD,CAChD,8CAA+C,CAE/C,4CAA6C,CAC7C,wBAAyB,CACzB,yBAA0B,CAC1B,wBAAyB,CAEzB,+CAAgD,CAEhD,qDAAsD,CAEtD,iCAAkC,CAClC,iCAAkC,CAClC,0BAA2B,CAC3B,iCAAkC,CAClC,+BAAgC,CAChC,gCAAiC,CAIjC,4BAA6B,CAC7B,mCAAoC,CAEpC,+BAAgC,CAChC,iBDlBF,CCoBE,4DAJA,YDZF,CCqBE,uBACE,wBDnBJ,CCsBE,0BACE,6BAA8B,CAC9B,sCDpBJ,CEnBE,yBFTF,WCqDI,6CDrBF,CACF,CC0BI,iBACE,4CDxBN,CCuBI,kBACE,6CDrBN,CCoBI,iBACE,4CDlBN,CCyBE,wBACE,kBAAmB,CACnB,YAAa,CACb,MAAO,CACP,UAAW,CACX,2BDvBJ,CCyBI,wDAEE,kCDvBN,CC0BI,oCACE,YDxBN,CC2BI,qCACE,kBAAmB,CACnB,YAAa,CACb,eAAgB,CAChB,eDzBN,CCuCM,6FACE,YDlCR,CE3DE,yBDoGE,wBACE,2CAA4C,CAC5C,QDtCJ,CC4CI,yEACE,aDvCN,CACF,CC8CE,2BACE,kBAAmB,CACnB,YAAa,CACb,wBD5CJ,CCgDQ,mDACE,aAAc,CACd,8BD9CV,CGvFE,idF0IU,wBD1CZ,CC8CQ,2DACE,aAAc,CACd,WAAY,CACZ,WAAY,CACZ,8BD5CV,CC8CU,qEACE,YD5CZ,CCkDQ,iEACE,YDhDV,CErFE,0BD2IQ,yDACE,YDnDV,CACF,CC0DM,wGACE,4BAA6B,CAC7B,SDvDR,CC0DM,wGACE,kBDvDR,CC0DM,4FACE,YDvDR,CC6DQ,iEACE,kBAAmB,CACnB,8CAA+C,CAC/C,4CAA6C,CAC7C,eAAgB,CAChB,kBAAmB,CACnB,qCAAsC,CACtC,mCAAoC,CACpC,0BAA2B,CAC3B,2BAA4B,CAC5B,UD3DV,CC6DU,uEACE,mCD3DZ,CCgEM,sDACE,SD9DR,CCiEM,gDACE,YD/DR,CCmEI,yCACE,qCDjEN,CCoEI,oCACE,0CDlEN,CCqEI,mCACE,kBAAmB,CACnB,YDnEN,CCqEM,4CACE,eAAgB,CAChB,OAAQ,CACR,QDnER,CC0FM,gLACE,YDlFR,CEpKE,yBDgQM,wGACE,4BAA6B,CAC7B,SAAU,CACV,ODxFR,CC2FM,wHACE,WDxFR,CACF,CEhLE,0BDkRM,oIACE,YD9FR,CCiGM,wGACE,eAAgB,CAChB,YAAa,CACb,oCAAqC,CACrC,eD9FR,CCgGQ,wHACE,YD7FV,CCiGM,wGACE,wCAAyC,CACzC,8CAA+C,CAC/C,8BAA+B,CAC/B,SD9FR,CCgGQ,0IACE,eAAgB,CAChB,oCD7FV,CCiGM,wHACE,UD9FR,CCmGM,sDACE,cDjGR,CCmGQ,iEACE,iCAAkC,CAClC,iBAAkB,CAClB,wBAAyB,CACzB,sBAAuB,CACvB,SAAU,CACV,wBDjGV,CCmGU,uEACE,YDjGZ,CCsGM,sDACE,sCDpGR,CCsGQ,uEACE,sCDpGV,CCyGI,kDACE,YDvGN,CACF,CC8GE,wBACE,kBAAmB,CACnB,YAAa,CACb,MD5GJ,CC+GM,0DACE,mCD7GR,CCiHI,sCACE,kBAAmB,CACnB,kCD/GN,CCkHI,yCACE,kBAAmB,CACnB,YAAa,CACb,qCAAsC,CACtC,eAAgB,CAChB,oCDhHN,CCsHM,2DACE,YDpHR,CE9PE,yBDyXE,wBACE,gDAAiD,CACjD,sBDxHJ,CC0HI,6CACE,cDxHN,CC2HI,qCACE,qCDzHN,CC4HI,yCACE,aD1HN,CACF,CE7QE,0BD6YE,wBACE,gDAAiD,CACjD,kDD7HJ,CC+HI,qCACE,aD7HN,CACF,CCoIE,4DAEE,kBAAmB,CACnB,4BAA6B,CAC7B,QAAS,CACT,YAAa,CACb,MAAO,CACP,iCAAkC,CAClC,iBAAkB,CAClB,OAAQ,CACR,KDnIJ,CCqII,gFACE,kBAAmB,CACnB,YAAa,CACb,MDnIN,CCqIM,4FACE,YDnIR,CCsIM,4FACE,wBDpIR,CCsIQ,oHACE,wBDpIV,CCwIM,kMAEE,gBAAiB,CACjB,WAAY,CACZ,SAAU,CACV,QDrIR,CCyII,wFACE,iDAAoD,CACpD,YDvIN,CC0II,0EACE,YDxIN,CC0IM,sGACE,mBDxIR,CC8II,0CACE,YD5IN,CEpUE,0BDsdE,0BACE,YAAa,CACb,SAAU,CACV,eD/IJ,CCkJM,+CACE,YDhJR,CCqJE,qBACE,eDnJJ,CACF,CCsJE,gDACE,YAAa,CACb,iBAAkB,CAClB,SDpJJ,CCyJE,mBACE,2CAA4C,CAC5C,4CDvJJ,CC0JM,0DACE,aDxJR,CE7VE,yBD2fI,iCACE,iBD3JN,CC8JI,+BACE,aD5JN,CC+JI,gCACE,2CAA4C,CAC5C,UD7JN,CCoKI,4EACE,YD/JN,CCkKI,mCACE,WAAY,CACZ,kCAAmC,CACnC,iBDhKN,CCmKI,kCACE,UDjKN,CCoKI,gCACE,gDDlKN,CCoKM,qDACE,YDlKR,CACF,CE7XE,0BDqiBI,gCACE,gDDrKN,CACF,CC2KE,wBACE,eAAgB,CAChB,KAAM,CAEN,8BDzKJ,CC2KI,4LAHA,wBDlKJ,CC4KI,yCACE,sCD1KN","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":[],"ignoreList":[],"sourceRoot":""}