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

Padrão Digital de Governo

{"version":3,"file":"components/switch/switch.css","mappings":"AAKA;ECOE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAIA;EACA;ADbF;ACeE;EACE;EACA;ADbJ;ACeI;EACE;EACA;EACA;EACA;EACA;EACA;EACA;ADbN;ACeM;EACE;EACA;EACA;EACA;EACA;EACA;EACA;ADbR;ACgBM;EACE;EACA;EACA;EACA;EACA;EACA;EACA;ADdR;ACmBM;EACE;ADjBR;ACyBI;EACE;ADvBN;ACyBM;EACE;ADvBR;AC0BM;EACE;ADxBR;AC2BM;EACE;ADzBR;AC8BM;EACE;AD5BR;AA/DA;EC+FE;AD7BF;ACgCM;EACE;EACA;AD9BR;ACgCQ;EACE;AD9BV;ACiCQ;EACE;AD/BV;ACoCQ;EACE;ADlCV;ACwCE;EACE;ADtCJ;ACyCM;EACE;EACA;ADvCR;ACyCQ;EACE;EACA;ADvCV;AC0CQ;EACE;EACA;ADxCV;AC6CQ;EACE;AD3CV;AAjGA;ECiJE;AD7CF;ACkDI;EACE;EACA;EACA;EACA;ADhDN;AC4CI;EACE;EACA;EACA;EACA;AD1CN;ACsCI;EACE;EACA;EACA;EACA;ADpCN;AC2CI;EACE;EACA;EACA;EACA;EACA;ADzCN;AC2CM;EACE;ADzCR;AC6CI;EACE;AD3CN;AC6CM;EACE;AD3CR;ACqDQ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ADnDV;ACwDQ;EACE;ADtDV;ACiEI;;EC5LF;EACA;EACA;AF+HF;ACiEI;EACE;AD/DN;ACoEI;EACE;ADlEN;ACuEI;EACE;ADrEN;AC0EI;EACE;ADxEN;ACgFI;;;EAEE;AD7EN,C","sources":["webpack://core/./src/components/switch/_switch.scss","webpack://core/./src/components/switch/_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}switch {\n  @include switch-configs;\n}\n","@mixin switch-configs {\n  @include switch-tokens;\n  @include switch-default;\n  @include switch-directions;\n  @include switch-sizes;\n  @include switch-data-choice;\n  @include switch-icons;\n  @include switch-status;\n  @include switch-dark-mode;\n}\n\n@mixin switch-tokens {\n  --switch-height: var(--switch-height-medium);\n  --switch-width: var(--switch-width-medium);\n  --switch-toggle-size: var(--switch-toggle-medium);\n  --switch-icon-size: var(--switch-icon-medium);\n  --switch-height-small: 24px;\n  --switch-height-medium: 30px;\n  --switch-height-large: 36px;\n  --switch-width-small: 40px;\n  --switch-width-medium: 52px;\n  --switch-width-large: 64px;\n  --switch-toggle-small: 16px;\n  --switch-toggle-medium: 22px;\n  --switch-toggle-large: 28px;\n  --switch-icon-small: var(--icon-size-xs);\n  --switch-icon-medium: var(--icon-size-sm);\n  --switch-icon-large: var(--icon-size-base);\n}\n\n@mixin switch-default {\n  display: inline-flex;\n  min-height: var(--switch-height);\n\n  input {\n    opacity: 0;\n    position: absolute;\n\n    + label {\n      align-items: center;\n      color: var(--color);\n      cursor: pointer;\n      display: inline-flex;\n      font-size: var(--font-size-scale-base);\n      margin-bottom: 0;\n      position: relative;\n\n      &::before {\n        background: var(--background-light);\n        border: 1px solid var(--border-color);\n        border-radius: 100em;\n        content: \"\";\n        height: var(--switch-height);\n        position: absolute;\n        width: var(--switch-width);\n      }\n\n      &::after {\n        background-color: var(--off);\n        border-radius: 50%;\n        content: \"\";\n        height: var(--switch-toggle-size);\n        position: absolute;\n        transition: all 0.3s ease-in-out;\n        width: var(--switch-toggle-size);\n      }\n    }\n\n    &:checked + label {\n      &::after {\n        background-color: var(--on);\n      }\n    }\n  }\n}\n\n@mixin switch-directions {\n  input {\n    + label {\n      padding-right: calc(var(--spacing-scale-2x) + var(--switch-width));\n\n      &:empty {\n        padding-right: var(--switch-width);\n      }\n\n      &::before {\n        right: 0;\n      }\n\n      &::after {\n        right: calc(4px + var(--switch-toggle-size));\n      }\n    }\n\n    &:checked + label {\n      &::after {\n        right: 4px;\n      }\n    }\n  }\n  /* stylelint-disable no-descending-specificity */\n  &.right {\n    input {\n      + label {\n        padding-left: calc(var(--spacing-scale-2x) + var(--switch-width));\n        padding-right: 0;\n\n        &::before {\n          left: 0;\n        }\n\n        &::after {\n          left: 4px;\n        }\n      }\n\n      &:checked + label {\n        &::after {\n          left: calc(var(--switch-width) - var(--switch-toggle-size) - 4px);\n        }\n      }\n    }\n  }\n\n  &.top {\n    min-height: calc(var(--switch-height) * 2);\n\n    input {\n      + label {\n        align-items: flex-start;\n        padding-right: 0;\n\n        &::before {\n          bottom: 0;\n          left: 0;\n        }\n\n        &::after {\n          bottom: 4px;\n          left: 4px;\n        }\n      }\n\n      &:checked + label {\n        &::after {\n          left: calc(var(--switch-width) - var(--switch-toggle-size) - 4px);\n        }\n      }\n    }\n  }\n  /* stylelint-enable no-descending-specificity */\n}\n\n@mixin switch-sizes {\n  @each $size in \"small\", \"medium\", \"large\" {\n    &.#{$size} {\n      --switch-height: var(--switch-height-#{$size});\n      --switch-width: var(--switch-width-#{$size});\n      --switch-toggle-size: var(--switch-toggle-#{$size});\n      --switch-icon-size: var(--switch-icon-#{$size});\n    }\n  }\n}\n\n@mixin switch-data-choice {\n  input {\n    ~ .switch-data {\n      align-self: center;\n      color: var(--color);\n      font-size: var(--font-size-scale-base);\n      font-weight: var(--font-weight-regular);\n      margin-left: 8px;\n\n      &::before {\n        content: attr(data-disabled);\n      }\n    }\n\n    &:checked ~ .switch-data {\n      color: var(--color);\n\n      &::before {\n        content: attr(data-enabled);\n      }\n    }\n  }\n}\n\n@mixin switch-icons {\n  &.icon {\n    input {\n      + label {\n        &::after {\n          align-items: center;\n          color: var(--color-dark);\n          content: \"\\f00d\";\n          display: inline-flex;\n          font-family: \"Font Awesome 5 Free\", sans-serif;\n          font-size: var(--switch-icon-size);\n          font-weight: var(--font-weight-black);\n          justify-content: center;\n        }\n      }\n\n      &:checked + label {\n        &::after {\n          content: \"\\f00c\";\n        }\n      }\n    }\n  }\n}\n\n@mixin switch-status {\n  // Focus\n  input:focus-visible + label,\n  input.focus-visible + label {\n    &::before {\n      @include focus-soft;\n    }\n  }\n\n  input:hover:not([disabled]):checked + label {\n    &::before {\n      background-image: linear-gradient(rgba(var(--on-rgb), var(--hover)), rgba(var(--on-rgb), var(--hover)));\n    }\n  }\n\n  input:hover:not([disabled]):not(:checked) + label {\n    &::before {\n      background-image: linear-gradient(rgba(var(--off-rgb), var(--hover)), rgba(var(--off-rgb), var(--hover)));\n    }\n  }\n\n  input:active:not([disabled]):checked + label {\n    &::before {\n      background-image: linear-gradient(rgba(var(--on-rgb), var(--pressed)), rgba(var(--on-rgb), var(--pressed)));\n    }\n  }\n\n  input:active:not([disabled]):not(:checked) + label {\n    &::before {\n      background-image: linear-gradient(rgba(var(--off-rgb), var(--pressed)), rgba(var(--off-rgb), var(--pressed)));\n    }\n  }\n}\n\n@mixin switch-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":""}