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

Padrão Digital de Governo

{"version":3,"file":"components/breadcrumb/breadcrumb.min.css","mappings":"AAKA,eCGE,mBAAoB,CACpB,wCAAyC,CACzC,qCAAsC,CACtC,kCAAmC,CACnC,iBDNF,CC0EE,2BACE,kBAAmB,CACnB,QAAS,CACT,YAAa,CACb,eAAgB,CAChB,QAAS,CACT,eAAgB,CAChB,iBAAkB,CAClB,uCDxEJ,CCAE,sBACE,kBAAmB,CACnB,YAAa,CACb,8BDEJ,CCAI,4BACE,yBAA0B,CAC1B,6BAA8B,CAC9B,iBDEN,CCCI,wBACE,eAAgB,CAChB,eAAgB,CAChB,oBAAqB,CACrB,sBAAuB,CACvB,kBDCN,CCGM,sCACE,qCAAsC,CACtC,4DAA6D,CAC7D,kBDDR,CEhCE,iMACE,YFkCJ,CE/BE,kbAEE,0BAA2B,CAC3B,kCAAmC,CACnC,gCAAiC,CACjC,gCFgCJ,CCME,wCACE,kCDJJ,CCOE,gDAEE,iDAAoD,CACpD,sCDLJ,CGzBE,yBFiCE,wCACE,aAAc,CACd,eAAgB,CAChB,eAAgB,CAChB,sBAAuB,CACvB,kBDLJ,CCQE,yFAGE,YDNJ,CACF,CCwBE,wBACE,4BAA6B,CAC7B,qBAAsB,CACtB,iBAAkB,CAClB,2BAA4B,CAC5B,8BDtBJ,CCyBE,wBACE,kBAAmB,CACnB,cAAe,CACf,SDvBJ,CCyBI,yCACE,2CDvBN,CC0BI,0BACE,0BAA2B,CAC3B,kCAAmC,CACnC,aAAc,CACd,+BDxBN,CG5DE,yBFyFI,iCACE,YD1BN,CC8BE,wBACE,8BAA+B,CAC/B,WD5BJ,CACF","sources":["webpack://core/./src/components/breadcrumb/_breadcrumb.scss","webpack://core/./src/components/breadcrumb/_mixins.scss","webpack://core/./src/partial/scss/mixins/_focus.scss","webpack://core/./src/partial/scss/mixins/_grid.scss"],"sourcesContent":["@use \"sass:math\";\n @import \"../../partial/scss/base\";\n \n@import \"mixins\";\n\n.#{$prefix}breadcrumb {\n  @include breadcrumb-configs;\n}\n","@mixin breadcrumb-configs {\n  @include breadcrumb-default;\n  @include breadcrumb-list;\n  @include breadcrumb-crumb;\n  @include breadcrumb-card;\n}\n\n@mixin breadcrumb-default {\n  display: inline-grid;\n  font-size: var(--font-size-scale-down-01);\n  font-weight: var(--font-weight-medium);\n  min-height: var(--spacing-scale-7x);\n  position: relative;\n}\n\n@mixin breadcrumb-crumb {\n  .crumb {\n    align-items: center;\n    display: flex;\n    height: var(--spacing-scale-5x);\n\n    .icon {\n      color: var(--border-color);\n      font-size: var(--icon-size-sm);\n      margin-right: -6px;\n    }\n\n    a {\n      max-width: 180px;\n      overflow: hidden;\n      text-decoration: none;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    &:last-child {\n      span {\n        font-weight: var(--font-weight-medium);\n        margin: 0 var(--spacing-scale-2x) 0 var(--spacing-scale-base);\n        white-space: nowrap;\n      }\n    }\n\n    &[data-active=\"active\"] {\n      span {\n        &:focus,\n        &:focus-visible,\n        &.focus-visible {\n          @include focus;\n        }\n      }\n    }\n  }\n  .crumb a:not(.#{$prefix}button) {\n    margin: 0 var(--spacing-scale-base);\n  }\n\n  .home,\n  .menu-mobil {\n    --focus-offset: calc(var(--spacing-scale-half) * -1);\n    margin: 0 var(--spacing-scale-base) 0 0;\n  }\n  @include media-breakpoint-down(sm) {\n    .crumb a:not(.#{$prefix}button) {\n      display: block;\n      max-width: 180px;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .menu-mobil,\n    .menu-mobil + .crumb,\n    .home + .crumb {\n      display: flex;\n    }\n  }\n}\n\n@mixin breadcrumb-list {\n  .crumb-list {\n    align-items: center;\n    border: 0;\n    display: flex;\n    list-style: none;\n    margin: 0;\n    overflow-x: auto;\n    overflow-y: hidden;\n    padding: 0 0 0 var(--spacing-scale-base);\n  }\n}\n\n@mixin breadcrumb-card {\n  .br-card {\n    left: var(--spacing-scale-9x);\n    min-width: fit-content;\n    position: absolute;\n    top: var(--spacing-scale-7x);\n    z-index: var(--z-index-layer-1);\n  }\n\n  .br-item {\n    color: var(--color);\n    cursor: pointer;\n    padding: 0;\n\n    &:not(:last-child) {\n      border-bottom: 1px solid var(--border-color);\n    }\n\n    a {\n      --interactive: var(--color);\n      --interactive-rgb: var(--color-rgb);\n      display: block;\n      padding: var(--spacing-scale-2x);\n    }\n  }\n  @include media-breakpoint-down(xs) {\n    .menu-mobil > {\n      .icon {\n        display: none;\n      }\n    }\n\n    .br-card {\n      left: var(--spacing-scale-base);\n      width: 250px;\n    }\n  }\n}\n","/// Aplica foco: feedback ao navegar por teclado no elemento\n/// @example scss - Uso prático\n///  a {\n///    @include focus;\n///  }\n@mixin focus {\n  &:focus {\n    outline: none;\n  }\n\n  &.focus-visible,\n  &:focus-visible {\n    outline-color: var(--focus);\n    outline-offset: var(--focus-offset);\n    outline-style: var(--focus-style);\n    outline-width: var(--focus-width);\n  }\n}\n\n/// Aplica foco tênue\n/// @example scss - Uso prático\n///  input {\n///    &:focus,\n///    &:focus-visible,\n///    &.focus-visible {\n///      @include focus-soft;\n///    }\n///  }\n@mixin focus-soft {\n  border-color: var(--focus) !important;\n  box-shadow: 0 0 0 var(--surface-width-md) var(--focus);\n  outline: none;\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"],"names":[],"sourceRoot":""}