@govbr-ds/core
Version:
Padrão Digital de Governo
1 lines • 5.21 kB
Source Map (JSON)
{"version":3,"file":"components/avatar/avatar.min.css","mappings":"AAKA,WCKE,iCAAkC,CAClC,2CAA4C,CAC5C,2CAA4C,CAC5C,mBAAoB,CACpB,qBAAsB,CACtB,oBAAqB,CACrB,uCAAwC,CACxC,wCAAyC,CACzC,uCAAwC,CACxC,gDAAiD,CACjD,iDAAkD,CAClD,gDAAiD,CAKjD,4BAA6B,CAC7B,QAAS,CAGT,mCAAoC,CAEpC,8BAA+B,CAC/B,qBDXF,CCaE,+BAVA,kBAAmB,CAGnB,mBAAoB,CACpB,iCAAkC,CAElC,sBDMF,CCFE,oBAOA,+BAAgC,CAChC,iBAAkB,CAClB,yBAA0B,CAK1B,eAAgB,CAChB,iBAAkB,CAClB,wBDdF,CCkBE,4CARA,yBAA0B,CAK1B,sBAAuB,CACvB,wBDXF,CEnCE,yLDsDE,mCAAoC,CACpC,gBDVJ,CCgBI,uDAGE,kCACA,4CACA,2CDhBN,CCWI,0DAGE,mCACA,6CACA,4CDXN,CCMI,uDAGE,kCACA,4CACA,2CDNN,CCYE,kBACE,sBAAuB,CACvB,QDVJ,CG/DI,uCACE,qHHiEN,CIpEE,wBACE,YJsEJ,CInEE,gEAEE,0BAA2B,CAC3B,kCAAmC,CACnC,gCAAiC,CACjC,gCJoEJ,CI7EE,uCACE,YJ+EJ,CI5EE,8FAEE,0BAA2B,CAC3B,kCAAmC,CACnC,gCAAiC,CACjC,gCJ6EJ,CCGE,qCAtDA,kBAAmB,CACnB,+BAAgC,CAChC,iBAAkB,CAClB,yBAA0B,CAC1B,mBAAoB,CACpB,iCAAkC,CAElC,sBAAuB,CACvB,eAAgB,CAChB,iBAAkB,CAClB,wBDyDF,CCrDE,kFARA,yBAA0B,CAK1B,sBAAuB,CACvB,wBD6DF,CE3GE,6VDsDE,mCAAoC,CACpC,gBDqEJ","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":""}