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

Padrão Digital de Governo

{"version":3,"file":"components/table/table.css","mappings":"AAKA;ECoBE;EACA;EACA;EACA;EACA;ADvBF;AC2BE;EACE;EACA;EACA;ADzBJ;AC4BE;EACE;AD1BJ;AC6BE;EACE;EACA;AD3BJ;AC8BE;EACE;EACA;AD5BJ;AC+BE;EACE;AD7BJ;ACkCE;EACE;ADhCJ;ACmCM;EACE;EACA;ADjCR;AC4CE;EACE;EACA;EACA;AD1CJ;AC4CI;;EAEE;EACA;EACA;EACA;AD1CN;AC6CI;EACE;AD3CN;AC+CI;;EAEE;EACA;AD7CN;ACkDE;EAEI;IACE;IACA;EDjDN;AACF;ACuDE;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ADrDJ;ACuDI;EACE;ADrDN;ACuDI;EACE;ADrDN;ACuDM;EACE;ADrDR;ACwDM;EACE;EACA;ADtDR;ACuDQ;EACE;EACA;EACA;EACA;EACA;ADrDV;ACwDM;EACE;ADtDR;AC6DE;;ECnIA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ED6HE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ADlDJ;ACoDI;;EACE;ADjDN;ACoDI;;EACE;EACA;EACA;EACA;ADjDN;ACmDM;;;;EAEE;EACA;EACA;AD/CR;ACmDI;;;;EAEE;EACA;AD/CN;ACkDI;;;EAEE;EACA;AD/CN;AC6EE;;EAEE;AD3EJ;AC6EM;;EACE;AD1ER;AC6EI;;EACE;AD1EN;ACkFM;;;EAGE;ADhFR;AC6EM;;;EAGE;AD3ER;ACwEM;;;EAGE;ADtER;AC6EE;ECrOA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AF2JF;AGVE;ED1JA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AFuKF;AI8CM;;;;;;;;;EAEE;EACA;AJrCR;AG5BM;EACE;EACA;EACA;AH8BR;ACyCI;;;;;EAGE;ADrCN;AC9MM;EACE;ADgNR,C","sources":["webpack://core/./src/components/table/_table.scss","webpack://core/./src/components/table/_mixins.scss","webpack://core/./src/partial/scss/mixins/_states.scss","webpack://core/./src/components/pagination/_mixins.scss","webpack://core/./src/components/input/_mixins.scss"],"sourcesContent":["@use \"sass:math\";\n @import \"../../partial/scss/base\";\n \n@import \"mixins\";\n\n.#{$prefix}table {\n  @include table-configs;\n}\n","// Dependências\n@import \"../pagination/mixins\";\n\n// Mixins\n@mixin table-configs {\n  @include table-tokens;\n  @include table-default;\n  @include table-header;\n  @include table-footer;\n  @include table-density;\n  @include table-dark-mode;\n  @include table-no-hover;\n}\n\n@mixin table-no-hover {\n  &.no-hover {\n    & td:not(.column-collapse):hover {\n      td {\n        background: none;\n      }\n    }\n  }\n}\n\n@mixin table-tokens {\n  --table-padding: var(--spacing-scale-3x);\n  --table-row-size: var(--table-row-medium);\n  --table-row-small: var(--spacing-scale-base);\n  --table-row-medium: var(--spacing-scale-2x);\n  --table-row-large: var(--spacing-scale-3x);\n}\n\n@mixin table-default {\n  caption {\n    opacity: 0;\n    position: absolute;\n    z-index: -1;\n  }\n\n  .responsive {\n    overflow: auto;\n  }\n\n  tr:hover td.column-collapse {\n    background-color: var(--background-alternative);\n    background-image: none;\n  }\n\n  .column-collapse {\n    background-color: var(--background-alternative);\n    width: 40px;\n  }\n\n  .column-checkbox {\n    width: 24px;\n  }\n}\n\n@mixin table-header {\n  .table-header {\n    position: relative;\n\n    &.show {\n      .top-bar {\n        opacity: 0;\n        pointer-events: none;\n      }\n    }\n  }\n  @include table-top-bar;\n  @include table-search;\n  @include table-selection-bar;\n}\n\n@mixin table-top-bar {\n  // Mobile\n  .top-bar {\n    align-items: center;\n    display: flex;\n    padding: var(--spacing-scale-base) var(--spacing-scale-2x) var(--spacing-scale-base) var(--table-padding);\n\n    .title,\n    .table-title {\n      color: var(--color);\n      flex-grow: 1;\n      font-size: var(--font-size-scale-up-01);\n      font-weight: var(--font-weight-semi-bold);\n    }\n\n    .actions-trigger {\n      margin-right: var(--spacing-scale-base);\n    }\n\n    // Abre dropdown à direita\n    .dropdown [data-toggle=\"dropdown\"] + *,\n    .dropdown [data-toggle=\"dropdown-legacy\"] + * {\n      left: auto;\n      right: 0;\n    }\n  }\n\n  // Tablet+\n  @media (min-width: $grid-breakpoint-sm) {\n    .top-bar {\n      title {\n        font-size: var(--font-size-scale-up-03);\n        line-height: var(--font-line-height-medium);\n      }\n    }\n  }\n}\n\n@mixin table-search {\n  .search-bar {\n    align-items: center;\n    bottom: 0;\n    display: none;\n    height: 56px;\n    left: 0;\n    padding-left: var(--table-padding);\n    padding-right: var(--spacing-scale-2x);\n    position: absolute;\n    right: 0;\n    top: 0;\n\n    &.show {\n      display: flex;\n    }\n    .#{$prefix}input {\n      flex: 1;\n\n      label {\n        display: none;\n      }\n\n      input {\n        margin-bottom: 0;\n        margin-top: 0;\n        + .#{$prefix}button {\n          --button-size: var(--button-small);\n          margin-top: 0;\n          position: absolute;\n          right: var(--spacing-scale-half);\n          top: 0;\n        }\n      }\n      + .#{$prefix}button {\n        margin-left: var(--table-row-medium);\n      }\n    }\n  }\n}\n\n@mixin table-selection-bar {\n  .selected-bar,\n  .selection-bar {\n    @include dark-mode;\n    --table-padding: var(--spacing-scale-base) var(--spacing-scale-2x);\n    align-items: center;\n    background-color: var(--interactive-light);\n    bottom: 0;\n    color: var(--color);\n    display: none;\n    left: 0;\n    padding: var(--table-padding);\n    right: 0;\n    top: 0;\n\n    &.show {\n      display: flex;\n    }\n\n    .info {\n      align-items: center;\n      display: flex;\n      flex-grow: 1;\n      white-space: nowrap;\n\n      [data-toggle=\"check-all\"],\n      .select-all {\n        font-size: var(--font-size-scale-up-03);\n        margin-right: var(--spacing-scale-half);\n        padding: 0;\n      }\n    }\n\n    .text,\n    .count {\n      line-height: var(--font-line-height-low);\n      padding-right: var(--spacing-scale-half);\n    }\n\n    &.is-active,\n    &.active {\n      opacity: 1;\n      top: 0;\n    }\n  }\n}\n\n@mixin table-selection {\n  &[data-selection] {\n    tbody {\n      tr {\n        position: static;\n      }\n\n      td {\n        padding-left: calc(var(--table-padding) * 0.5);\n\n        &:first-child {\n          --checkbox-size: 24px;\n          left: var(--table-padding);\n          padding-left: var(--table-padding);\n          padding-right: calc(var(--table-padding) * 0.5);\n          position: static;\n          width: var(--checkbox-size);\n        }\n      }\n    }\n  }\n}\n\n@mixin table-footer {\n  // Mobile\n  .footer,\n  .table-footer {\n    padding: var(--spacing-scale-base) var(--spacing-scale-2x) var(--spacing-scale-base) var(--table-padding);\n    .#{$prefix}input {\n      .#{$prefix}button {\n        transform: rotate(180deg);\n      }\n    }\n    .#{$prefix}list {\n      bottom: 100%;\n    }\n  }\n}\n\n@mixin table-density {\n  @each $size in small, medium, large {\n    &.#{$size} {\n      table,\n      .headers,\n      .clone-headers .item {\n        --table-row-size: var(--table-row-#{$size});\n      }\n    }\n  }\n}\n\n@mixin table-dark-mode {\n  &.inverted,\n  &.dark-mode {\n    @include dark-mode;\n    @include pagination-dark-mode;\n\n    th,\n    td.column-collapse,\n    tr:hover td.column-collapse {\n      background-color: var(--background-dark);\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","// Dependências\n@import \"../select/mixins\";\n\n// Mixins\n@mixin pagination-configs {\n  @include pagination-tokens;\n  @include pagination-default;\n  @include pagination-page;\n  @include pagination-ellipsis;\n  @include pagination-sizes;\n  @include pagination-contextual;\n  @include pagination-dark-mode;\n  @include pagination-select-fix;\n}\n\n@mixin pagination-select-fix {\n  .input-group {\n    .input-icon {\n      display: none;\n    }\n  }\n}\n\n@mixin pagination-tokens {\n  --pagination-margin: var(--spacing-scale-base);\n  --pagination-select-width: 88px;\n  --pagination-size: var(--pagination-medium);\n  --pagination-small: 24px;\n  --pagination-medium: 32px;\n  --pagination-large: 40px;\n}\n\n@mixin pagination-default {\n  color: var(--color);\n  display: flex;\n  flex-wrap: wrap;\n  font-weight: var(--font-weight);\n  justify-content: center;\n\n  ul {\n    align-items: center;\n    display: flex;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n\n  li {\n    padding: 0;\n  }\n}\n\n@mixin pagination-page {\n  &.dark-mode {\n    .page {\n      color: var(--color-dark);\n    }\n\n    .br-select {\n      .br-item {\n        label {\n          color: var(--color-dark);\n        }\n      }\n    }\n  }\n\n  .page {\n    @include hover;\n    align-items: center;\n    border: 1px solid transparent;\n    border-radius: 100em;\n    color: var(--interactive);\n    display: inline-flex;\n    justify-content: center;\n    margin: 0 calc(var(--pagination-margin) * 0.5);\n    min-height: var(--pagination-size);\n    min-width: var(--pagination-size);\n    padding: 0 var(--spacing-scale-base);\n    white-space: nowrap;\n\n    &.active {\n      background: var(--active);\n      color: var(--color-dark);\n      font-weight: var(--font-weight-semi-bold);\n    }\n  }\n}\n\n@mixin pagination-ellipsis {\n  .pagination-ellipsis {\n    margin: 0 calc(var(--pagination-margin) * 0.5);\n    position: relative;\n    .#{$prefix}button {\n      --button-size: var(--pagination-size);\n    }\n    .#{$prefix}list {\n      @include scrollbar;\n      max-height: 220px;\n      min-width: 4em;\n      overflow-y: auto;\n      z-index: var(--z-index-layer-1);\n    }\n  }\n}\n\n@mixin pagination-sizes {\n  @each $size in small, medium, large {\n    &.#{$size} {\n      --pagination-size: var(--pagination-#{$size});\n    }\n  }\n}\n\n@mixin pagination-contextual {\n  .pagination-information {\n    align-items: center;\n    display: flex;\n  }\n\n  .pagination-per-page,\n  .pagination-go-to-page {\n    align-items: center;\n    display: flex;\n    .#{$prefix}input {\n      align-items: center;\n      display: flex;\n\n      label {\n        font-weight: var(--font-weight-regular);\n        margin-bottom: 0;\n        margin-right: var(--spacing-scale-base);\n        padding-bottom: 0;\n      }\n\n      input {\n        --input-size: var(--pagination-medium);\n        padding-left: var(--spacing-scale-base);\n        padding-right: calc(var(--spacing-scale-baseh) + 32px);\n        text-align: right;\n        width: var(--pagination-select-width);\n\n        &:not(:focus) {\n          border-color: transparent;\n        }\n      }\n    }\n    .#{$prefix}list {\n      min-width: 5em;\n      right: 0;\n      width: auto;\n    }\n  }\n\n  .pagination-arrows {\n    align-items: center;\n    display: flex;\n  }\n  .#{$prefix}select {\n    .#{$prefix}input {\n      .#{$prefix}button {\n        bottom: auto;\n        margin-top: 0;\n        position: absolute;\n        right: var(--spacing-scale-half);\n        top: auto;\n        transform: none;\n      }\n    }\n  }\n  .#{$prefix}divider {\n    border-right-width: var(--divider-size);\n    border-top: 0;\n  }\n}\n\n@mixin pagination-dark-mode {\n  &.inverted,\n  &.dark-mode {\n    @include dark-mode;\n    @include select-dark-mode;\n\n    .page {\n      &.active {\n        --interactive-rgb: var(--active-rgb);\n        background-color: var(--background-light);\n        color: var(--active);\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":""}