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

Padrão Digital de Governo

{"version":3,"file":"components/menu/menu.css","mappings":"AAKA;ECUE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ADbF;ACuBE;EACE;ADrBJ;ACwBE;EACE;EACA;EACA;EACA;EACA;ADtBJ;ACyBE;EACE;EACA;EACA;EACA;EACA;ADvBJ;AC4BI;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AD1BN;AC6BI;EACE;EACA;EACA;EACA;AD3BN;AC8BI;EACE;AD5BN;ACuCE;EACE;EACA;EACA;EACA;ADrCJ;ACuCI;EACE;EACA;EACA;EACA;ADrCN;ACuCM;EACE;ADrCR;ACuCQ;EACE;ADrCV;ACoDI;;EAEE;EACA;ADlDN;ACqDI;EACE;ADnDN;ACuDI;EACE;ADrDN;AC4DU;EACE;AD1DZ;ACiEQ;EACE;AD/DV;ACiEU;EACE;AD/DZ;ACuEM;EACE;ADrER;ACyEQ;EACE;ADvEV;AC8EM;EACE;EACA;AD5ER;ACiFU;EACE;AD/EZ;AExFE;;;;;;;ED4KY;AD3Ed;ACgFQ;EACE;AD9EV;ACiGI;EACE;AD/FN;ACkGI;EACE;EACA;EACA;EACA;EACA;ADhGN;ACmGI;EACE;EACA;ADjGN;ACmGM;EACE;ADjGR;ACmGQ;EACE;ADjGV;AGvHI;EACE;AHyHN;ACqGI;;EAEE;ADnGN;ACqGM;;EACE;EACA;ADlGR;ACqGM;;EACE;ADlGR;ACsGI;EACE;ADpGN;ACgHE;EACE;EACA;EACA;EACA;AD9GJ;ACgHI;EACE;AD9GN;ACiHI;EACE;AD/GN;ACmHE;EACE;ADjHJ;ACuHI;EACE;EACA;ADrHN;ACyHM;EACE;EACA;EACA;EACA;EACA;ADvHR;ACyHQ;EACE;ADvHV;AC0HQ;EACE;ADxHV;AE3KE;;;;;;;EDsSU;ADlHZ;ACuHM;EACE;ADrHR;ACwHM;EACE;ADtHR;AC+HM;EACE;AD7HR;AC4HM;EACE;AD1HR;ACyHM;EACE;ADvHR;ACgII;;EAEE;AD9HN;AIhME;EH2TA;IAOI;ED9HJ;AACF;AIrME;EHyUI;;IAEE;EDjIN;ECoII;IACE;EDlIN;ECqII;IACE;EDnIN;ECsII;IACE;EDpIN;ECuII;IACE;EDrIN;EC0IM;IACE;EDxIR;AACF;ACgJE;EACE;EACA;AD9IJ;ACiJM;EACE;AD/IR;ACkJM;EACE;ADhJR;ACoJI;EACE;EACA;EACA;EACA;EACA;ADlJN;ACoJM;EACE;ADlJR;ACsJI;EACE;EACA;EACA;ADpJN;ACuJI;EACE;ADrJN;ACwJI;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ADtJN;ACwJM;EACE;EACA;ADtJR;AE5QE;;;;;;;EDqaQ;ADhJV;ACoJM;EACE;EACA;ADlJR;AIlRE;EH4aI;IACE;IACA;EDvJN;EC0JI;IACE;EDxJN;EC2JI;IACE;IACA;EDzJN;AACF;ACkKI;EACE;ADhKN;ACoKI;EIldF;EACA;ALiTF;AK/SE;EACE;ALiTJ;ACsKM;EACE;EACA;EACA;ADpKR;ACsKQ;EACE;ADpKV;AGvTI;EACE;AHyTN,C","sources":["webpack://core/./src/components/menu/_menu.scss","webpack://core/./src/components/menu/_mixins.scss","webpack://core/./src/partial/scss/mixins/_icons.scss","webpack://core/./src/partial/scss/mixins/_hover.scss","webpack://core/./src/partial/scss/mixins/_grid.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}menu {\n  @include menu-configs;\n}\n","@mixin menu-configs {\n  @include menu-tokens;\n  @include menu-default;\n  @include menu-header;\n  @include menu-body;\n  @include menu-footer;\n  @include menu-items;\n  @include menu-side-menu;\n  @include menu-items-sizes;\n  @include menu-push;\n  @include menu-contextual;\n  @include menu-states;\n}\n\n@mixin menu-tokens {\n  --menu-zindex: var(--z-index-layer-3);\n  --menu-background-submenu: var(--gray-2);\n  --menu-logo: 40px;\n  --menu-item-ng: var(--menu-item-medium);\n  --menu-item-padding: var(--menu-item-medium);\n  --menu-item-small: var(--spacing-scale-base);\n  --menu-item-medium: var(--spacing-scale-2x);\n  --menu-item-large: var(--spacing-scale-3x);\n}\n\n@mixin menu-default {\n  // A base é aplicado no seguinte html:\n  // <div class=\"br-menu\">\n  //   <div class=\"menu-trigger\">\n  //   <div class=\"menu-container\">\n  //     <div class=\"menu-scrim\">\n  //     <div class=\"menu-panel\">\n  .menu-container {\n    display: none;\n  }\n\n  .menu-scrim {\n    background: var(--surface-overlay-scrim);\n    bottom: 0;\n    left: 0;\n    right: 0;\n    top: 0;\n  }\n\n  .menu-panel {\n    --focus-offset: calc(var(--spacing-scale-half) * -1);\n    background: var(--background);\n    display: flex;\n    flex-direction: column;\n    height: 100vh;\n  }\n\n  // Menu ativo\n  &.active {\n    .menu-container {\n      bottom: 0;\n      display: flex;\n      left: 0;\n      position: fixed;\n      right: 0;\n      top: 0;\n      z-index: var(--menu-zindex);\n    }\n\n    .menu-panel {\n      flex: 1;\n      overflow: auto;\n      position: relative;\n      z-index: calc(var(--menu-zindex) + 1);\n    }\n\n    .menu-scrim {\n      position: absolute;\n    }\n  }\n}\n\n@mixin menu-header {\n  // O header é aplicado no seguinte html:\n  // <div class=\"menu-header\">\n  //   <div class=\"menu-close\">\n  //   <div class=\"menu-title\">\n\n  .menu-header {\n    align-items: center;\n    border-bottom: 1px solid var(--border-color);\n    display: flex;\n    padding: var(--spacing-scale-base) var(--spacing-scale-base);\n\n    .menu-title {\n      align-items: center;\n      display: flex;\n      flex: 1;\n      margin-left: var(--spacing-scale-base);\n\n      img {\n        max-height: var(--menu-logo);\n\n        + * {\n          margin-left: var(--spacing-scale-base);\n        }\n      }\n    }\n  }\n}\n\n@mixin menu-body {\n  // O header é aplicado no seguinte html:\n  // <div class=\"menu-body\">\n  //   <div class=\"folder\">\n\n  // stylelint-disable no-descending-specificity\n  .menu-body {\n    // Resetar estilos\n    ul,\n    li {\n      margin: 0;\n      padding: 0;\n    }\n\n    ul {\n      list-style: none;\n    }\n\n    // Aplica separador nos itens de primeiro nível\n    > .divider {\n      border-bottom: 1px solid var(--border-color);\n    }\n\n    .menu-folder {\n      // Aplica separador entre pastas\n      > ul {\n        > li:last-child {\n          > .menu-item {\n            border-bottom: 1px solid var(--border-color);\n          }\n        }\n      }\n\n      // Cor de fundo para nível 2\n      > .menu-item {\n        + ul {\n          background: var(--menu-background-submenu);\n\n          .menu-item {\n            padding-left: var(--spacing-scale-5x);\n          }\n        }\n      }\n    }\n\n    // Aplica separador no menu dropdown de primeiro nível\n    .drop-menu {\n      > .menu-item {\n        border-bottom: 1px solid var(--border-color);\n      }\n\n      &.active {\n        > .menu-item {\n          border-bottom: 0;\n        }\n      }\n    }\n\n    // Estilo padrão para menu dropdown e side menu\n    .drop-menu {\n      > ul {\n        background: var(--menu-background-submenu);\n        display: none;\n      }\n\n      &.active {\n        > .menu-item {\n          &:not(:hover) {\n            background-color: var(--background);\n          }\n\n          .support {\n            @include icon {\n              transform: rotate(180deg);\n            }\n          }\n        }\n\n        > ul {\n          display: block;\n        }\n      }\n    }\n  }\n\n  // stylelint-enable no-descending-specificity\n}\n\n@mixin menu-footer {\n  // O header é aplicado no seguinte html:\n  // <div class=\"menu-footer\">\n  //   <div class=\"menu-logos\">\n  //   <div class=\"menu-links\">\n  //   <div class=\"menu-social\">\n  //   <div class=\"menu-info\">\n\n  .menu-footer {\n    // Adiciona borda automaticamente entre as sessões\n    > *:not(:last-child) {\n      border-bottom: 1px solid var(--border-color);\n    }\n\n    .menu-logos {\n      column-gap: var(--spacing-scale-2x);\n      display: grid;\n      grid-template-columns: 1fr 1fr 1fr;\n      padding: var(--spacing-scale-base) var(--spacing-scale-5x);\n      row-gap: var(--spacing-scale-2x);\n    }\n\n    .menu-links {\n      --focus-offset: var(--spacing-scale-half);\n      padding: var(--spacing-scale-2x) var(--spacing-scale-5x);\n\n      a {\n        display: block;\n\n        &:not(:last-child) {\n          margin-bottom: var(--spacing-scale-2x);\n        }\n\n        @include hover;\n      }\n    }\n    // FIXME: .menu-social e .sharegroup estão depreciados serão retirados na proxima versão\n    .social-network,\n    .menu-social {\n      padding: var(--spacing-scale-base) var(--spacing-scale-5x);\n\n      .social-network-title {\n        font-weight: var(--font-weight-semi-bold);\n        margin-bottom: var(--spacing-scale-half);\n      }\n\n      .sharegroup {\n        display: flex;\n      }\n    }\n\n    .menu-info {\n      padding: var(--spacing-scale-2x);\n    }\n  }\n}\n\n@mixin menu-items {\n  // O header é aplicado no seguinte html:\n  // <div class=\"menu-item\">\n  //   <div class=\"icon\">\n  //   <div class=\"content\">\n  //   <div class=\"support\">\n\n  .menu-item {\n    --focus-offset: calc(var(--spacing-scale-half) * -1);\n    background: transparent;\n    display: flex;\n    padding: var(--menu-item-padding) var(--spacing-scale-2x);\n\n    .icon {\n      margin-right: var(--spacing-scale-2x);\n    }\n\n    .content {\n      flex: 1;\n    }\n  }\n\n  a.menu-item {\n    color: var(--interactive);\n  }\n}\n\n@mixin menu-side-menu {\n  .side-menu {\n    > ul {\n      background: var(--menu-background-submenu);\n      display: none;\n    }\n\n    &.active {\n      > .menu-item {\n        --interactive: var(--active);\n        --interactive-rgb: var(--active-rgb);\n        background-color: var(--background);\n        flex-direction: row-reverse;\n        font-weight: var(--font-weight-semi-bold);\n\n        .icon {\n          margin-right: 0;\n        }\n\n        .support {\n          margin-right: var(--spacing-scale-2x);\n\n          @include icon {\n            transform: rotate(180deg);\n          }\n        }\n      }\n\n      > ul {\n        display: block;\n      }\n\n      .menu-item {\n        padding-left: var(--spacing-scale-2x) !important;\n      }\n    }\n  }\n}\n\n@mixin menu-items-sizes {\n  @each $size in \"small\", \"medium\", \"large\" {\n    &.#{$size} {\n      .menu-item {\n        --menu-item-padding: var(--menu-item-#{$size});\n      }\n    }\n  }\n}\n\n@mixin menu-push {\n  // Mobile First\n  &.push {\n    .menu-trigger,\n    .menu-scrim {\n      display: none;\n    }\n\n    @include media-breakpoint-up(sm) {\n      --menu-zindex: var(--z-index-layer-0);\n    }\n  }\n\n  // Tablet\n  @include media-breakpoint-up(sm) {\n    &.push {\n      .menu-header,\n      .menu-footer {\n        display: none;\n      }\n\n      .menu-header[data-visible=\"true\"] {\n        display: flex;\n      }\n\n      .menu-footer[data-visible=\"true\"] {\n        display: block;\n      }\n\n      .menu-panel {\n        height: auto;\n      }\n\n      .menu-scrim {\n        display: none;\n      }\n\n      // Menu ativo\n      &.active {\n        .menu-container {\n          position: static;\n        }\n      }\n    }\n  }\n}\n\n@mixin menu-contextual {\n  // Mobile First\n  &.contextual {\n    --menu-zindex: calc(var(--z-index-layer-3) - 10);\n    overflow: auto;\n\n    .menu-body .menu-folder {\n      > .menu-item + ul .menu-item {\n        padding-left: var(--spacing-scale-2x);\n      }\n\n      > ul > li:last-child > .menu-item {\n        border-bottom: 0;\n      }\n    }\n\n    .menu-trigger {\n      bottom: 0;\n      left: 0;\n      position: fixed;\n      right: 0;\n      z-index: calc(var(--menu-zindex) - 1);\n\n      .#{$prefix}button {\n        --button-radius: 0;\n      }\n    }\n\n    .menu-container {\n      display: none;\n      flex-direction: column-reverse;\n      position: static;\n    }\n\n    .menu-panel {\n      height: auto;\n    }\n\n    &.active {\n      bottom: 0;\n      display: flex;\n      flex-direction: column;\n      height: 100vh;\n      justify-content: flex-end;\n      left: 0;\n      position: fixed;\n      right: 0;\n      z-index: var(--menu-zindex);\n\n      .menu-trigger {\n        position: relative;\n        z-index: calc(var(--menu-zindex) + 1);\n\n        @include icon {\n          transform: rotate(180deg);\n        }\n      }\n\n      .menu-container {\n        display: flex;\n        overflow: auto;\n      }\n    }\n  }\n\n  // Tablet\n  @include media-breakpoint-up(md) {\n    &.contextual {\n      .menu-trigger {\n        display: none;\n        position: absolute;\n      }\n\n      .menu-container {\n        display: block;\n      }\n\n      &.active {\n        height: 100%;\n        position: absolute;\n      }\n    }\n  }\n}\n\n@mixin menu-states {\n  // Aplicáveis para item texto e link\n  .menu-item {\n    // Escondido\n    &[hidden] {\n      display: none;\n    }\n\n    // Desativado\n    &:disabled {\n      @include disabled;\n    }\n  }\n\n  // Aplicável somente para links\n  a.menu-item {\n    &:not(:disabled) {\n      // Ativo\n      &.active {\n        --interactive: var(--color-dark);\n        --interactive-rgb: var(--color-dark-rgb);\n        background-color: var(--active);\n\n        &:focus {\n          outline-color: var(--focus-color-dark);\n        }\n      }\n\n      // Hover\n      @include hover;\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","/// 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","// 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","// 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":""}