spaCy/website/assets/css/_components/_tables.sass
2016-11-02 23:18:01 +01:00

69 lines
1.5 KiB
Sass

//- 💫 CSS > COMPONENTS > TABLES
//- Table container
.c-table
vertical-align: top
//- Table row
.c-table__row
&:nth-child(odd)
background: rgba($color-subtle-light, 0.35)
&.c-table__row--foot
background: rgba($color-theme, 0.025)
border-top: 2px solid $color-theme
.c-table__cell:first-child
@extend .u-text-label
color: $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
background: $color-back
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))