UNPKG

@govbr-ds/core

Version:

Padrão Digital de Governo

1 lines 3.94 kB
{"version":3,"file":"components/textarea/textarea.min.css","mappings":"AAKA,aCIE,yCAA0C,CAC1C,0CAA2C,CAC3C,4CAA6C,CAC7C,wCAAyC,CAmBzC,kBDzBF,CC2BE,mBACE,oBAAqB,CACrB,uCDzBJ,CC4BE,sBACE,kCAAmC,CACnC,gDAAiD,CACjD,iBAAkB,CAClB,kBAAmB,CACnB,aAAc,CACd,sCAAuC,CACvC,qCAAsC,CACtC,+BAAgC,CAChC,UD1BJ,CC0DM,8DACE,wCDxDR,CCuDM,gEACE,yCDrDR,CCoDM,8DACE,wCDlDR,CCyBM,kEACE,4BACA,gBDvBR,CCqBM,gEACE,2BACA,gBDnBR,CCiBM,kEACE,4BACA,gBDfR,CCaM,4DACE,yBACA,gBDXR,CCiBI,oGClCF,mCAAqC,CACrC,qDAAsD,CACtD,YFoBF,CG3CI,iDACE,yGH6CN,CCpCI,sGAEE,yBAA0B,CAC1B,qCDuCN,CCpCI,+DACE,wBDsCN","sources":["webpack://core/./src/components/textarea/_textarea.scss","webpack://core/./src/components/textarea/_mixins.scss","webpack://core/./src/partial/scss/mixins/_focus.scss","webpack://core/./src/partial/scss/mixins/_hover.scss"],"sourcesContent":["@use \"sass:math\";\n @import \"../../partial/scss/base\";\n \n@import \"mixins\";\n\n.#{$prefix}textarea {\n @include textarea-configs;\n}\n","@mixin textarea-configs {\n @include textarea-tokens;\n @include textarea-default;\n @include textarea-density;\n @include textarea-state;\n @include textarea-dark-mode;\n}\n\n@mixin textarea-tokens {\n --textarea-padding: var(--textarea-medium);\n --textarea-small: var(--spacing-scale-base);\n --textarea-medium: var(--spacing-scale-baseh);\n --textarea-large: var(--spacing-scale-2x);\n}\n\n@mixin textarea-dark-mode {\n &.inverted,\n &.dark-mode {\n &,\n label {\n --color: var(--color-dark);\n --focus-color: var(--focus-color-dark);\n }\n\n textarea {\n color: var(--color-light);\n }\n }\n}\n\n@mixin textarea-default {\n color: var(--color);\n\n label {\n display: inline-block;\n margin-bottom: var(--spacing-scale-half);\n }\n\n textarea {\n background: var(--background-light);\n border: 1px solid var(--border-color-alternative);\n border-radius: 6px;\n color: var(--color);\n display: block;\n font-size: var(--font-size-scale-up-01);\n font-weight: var(--font-weight-medium);\n padding: var(--textarea-padding);\n width: 100%;\n }\n}\n\n@mixin textarea-state {\n @each $color in success, danger, warning, info {\n &.#{$color},\n &[data-#{$color}] {\n textarea {\n border-color: var(--#{$color});\n border-width: 2px;\n }\n }\n }\n\n textarea {\n &:focus,\n &:focus-visible,\n &.focus-visible {\n @include focus-soft;\n }\n\n &:hover {\n @include hover(\"color\");\n }\n }\n}\n\n@mixin textarea-density {\n @each $size in \"small\", \"medium\", \"large\" {\n &.#{$size},\n &[data-#{$size}] {\n textarea {\n --textarea-padding: var(--textarea-#{$size});\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","/// 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"],"names":[],"sourceRoot":""}