@govbr-ds/core/dist/components/radio/radio.min.css.map

Padrão Digital de Governo

{"version":3,"file":"components/radio/radio.min.css","mappings":"AAKA,UCOE,iBAAkB,CAClB,wBAAyB,CACzB,gFAAmF,CAGnF,aDZF,CCcE,oBACE,oCDZJ,CCeE,gBACE,SAAU,CACV,iBDbJ,CCeI,sBACE,cAAe,CACf,oBAAqB,CACrB,eAAgB,CAChB,4BAA6B,CAC7B,2BAA4B,CAC5B,gEAAiE,CACjE,iBDbN,CCeM,6BACE,4BAA6B,CAC7B,oCAAqC,CACrC,iBAAkB,CAClB,UAAW,CACX,wBAAyB,CACzB,MAAO,CACP,iBAAkB,CAClB,QAAS,CACT,uBDbR,CCgBM,4BACE,SDdR,CCgBQ,mCACE,KDdV,CCsBE,gBACE,qCDpBJ,CC2BM,oCACE,0BAA2B,CAC3B,gCAAiC,CACjC,iBAAkB,CAClB,UAAW,CACX,+BAAgC,CAChC,iCAAkC,CAClC,iBAAkB,CAClB,OAAQ,CACR,4CAA6C,CAC7C,8BDzBR,CC6BQ,0CACE,gCD3BV,CCoEQ,6GACE,2BDlEV,CCiEQ,mHACE,0BD/DV,CC8EM,wFACE,oCAAqC,CACrC,mCD5ER,CC+EM,6GACE,+BAAgC,CAChC,8BD7ER,CCgFM,kIACE,gBAAiB,CACjB,WAAY,CACZ,UD9ER,CCmBM,qCACE,0BDjBR,CCuBM,4LCxEJ,mCAAqC,CACrC,qDAAsD,CACtD,YFsDF,CCuBM,kDACE,qHDrBR,CC0EI,0FAEE,uBDvEN","sources":["webpack://core/./src/components/radio/_radio.scss","webpack://core/./src/components/radio/_mixins.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}radio {\n  @include radio-configs;\n}\n","@mixin radio-configs {\n  @include radio-tokens;\n  @include radio-default;\n  @include radio-label;\n  @include radio-checked;\n  @include radio-colors;\n  @include radio-sizes;\n  @include radio-states;\n  @include radio-dark-mode;\n}\n\n@mixin radio-tokens {\n  --radio-size: 24px;\n  --radio-bullet-size: 16px;\n  --radio-bullet-position: calc((var(--radio-size) - var(--radio-bullet-size)) * 0.5);\n}\n@mixin radio-default {\n  display: block;\n\n  & + & {\n    margin-top: var(--spacing-scale-base);\n  }\n\n  input {\n    opacity: 0;\n    position: absolute;\n\n    + label {\n      cursor: pointer;\n      display: inline-block;\n      margin-bottom: 0; // zerar margem padrão de labels\n      min-height: var(--radio-size);\n      min-width: var(--radio-size);\n      padding-left: calc(var(--spacing-scale-base) + var(--radio-size));\n      position: relative;\n\n      &::before {\n        background: var(--background);\n        border: 1px solid var(--border-color);\n        border-radius: 50%;\n        content: \"\";\n        height: var(--radio-size);\n        left: 0;\n        position: absolute;\n        top: -1px;\n        width: var(--radio-size);\n      }\n\n      &:empty {\n        padding: 0;\n\n        &::before {\n          top: 0;\n        }\n      }\n    }\n  }\n}\n\n@mixin radio-label {\n  label {\n    font-weight: var(--font-weight-medium);\n  }\n}\n\n@mixin radio-checked {\n  input {\n    &:checked + label {\n      &::after {\n        background: var(--selected);\n        border: 7px solid var(--selected);\n        border-radius: 50%;\n        content: \"\";\n        height: var(--radio-bullet-size);\n        left: var(--radio-bullet-position);\n        position: absolute;\n        right: 0;\n        top: calc(var(--radio-bullet-position) - 1px);\n        width: var(--radio-bullet-size);\n      }\n\n      &:empty {\n        &::after {\n          top: var(--radio-bullet-position);\n        }\n      }\n    }\n  }\n}\n\n@mixin radio-states {\n  input {\n    // Inválid\n    &:invalid {\n      + label::before {\n        border-color: var(--danger);\n      }\n    }\n    //Focus\n    &:focus-visible,\n    &.focus-visible {\n      &:checked + label::before,\n      + label::before {\n        @include focus-soft;\n      }\n    }\n    //hover\n    &:hover:not(:disabled) {\n      + label::before {\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\n@mixin radio-colors {\n  @each $state, $color in (valid, success), (invalid, danger) {\n    &.is-#{$state},\n    &.#{$state},\n    &[#{$state}] {\n      input {\n        + label::before {\n          border-color: var(--#{$color});\n        }\n      }\n    }\n  }\n}\n\n// TODO: Remover na próxima versão\n@mixin radio-sizes {\n  // Versão pequena\n  &.is-small,\n  &.small,\n  &[small] {\n    input {\n      // Texto\n      + label {\n        line-height: var(--spacing-scale-2xh);\n        min-height: var(--spacing-scale-2xh);\n      }\n      // Caixa\n      + label::before {\n        height: var(--spacing-scale-2xh);\n        width: var(--spacing-scale-2xh);\n      }\n      // Checado\n      &:checked + label::after {\n        border-width: 4px;\n        height: 10px;\n        width: 10px;\n      }\n    }\n  }\n}\n\n@mixin radio-dark-mode {\n  &.inverted,\n  &.dark-mode {\n    &,\n    label {\n      color: var(--color-dark);\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":""}