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

Padrão Digital de Governo

{"version":3,"file":"components/switch/switch.min.css","mappings":"AAKA,WCOE,2CAA4C,CAC5C,yCAA0C,CAC1C,gDAAiD,CACjD,4CAA6C,CAC7C,0BAA2B,CAC3B,2BAA4B,CAC5B,0BAA2B,CAC3B,yBAA0B,CAC1B,0BAA2B,CAC3B,yBAA0B,CAC1B,0BAA2B,CAC3B,2BAA4B,CAC5B,0BAA2B,CAC3B,uCAAwC,CACxC,wCAAyC,CACzC,yCAA0C,CAI1C,mBAAoB,CACpB,+BDbF,CCeE,iBACE,SAAU,CACV,iBDbJ,CCeI,uBACE,kBAAmB,CACnB,kBAAmB,CACnB,cAAe,CACf,mBAAoB,CACpB,qCAAsC,CACtC,eAAgB,CAChB,iBDbN,CCeM,8BACE,kCAAmC,CACnC,oCAAqC,CACrC,mBAAoB,CACpB,UAAW,CACX,2BAA4B,CAC5B,iBAAkB,CAClB,yBDbR,CCgBM,6BACE,2BAA4B,CAC5B,iBAAkB,CAClB,UAAW,CACX,gCAAiC,CACjC,iBAAkB,CAClB,8BAAgC,CAChC,+BDdR,CCmBM,qCACE,0BDjBR,CCyBI,uBACE,iEDvBN,CCyBM,6BACE,iCDvBR,CC0BM,8BACE,ODxBR,CC2BM,6BACE,2CDzBR,CC8BM,qCACE,SD5BR,CCmCM,6BACE,gEAAiE,CACjE,eD9BR,CCgCQ,oCACE,MD9BV,CCiCQ,mCACE,QD/BV,CCoCQ,2CACE,gEDlCV,CCwCE,eACE,uCDtCJ,CCyCM,2BACE,sBAAuB,CACvB,eDvCR,CCyCQ,kCACE,QAAS,CACT,MDvCV,CC0CQ,iCACE,UAAW,CACX,QDxCV,CC6CQ,yCACE,gED3CV,CCqDI,iBACE,2CACA,yCACA,gDACA,2CDhDN,CC4CI,kBACE,4CACA,0CACA,iDACA,4CD1CN,CCsCI,iBACE,2CACA,yCACA,gDACA,2CDpCN,CC2CI,8BACE,iBAAkB,CAClB,kBAAmB,CACnB,qCAAsC,CACtC,sCAAuC,CACvC,eDzCN,CC2CM,qCACE,2BDzCR,CC6CI,sCACE,kBD3CN,CC6CM,6CACE,0BD3CR,CCqDQ,kCACE,kBAAmB,CACnB,uBAAwB,CACxB,eAAgB,CAChB,mBAAoB,CACpB,2CAA8C,CAC9C,iCAAkC,CAClC,oCAAqC,CACrC,sBDnDV,CCwDQ,0CACE,eDtDV,CCiEI,wFC5LF,mCAAqC,CACrC,qDAAsD,CACtD,YF+HF,CCiEI,4DACE,mGD/DN,CCoEI,kEACE,qGDlEN,CCuEI,6DACE,uGDrEN,CC0EI,mEACE,yGDxEN,CCgFI,8FAEE,uBD7EN","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":""}