{"version":3,"file":"components/menu/menu.min.css","mappings":"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","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 //
\n //
\n //
\n //
\n //
\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 //
\n //
\n //
\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 //
\n //
\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 //
\n //
\n //
\n //
\n //
\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 //
\n //
\n //
\n //
\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":[],"ignoreList":[],"sourceRoot":""}