mirror of
https://github.com/explosion/spaCy.git
synced 2025-11-04 01:48:04 +03:00
87 lines
2.0 KiB
Sass
87 lines
2.0 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
|
|
|
|
&.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
|
|
|
|
|
|
//- 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
|
|
overflow-y: hidden
|
|
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)
|
|
|
|
&:first-child:last-child
|
|
@include scroll-shadow-cover(both, $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))
|
|
|
|
&:first-child:last-child
|
|
@include scroll-shadow-cover(both, lighten($color-subtle-light, 2))
|