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

Padrão Digital de Governo

{"version":3,"file":"components/radio/radio.css","mappings":"AAKA;ECOE;EACA;EACA;EAGA;ADZF;ACcE;EACE;ADZJ;ACeE;EACE;EACA;ADbJ;ACeI;EACE;EACA;EACA;EACA;EACA;EACA;EACA;ADbN;ACeM;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ADbR;ACgBM;EACE;ADdR;ACgBQ;EACE;ADdV;ACsBE;EACE;ADpBJ;AC2BM;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ADzBR;AC6BQ;EACE;AD3BV;ACoEQ;EACE;ADlEV;ACiEQ;EACE;AD/DV;AC8EM;EACE;EACA;AD5ER;AC+EM;EACE;EACA;AD7ER;ACgFM;EACE;EACA;EACA;AD9ER;ACmBM;EACE;ADjBR;ACuBM;;;ECxEJ;EACA;EACA;AFsDF;ACuBM;EACE;ADrBR;AC0EI;;;EAEE;ADvEN,C","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":[],"ignoreList":[],"sourceRoot":""}