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

Padrão Digital de Governo

{"version":3,"file":"components/cookiebar/cookiebar.css","mappings":"AAKA;ECGE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ADNF;AEDE;EDWM;IACE;EDPR;AACF;AEUE;EFzBF;IC2BI;EDRF;ECYM;IACE;EDVR;ECaM;IACE;IACA;EDXR;ECkBM;IACE;EDhBR;ECkBQ;IACE;EDhBV;ECoBM;IACE;EDlBR;ECuBE;IACE;EDrBJ;ECyBI;IACE;EDvBN;EC2BM;IACE;EDzBR;EC8BE;;IAEE;ED5BJ;AACF;AC+BE;EACE;AD7BJ;AC+BI;EACE;AD7BN;ACgCI;EACE;AD9BN;ACiCI;EACE;AD/BN;ACkCI;EACE;ADhCN;ACoCM;EACE;ADlCR;ACqCM;EACE;ADnCR;ACuCI;EACE;ADrCN;ACwCI;EACE;ADtCN;AC0CE;EACE;EACA;ADxCJ;AC2CE;EACE;ADzCJ;AC4CE;EACE;EACA;EACA;EACA;AD1CJ;AC6CE;EACE;EACA;AD3CJ;AC+CI;EACE;EACA;EACA;EACA;EACA;AD7CN;ACgDI;EACE;EACA;AD9CN;ACgDM;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AD9CR;ACkDI;EACE;EACA;ADhDN;ACkDM;EACE;EACA;ADhDR;ACqDE;EACE;EACA;EACA;ADnDJ;ACqDI;EACE;ADnDN;ACsDI;EACE;EACA;EACA;ADpDN;ACuDI;;EAEE;ADrDN;ACyDM;EACE;ADvDR;AC0DU;EACE;ADxDZ;ACgEI;EACE;AD9DN;ACkEE;;;EAGE;EACA;ADhEJ;ACqEM;EACE;ADnER;ACuEI;EACE;ADrEN;ACwEI;EACE;ADtEN;ACyEI;EEnMF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EF4LI;AD9DN;ACiEI;EACE;AD/DN;ACqEI;;EACE;EACA;EACA;EACA;ADlEN;ACqEI;;EACE;EACA;ADlEN;ACsEE;EACE;EACA;ADpEJ;ACwEI;EACE;ADtEN;ACyEI;EACE;ADvEN;AC4EI;EACE;AD1EN;AC8EE;EACE;EACA;EACA;EACA;AD5EJ;AC+EE;EACE;AD7EJ;ACgFE;EACE;AD9EJ;ACkFI;EACE;ADhFN;AC/NE;EACE;ADiOJ,C","sources":["webpack://core/./src/components/cookiebar/_cookiebar.scss","webpack://core/./src/components/cookiebar/_mixins.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}cookiebar {\n  @include cookiebar-configs;\n  @include cookiebar-modal;\n}\n","@mixin cookiebar-modal {\n  .#{$prefix}modal {\n    --modal-size: var(--modal-auto);\n  }\n}\n\n// TODO: Remover customizações internas de outros componentes\n@mixin cookiebar-configs {\n  --cookiebar-shadow: var(--surface-shadow-lg-up);\n  --cookiebar-layer: var(--z-index-layer-4);\n  bottom: 0;\n  box-shadow: var(--cookiebar-shadow);\n  color: v(color-secondary-08);\n  cursor: default;\n  font-family: inherit;\n  font-size: v(font-size-scale-up-01);\n  left: 0;\n  outline: none;\n  position: fixed;\n  right: 0;\n  top: 0;\n  z-index: var(--cookiebar-layer);\n  @include media-breakpoint-up(sm) {\n    .actions {\n      .br-button {\n        &.secondary {\n          margin-right: v(spacing-scale-5x);\n        }\n      }\n    }\n  }\n  @include media-breakpoint-down(xs) {\n    font-size: v(font-size-scale-down-01);\n\n    .actions {\n      .br-button {\n        &.primary {\n          margin-bottom: v(spacing-scale-2xh);\n        }\n\n        &.secondary {\n          margin-bottom: v(spacing-scale-2xh);\n          margin-right: 0;\n        }\n      }\n    }\n\n    .br-modal-header {\n      &.entry-content {\n        .br-modal-title {\n          margin-bottom: 0;\n\n          p {\n            font-size: v(font-size-scale-up-02);\n          }\n        }\n\n        .last-update {\n          font-size: v(font-size-scale-down-01);\n        }\n      }\n    }\n\n    .group-description {\n      font-size: v(font-size-scale-down-01);\n    }\n\n    .br-switch {\n      label {\n        font-size: v(font-size-scale-down-01);\n      }\n\n      .switch-data {\n        &::before {\n          font-size: v(font-size-scale-down-01);\n        }\n      }\n    }\n\n    .group-name,\n    .group-size {\n      font-size: v(font-size-scale-down-01);\n    }\n  }\n\n  &.default {\n    top: unset;\n\n    .entry-content {\n      display: none;\n    }\n\n    .info-text {\n      display: block;\n    }\n\n    .main-content {\n      display: none;\n    }\n\n    .complementary-content {\n      display: none;\n    }\n\n    .br-modal {\n      > .br-card {\n        --card-shadow: var(--surface-offset-none);\n      }\n\n      .wrapper {\n        overflow-y: unset;\n      }\n    }\n\n    .actions {\n      border-top: 0;\n    }\n\n    .container-fluid.p-2xh {\n      padding-bottom: var(--spacing-scale-3x) !important;\n    }\n  }\n\n  .row {\n    float: none;\n    width: auto;\n  }\n\n  .entry-text {\n    margin-bottom: 0;\n  }\n\n  .wrapper {\n    display: flex;\n    flex-direction: column;\n    overflow-y: scroll;\n    padding-top: 6px !important;\n  }\n\n  .info-text {\n    display: none;\n    line-height: v(font-line-height-medium);\n  }\n\n  .br-modal-header {\n    .br-modal-title {\n      font-size: v(font-size-scale-up-06);\n      margin-bottom: 0;\n      margin-right: 0;\n      max-height: unset;\n      width: auto;\n    }\n\n    .close {\n      margin-top: v(spacing-scale-base);\n      opacity: 1;\n\n      &:hover::after {\n        background: currentColor;\n        bottom: 0;\n        content: \"\";\n        left: 0;\n        opacity: var(--hover);\n        position: absolute;\n        right: 0;\n        top: 0;\n      }\n    }\n\n    .last-update {\n      font-size: v(font-size-scale-base);\n      font-weight: v(font-weight-semi-bold);\n\n      span {\n        display: inline-block;\n        margin-left: v(spacing-scale-half);\n      }\n    }\n  }\n\n  .br-modal-body {\n    flex: 1;\n    margin: 0;\n    overflow: unset;\n\n    &:focus {\n      outline: none;\n    }\n\n    .br-list .br-list {\n      max-height: 0;\n      overflow: hidden;\n      transition: all 400ms ease-in-out;\n    }\n\n    .br-list .br-item.open + .br-list,\n    .br-list .br-item.open .br-list {\n      max-height: 200em;\n    }\n\n    .br-list {\n      .header {\n        display: block;\n\n        .row {\n          div:nth-child(2) {\n            flex: 0 0 185px;\n          }\n        }\n      }\n    }\n  }\n\n  .br-modal-footer {\n    &.actions {\n      padding-top: var(--spacing-scale-2xh);\n    }\n  }\n\n  .group-name,\n  .cookies-checked,\n  .group-size {\n    color: var(--color-primary-default);\n    cursor: pointer;\n  }\n\n  .group-info {\n    .row {\n      div:nth-child(2) {\n        flex: 0 0 225px;\n      }\n    }\n\n    .fa {\n      font-weight: 900;\n    }\n\n    .group-size {\n      display: inline-block;\n    }\n\n    &.selected {\n      @include light-mode;\n      background-color: var(--background);\n    }\n\n    .br-button {\n      color: v(color-primary-default);\n    }\n  }\n\n  .group-info,\n  .cookie-info {\n    .br-switch {\n      margin-bottom: var(--spacing-scale-2x);\n      margin-top: var(--spacing-scale-2x);\n      padding: v(spacing-scale-half);\n      width: 120px;\n    }\n\n    .fixed-width {\n      padding-left: v(spacing-scale-base);\n      width: 100px;\n    }\n  }\n\n  .always-active {\n    color: v(color-highlight);\n    font-weight: v(font-weight-semi-bold);\n  }\n\n  .cookie-info {\n    .br-card {\n      margin-bottom: var(--card-margin);\n    }\n\n    .cookie-term {\n      font-weight: v(font-weight-semi-bold);\n    }\n  }\n\n  .notes {\n    p:first-child {\n      font-weight: v(font-weight-semi-bold);\n    }\n  }\n\n  .actions {\n    border-top: 1px solid v(color-secondary-05);\n    padding-left: v(spacing-scale-3x);\n    padding-right: v(spacing-scale-2xh);\n    padding-top: v(spacing-scale-3x);\n  }\n\n  .complementary-content {\n    padding: v(spacing-scale-base) 0;\n  }\n\n  [class^=\"container\"] {\n    --grid-margin: 0;\n  }\n\n  .#{$prefix}checkbox {\n    &:not(.hidden-label) {\n      --item-padding-y: 1px;\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":""}