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

Padrão Digital de Governo

{"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  // <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":""}