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

Padrão Digital de Governo

{"version":3,"file":"components/upload/upload.css","mappings":"AAeE;EACE;ACdJ;ADiBE;EEQA;EACA;EACA;EACA;EACA;EACA;EAIA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EF/BE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ACOJ;AElCE;;;;;;;EH6BI;ACcN;ADRE;EACE;EACA;ACUJ;ADRI;EACE;EACA;EACA;EACA;EACA;ACUN;ADPI;EACE;EACA;ACSN;ADLE;EACE;ACOJ;AC2DE;EACE;ADzDJ;AC4DE;EACE;AD1DJ;AGpEE;EACE;AHsEJ;AGnEE;EAEE;EACA;EACA;EACA;AHoEJ;AI3EI;EACE;AJ6EN;AK/EI;EACE;ALiFN;ACiDE;EAGE;EACA;EACA;ADjDJ;ACoDE;EACE;EACA;ADlDJ;ACqDM;EACE;ADnDR;ACuDI;EACE;EACA;ADrDN;AC4DM;EACE;AD1DR;ADpCM;EACE;ACsCR;ADvCM;EACE;ACyCR;AD1CM;EACE;AC4CR;AD7CM;EACE;AC+CR;ADzCI;EACE;AC2CN,C","sources":["webpack://core/./src/components/upload/_mixins.scss","webpack://core/./src/components/upload/_upload.scss","webpack://core/./src/components/button/_mixins.scss","webpack://core/./src/partial/scss/mixins/_icons.scss","webpack://core/./src/partial/scss/mixins/_focus.scss","webpack://core/./src/partial/scss/mixins/_hover.scss","webpack://core/./src/partial/scss/mixins/_active.scss"],"sourcesContent":["// Dependências\n@import \"../button/mixins\";\n\n// Mixins\n@mixin upload-configs {\n  // @include upload-tokens;\n  @include upload-default;\n  @include upload-list;\n  @include upload-states;\n}\n\n// @mixin upload-tokens {\n// }\n\n@mixin upload-default {\n  input {\n    display: none;\n  }\n\n  .upload-button {\n    @include button-tokens;\n    @include button-default;\n    border: var(--surface-width-sm) dashed var(--interactive);\n    border-radius: var(--surface-rounder-sm);\n    display: block;\n    font-size: var(--font-size-scale-base);\n    font-style: italic;\n    font-weight: var(--font-weight-regular);\n    margin-top: var(--spacing-scale-half);\n    max-width: 550px;\n    min-height: var(--button-size);\n    padding-left: var(--spacing-scale-2x);\n    padding-right: var(--spacing-scale-2x);\n    text-align: left;\n    width: 100%;\n    @include icon {\n      margin-right: var(--spacing-scale-base);\n    }\n  }\n}\n\n@mixin upload-list {\n  .upload-list {\n    max-width: 550px;\n    position: relative;\n\n    .content {\n      align-self: center;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      width: 70%;\n    }\n\n    .support {\n      align-items: center;\n      display: flex;\n    }\n  }\n\n  .br-tooltip {\n    max-width: 93%;\n  }\n}\n\n@mixin upload-states {\n  .upload-button {\n    @include button-states;\n  }\n  @each $state in success, danger, warning, info {\n    &.#{$state},\n    &[data-#{$state}] {\n      .upload-button {\n        border-color: var(--#{$state});\n      }\n    }\n  }\n\n  &.dragging {\n    .upload-button {\n      background-image: linear-gradient(\n        rgba(var(--interactive-rgb), var(--hover)),\n        rgba(var(--interactive-rgb), var(--hover))\n      );\n    }\n  }\n}\n\n@mixin upload-state {\n  @include upload-states;\n}\n",".br-upload input {\n  display: none;\n}\n.br-upload .upload-button {\n  --button-radius: 100em;\n  --button-xsmall: 24px;\n  --button-small: 32px;\n  --button-medium: 40px;\n  --button-large: 48px;\n  --button-size: var(--button-medium);\n  align-items: center;\n  background-color: transparent;\n  border: 0;\n  border-radius: var(--button-radius);\n  color: var(--interactive);\n  cursor: pointer;\n  display: inline-flex;\n  font-size: var(--font-size-scale-up-01);\n  font-weight: var(--font-weight-semi-bold);\n  height: var(--button-size);\n  justify-content: center;\n  overflow: hidden;\n  padding: 0 var(--spacing-scale-3x);\n  position: relative;\n  text-align: center;\n  vertical-align: middle;\n  white-space: nowrap;\n  width: auto;\n  border: var(--surface-width-sm) dashed var(--interactive);\n  border-radius: var(--surface-rounder-sm);\n  display: block;\n  font-size: var(--font-size-scale-base);\n  font-style: italic;\n  font-weight: var(--font-weight-regular);\n  margin-top: var(--spacing-scale-half);\n  max-width: 550px;\n  min-height: var(--button-size);\n  padding-left: var(--spacing-scale-2x);\n  padding-right: var(--spacing-scale-2x);\n  text-align: left;\n  width: 100%;\n}\n.br-upload .upload-button .svg-inline--fa,\n.br-upload .upload-button .fa,\n.br-upload .upload-button .fab,\n.br-upload .upload-button .fad,\n.br-upload .upload-button .fal,\n.br-upload .upload-button .far,\n.br-upload .upload-button .fas {\n  margin-right: var(--spacing-scale-base);\n}\n.br-upload .upload-list {\n  max-width: 550px;\n  position: relative;\n}\n.br-upload .upload-list .content {\n  align-self: center;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: 70%;\n}\n.br-upload .upload-list .support {\n  align-items: center;\n  display: flex;\n}\n.br-upload .br-tooltip {\n  max-width: 93%;\n}\n.br-upload .upload-button:disabled {\n  cursor: not-allowed;\n}\n.br-upload .upload-button:not(:disabled) {\n  --focus-offset: var(--spacing-scale-half);\n}\n.br-upload .upload-button:not(:disabled):focus {\n  outline: none;\n}\n.br-upload .upload-button:not(:disabled).focus-visible, .br-upload .upload-button:not(:disabled):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.br-upload .upload-button:not(:disabled):not(:disabled):hover {\n  background-image: linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)));\n}\n.br-upload .upload-button:not(:disabled):not(:disabled):active {\n  background-image: linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)));\n}\n.br-upload .upload-button.active, .br-upload .upload-button.is-active, .br-upload .upload-button[active] {\n  --hover: var(--hover-dark);\n  background-color: var(--active);\n  color: var(--color-dark);\n}\n.br-upload .upload-button.loading {\n  color: transparent !important;\n  cursor: progress;\n}\n.br-upload .upload-button.loading:not(:disabled):hover {\n  background-image: none;\n}\n.br-upload .upload-button.loading::before {\n  border-color: var(--interactive) var(--interactive) transparent;\n  border-style: solid;\n}\n.br-upload .upload-button.loading.primary::before, .br-upload .upload-button.loading.danger::before, .br-upload .upload-button.loading.success::before, .br-upload .upload-button.loading.info::before {\n  border-color: var(--background) var(--background) transparent;\n}\n.br-upload.success .upload-button, .br-upload[data-success] .upload-button {\n  border-color: var(--success);\n}\n.br-upload.danger .upload-button, .br-upload[data-danger] .upload-button {\n  border-color: var(--danger);\n}\n.br-upload.warning .upload-button, .br-upload[data-warning] .upload-button {\n  border-color: var(--warning);\n}\n.br-upload.info .upload-button, .br-upload[data-info] .upload-button {\n  border-color: var(--info);\n}\n.br-upload.dragging .upload-button {\n  background-image: linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)));\n}","@mixin button-configs {\n  @include button-tokens;\n  @include button-default;\n  @include button-block;\n  @include button-circle;\n  @include button-sizes;\n  @include button-emphasis;\n  @include button-colors;\n  @include button-states;\n  @include button-dark;\n}\n\n@mixin button-magicbutton {\n  --focus-offset: calc((var(--magic-support-size) - var(--magic-size)) * 0.5 + 4px);\n  --button-size: var(--magic-size);\n  background-color: var(--interactive-alternative);\n  color: var(--color-dark);\n  font-size: var(--font-size-scale-up-02);\n  font-weight: var(--font-weight-semi-bold);\n\n  &:not(:disabled) {\n    @include hover(\"color-dark\");\n    @include active(\"color-dark\");\n  }\n}\n\n@mixin button-tokens {\n  --button-radius: 100em;\n  --button-xsmall: 24px;\n  --button-small: 32px;\n  --button-medium: 40px;\n  --button-large: 48px;\n  --button-size: var(--button-medium);\n}\n\n@mixin button-default {\n  align-items: center;\n  background-color: transparent;\n  border: 0;\n  border-radius: var(--button-radius);\n  color: var(--interactive);\n  cursor: pointer;\n  display: inline-flex;\n  font-size: var(--font-size-scale-up-01);\n  font-weight: var(--font-weight-semi-bold);\n  height: var(--button-size);\n  justify-content: center;\n  overflow: hidden;\n  padding: 0 var(--spacing-scale-3x);\n  position: relative;\n  text-align: center;\n  vertical-align: middle;\n  white-space: nowrap;\n  width: auto;\n}\n\n@mixin button-block {\n  &.block {\n    width: 100%;\n  }\n  @each $breakpoint in \"sm\", \"md\", \"lg\", \"xl\" {\n    @include media-breakpoint-up(#{$breakpoint}) {\n      &.block-#{$breakpoint} {\n        width: 100%;\n      }\n      &.auto-#{$breakpoint} {\n        width: auto;\n      }\n    }\n  }\n}\n\n@mixin button-circle {\n  &.circle,\n  &[circle],\n  &.is-circle {\n    border-radius: 50%;\n    padding: 0;\n    width: var(--button-size);\n  }\n}\n\n@mixin button-sizes {\n  @each $size in \"xsmall\", \"small\", \"medium\", \"large\" {\n    &.#{$size},\n    &[#{$size}],\n    &.is-#{$size} {\n      --button-size: var(--button-#{$size});\n    }\n  }\n}\n\n@mixin button-emphasis {\n  &.primary,\n  &[primary],\n  &.is-primary {\n    --interactive-rgb: var(--color-dark-rgb);\n    background-color: var(--interactive-light);\n    color: var(--color-dark);\n  }\n\n  &.secondary,\n  &[secondary],\n  &.is-secondary {\n    background-color: var(--background-light);\n    border: 1px solid var(--interactive);\n  }\n}\n\n@mixin button-colors {\n  @each $color in \"danger\", \"success\", \"warning\", \"info\" {\n    &.#{$color},\n    &[#{$color}],\n    &.is-#{$color} {\n      background-color: var(--#{$color});\n      @if $color != \"warning\" {\n        --interactive-rgb: var(--color-dark-rgb);\n        color: var(--color-dark);\n      } @else {\n        --interactive-rgb: var(--color-light-rgb);\n        color: var(--color-light);\n      }\n    }\n  }\n}\n\n@mixin button-states {\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &:not(:disabled) {\n    --focus-offset: var(--spacing-scale-half);\n    @include focus;\n    @include hover;\n    @include active;\n  }\n\n  &.active,\n  &.is-active,\n  &[active] {\n    --hover: var(--hover-dark);\n    background-color: var(--active);\n    color: var(--color-dark);\n  }\n\n  &.loading {\n    color: transparent !important;\n    cursor: progress;\n\n    &:not(:disabled) {\n      &:hover {\n        background-image: none;\n      }\n    }\n\n    &::before {\n      border-color: var(--interactive) var(--interactive) transparent;\n      border-style: solid;\n    }\n\n    &.primary,\n    &.danger,\n    &.success,\n    &.info {\n      &::before {\n        border-color: var(--background) var(--background) transparent;\n      }\n    }\n  }\n}\n\n@mixin button-dark {\n  &.inverted,\n  &.is-inverted,\n  &[inverted],\n  &.dark-mode {\n    @include dark-mode;\n    color: var(--interactive-dark);\n\n    &.primary,\n    &[primary],\n    &.is-primary {\n      --interactive-rgb: var(--background-dark-rgb);\n      background-color: var(--interactive-dark);\n      color: var(--background-dark);\n    }\n\n    &.secondary,\n    &[secondary],\n    &.is-secondary {\n      background-color: var(--background-dark);\n    }\n\n    &.active {\n      --hover: var(--hover-light);\n      --interactive-rgb: var(--active-rgb);\n      background-color: var(--background-light);\n      color: var(--active);\n    }\n  }\n}\n\n@mixin button-dark-mode {\n  .#{$prefix}button {\n    &.primary,\n    &[primary],\n    &.is-primary {\n      @include light-mode($interactive-rgb: \"background-dark-rgb\");\n      background-color: var(--interactive-dark);\n      color: var(--background-dark);\n    }\n\n    &.secondary,\n    &[secondary],\n    &.is-secondary {\n      background-color: var(--background-dark);\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 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","/// Aplica active: feedback ao clicar no elemento\n/// @example scss - Uso prático\n///  a {\n///    @include active;\n///  }\n@mixin active($color: \"interactive\") {\n  &:not(:disabled) {\n    &:active {\n      background-image: linear-gradient(\n        rgba(var(--#{$color}-rgb), var(--pressed)),\n        rgba(var(--#{$color}-rgb), var(--pressed))\n      );\n    }\n  }\n}\n"],"names":[],"ignoreList":[],"sourceRoot":""}