Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-21 12:44:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

Update elements to CSS variables

Browse Source
This commit is contained in:
Jeremy Thomas
2020-08-16 00:40:51 +01:00
parent 8d613846d3
commit d750c197c8
7 changed files with 158 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
sass/elements/table.sass
View File

@@ -1,87 +1,106 @@
$table-color: $text-strong !default
$table-background-color: $scheme-main !default
$table-color: var(--text-strong, #{$text-strong}) !default
$table-background-color: var(--scheme-main, #{$scheme-main}) !default
$table-cell-border: 1px solid $border !default
$table-cell-border: 1px solid var(--border, #{$border}) !default
$table-cell-border-width: 0 0 1px !default
$table-cell-padding: 0.5em 0.75em !default
$table-cell-heading-color: $text-strong !default
$table-cell-heading-color: var(--text-strong, #{$text-strong}) !default
$table-head-cell-border-width: 0 0 2px !default
$table-head-cell-color: $text-strong !default
$table-head-cell-color: var(--text-strong, #{$text-strong}) !default
$table-foot-cell-border-width: 2px 0 0 !default
$table-foot-cell-color: $text-strong !default
$table-foot-cell-color: var(--text-strong, #{$text-strong}) !default
$table-head-background-color: transparent !default
$table-body-background-color: transparent !default
$table-foot-background-color: transparent !default
$table-row-hover-background-color: $scheme-main-bis !default
$table-row-hover-background-color: var(--scheme-main-bis, #{$scheme-main-bis}) !default
$table-row-active-background-color: $primary !default
$table-row-active-color: $primary-invert !default
$table-row-active-background-color: var(--primary, #{$primary}) !default
$table-row-active-color: var(--primary-invert, #{$primary-invert}) !default
$table-striped-row-even-background-color: $scheme-main-bis !default
$table-striped-row-even-hover-background-color: $scheme-main-ter !default
$table-striped-row-even-background-color: var(--scheme-main-bis, #{$scheme-main-bis}) !default
$table-striped-row-even-hover-background-color: var(--scheme-main-ter, #{$scheme-main-ter}) !default
.table
--table-body-background-color: #{$table-body-background-color}
--table-color: #{$table-color}
--table-cell-border-width: #{$table-cell-border-width}
--table-cell-border: #{$table-cell-border}
--table-cell-heading-color: #{$table-cell-heading-color}
--table-cell-padding: #{$table-cell-padding}
--table-foot-background-color: #{$table-foot-background-color}
--table-foot-cell-border-width: #{$table-foot-cell-border-width}
--table-foot-cell-color: #{$table-foot-cell-color}
--table-head-background-color: #{$table-head-background-color}
--table-head-cell-border-width: #{$table-head-cell-border-width}
--table-head-cell-color: #{$table-head-cell-color}
--table-row-active-background-color: #{$table-row-active-background-color}
--table-row-active-color: #{$table-row-active-color}
--table-row-hover-background-color: #{$table-row-hover-background-color}
--table-row-hover-background-color: #{$table-row-hover-background-color}
--table-striped-row-even-background-color: #{$table-striped-row-even-background-color}
--table-striped-row-even-hover-background-color: #{$table-striped-row-even-hover-background-color}
@extend %block
background-color: $table-background-color
color: $table-color
background-color: var(--table-body-background-color)
color: var(--table-color)
td,
th
border: $table-cell-border
border-width: $table-cell-border-width
padding: $table-cell-padding
border: var(--table-cell-border)
border-width: var(--table-cell-border-width)
padding: var(--table-cell-padding)
vertical-align: top
// 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
background-color: var(--#{$name}, #{$color})
border-color: var(--#{$name}, #{$color})
color: var(--#{$name}-invert, #{$color-invert})
// Modifiers
&.is-narrow
white-space: nowrap
width: 1%
&.is-selected
background-color: $table-row-active-background-color
color: $table-row-active-color
background-color: var(--table-row-active-background-color)
color: var(--table-row-active-color)
a,
strong
color: currentColor
&.is-vcentered
vertical-align: middle
th
color: $table-cell-heading-color
color: var(--table-cell-heading-color)
&:not([align])
text-align: inherit
tr
&.is-selected
background-color: $table-row-active-background-color
color: $table-row-active-color
background-color: var(--table-row-active-background-color)
color: var(--table-row-active-color)
a,
strong
color: currentColor
td,
th
border-color: $table-row-active-color
border-color: var(--table-row-active-color)
color: currentColor
thead
background-color: $table-head-background-color
background-color: var(--table-head-background-color)
td,
th
border-width: $table-head-cell-border-width
color: $table-head-cell-color
border-width: var(--table-head-cell-border-width)
color: var(--table-head-cell-color)
tfoot
background-color: $table-foot-background-color
background-color: var(--table-foot-background-color)
td,
th
border-width: $table-foot-cell-border-width
color: $table-foot-cell-color
border-width: var(--table-foot-cell-border-width)
color: var(--table-foot-cell-color)
tbody
background-color: $table-body-background-color
background-color: var(--table-body-background-color)
tr
&:last-child
td,
@@ -103,14 +122,14 @@ $table-striped-row-even-hover-background-color: $scheme-main-ter !default
tbody
tr:not(.is-selected)
&:hover
background-color: $table-row-hover-background-color
background-color: var(--table-row-hover-background-color)
&.is-striped
tbody
tr:not(.is-selected)
&:hover
background-color: $table-row-hover-background-color
background-color: var(--table-row-hover-background-color)
&:nth-child(even)
background-color: $table-striped-row-even-hover-background-color
background-color: var(--table-striped-row-even-hover-background-color)
&.is-narrow
td,
th
@@ -119,7 +138,7 @@ $table-striped-row-even-hover-background-color: $scheme-main-ter !default
tbody
tr:not(.is-selected)
&:nth-child(even)
background-color: $table-striped-row-even-background-color
background-color: var(--table-striped-row-even-background-color)
.table-container
@extend %block