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

Padrão Digital de Governo

{"version":3,"file":"components/item/item.css","mappings":"AAKA;EACE;ECKA;EACA;EACA;EAIA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ADXF;ACcE;EACE;EACA;ADZJ;ACcI;;EAEE;EACA;ADZN;ACiBE;EACE;EACA;EACA;ADfJ;ACmBE;EACE;ADjBJ;AEtBI;EACE;AFwBN;AC0BI;EACE;EACA;EACA;EACA;ADxBN;AC2BQ;EACE;EACA;EACA;EACA;ADzBV;AC2BU;EACE;EACA;ADzBZ;AC4BU;EACE;EACA;AD1BZ;AC+BU;EACE;AD7BZ;ACsCM;EACE;ADpCR;ACsCQ;EACE;ADpCV;ACuCQ;EACE;EACA;ADrCV;ACwCQ;EACE;ADtCV;ACwCU;EACE;EACA;ADtCZ;AC+CM;EACE;EACA;AD7CR;AC+CQ;EACE;EACA;AD7CV;ACgDQ;EACE;AD9CV;ACgDU;EACE;EACA;AD9CZ;ACwDI;EEzHF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AHoEF;AC4CI;EEzHF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AHgFF;ACgCI;EEzHF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AH4FF;ACoBI;EEzHF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AHwGF;ACQI;EEzHF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AHoHF;ACJI;EEzHF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AHgIF;AChBI;EEzHF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AH4IF;AC5BI;EEzHF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AHwJF;ACxCI;EEzHF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AHoKF;ACpDI;EEzHF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AHgLF;AChEI;EEzHF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AH4LF;AC5EI;EEzHF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AHwMF;ACxFI;EEzHF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AHoNF;ACpGI;EEzHF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AHgOF;AChHI;EEzHF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AH4OF;ACpHE;EEjIA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EF0HE;AD+HJ;AC3HE;EEvIA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EFgIE;EACA;ADsIJ;AClIE;EE9IA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AHmRF;AC1II;EE3HF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EFoHI;EACA;ADqJN;AEzTI;EACE;AF2TN;AC7IM;EACE;AD+IR;ACrHE;EACE;EACA;ADuHJ;AClHE;EACE;EACA;ADoHJ;AC/GE;EACE;ADiHJ;;AAvUA;EACE;AA0UF;AE9UI;EACE;AFgVN;AIlVI;EACE;AJoVN;;AA3UA;EACE;EACA;AA8UF;AK3VE;EACE;AL6VJ;AK1VE;EAEE;EACA;EACA;EACA;AL2VJ;AElWI;EACE;AFoWN;AItWI;EACE;AJwWN,C","sources":["webpack://core/./src/components/item/_item.scss","webpack://core/./src/components/item/_mixins.scss","webpack://core/./src/partial/scss/mixins/_hover.scss","webpack://core/./src/partial/scss/mixins/_states.scss","webpack://core/./src/partial/scss/mixins/_active.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}item {\n  background: var(--background);\n  @include item-configs;\n}\n\n// Item aplicado em link/botão\na.#{$prefix}item {\n  color: var(--interactive);\n  @include hover;\n  @include active;\n}\n\nbutton.#{$prefix}item {\n  background-color: transparent;\n  color: var(--color);\n  @include focus;\n  @include hover(\"color\");\n  @include active(\"color\");\n}\n","@mixin item-configs {\n  @include item-tokens;\n  @include item-default;\n  @include item-checkbox;\n  @include item-colors;\n  @include item-states;\n  @include item-toggle;\n  @include item-datatoggle-list;\n}\n\n@mixin item-tokens {\n  --item-padding-x: var(--spacing-scale-2x);\n  --item-padding-y: var(--spacing-scale-base);\n  --item-padding: var(--item-padding-y) var(--item-padding-x);\n}\n\n@mixin item-default {\n  --focus-offset: calc(var(--focus-width) * -1);\n  border: 0;\n  color: var(--color);\n  display: block;\n  font-weight: var(--font-weight);\n  padding: var(--item-padding);\n  text-align: left;\n  width: 100%;\n\n  // Regras para Grid interna\n  .row {\n    margin-left: calc(-1 * var(--spacing-scale-base));\n    margin-right: calc(-1 * var(--spacing-scale-base));\n\n    .col,\n    [class*=\"col-\"] {\n      padding-left: var(--spacing-scale-base);\n      padding-right: var(--spacing-scale-base);\n    }\n  }\n\n  // Fix para floats internos\n  &::after {\n    clear: both;\n    content: \"\";\n    display: block;\n  }\n\n  // Transforma curso em cursor pointer quando br-item eh data-toggle\n  &[data-toggle] {\n    cursor: pointer;\n  }\n}\n\n// TODO: migrar customização do Select para o mixin abaixo\n@mixin item-checkbox {\n  &[data-toggle=\"selection\"] {\n    @include hover(\"color\");\n  }\n\n  & > .#{$prefix}checkbox,\n  & > .#{$prefix}radio {\n    &:not(.hidden-label) {\n      margin-bottom: calc(var(--item-padding-y) * -1);\n      margin-left: calc(var(--item-padding-x) * -1);\n      margin-right: calc(var(--item-padding-x) * -1);\n      margin-top: calc(var(--item-padding-y) * -1);\n\n      input {\n        + label {\n          padding-bottom: var(--item-padding-y);\n          padding-top: var(--item-padding-y);\n          top: 1px;\n          width: 100%;\n\n          &::before {\n            left: var(--item-padding-x);\n            top: calc(var(--item-padding-y) - 1px);\n          }\n\n          &:empty {\n            left: 0;\n            top: 1px;\n          }\n        }\n\n        &:hover:not(:disabled) {\n          + label::before {\n            background-image: none;\n          }\n        }\n      }\n    }\n  }\n\n  & > .#{$prefix}checkbox {\n    input:not(:indeterminate) {\n      + label {\n        min-height: calc(var(--checkbox-size) + var(--item-padding-y) * 2);\n\n        &:not(:empty) {\n          padding-left: calc(var(--checkbox-padding) + var(--checkbox-size) + var(--item-padding-x));\n        }\n\n        &::after {\n          left: calc(var(--item-padding-x) + 8px);\n          top: calc(var(--item-padding-y) + 4px);\n        }\n\n        &:empty {\n          min-height: var(--checkbox-size);\n\n          &::after {\n            left: 8px;\n            top: 4px;\n          }\n        }\n      }\n    }\n  }\n\n  .#{$prefix}radio {\n    input {\n      + label {\n        min-height: calc(var(--radio-size) + var(--item-padding-y) * 2);\n        padding-left: calc(var(--spacing-scale-base) + var(--radio-size) + var(--item-padding-x));\n\n        &::after {\n          left: calc(var(--item-padding-x) + var(--radio-bullet-position));\n          top: calc(var(--item-padding-y) + var(--radio-bullet-position) - 1px);\n        }\n\n        &:empty {\n          min-height: var(--radio-size);\n\n          &::after {\n            left: var(--radio-bullet-position);\n            top: var(--radio-bullet-position);\n          }\n        }\n      }\n    }\n  }\n}\n\n@mixin item-colors {\n  @each $key in map-keys($br-colors) {\n    &.#{$key} {\n      @include colorize($key);\n    }\n  }\n}\n\n@mixin item-states {\n  // Selecionado\n  &.selected {\n    @include dark-mode;\n    background-color: var(--selected);\n  }\n\n  // Ativo\n  &.active {\n    @include dark-mode;\n    background-color: var(--active);\n    color: var(--color);\n  }\n\n  // Dark-mode\n  &.inverted,\n  &.dark-mode {\n    @include dark-mode;\n\n    &.active {\n      @include light-mode($interactive-rgb: \"active-rgb\");\n      background-color: var(--background-light);\n      color: var(--active);\n    }\n  }\n}\n\n// TODO: Este mixin ainda é necessário?\n@mixin item-toggle {\n  &[data-toggle] {\n    @include hover(\"color\");\n\n    .content {\n      i {\n        color: var(--interactive);\n      }\n    }\n  }\n}\n\n@mixin item-center {\n  align-items: center;\n  display: flex;\n\n  .content {\n    flex: 1;\n  }\n\n  @include hover;\n}\n\n@mixin item-brackground-transparent {\n  &.active {\n    background: transparent;\n  }\n}\n\n@mixin item-datatoggle-list {\n  // Necessario devido a implementacao do fontawasome seguindo os padroes do projeto. Antes usava-se <i></i>\n  // Css ajusta o alinhamento do item  com o icone quando este faz parte de uma lista.\n  .content {\n    align-items: center;\n    display: flex;\n  }\n\n  // Necessario devido a implementacao do fontawasome seguindo os padroes do projeto. Antes usava-se <i></i>\n  // Css ajusta o tamanho do icone de seta quando item faz parte de uma lista.\n  [class*=\"fa-\"] {\n    height: 16px;\n    width: 14px !important;\n  }\n\n  // Necessario devido a implementacao do fontawasome seguindo os padroes do projeto. Antes usava-se <i></i>\n  // Atribuir a cor azul para seta datatoggle\n  .toogle-icon-interactive {\n    color: var(--interactive);\n  }\n}\n\n@mixin item-align-horizontal-list {\n  flex: 1;\n  height: auto;\n  min-height: 56px;\n  width: auto;\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","// 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 active: feedback ao clicar no elemento\n/// @example scss - Uso prático\n///  a {\n///    @include active;\n///  }\n@mixin active($color: \"interactive\") {\n  &:not(:disabled) {\n    &:active {\n      background-image: linear-gradient(\n        rgba(var(--#{$color}-rgb), var(--pressed)),\n        rgba(var(--#{$color}-rgb), var(--pressed))\n      );\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":[],"sourceRoot":""}