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

Convert sass files to scss files

Browse Source
This commit is contained in:
Jeremy Thomas
2022-11-23 17:44:02 +00:00
parent bd2e065ab7
commit dafc032ff0
140 changed files with 8331 additions and 5619 deletions
Download Patch File Download Diff File Expand all files Collapse all files

207
sass/elements/table.scss Normal file
View File

@@ -0,0 +1,207 @@
@import "../utilities/mixins";
$table-color: $text-strong !default;
$table-background-color: $scheme-main !default;
$table-cell-border: 1px solid $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-text-align: left !default;
$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;
$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-active-background-color: $primary !default;
$table-row-active-color: $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-colors: $colors !default;
.table {
@extend %block;
background-color: $table-background-color;
color: $table-color;
td,
th {
border: $table-cell-border;
border-width: $table-cell-border-width;
padding: $table-cell-padding;
vertical-align: top;
// Colors
@each $name, $pair in $table-colors {
$color: nth($pair, 1);
$color-invert: nth($pair, 2);
&.is-#{$name} {
background-color: $color;
border-color: $color;
color: $color-invert;
}
}
// Modifiers
&.is-narrow {
white-space: nowrap;
width: 1%;
}
&.is-selected {
background-color: $table-row-active-background-color;
color: $table-row-active-color;
a,
strong {
color: currentColor;
}
}
&.is-vcentered {
vertical-align: middle;
}
}
th {
color: $table-cell-heading-color;
&:not([align]) {
text-align: $table-cell-text-align;
}
}
tr {
&.is-selected {
background-color: $table-row-active-background-color;
color: $table-row-active-color;
a,
strong {
color: currentColor;
}
td,
th {
border-color: $table-row-active-color;
color: currentColor;
}
}
}
thead {
background-color: $table-head-background-color;
td,
th {
border-width: $table-head-cell-border-width;
color: $table-head-cell-color;
}
}
tfoot {
background-color: $table-foot-background-color;
td,
th {
border-width: $table-foot-cell-border-width;
color: $table-foot-cell-color;
}
}
tbody {
background-color: $table-body-background-color;
tr {
&:last-child {
td,
th {
border-bottom-width: 0;
}
}
}
}
// Modifiers
&.is-bordered {
td,
th {
border-width: 1px;
}
tr {
&:last-child {
td,
th {
border-bottom-width: 1px;
}
}
}
}
&.is-fullwidth {
width: 100%;
}
&.is-hoverable {
tbody {
tr:not(.is-selected) {
&:hover {
background-color: $table-row-hover-background-color;
}
}
}
&.is-striped {
tbody {
tr:not(.is-selected) {
&:hover {
background-color: $table-row-hover-background-color;
&:nth-child(even) {
background-color: $table-striped-row-even-hover-background-color;
}
}
}
}
}
}
&.is-narrow {
td,
th {
padding: 0.25em 0.5em;
}
}
&.is-striped {
tbody {
tr:not(.is-selected) {
&:nth-child(even) {
background-color: $table-striped-row-even-background-color;
}
}
}
}
}
.table-container {
@extend %block;
@include overflow-touch;
overflow: auto;
overflow-y: hidden;
max-width: 100%;
}