design-system-govbr-rnp
Version:
## Padrão Digital de Governo - React Biblioteca de componentes React que implementa o [Padrão Visual digital do governo](https://www.gov.br/ds/). O objetivo da biblioteca é facilitar a implementação e promover a padronização das interfaces de sistemas do
63 lines • 1.66 kB
CSS
table {
--table-background: var(--background);
--table-color: var(--color);
--table-border-color: var(--gray-20);
--table-border-style: solid;
--table-border-width: 1px;
--table-hover: var(--color-rgb);
--table-padding: var(--spacing-scale-3x);
--table-font-weight: var(--font-weight-medium);
--table-th-background: var(--background-alternative);
--table-th-font-weight: var(--font-weight-semi-bold);
--table-row-size: var(--spacing-scale-2x);
border-collapse: collapse;
width: 100%;
}
th {
background-color: var(--background-alternative);
font-weight: var(--table-th-font-weight);
}
td {
font-weight: var(--table-font-weight);
}
td,
th {
color: var(--color);
font-size: var(--font-size-scale-base);
font-weight: var(--font-weight-medium);
padding: var(--table-row-size) var(--table-padding);
}
td:not([align]),
th:not([align]) {
text-align: left;
}
tr.is-selected,
tr.selected {
--color: var(--color-dark);
--color-rgb: var(--color-dark-rgb);
--text-color: var(--color);
--interactive: var(--interactive-dark);
--interactive-rgb: var(--interactive-dark-rgb);
--visited: var(--visited-dark);
--hover: var(--hover-dark);
--pressed: var(--pressed-dark);
--focus-color: var(--focus-color-dark);
--focus: var(--focus-color);
}
tr.is-selected td,
tr.is-selected th,
tr.selected td,
tr.selected th {
background-color: var(--selected);
}
tr:hover td {
background-image: linear-gradient(
rgba(var(--color-rgb), var(--hover)),
rgba(var(--color-rgb), var(--hover))
);
}
tbody td,
tbody th {
border-bottom: var(--table-border-width) var(--table-border-style)
var(--table-border-color);
}