0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-04 16:24:22 +01:00
Bootstrap/scss/_tables.scss

165 lines
4.3 KiB
SCSS
Raw Normal View History

//
// Basic Bootstrap table
//
2011-05-04 03:09:25 +02:00
.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};
2020-03-24 15:00:00 +01:00
2011-05-04 03:09:25 +02:00
width: 100%;
2014-12-05 00:25:57 +01:00
margin-bottom: $spacer;
color: var(--#{$prefix}table-color);
vertical-align: $table-cell-vertical-align;
border-color: var(--#{$prefix}table-border-color);
2020-03-24 15:00:00 +01:00
// 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);
2020-03-24 15:00:00 +01:00
border-bottom-width: $table-border-width;
box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-accent-bg);
v5: Forms update (#28450) * Initial spike of consolidated form checks * Stub out forms rearrangement - Prepping to drop non-custom file and range inputs - Prepping to merge custom and native checks and radios (with switches) - Prepping to merge custom select with form select - Moving docs arround so forms has it's own area given volume of CSS * Move input group Sass file to forms subdir * Start to split and move the docs around * Simpler imports * Copyediting * delete overview file * Remove commented out code * remove the custom-forms import * rewrite flex-check as form-check, replace all custom properties * Remove old forms doc * stub out new subpage link section * update migration guide * Update nav, forms overview in page nav, and descriptions * fix check bg position * fix margin-top calculation * rename .custom-select to .form-select * Update validation styles for new checks * add some vertical margin, fix inline checks * fix docs examples * better way to do this contents stuff, redo the toc while i'm at it * page restyle for docs while here * un-callout that, edit text * redo padding on toc * fix toc * start to cleanup checks docs * Rewrite Markdown tables into HTML * Redesign tables, redo their docs * Replace Open Iconic icons with custom Bootstrap icons * Redesign the docs navbar, add a subheader, redo the sidebar * Redesign docs homepage a bit * Simplify table style overrides for docs tables * Simplify docs typography for page titles and reading line length * Stub out icons page * Part of sidebar update, remove migration from nav.yml * Move toc CSS to separate partial * Change appearance of overview page * fix sidebar arrow direction * Add footer to docs layout * Update descriptions * Drop the .form-group class for margin utilities * Remove lingering form-group-margin-bottom var * improve footer spacing * add headings to range page * uncomment form range css * Rename .custom-range to .form-range * Drop unused docs var * Uncomment the comment * Remove unused variable * Fix radio image sizing * Reboot update: reset horizontal ul and ol padding * de-dupe IDs * tweak toc styles * nvm, fix dropdown versions stuff * remove sidebar nav toggle for now * broken html * fix more broken html, move css * scss linting * comment out broken helper docs * scope styles * scope styles * Fixes #25540 and fixes #26407 for v5 only * Update sidebar once more * Match new sidenav order * fix syntax error * Rename custom-file to form-file, update paths, update migration docs for previous changes in #28696 * rename back * fix size and alignment * rename that back too
2019-07-12 23:52:33 +02:00
}
2020-03-24 15:00:00 +01:00
> tbody {
vertical-align: inherit;
}
2020-03-24 15:00:00 +01:00
> thead {
vertical-align: bottom;
}
}
.table-group-divider {
border-top: calc(2 * $table-border-width) solid $table-group-separator-color; // stylelint-disable-line function-disallowed-list
}
//
// Change placement of captions with a class
//
2020-03-24 15:00:00 +01:00
.caption-top {
caption-side: top;
}
//
// Condensed table w/ half padding
//
2014-09-18 07:14:27 +02:00
.table-sm {
2020-03-24 15:00:00 +01:00
// stylelint-disable-next-line selector-max-universal
> :not(caption) > * > * {
padding: $table-cell-padding-y-sm $table-cell-padding-x-sm;
}
}
2018-01-21 00:10:19 +01:00
// Border versions
//
2018-01-21 00:10:19 +01:00
// Add or remove borders all around the table and between all the columns.
2020-03-24 15:00:00 +01:00
//
// 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 {
2020-03-24 15:00:00 +01:00
> :not(caption) > * {
border-width: $table-border-width 0;
2020-03-24 15:00:00 +01:00
// stylelint-disable-next-line selector-max-universal
> * {
border-width: 0 $table-border-width;
}
}
2011-05-04 03:09:25 +02:00
}
2018-01-21 00:10:19 +01:00
.table-borderless {
2020-03-24 15:00:00 +01:00
// stylelint-disable-next-line selector-max-universal
> :not(caption) > * > * {
border-bottom-width: 0;
2018-01-21 00:10:19 +01:00
}
> :not(:first-child) {
border-top-width: 0;
}
2018-01-21 00:10:19 +01:00
}
// 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);
}
}
2020-03-24 15:00:00 +01:00
// 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);
2020-03-24 15:00:00 +01:00
}
// 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);
}
}
2020-03-24 15:00:00 +01:00
// Table variants
//
2020-03-24 15:00:00 +01:00
// Table variants set the table cell backgrounds, border colors
// and the colors of the striped, hovered & active tables
2020-03-24 15:00:00 +01:00
@each $color, $value in $table-variants {
@include table-variant($color, $value);
2017-06-28 18:36:27 +02:00
}
// Responsive tables
//
// Generate series of `.table-responsive-*` classes for configuring the screen
// size of where your table will overflow.
2020-03-31 10:33:05 +02:00
@each $breakpoint in map-keys($grid-breakpoints) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
2020-03-31 10:33:05 +02:00
@include media-breakpoint-down($breakpoint) {
.table-responsive#{$infix} {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
2014-07-14 09:23:46 +02:00
}