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

Padrão Digital de Governo

{"version":3,"file":"components/checkbox/checkbox.css","mappings":"AAKA;ECSE;EACA;EAIA;EACA;ADfF;ACiBE;EACE;ADfJ;ACkBE;EACE;EACA;EACA;ADhBJ;ACkBI;EACE;EACA;EACA;EACA;EACA;EACA;EACA;ADhBN;ACkBM;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ADhBR;ACmBM;EACE;ADjBR;ACwBE;EACE;ADtBJ;AC4BI;EACE;EACA;EACA;EACA;AD1BN;ACmCM;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ADjCR;AC2CM;;EACE;EACA;EACA;ADxCR;AC6CM;;EACE;AD1CR;ACgDM;;;;EACE;EACA;EACA;EACA;AD3CR;AC4FQ;EACE;AD1FV;AC+FU;;;;;;;EAEE;ADxFZ;AC4FQ;EACE;AD1FV;AC6EQ;EACE;AD3EV;ACgFU;;;;;;;EAEE;ADzEZ;AC6EQ;EACE;AD3EV;AC0FM;EACE;EACA;ADxFR;AC2FM;EACE;EACA;ADzFR;AC6FQ;EACE;EACA;EACA;EACA;EACA;AD3FV;ACiGQ;EACE;EACA;EACA;EACA;EACA;EACA;AD/FV;ACAM;EACE;ADER;ACIM;;;ECzGJ;EACA;EACA;AF0GF;ACIM;EACE;EACA;ADFR;ACYM;EEvJJ;EACA;AH8IF;AG5IE;EACE;AH8IJ;ACoFI;;;EAEE;ADjFN,C","sources":["webpack://core/./src/components/checkbox/_checkbox.scss","webpack://core/./src/components/checkbox/_mixins.scss","webpack://core/./src/partial/scss/mixins/_focus.scss","webpack://core/./src/partial/scss/mixins/_states.scss"],"sourcesContent":["@use \"sass:math\";\n @import \"../../partial/scss/base\";\n \n@import \"mixins\";\n\n.#{$prefix}checkbox {\n  @include checkbox-configs;\n}\n","@mixin checkbox-configs {\n  @include checkbox-tokens;\n  @include checkbox-default;\n  @include checkbox-label;\n  @include checkbox-hidden-label;\n  @include checkbox-checked;\n  @include checkbox-indeterminate;\n  @include checkbox-colors;\n  @include checkbox-sizes;\n  @include checkbox-states;\n  @include checkbox-dark-mode;\n}\n\n@mixin checkbox-tokens {\n  --checkbox-padding: var(--spacing-scale-base);\n  --checkbox-size: 24px;\n}\n\n@mixin checkbox-default {\n  display: flex;\n  position: relative;\n\n  & + & {\n    margin-top: var(--spacing-scale-base);\n  }\n\n  input {\n    margin: 0;\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(--checkbox-size);\n      min-width: var(--checkbox-size);\n      padding-left: calc(var(--spacing-scale-base) + var(--checkbox-size));\n      position: relative;\n\n      &::before {\n        background: var(--background-light);\n        border: 1px solid var(--border-color);\n        border-radius: 4px;\n        content: \"\";\n        height: var(--checkbox-size);\n        left: 0;\n        position: absolute;\n        width: var(--checkbox-size);\n      }\n\n      &:empty {\n        padding: 0;\n      }\n    }\n  }\n}\n\n@mixin checkbox-label {\n  label {\n    font-weight: var(--font-weight-medium);\n  }\n}\n\n@mixin checkbox-hidden-label {\n  &.hidden-label {\n    label {\n      padding-left: calc(var(--checkbox-size) + var(--surface-width-md) * 2);\n      text-indent: -10000px;\n      white-space: nowrap;\n      width: 0;\n    }\n  }\n}\n\n@mixin checkbox-checked {\n  input {\n    &:checked,\n    &:indeterminate {\n      & + label::after {\n        border: solid var(--selected);\n        border-width: 0 3px 3px 0;\n        content: \"\";\n        height: var(--icon-size-sm);\n        left: 8px;\n        position: absolute;\n        top: 4px;\n        transform: rotate(45deg);\n        width: 8px;\n      }\n    }\n  }\n}\n\n@mixin checkbox-indeterminate {\n  input[indeterminate],\n  input:indeterminate {\n    + label {\n      &::before {\n        --interactive-rgb: var(--color-rgb);\n        background: var(--selected);\n        border-color: var(--selected);\n      }\n    }\n\n    &:hover:not(:disabled) {\n      + label::before {\n        --interactive-rgb: var(--color-dark-rgb);\n      }\n    }\n\n    &:checked + label,\n    + label {\n      &::after {\n        border-color: var(--background-light);\n        border-width: 0 0 3px;\n        top: 2px;\n        transform: none;\n      }\n    }\n  }\n}\n\n@mixin checkbox-states {\n  input {\n    // Inválido\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        --interactive-rgb: var(--interactive-light-rgb);\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  &:not(.disabled) {\n    input {\n      &:disabled + label {\n        @include disabled;\n      }\n    }\n  }\n}\n\n@mixin checkbox-colors {\n  @each $state, $color in (invalid, danger), (valid, success) {\n    &.is-#{$state},\n    &.#{$state},\n    &[#{$state}] {\n      input {\n        + label::before {\n          --border-color: var(--#{$color});\n        }\n\n        &:focus-visible,\n        &.focus-visible {\n          &:checked + label::before,\n          + label::before {\n            --border-color: var(--focus-color);\n          }\n        }\n        // Checado\n        &:checked + label::before {\n          --border-color: var(--#{$color});\n        }\n      }\n    }\n  }\n}\n\n// TODO: Remover na próxima versão\n@mixin checkbox-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 {\n        + label::after {\n          border-width: 0 2px 2px 0;\n          height: var(--icon-size-sm);\n          left: 7px;\n          top: 4px;\n          width: 6px;\n        }\n      }\n\n      &[indeterminate],\n      &:indeterminate {\n        + label::after {\n          border-color: var(--background-light);\n          border-width: 0 0 3px;\n          left: 7px;\n          top: 1px;\n          transform: none;\n          width: 6px;\n        }\n      }\n    }\n  }\n}\n\n@mixin checkbox-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","// Desabilitado\n@mixin disabled {\n  cursor: not-allowed;\n  opacity: var(--disabled);\n\n  * {\n    pointer-events: none;\n  }\n}\n\n// Dark mode\n@mixin dark-mode(\n  $color: \"color-dark\",\n  $color-rgb: \"color-dark-rgb\",\n  $text-color: $color,\n  $interactive: \"interactive-dark\",\n  $interactive-rgb: \"interactive-dark-rgb\",\n  $visited: \"visited-dark\",\n  $hover: \"hover-dark\",\n  $pressed: \"pressed-dark\",\n  $focus-color: \"focus-color-dark\",\n  $focus: $focus-color\n) {\n  --color: var(--#{$color});\n  --color-rgb: var(--#{$color-rgb});\n  --text-color: var(--#{$text-color});\n  --interactive: var(--#{$interactive});\n  --interactive-rgb: var(--#{$interactive-rgb});\n  --visited: var(--#{$visited});\n  --hover: var(--#{$hover});\n  --pressed: var(--#{$pressed});\n  --focus-color: var(--#{$focus-color});\n  --focus: var(--#{$focus});\n}\n@mixin light-mode(\n  $color: \"color-light\",\n  $color-rgb: \"color-light-rgb\",\n  $text-color: $color,\n  $interactive: \"interactive-light\",\n  $interactive-rgb: \"interactive-light-rgb\",\n  $visited: \"visited-light\",\n  $hover: \"hover-light\",\n  $pressed: \"pressed-light\",\n  $focus-color: \"focus-color-light\",\n  $focus: $focus-color\n) {\n  --color: var(--#{$color});\n  --color-rgb: var(--#{$color-rgb});\n  --text-color: var(--#{$text-color});\n  --interactive: var(--#{$interactive});\n  --interactive-rgb: var(--#{$interactive-rgb});\n  --visited: var(--#{$visited});\n  --hover: var(--#{$hover});\n  --pressed: var(--#{$pressed});\n  --focus-color: var(--#{$focus-color});\n  --focus: var(--#{$focus});\n}\n"],"names":[],"ignoreList":[],"sourceRoot":""}