2016-10-31 18:04:15 +00:00
|
|
|
//- 💫 CSS > COMPONENTS > TABLES
|
2016-03-31 14:24:48 +00:00
|
|
|
|
2016-10-31 18:04:15 +00:00
|
|
|
//- Table container
|
2016-03-31 14:24:48 +00:00
|
|
|
|
2016-10-03 18:19:13 +00:00
|
|
|
.c-table
|
2016-03-31 14:24:48 +00:00
|
|
|
vertical-align: top
|
|
|
|
|
|
|
|
|
|
|
2016-10-31 18:04:15 +00:00
|
|
|
//- Table row
|
|
|
|
|
|
|
|
|
|
.c-table__row
|
2017-10-03 12:14:52 +00:00
|
|
|
&:nth-child(odd):not(.c-table__row--head)
|
2016-11-02 10:21:17 +00:00
|
|
|
background: rgba($color-subtle-light, 0.35)
|
2016-03-31 14:24:48 +00:00
|
|
|
|
2016-10-31 18:04:15 +00:00
|
|
|
&.c-table__row--foot
|
2017-05-18 20:16:51 +00:00
|
|
|
background: $color-theme-light
|
2016-10-31 18:04:15 +00:00
|
|
|
border-top: 2px solid $color-theme
|
|
|
|
|
|
|
|
|
|
.c-table__cell:first-child
|
|
|
|
|
@extend .u-text-label
|
|
|
|
|
color: $color-theme
|
|
|
|
|
|
2017-04-26 14:02:44 +00:00
|
|
|
&.c-table__row--divider
|
|
|
|
|
border-top: 2px solid $color-theme
|
|
|
|
|
|
2016-10-31 18:04:15 +00:00
|
|
|
|
|
|
|
|
//- Table cell
|
2016-03-31 14:24:48 +00:00
|
|
|
|
2016-10-03 18:19:13 +00:00
|
|
|
.c-table__cell
|
|
|
|
|
padding: 1rem
|
2016-03-31 14:24:48 +00:00
|
|
|
|
2016-10-31 18:04:15 +00:00
|
|
|
&:not(:last-child)
|
|
|
|
|
border-right: 1px solid $color-subtle
|
|
|
|
|
|
2017-11-06 18:36:02 +00:00
|
|
|
&.c-table__cell--num
|
|
|
|
|
text-align: right
|
|
|
|
|
font-feature-settings: "tnum"
|
|
|
|
|
font-variant-numeric: tabular-nums
|
|
|
|
|
|
|
|
|
|
& > strong
|
|
|
|
|
font-feature-settings: initial
|
|
|
|
|
font-variant-numeric: initial
|
|
|
|
|
|
2016-10-31 18:04:15 +00:00
|
|
|
|
|
|
|
|
//- Table head cell
|
|
|
|
|
|
|
|
|
|
.c-table__head-cell
|
|
|
|
|
font-weight: bold
|
|
|
|
|
color: $color-theme
|
|
|
|
|
padding: 1rem 0.5rem
|
|
|
|
|
border-bottom: 2px solid $color-theme
|
2016-03-31 14:24:48 +00:00
|
|
|
|
2016-10-31 18:04:15 +00: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
|
2017-10-30 12:16:06 +00:00
|
|
|
overflow-y: hidden
|
2016-10-31 18:04:15 +00:00
|
|
|
width: auto
|
|
|
|
|
-webkit-overflow-scrolling: touch
|
|
|
|
|
|
|
|
|
|
.c-table__cell,
|
|
|
|
|
.c-table__head-cell
|
2016-10-03 18:19:13 +00:00
|
|
|
&:first-child
|
|
|
|
|
@include scroll-shadow-cover(left, $color-back)
|
2016-03-31 14:24:48 +00:00
|
|
|
|
2016-10-03 18:19:13 +00:00
|
|
|
&:last-child
|
|
|
|
|
@include scroll-shadow-cover(right, $color-back)
|
2016-03-31 14:24:48 +00:00
|
|
|
|
2017-10-29 02:56:37 +00:00
|
|
|
&:first-child:last-child
|
|
|
|
|
@include scroll-shadow-cover(both, $color-back)
|
|
|
|
|
|
2016-10-31 18:04:15 +00:00
|
|
|
.c-table__row--foot .c-table__cell
|
|
|
|
|
&:first-child
|
|
|
|
|
@include scroll-shadow-cover(left, lighten($color-subtle-light, 2))
|
2016-03-31 14:24:48 +00:00
|
|
|
|
2016-10-31 18:04:15 +00:00
|
|
|
&:last-child
|
|
|
|
|
@include scroll-shadow-cover(right, lighten($color-subtle-light, 2))
|
2017-10-29 02:56:37 +00:00
|
|
|
|
|
|
|
|
&:first-child:last-child
|
|
|
|
|
@include scroll-shadow-cover(both, lighten($color-subtle-light, 2))
|
