1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-15 09:35:21 +01:00
blog/_src/_assets/styl/_kremalicious/tables.styl
Matthias Kretschmann 3fa1227d8f
add simple styleguide page
- modify lots of typographic elements
- activate all the redcarpet extensions
2016-05-05 17:49:26 +02:00

69 lines
1.4 KiB
Stylus

//
// kremalicious3
// --------------
// Tables
//
table
border-collapse: collapse
border-spacing: 0
width: 100%
max-width: 100%
background-color: transparent
margin-bottom: $spacer
border-bottom: 1px solid #cfd9e1
td
vertical-align: top
th,
td
padding: .7em .3em
text-align: left
vertical-align: top
border-top: 1px solid #cfd9e1
th
@extend .bold
thead th
vertical-align: bottom
table tbody + tbody
border-top: 2px solid #cfd9e1
table tbody tr:nth-child(odd) td,
table tbody tr:nth-child(odd) th
background-color: rgba(255,255,255,.2)
table tbody tr:hover td,
table tbody tr:hover th
background-color: #f5f5f5
.table-responsive
overflow-x: auto
min-height: 0.01% // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837)
@media (max-width: $screen-small-min)
width: 100%
margin-bottom: ($spacer * 0.75)
overflow-y: hidden
-webkit-overflow-scrolling: touch
-ms-overflow-style: -ms-autohiding-scrollbar
// Tighten up spacing
> table
margin-bottom: 0
// Ensure the content doesn't wrap
> thead,
> tbody,
> tfoot
> tr
> th,
> td
white-space: nowrap
padding: .5em .2em