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

Padrão Digital de Governo

{"version":3,"file":"components/select/select.css","mappings":"AAKA;ECSE;EACA;EAkBA;EACA;EACA;AD7BF;ACYI;EACE;EACA;ADVN;ACYM;EACE;EACA;EACA;EACA;ADVR;ACwBE;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ADtBJ;AE3BE;EACE;EACA;AF6BJ;AE1BE;EACE;AF4BJ;AEzBE;EACE;AF2BJ;AEvBI;EACE;AFyBN;ACaI;EAEE;EACA;ADZN;ACgBM;EACE;ADdR;ACkBI;EACE;ADhBN;ACmBE;EExBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EFiBE;ADRJ;ACUI;EACE;ADRN;ACUI;;EAEE;EACA;ADRN;ACYU;;EACE;ADTZ;ACaQ;;EACE;ADVV;ACgBQ;EACE;EACA;EACA;EACA;EACA;ADdV;ACgBU;EAEE;ADfZ;ACqBI;EACE;ADnBN;ACsBI;EACE;ADpBN;AI1FE;EACE;AJ4FJ;AIzFE;EAEE;EACA;EACA;EACA;AJ0FJ;AKjGI;EACE;ALmGN;ACaI;EElGF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AHwFF;AIlHE;EACE;AJoHJ;AIjHE;EAEE;EACA;EACA;EACA;AJkHJ;AKzHI;EACE;AL2HN;ACJI;EACE;EACA;ADMN;ACCI;EAEE;EACA;EACA;ADAN;ACIQ;;;EACE;ADAV;ACGQ;;;EACE;ADCV;ACIU;;;EACE;ADAZ;ACKM;EAEE;ADJR;AMsFM;;;EAEE;EACA;ANnFR,C","sources":["webpack://core/./src/components/select/_select.scss","webpack://core/./src/components/select/_mixins.scss","webpack://core/./src/partial/scss/mixins/_scrollbar.scss","webpack://core/./src/partial/scss/mixins/_states.scss","webpack://core/./src/partial/scss/mixins/_focus.scss","webpack://core/./src/partial/scss/mixins/_hover.scss","webpack://core/./src/components/input/_mixins.scss"],"sourcesContent":["@use \"sass:math\";\n @import \"../../partial/scss/base\";\n \n@import \"mixins\";\n\n.#{$prefix}select {\n  @include select-configs;\n}\n","// Dependências\n@import \"../input/mixins\";\n\n// Mixins\n@mixin select-configs {\n  @include select-tokens;\n  @include select-default;\n  @include select-list;\n  @include select-multiple;\n  @include select-dark-mode;\n}\n\n@mixin select-tokens {\n  // }\n  --select-divider: 1px solid var(--color-secondary-04);\n  --select-shadow: var(--surface-shadow-md);\n  // .overflow-text {\n  .#{$prefix}input {\n    input {\n      padding-right: 29px;\n      text-overflow: ellipsis;\n\n      &::after {\n        bottom: 0;\n        padding: 0 5px;\n        position: absolute;\n        right: 0;\n      }\n    }\n  }\n}\n\n@mixin select-default {\n  max-width: 400px;\n  min-width: 100px;\n  position: relative;\n}\n\n// TODO: mover a customização abaixo para o List\n@mixin select-list {\n  .#{$prefix}list {\n    background: var(--bg-color);\n    box-shadow: var(--select-shadow);\n    display: none;\n    margin-top: -2px;\n    max-height: 404px;\n    overflow: auto;\n    position: absolute;\n    resize: none;\n    width: 100%;\n    z-index: 1;\n\n    @include scrollbar;\n\n    &:focus,\n    &:active {\n      color: var(--color-secondary-09);\n      outline: none;\n    }\n\n    &:hover {\n      &::-webkit-scrollbar-thumb {\n        background: var(--color-secondary-07);\n      }\n    }\n\n    &[expanded] {\n      display: block;\n    }\n  }\n  .#{$prefix}item {\n    @include light-mode;\n    --item-padding-y: var(--spacing-scale-2x);\n\n    .content {\n      padding: 0;\n    }\n    .#{$prefix}checkbox,\n    .#{$prefix}radio {\n      --item-padding-x: var(--spacing-scale-2x);\n      --item-padding-y: var(--spacing-scale-2x);\n\n      input {\n        &:hover:not(:disabled) {\n          + label::before {\n            background-image: none;\n          }\n        }\n\n        + label {\n          padding-left: calc(var(--checkbox-padding) + var(--checkbox-size) + var(--item-padding-x));\n        }\n      }\n    }\n    .#{$prefix}radio {\n      input {\n        + label {\n          color: var(--text-color);\n          display: block;\n          height: auto;\n          min-height: 0;\n          padding: var(--item-padding);\n\n          &::before,\n          &::after {\n            content: none;\n          }\n        }\n      }\n    }\n\n    &:not(:last-child) {\n      border-bottom: var(--select-divider);\n    }\n\n    &:not([disabled]) {\n      --focus-offset: calc(var(--spacing-scale-half) * -1);\n      @include focus;\n      @include hover(\"color\");\n    }\n\n    &.selected,\n    &[selected] {\n      @include dark-mode;\n      @include focus;\n      @include hover(\"color\");\n    }\n\n    &.disabled {\n      line-height: calc(var(--font-line-height-high) * 2);\n      padding-left: calc(var(--item-padding) + var(--spacing-scale-base));\n    }\n  }\n}\n\n@mixin select-multiple {\n  .#{$prefix}item {\n    &.highlighted,\n    &[highlighted] {\n      background-color: var(--gray-2);\n      padding-bottom: var(--spacing-scale-base);\n      padding-top: var(--spacing-scale-base);\n      // background: rgba(v(rgb-support-03), 0.16);\n      .#{$prefix}checkbox,\n      .#{$prefix}radio {\n        label {\n          font-weight: var(--font-weight-semi-bold);\n        }\n\n        &:hover {\n          background: linear-gradient(\n            rgba(var(--interactive-rgb), var(--hover)),\n            rgba(var(--interactive-rgb), var(--hover))\n          );\n\n          label {\n            color: var(--text-color);\n          }\n        }\n      }\n\n      &.selected,\n      &[selected] {\n        background-color: var(--selected);\n      }\n    }\n  }\n}\n\n@mixin select-dark-mode {\n  @include input-dark-mode;\n}\n","@mixin scrollbar {\n  &::-webkit-scrollbar {\n    height: var(--spacing-scale-base);\n    width: var(--spacing-scale-base);\n  }\n\n  &::-webkit-scrollbar-track {\n    background: var(--gray-10);\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background: var(--gray-30);\n  }\n\n  &:hover {\n    &::-webkit-scrollbar-thumb {\n      background: var(--gray-40);\n    }\n  }\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","/// 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","/// Aplica hover: feedback ao colocar o cursor no elemento\n/// @param {String} $color [\"interactive\"] - Cor do hover **(Opcional)**\n/// @example scss - Uso prático\n///  a {\n///    @include hover;\n///  }\n@mixin hover($color: \"interactive\") {\n  &:not(:disabled) {\n    &:hover {\n      background-image: linear-gradient(\n        rgba(var(--#{$color}-rgb), var(--hover)),\n        rgba(var(--#{$color}-rgb), var(--hover))\n      );\n    }\n  }\n}\n","@mixin input-configs {\n  @include input-tokens;\n  @include input-default;\n  @include input-inline;\n  @include input-icon;\n  @include input-button;\n  @include input-highlight;\n  @include input-autocomplete;\n  @include input-states;\n  @include input-densities;\n  @include input-dark;\n}\n\n@mixin input-tokens {\n  --input-button-margin: var(--spacing-scale-half);\n  --input-padding: 0 var(--spacing-scale-2x);\n  --input-padding-button: var(--spacing-scale-5x);\n  --input-padding-icon: var(--spacing-scale-5x);\n  --input-size: var(--input-medium);\n  --input-small: 32px;\n  --input-medium: 40px;\n  --input-large: 48px;\n  --input-highlight: 56px;\n}\n\n@mixin input-default {\n  @include light-mode;\n  color: var(--color);\n  position: relative;\n\n  input {\n    background-color: var(--background-light);\n    border-color: var(--border-color-alternative);\n    border-radius: var(--surface-rounder-sm);\n    border-style: var(--border-style);\n    border-width: var(--border-width);\n    color: var(--color-light);\n    display: block;\n    font-size: var(--font-size-scale-up-01);\n    font-weight: var(--font-weight-medium);\n    height: var(--input-size);\n    margin-top: var(--spacing-scale-half);\n    padding-bottom: 0;\n    padding-left: var(--spacing-scale-2x);\n    padding-right: var(--spacing-scale-2x);\n    padding-top: 0;\n    width: 100%;\n\n    // Remove ícones nativos de browsers\n    // mostrar senha IE/Edge\n    &::-ms-reveal,\n    &::-ms-clear,\n    &::-webkit-calendar-picker-indicator {\n      display: none;\n    }\n    // busca no Chrome\n    &[type=\"search\"]::-webkit-search-decoration,\n    &[type=\"search\"]::-webkit-search-cancel-button,\n    &[type=\"search\"]::-webkit-search-results-button,\n    &[type=\"search\"]::-webkit-search-results-decoration {\n      appearance: none;\n    }\n  }\n}\n\n@mixin input-inline {\n  &.input-inline {\n    display: flex;\n\n    .input-label {\n      margin-right: var(--spacing-scale-baseh);\n      margin-top: calc(var(--input-size) * 0.5 - var(--spacing-scale-half));\n    }\n\n    .input-content {\n      flex: 1;\n    }\n  }\n}\n\n@mixin input-icon {\n  .input-group {\n    position: relative;\n  }\n\n  .input-icon {\n    align-items: center;\n    color: var(--border-color-alternative);\n    display: flex;\n    height: var(--input-size);\n    margin-left: var(--spacing-scale-baseh);\n    position: absolute;\n\n    + input {\n      padding-left: var(--input-padding-icon);\n    }\n  }\n}\n\n@mixin input-button {\n  .#{$prefix}button {\n    --button-size: var(--button-small);\n    @include light-mode;\n    border-radius: 50%;\n    float: right;\n    margin-right: var(--input-button-margin);\n    margin-top: calc((var(--input-size) + var(--spacing-scale-half)) * -1);\n    padding: 0;\n    position: relative;\n    // Centraliza botão\n    transform: translateY(calc((var(--input-size) - var(--button-size)) * 0.5));\n    width: var(--button-size);\n  }\n\n  &.input-button {\n    input {\n      padding-right: var(--input-padding-button);\n    }\n  }\n  // Manter compatibilidade com versão 15.0.2 e anteriores\n  &.has-icon {\n    input {\n      padding-right: var(--input-padding-icon);\n    }\n    .#{$prefix}button.circle {\n      float: right;\n      margin-right: var(--spacing-scale-half);\n      margin-top: calc((var(--button-size) + var(--spacing-scale-half) + var(--spacing-scale-half)) * -1);\n      transform: translateY(0);\n    }\n\n    &.small {\n      .#{$prefix}button.circle {\n        margin-top: calc((var(--button-size) + var(--spacing-scale-base)) * -1);\n      }\n    }\n\n    &.large {\n      .#{$prefix}button.circle {\n        margin-top: calc(var(--button-size) * -1);\n      }\n    }\n  }\n}\n\n@mixin input-highlight {\n  &.input-highlight {\n    --input-button-margin: var(--spacing-scale-2x);\n    --input-padding: 0 var(--spacing-scale-3x);\n    --input-padding-button: var(--spacing-scale-7x);\n    --input-padding-icon: var(--spacing-scale-7x);\n    --input-size: var(--input-highlight);\n\n    input {\n      background-color: var(--gray-2);\n      border-color: transparent;\n      padding-left: var(--spacing-scale-3x);\n      padding-right: var(--spacing-scale-3x);\n    }\n\n    .input-icon {\n      margin-left: var(--spacing-scale-3x);\n\n      + input {\n        padding-left: var(--spacing-scale-7x);\n      }\n    }\n  }\n}\n\n// TODO: Este mixin ainda é necessário?\n@mixin input-autocomplete {\n  .#{$prefix}list {\n    box-shadow: var(--surface-shadow-md);\n    max-height: 530px;\n    overflow: auto;\n    position: absolute;\n    width: 100%;\n    z-index: var(--z-index-layer-2);\n\n    @include scrollbar;\n\n    .#{$prefix}item {\n      --item-padding-y: var(--spacing-scale-2x);\n      @include hover(\"color\");\n\n      &:not(:first-child) {\n        border-top: var(--surface-width-sm) solid var(--border-color);\n      }\n    }\n  }\n}\n\n@mixin input-states {\n  // Borda do input\n  @each $color in \"success\", \"danger\", \"warning\", \"info\" {\n    &.#{$color},\n    &[data-#{$color}] {\n      input {\n        border-color: var(--#{$color});\n        border-width: 2px;\n      }\n    }\n  }\n\n  input {\n    // Hover\n    @include hover(\"color\");\n    // Foco tênue\n    &:focus,\n    &:focus-visible,\n    &.focus-visible {\n      @include focus-soft;\n    }\n  }\n  // Componente Message (Feedback)\n  .feedback {\n    margin-bottom: var(--spacing-scale-half);\n  }\n}\n\n@mixin input-densities {\n  @each $size in small, medium, large {\n    &.#{$size},\n    &[data-#{$size}] {\n      --input-size: var(--input-#{$size});\n    }\n  }\n}\n\n@mixin input-dark {\n  &.inverted,\n  &.dark-mode {\n    &,\n    label {\n      --color: var(--color-dark);\n      --focus-color: var(--focus-color-dark);\n    }\n  }\n}\n\n@mixin input-dark-mode {\n  &.inverted,\n  &.dark-mode {\n    .#{$prefix}input {\n      &,\n      label {\n        --color: var(--color-dark);\n        --focus-color: var(--focus-color-dark);\n      }\n    }\n  }\n}\n"],"names":[],"sourceRoot":""}