spaCy/website/src/styles/table.module.sass
2023-01-24 13:55:20 +01:00

144 lines
3.2 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%
figure > .root
margin-bottom: var(--spacing-sm)
.fixed
table-layout: fixed
.tr
thead &:nth-child(odd)
background: transparent
&:nth-child(odd)
background: var(--color-subtle-opaque)
.footer
--color-inline-code-bg: var(--color-theme-opaque)
background: var(--color-theme-light) !important
border-top: 2px solid var(--color-theme-dark)
& > td:first-child
font-family: var(--font-secondary)
color: var(--color-theme-dark)
& > td:nth-child(2) a
border: 0
.td
padding: 0.9rem 1rem
font-size: 95%
&: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-dark)
padding: 1rem 0.5rem
border-bottom: 2px solid var(--color-theme-dark)
vertical-align: bottom
.th-rotated
height: 100px
.tx
transform: translate(15px, 0) rotate(315deg) // 45 = 360 - 45
width: 30px
white-space: nowrap
& > span
padding-left: 0.5rem
[data-tooltip]
display: inline-block
transform: rotate(-316deg)
.divider
height: 0
border-bottom: 1px solid var(--color-subtle)
td
top: -1px
height: 0
position: relative
padding: 0 !important
& + tr td
padding-top: 12px
td em
position: absolute
top: -5px
left: 10px
display: inline-block
background: var(--color-theme-dark)
color: var(--color-back)
padding: 0 5px 1px
font-size: 0.85rem
text-transform: uppercase
font-weight: bold
border: 0
border-radius: 1em
font-style: normal
white-space: nowrap
z-index: 5
&:first-child // directly after thead/tr
border-bottom: 0
td em
top: -7px
// 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))