spaCy/website/src/styles/table.module.sass
2019-09-28 14:23:03 +02:00

84 lines
2.0 KiB
Sass

@import base
.root
vertical-align: top
font: var(--font-size-md)/var(--line-height-md) var(--font-primary)
margin-bottom: var(--spacing-md)
max-width: 100%
.fixed
table-layout: fixed
.tr
thead &:nth-child(odd)
background: transparent
&:nth-child(odd)
background: var(--color-subtle-opaque)
.footer
background: var(--color-theme-light)
border-top: 2px solid var(--color-theme)
& > td:first-child
font-family: var(--font-secondary)
color: var(--color-theme)
.td
padding: 1rem
&:not(:last-child)
border-right: 1px solid var(--color-subtle)
.num
font-feature-settings: "tnum"
font-variant-numeric: tabular-nums
& > strong
font-feature-settings: initial
font-variant-numeric: initial
.nowrap
white-space: nowrap
.th
font: bold var(--font-size-md)/var(--line-height-md) var(--font-secondary)
text-transform: uppercase
color: var(--color-theme)
padding: 1rem 0.5rem
border-bottom: 2px solid var(--color-theme)
vertical-align: bottom
// Responsive table
// Shadows adapted from "CSS only Responsive Tables" by David Bushell
// http://codepen.io/dbushell/pen/wGaamR
@include breakpoint(max, md)
.root
@include scroll-shadow-base(var(--color-shadow))
display: inline-block
overflow-x: auto
overflow-y: hidden
width: auto
-webkit-overflow-scrolling: touch
.th, .td
&:first-child
@include scroll-shadow-cover(left, var(--color-back))
&:last-child
@include scroll-shadow-cover(right, var(--color-back))
&:first-child:last-child
@include scroll-shadow-cover(both, var(--color-back))
.footer .td
&:first-child
@include scroll-shadow-cover(left, var(--color-subtle-light))
&:last-child
@include scroll-shadow-cover(right, var(--color-subtle-light))
&:first-child:last-child
@include scroll-shadow-cover(both, var(--color-subtle-light))