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

Padrão Digital de Governo

{"version":3,"file":"components/tab/tab.css","mappings":"AAKA;ECKE;EACA;EACA;EACA;EACA;ADRF;AELE;EACE;EACA;AFOJ;AEJE;EACE;AFMJ;AEHE;EACE;AFKJ;AEDI;EACE;AFGN;ACDE;EAEE;EACA;ADEJ;AGOE;ED7BA;IACE;IACA;EFyBF;EEtBA;IACE;EFwBF;EErBA;IACE;EFuBF;EEnBE;IACE;EFqBJ;ECnBA;IAMI;IACA;IACA;EDgBJ;AACF;ACdI;EACE;EACA;EACA;EACA;EACA;EACA;ADgBN;ACZE;EACE;EACA;EACA;EACA;EACA;ADcJ;ACZI;;EAEE;ADcN;AIxDE;;EACE;AJ2DJ;AIxDE;;;EAEE;EACA;EACA;EACA;AJ2DJ;AKlEI;;EACE;ALqEN;AChCI;;EAKE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AD+BN;AC5BI;EACE;AD8BN;AC3BI;EACE;AD6BN;ACxBM;EACE;EACA;AD0BR;ACvBM;EACE;EACA;ADyBR;ACpBE;EACE;EACA;EACA;EACA;EACA;EACA;ADsBJ;ACfM;EACE;ADiBR;ACTI;EACE;EACA;ADWN;ACTM;EAEE;ADUR;ACFI;EAGE;ADEN;ACLI;EAGE;ADKN;ACRI;EAGE;ADQN;AC4CE;EK1JA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ANiHF;ACqCM;EACE;EACA;ADnCR,C","sources":["webpack://core/./src/components/tab/_tab.scss","webpack://core/./src/components/tab/_mixins.scss","webpack://core/./src/partial/scss/mixins/_scrollbar.scss","webpack://core/./src/partial/scss/mixins/_grid.scss","webpack://core/./src/partial/scss/mixins/_focus.scss","webpack://core/./src/partial/scss/mixins/_hover.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}tab {\n  @include tab-configs;\n}\n","@mixin tab-configs {\n  @include tab-tokens;\n  @include tab-nav;\n  @include tab-count;\n  @include tab-content;\n  @include tab-sizes;\n  @include tab-dark-mode;\n}\n\n@mixin tab-tokens {\n  --tab-padding: var(--spacing-scale-3x);\n  --tab-size: var(--tab-medium);\n  --tab-large: var(--spacing-scale-3x);\n  --tab-medium: var(--spacing-scale-2x);\n  --tab-small: var(--spacing-scale-base);\n}\n\n@mixin tab-nav {\n  .tab-nav {\n    @include scrollbar;\n    overflow-x: auto;\n    width: 100%;\n    @include media-breakpoint-down(sm) {\n      @include scrollbar;\n      display: flex;\n      overflow-x: auto;\n      width: 100%;\n    }\n\n    ul {\n      border-bottom: 1px solid var(--border-color);\n      display: flex;\n      margin-bottom: 0;\n      margin-top: 0;\n      padding: 0;\n      width: 100%;\n    }\n  }\n\n  .tab-item {\n    align-items: center;\n    display: flex;\n    justify-content: center;\n    position: relative;\n    white-space: nowrap;\n\n    button,\n    a {\n      --focus-offset: calc(var(--spacing-scale-half) * -1);\n      @include focus;\n      @include hover(\"color\");\n      background-color: transparent;\n      border: 0;\n      border-bottom: 4px solid transparent;\n      color: var(--color);\n      display: inline-block;\n      font-size: var(--font-size-scale-up-02);\n      font-weight: var(--font-weight-medium);\n      line-height: 1;\n      padding: var(--tab-size) var(--tab-padding);\n      text-align: center;\n      white-space: nowrap;\n    }\n\n    &:first-child {\n      padding-left: 0;\n    }\n\n    &:last-child {\n      padding-right: 0;\n    }\n\n    &.is-active,\n    &.active {\n      button {\n        border-bottom: 4px solid var(--active);\n        color: var(--active);\n      }\n\n      .results {\n        --font-weight: var(--font-weight-semi-bold);\n        color: var(--active);\n      }\n    }\n  }\n\n  .results {\n    display: flex;\n    font-weight: var(--font-weight);\n    justify-content: center;\n    margin-top: var(--spacing-scale-2x);\n    position: absolute;\n    top: 100%;\n  }\n}\n\n@mixin tab-count {\n  &[data-counter=\"true\"] {\n    .tab-nav {\n      ul {\n        margin-bottom: calc(var(--spacing-scale-2x) + var(--font-size-scale-up-02) + var(--spacing-scale-base));\n      }\n    }\n  }\n}\n\n@mixin tab-content {\n  .tab-content {\n    .tab-panel {\n      color: var(--text-color);\n      display: none;\n\n      &.is-active,\n      &.active {\n        display: block;\n      }\n    }\n  }\n}\n\n@mixin tab-sizes {\n  @each $size in \"small\", \"medium\", \"large\" {\n    &.#{$size},\n    &[#{$size}],\n    &.is-#{$size} {\n      --tab-size: var(--tab-#{$size});\n    }\n  }\n}\n\n@mixin tab-nav-gradiente {\n  .tab-nav-right::after {\n    //TODO: Atualizar o código com padrão de gradiente quando estiver pronto\n    background: linear-gradient(\n      to right,\n      rgba(var(--pure-100-rgb), var(--surface-opacity-none)),\n      rgba(var(--pure-100-rgb), 0.2)\n    );\n    content: \"\";\n    height: var(--height-nav, 10px);\n    // --height-nav:60px;\n    left: var(--right-gradient-nav, 0);\n    opacity: 1;\n    pointer-events: none;\n    position: absolute;\n    transition:\n      opacity 0.3s 0s,\n      visibility 0s 0s;\n    visibility: visible;\n    width: 3%;\n    z-index: var(--z-index-layer-0);\n  }\n\n  .tab-nav-left::before {\n    background: linear-gradient(\n      to left,\n      rgba(var(--pure-100-rgb), var(--surface-opacity-none)),\n      rgba(var(--pure-100-rgb), 0.2)\n    );\n    content: \"\";\n    height: var(--height-nav, 10px);\n    // --height-nav:60px;\n    left: 0;\n    opacity: 1;\n    pointer-events: none;\n    position: absolute;\n    transition:\n      opacity 0.3s 0s,\n      visibility 0s 0s;\n\n    visibility: visible;\n    width: 3%;\n    z-index: var(--z-index-layer-0);\n  }\n}\n\n@mixin tab-dark-mode {\n  &.inverted,\n  &.dark-mode {\n    @include dark-mode;\n\n    .tab-item.active {\n      button {\n        border-bottom-color: var(--background-light);\n        color: var(--color);\n      }\n    }\n  }\n}\n","@mixin scrollbar {\n  &::-webkit-scrollbar {\n    height: var(--spacing-scale-base);\n    width: var(--spacing-scale-base);\n  }\n\n  &::-webkit-scrollbar-track {\n    background: var(--gray-10);\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background: var(--gray-30);\n  }\n\n  &:hover {\n    &::-webkit-scrollbar-thumb {\n      background: var(--gray-40);\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","/// 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","/// 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","// 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":""}