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

Padrão Digital de Governo

{"version":3,"file":"components/modal/modal.css","mappings":"AAKA;ECME;EACA;EACA;EACA;EACA;EACA;EAIA;EACA;EACA;EACA;EACA;EACA;ADZF;ACgBE;EACE;EACA;EACA;EACA;ADdJ;ACgBI;EACE;EACA;EACA;ADdN;ACkBE;EACE;EACA;EACA;EACA;EACA;EACA;ADhBJ;ACqBE;EACE;EACA;EACA;EACA;EACA;ADnBJ;AEtCE;EACE;EACA;AFwCJ;AErCE;EACE;AFuCJ;AEpCE;EACE;AFsCJ;AElCI;EACE;AFoCN;ACUM;EACE;ADRR;ACeE;EACE;EACA;EACA;ADbJ;ACmBI;EAEE;ADlBN;ACgBI;EAEE;ADfN;ACaI;EAEE;ADZN;ACUI;EAEE;ADTN;ACOI;EAEE;ADNN;ACaI;EACE;ADXN;ACiBE;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ADfJ;AE1FE;EACE;EACA;AF4FJ;AEzFE;EACE;AF2FJ;AExFE;EACE;AF0FJ;AEtFI;EACE;AFwFN;ACMI;EACE;ADJN;ACQM;EACE;ADNR;AGhFE;EF4FE;IACE;IACA;EDTJ;ECaI;IACE;EDXN;AACF,C","sources":["webpack://core/./src/components/modal/_modal.scss","webpack://core/./src/components/modal/_mixins.scss","webpack://core/./src/partial/scss/mixins/_scrollbar.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}modal {\n  @include modal-configs;\n}\n","@mixin modal-configs {\n  @include modal-token;\n  @include modal-default;\n  @include modal-header;\n  @include modal-body;\n  @include modal-footer;\n  @include modal-sizes;\n  @include modal-loading;\n  @include modal-deprecated;\n}\n@mixin modal-token {\n  --modal-size: var(--modal-medium);\n  --modal-xsmall: 220px;\n  --modal-small: 300px;\n  --modal-medium: 500px;\n  --modal-large: 640px;\n  --modal-auto: auto;\n}\n\n@mixin modal-default {\n  background: var(--background);\n  box-shadow: var(--surface-shadow-sm);\n  display: flex;\n  flex-direction: column;\n  max-width: var(--modal-size);\n  z-index: var(--z-index-layer-4);\n}\n\n@mixin modal-header {\n  &-header {\n    font-size: var(--font-size-scale-up-01);\n    font-weight: var(--font-weight-bold);\n    padding: var(--spacing-scale-2x) var(--spacing-scale-2x) 0;\n    position: relative;\n\n    .close {\n      position: absolute;\n      right: var(--spacing-scale-base);\n      top: var(--spacing-scale-base);\n    }\n  }\n\n  .modal-title {\n    font-size: var(--font-size-scale-up-01);\n    font-weight: var(--font-weight-bold);\n    margin-right: 40px;\n    max-height: calc(var(--font-size-scale-up-01) * 3);\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n}\n\n@mixin modal-body {\n  &-body {\n    flex: 1;\n    margin: var(--spacing-scale-3x) 0 var(--spacing-scale-2x);\n    overflow: auto;\n    padding: 0 var(--spacing-scale-2x);\n    width: auto;\n    @include scrollbar;\n\n    > * {\n      &:last-child {\n        margin-bottom: 0;\n      }\n    }\n  }\n}\n\n@mixin modal-footer {\n  &-footer {\n    display: flex;\n    flex-wrap: wrap;\n    padding: var(--spacing-scale-2x);\n  }\n}\n\n@mixin modal-sizes {\n  @each $size in \"xsmall\", \"small\", \"medium\", \"large\", \"auto\" {\n    &.is-#{$size},\n    &.#{$size} {\n      --modal-size: var(--modal-#{$size});\n    }\n  }\n}\n\n@mixin modal-loading {\n  .loading {\n    &.medium {\n      min-height: calc(var(--loading-indetermined-diameter-md) + var(--spacing-scale-2x) * 2);\n    }\n  }\n}\n\n@mixin modal-deprecated {\n  .terms {\n    border: 0;\n    box-shadow: var(--surface-shadow-sm-inset), var(--surface-shadow-sm-inset-up);\n    font-size: v(font-size-scale-base);\n    height: 216px;\n    margin-bottom: var(--spacing-scale-2x);\n    margin-left: calc(#{v(spacing-scale-2x)} * -1);\n    margin-right: calc(#{v(spacing-scale-2x)} * -1);\n    overflow: auto;\n    padding: var(--spacing-scale-2x);\n    resize: none;\n    width: auto;\n\n    @include scrollbar;\n\n    &:active {\n      outline: none;\n    }\n\n    &:hover {\n      &::-webkit-scrollbar-thumb {\n        background: v(color-secondary-07);\n      }\n    }\n  }\n\n  @include media-breakpoint-down(sm) {\n    .terms {\n      margin-left: unset !important;\n      margin-right: unset !important;\n    }\n\n    &-header {\n      .close {\n        top: 0;\n      }\n    }\n  }\n}\n\n@mixin modal-responsive {\n  @include modal-sizes;\n  @include modal-deprecated;\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"],"names":[],"sourceRoot":""}