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

Padrão Digital de Governo

{"version":3,"file":"components/avatar/avatar.css","mappings":"AAKA;ECKE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAIA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ADXF;ACaE;EAMA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ADhBF;ACkBE;EACE;EACA;EACA;ADhBJ;AEnCE;;;;;;;EDsDE;EACA;ADVJ;ACgBI;EAGE;EACA;EACA;ADhBN;ACWI;EAGE;EACA;EACA;ADXN;ACMI;EAGE;EACA;EACA;ADNN;ACYE;EACE;EACA;ADVJ;AG/DI;EACE;AHiEN;AIpEE;EACE;AJsEJ;AInEE;EAEE;EACA;EACA;EACA;AJoEJ;AI7EE;EACE;AJ+EJ;AI5EE;EAEE;EACA;EACA;EACA;AJ6EJ;ACGE;;EAtDA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ADuDF;ACrDE;;EACE;EACA;EACA;ADwDJ;AE3GE;;;;;;;;;;;;;;EDsDE;EACA;ADqEJ,C","sources":["webpack://core/./src/components/avatar/_avatar.scss","webpack://core/./src/components/avatar/_mixins.scss","webpack://core/./src/partial/scss/mixins/_icons.scss","webpack://core/./src/partial/scss/mixins/_hover.scss","webpack://core/./src/partial/scss/mixins/_focus.scss"],"sourcesContent":["@use \"sass:math\";\n @import \"../../partial/scss/base\";\n \n@import \"mixins\";\n\n.#{$prefix}avatar {\n  @include avatar-configs;\n}\n","@mixin avatar-configs {\n  @include avatar-tokens;\n  @include avatar-default;\n  @include avatar-sizes;\n  @include avatar-change;\n  @include avatar-dropdown;\n  @include avatar-deprecated;\n}\n\n@mixin avatar-tokens {\n  --avatar-size: var(--avatar-small);\n  --avatar-icon-size: var(--avatar-icon-small);\n  --avatar-text-size: var(--avatar-text-small);\n  --avatar-small: 40px;\n  --avatar-medium: 100px;\n  --avatar-large: 160px;\n  --avatar-icon-small: var(--icon-size-2x);\n  --avatar-icon-medium: var(--icon-size-5x);\n  --avatar-icon-large: var(--icon-size-8x);\n  --avatar-text-small: var(--font-size-scale-up-03);\n  --avatar-text-medium: var(--font-size-scale-up-07);\n  --avatar-text-large: var(--font-size-scale-up-11);\n}\n\n@mixin avatar-default {\n  align-items: center;\n  background-color: transparent;\n  border: 0;\n  display: inline-flex;\n  font-size: var(--avatar-text-size);\n  font-weight: var(--font-weight-bold);\n  justify-content: center;\n  line-height: var(--avatar-size);\n  vertical-align: middle;\n\n  .content {\n    @include avatar-content;\n  }\n}\n\n@mixin avatar-content {\n  align-items: center;\n  background-color: var(--blue-10);\n  border-radius: 50%;\n  color: var(--blue-warm-20);\n  display: inline-flex;\n  font-size: var(--avatar-text-size);\n  height: var(--avatar-size);\n  justify-content: center;\n  overflow: hidden;\n  text-align: center;\n  text-transform: uppercase;\n  vertical-align: inherit;\n  width: var(--avatar-size);\n\n  img {\n    height: var(--avatar-size);\n    vertical-align: inherit;\n    width: var(--avatar-size);\n  }\n  @include icon {\n    --icon-size: var(--avatar-icon-size);\n    margin-top: 0.25em;\n  }\n}\n\n@mixin avatar-sizes {\n  @each $size in small, medium, large {\n    &.is-#{$size},\n    &.#{$size},\n    &[#{$size}] {\n      --avatar-size: var(--avatar-#{$size});\n      --avatar-icon-size: var(--avatar-icon-#{$size});\n      --avatar-text-size: var(--avatar-text-#{$size});\n    }\n  }\n}\n\n@mixin avatar-change {\n  &-action {\n    background: transparent;\n    border: 0;\n    @include hover;\n    @include focus;\n  }\n}\n\n@mixin avatar-dropdown {\n  &[data-toggle=\"dropdown\"] {\n    @include focus;\n  }\n}\n\n@mixin avatar-deprecated {\n  // TODO: Remover na versão 4\n  .image,\n  .letter {\n    @include avatar-content;\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 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 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"],"names":[],"sourceRoot":""}