diff options
Diffstat (limited to 'csit.infra.dash/app/pal/static/sass/bootstrap/_tables.scss')
-rw-r--r-- | csit.infra.dash/app/pal/static/sass/bootstrap/_tables.scss | 164 |
1 files changed, 164 insertions, 0 deletions
diff --git a/csit.infra.dash/app/pal/static/sass/bootstrap/_tables.scss b/csit.infra.dash/app/pal/static/sass/bootstrap/_tables.scss new file mode 100644 index 0000000000..1fdd43c6bb --- /dev/null +++ b/csit.infra.dash/app/pal/static/sass/bootstrap/_tables.scss @@ -0,0 +1,164 @@ +// +// Basic Bootstrap table +// + +.table { + --#{$prefix}table-color: #{$table-color}; + --#{$prefix}table-bg: #{$table-bg}; + --#{$prefix}table-border-color: #{$table-border-color}; + --#{$prefix}table-accent-bg: #{$table-accent-bg}; + --#{$prefix}table-striped-color: #{$table-striped-color}; + --#{$prefix}table-striped-bg: #{$table-striped-bg}; + --#{$prefix}table-active-color: #{$table-active-color}; + --#{$prefix}table-active-bg: #{$table-active-bg}; + --#{$prefix}table-hover-color: #{$table-hover-color}; + --#{$prefix}table-hover-bg: #{$table-hover-bg}; + + width: 100%; + margin-bottom: $spacer; + color: var(--#{$prefix}table-color); + vertical-align: $table-cell-vertical-align; + border-color: var(--#{$prefix}table-border-color); + + // Target th & td + // We need the child combinator to prevent styles leaking to nested tables which doesn't have a `.table` class. + // We use the universal selectors here to simplify the selector (else we would need 6 different selectors). + // Another advantage is that this generates less code and makes the selector less specific making it easier to override. + // stylelint-disable-next-line selector-max-universal + > :not(caption) > * > * { + padding: $table-cell-padding-y $table-cell-padding-x; + background-color: var(--#{$prefix}table-bg); + border-bottom-width: $table-border-width; + box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-accent-bg); + } + + > tbody { + vertical-align: inherit; + } + + > thead { + vertical-align: bottom; + } +} + +.table-group-divider { + border-top: ($table-border-width * 2) solid $table-group-separator-color; +} + +// +// Change placement of captions with a class +// + +.caption-top { + caption-side: top; +} + + +// +// Condensed table w/ half padding +// + +.table-sm { + // stylelint-disable-next-line selector-max-universal + > :not(caption) > * > * { + padding: $table-cell-padding-y-sm $table-cell-padding-x-sm; + } +} + + +// Border versions +// +// Add or remove borders all around the table and between all the columns. +// +// When borders are added on all sides of the cells, the corners can render odd when +// these borders do not have the same color or if they are semi-transparent. +// Therefor we add top and border bottoms to the `tr`s and left and right borders +// to the `td`s or `th`s + +.table-bordered { + > :not(caption) > * { + border-width: $table-border-width 0; + + // stylelint-disable-next-line selector-max-universal + > * { + border-width: 0 $table-border-width; + } + } +} + +.table-borderless { + // stylelint-disable-next-line selector-max-universal + > :not(caption) > * > * { + border-bottom-width: 0; + } + + > :not(:first-child) { + border-top-width: 0; + } +} + +// Zebra-striping +// +// Default zebra-stripe styles (alternating gray and transparent backgrounds) + +// For rows +.table-striped { + > tbody > tr:nth-of-type(#{$table-striped-order}) > * { + --#{$prefix}table-accent-bg: var(--#{$prefix}table-striped-bg); + color: var(--#{$prefix}table-striped-color); + } +} + +// For columns +.table-striped-columns { + > :not(caption) > tr > :nth-child(#{$table-striped-columns-order}) { + --#{$prefix}table-accent-bg: var(--#{$prefix}table-striped-bg); + color: var(--#{$prefix}table-striped-color); + } +} + +// Active table +// +// The `.table-active` class can be added to highlight rows or cells + +.table-active { + --#{$prefix}table-accent-bg: var(--#{$prefix}table-active-bg); + color: var(--#{$prefix}table-active-color); +} + +// Hover effect +// +// Placed here since it has to come after the potential zebra striping + +.table-hover { + > tbody > tr:hover > * { + --#{$prefix}table-accent-bg: var(--#{$prefix}table-hover-bg); + color: var(--#{$prefix}table-hover-color); + } +} + + +// Table variants +// +// Table variants set the table cell backgrounds, border colors +// and the colors of the striped, hovered & active tables + +@each $color, $value in $table-variants { + @include table-variant($color, $value); +} + +// Responsive tables +// +// Generate series of `.table-responsive-*` classes for configuring the screen +// size of where your table will overflow. + +@each $breakpoint in map-keys($grid-breakpoints) { + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + + @include media-breakpoint-down($breakpoint) { + .table-responsive#{$infix} { + overflow-x: auto; + -webkit-overflow-scrolling: touch; + } + } +} |