spaCy/website/assets/css/_components/_tables.sass
2017-10-03 14:14:52 +02:00

71 lines
1.5 KiB
Sass

//- 💫 CSS > COMPONENTS > TABLES
//- Table container
.c-table
vertical-align: top
//- Table row
.c-table__row
&:nth-child(odd):not(.c-table__row--head)
background: rgba($color-subtle-light, 0.35)
&.c-table__row--foot
background: $color-theme-light
border-top: 2px solid $color-theme
.c-table__cell:first-child
@extend .u-text-label
color: $color-theme
&.c-table__row--divider
border-top: 2px solid $color-theme
//- Table cell
.c-table__cell
padding: 1rem
&:not(:last-child)
border-right: 1px solid $color-subtle
//- Table head cell
.c-table__head-cell
font-weight: bold
color: $color-theme
padding: 1rem 0.5rem
border-bottom: 2px solid $color-theme
//- Responsive table
//- Shadows adapted from "CSS only Responsive Tables" by David Bushell
//- http://codepen.io/dbushell/pen/wGaamR
@include breakpoint(max, md)
.c-table
@include scroll-shadow-base($color-front)
display: inline-block
overflow-x: auto
width: auto
-webkit-overflow-scrolling: touch
.c-table__cell,
.c-table__head-cell
&:first-child
@include scroll-shadow-cover(left, $color-back)
&:last-child
@include scroll-shadow-cover(right, $color-back)
.c-table__row--foot .c-table__cell
&:first-child
@include scroll-shadow-cover(left, lighten($color-subtle-light, 2))
&:last-child
@include scroll-shadow-cover(right, lighten($color-subtle-light, 2))