KNACSS/sass/components/_tables.scss

53 lines
919 B
SCSS
Raw Normal View History

2014-05-04 15:48:00 +02:00
/* ----------------------------- */
2016-05-20 08:58:56 +02:00
/* ==Tables */
2014-05-04 15:48:00 +02:00
/* ----------------------------- */
table,
2017-07-31 11:45:22 +02:00
.table {
2015-07-01 13:47:48 +02:00
width: 100%;
2015-11-19 04:33:55 +01:00
max-width: 100%;
2015-07-01 13:47:48 +02:00
table-layout: fixed;
border-collapse: collapse;
vertical-align: top;
margin-bottom: $spacer-medium;
2014-05-04 15:48:00 +02:00
}
2014-05-07 11:12:14 +02:00
2017-07-31 11:45:22 +02:00
.table {
2015-07-01 13:47:48 +02:00
display: table;
2017-09-26 11:42:46 +02:00
border: 1px solid $table-border;
background: $table-background;
2014-05-07 11:12:14 +02:00
2017-09-20 16:50:49 +02:00
&--zebra {
& tbody tr:nth-child(odd) {
2017-10-13 10:59:40 +02:00
background: $gray-200;
2017-09-20 16:50:49 +02:00
}
}
2017-07-31 11:41:30 +02:00
2017-09-20 16:50:49 +02:00
& caption {
caption-side: bottom;
padding: $spacer-small;
2017-09-26 11:42:46 +02:00
color: $table-caption-color;
2017-09-20 16:50:49 +02:00
font-style: italic;
text-align: right;
}
2017-07-31 11:41:30 +02:00
2017-09-20 16:50:49 +02:00
& td,
& th {
padding: 0.3rem 0.6rem;
min-width: $spacer-medium;
2017-09-20 16:50:49 +02:00
vertical-align: top;
2017-09-26 11:42:46 +02:00
border: 1px $table-border dotted;
2017-09-20 16:50:49 +02:00
text-align: left;
cursor: default;
}
2018-05-11 19:53:09 +02:00
2017-09-20 16:50:49 +02:00
& thead {
2017-09-26 11:42:46 +02:00
color: $table-head-color;
background: $table-head-background;
2017-09-20 16:50:49 +02:00
}
2017-07-31 11:41:30 +02:00
}
2017-09-20 16:50:49 +02:00
.table--auto {
table-layout: auto;
2017-07-31 11:41:30 +02:00
}