mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 12:09:26 +00:00
57 lines
1.5 KiB
CSS
57 lines
1.5 KiB
CSS
/*! Tables */
|
|
:root {
|
|
--table-border-color: var(--component-border-color);
|
|
--table-border-width: var(--component-border-width);
|
|
--table-header-bg-color: transparent;
|
|
--table-stripe-bg-color: var(--component-bg-color);
|
|
--table-hover-color: var(--color-white);
|
|
--table-hover-bg-color: var(--state-primary);
|
|
--table-spacing-x: calc(var(--component-spacing-small) * 1.5);
|
|
--table-spacing-y: var(--component-spacing-small);
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
table caption {
|
|
caption-side: bottom;
|
|
font-size: var(--font-size-small);
|
|
color: var(--state-secondary);
|
|
text-align: center;
|
|
padding-top: var(--table-spacing-y);
|
|
}
|
|
|
|
table th {
|
|
text-align: left;
|
|
background: var(--table-header-bg-color);
|
|
border-bottom: solid calc(var(--table-border-width) * 2) var(--table-border-color);
|
|
padding: var(--table-spacing-y) var(--table-spacing-x);
|
|
}
|
|
|
|
table td {
|
|
border-bottom: solid var(--table-border-width) var(--table-border-color);
|
|
padding: var(--table-spacing-y) var(--table-spacing-x);
|
|
}
|
|
|
|
table.table-striped tr:nth-child(odd) td {
|
|
background-color: var(--table-stripe-bg-color);
|
|
}
|
|
|
|
table.table-bordered {
|
|
border: solid var(--table-border-width) var(--table-border-color);
|
|
}
|
|
|
|
table.table-bordered td {
|
|
border-style: solid;
|
|
border-width: var(--table-border-width);
|
|
border-color: var(--table-border-color);
|
|
}
|
|
|
|
table.table-hoverable tbody tr:hover td {
|
|
color: var(--table-hover-color);
|
|
background-color: var(--table-hover-bg-color);
|
|
}
|