spaCy/website/assets/css/_components/_tables.sass

69 lines
1.5 KiB
Sass
Raw Normal View History

2016-10-31 21:04:15 +03:00
//- 💫 CSS > COMPONENTS > TABLES
2016-03-31 17:24:48 +03:00
2016-10-31 21:04:15 +03:00
//- Table container
2016-03-31 17:24:48 +03:00
2016-10-03 21:19:13 +03:00
.c-table
2016-03-31 17:24:48 +03:00
vertical-align: top
2016-10-31 21:04:15 +03:00
//- Table row
.c-table__row
&:nth-child(odd)
background: rgba($color-subtle-light, 0.35)
2016-03-31 17:24:48 +03:00
2016-10-31 21:04:15 +03:00
&.c-table__row--foot
background: rgba($color-theme, 0.025)
2016-10-31 21:04:15 +03:00
border-top: 2px solid $color-theme
.c-table__cell:first-child
@extend .u-text-label
color: $color-theme
//- Table cell
2016-03-31 17:24:48 +03:00
2016-10-03 21:19:13 +03:00
.c-table__cell
padding: 1rem
2016-03-31 17:24:48 +03:00
2016-10-31 21:04:15 +03:00
&: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
2016-03-31 17:24:48 +03:00
2016-10-31 21:04:15 +03:00
//- 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
2016-10-03 21:19:13 +03:00
&:first-child
@include scroll-shadow-cover(left, $color-back)
2016-03-31 17:24:48 +03:00
2016-10-03 21:19:13 +03:00
&:last-child
@include scroll-shadow-cover(right, $color-back)
2016-03-31 17:24:48 +03:00
2016-10-31 21:04:15 +03:00
.c-table__row--foot .c-table__cell
&:first-child
@include scroll-shadow-cover(left, lighten($color-subtle-light, 2))
2016-03-31 17:24:48 +03:00
2016-10-31 21:04:15 +03:00
&:last-child
@include scroll-shadow-cover(right, lighten($color-subtle-light, 2))