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