bulma/sass/elements/table.sass

117 lines
2.8 KiB
Sass
Raw Normal View History

2017-07-28 20:05:15 +00:00
$table-color: $grey-darker !default
$table-background-color: $white !default
2016-09-24 15:04:53 +00:00
2017-07-28 20:05:15 +00:00
$table-cell-border: 1px solid $grey-lighter !default
$table-cell-border-width: 0 0 1px !default
$table-cell-padding: 0.5em 0.75em !default
$table-cell-heading-color: $text-strong !default
2016-09-24 15:04:53 +00:00
2017-07-28 20:05:15 +00:00
$table-head-cell-border-width: 0 0 2px !default
$table-head-cell-color: $text-strong !default
$table-foot-cell-border-width: 2px 0 0 !default
$table-foot-cell-color: $text-strong !default
2017-04-15 16:08:30 +00:00
2017-07-28 20:05:15 +00:00
$table-row-hover-background-color: $white-bis !default
2017-04-15 16:08:30 +00:00
2017-07-28 20:05:15 +00:00
$table-row-active-background-color: $primary !default
$table-row-active-color: $primary-invert !default
$table-striped-row-even-background-color: $white-bis !default
$table-striped-row-even-hover-background-color: $white-ter !default
2016-09-24 15:04:53 +00:00
2016-01-24 00:03:43 +00:00
.table
2017-07-28 20:05:15 +00:00
background-color: $table-background-color
color: $table-color
2016-10-30 12:20:51 +00:00
margin-bottom: 1.5rem
2016-04-10 15:27:27 +00:00
td,
th
2017-07-28 20:05:15 +00:00
border: $table-cell-border
border-width: $table-cell-border-width
padding: $table-cell-padding
2016-01-24 00:03:43 +00:00
vertical-align: top
2017-07-31 16:42:53 +00:00
// Colors
@each $name, $pair in $colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}
background-color: $color
border-color: $color
color: $color-invert
2016-04-10 15:27:27 +00:00
// Modifiers
2016-04-18 20:50:59 +00:00
&.is-narrow
2016-01-24 00:03:43 +00:00
white-space: nowrap
width: 1%
&.is-selected
background-color: $table-row-active-background-color
color: $table-row-active-color
a,
strong
color: currentColor
2016-01-24 00:03:43 +00:00
th
2017-07-28 20:05:15 +00:00
color: $table-cell-heading-color
2016-01-24 00:03:43 +00:00
text-align: left
tr
2017-04-15 16:08:30 +00:00
&.is-selected
2017-07-28 20:05:15 +00:00
background-color: $table-row-active-background-color
color: $table-row-active-color
2017-04-15 16:08:30 +00:00
a,
strong
color: currentColor
td,
th
2017-07-28 20:05:15 +00:00
border-color: $table-row-active-color
2017-04-15 16:08:30 +00:00
color: currentColor
2016-01-24 00:03:43 +00:00
thead
2016-04-10 15:27:27 +00:00
td,
th
2017-07-28 20:05:15 +00:00
border-width: $table-head-cell-border-width
color: $table-head-cell-color
2016-10-30 14:59:46 +00:00
tfoot
td,
th
2017-07-28 20:05:15 +00:00
border-width: $table-foot-cell-border-width
color: $table-foot-cell-color
2016-04-10 15:27:27 +00:00
tbody
tr
&:last-child
td,
th
border-bottom-width: 0
// Modifiers
2016-01-24 00:03:43 +00:00
&.is-bordered
2016-04-10 15:27:27 +00:00
td,
th
2016-01-24 00:03:43 +00:00
border-width: 1px
tr
2016-04-10 15:27:27 +00:00
&:last-child
td,
th
border-bottom-width: 1px
2017-07-28 21:57:51 +00:00
&.is-fullwidth
width: 100%
2017-10-07 15:57:19 +00:00
&.is-hoverable
tbody
tr:not(.is-selected)
2017-10-07 15:57:19 +00:00
&:hover
background-color: $table-row-hover-background-color
&.is-striped
tbody
tr:not(.is-selected)
&:hover
background-color: $table-striped-row-even-hover-background-color
2016-01-24 00:03:43 +00:00
&.is-narrow
2016-04-10 15:27:27 +00:00
td,
th
2016-10-30 12:20:51 +00:00
padding: 0.25em 0.5em
2016-01-24 00:03:43 +00:00
&.is-striped
tbody
2017-05-05 10:08:53 +00:00
tr:not(.is-selected)
2016-09-24 15:04:53 +00:00
&:nth-child(even)
2017-07-28 20:05:15 +00:00
background-color: $table-striped-row-even-background-color
2018-03-26 14:33:31 +00:00
.table-container
+block
+overflow-touch
overflow: auto
overflow-y: hidden
max-width: 100%