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

194 lines
3.6 KiB
SCSS
Raw Normal View History

//
// Basic Bootstrap table
//
2011-05-04 03:09:25 +02:00
.table {
2011-05-04 03:09:25 +02:00
width: 100%;
2014-12-05 00:25:57 +01:00
margin-bottom: $spacer;
color: $table-color;
vertical-align: $table-cell-vertical-align;
Drop Normalize, port relevant parts to Reboot (#21741) * Get this party started by removing mention of Normalize.css * Nuke the old comment, consolidate to a single line and number as appropriate * Bring over styles for HTML element from Normalize to Reboot * Move margin override for body element from Normalize to Reboot * Drop the block reset for HTML5 elements in IE9- from Normalize given we dropped IE9 support * Building on previous commit, do the same thing for figure, figcaption, and main * Remove IE9- display from Normalize given our browser support * Drop IE8 figure margin because we're IE10+ * No need for the h1 overrides because we reset these font and margin styles anyway in _type.scss already * Drop Safari 6 b and strong normalization because we're Safari 8+ * Remove mark styles for IE9- from Normalize * Remove old iOS audio fixes from Normalize * Remove IE9- display for progress from Normalize * Remove more IE9- rules from Normalize * One more IE9- display removal for canvas element * Move pre overrides from Normalize to Reboot * Move over some link resets to Reboot, drop others - Move over background-color and text-decoration - Drop focus outline change given it affects the offset on hover of focused links * Move over more code element resets, consolidate with pre overrides, too * Move over sub and sup wholesale * Move over img normalization to Reboot * Move over SVG override too * - Drop dupe hidden, but add comment for it - Move over template - Move over summary * Remove bulk of @viewport comment * edit down that code comment * consolidate html-based normalizations * update comments * Consolidate abbr styles * move over more type elements * move over hr changes * move over form controls and more * move over button resets * move over firefox button changes * move over search changes and more * we nuke all these styles for fieldsets anyway, so outright remove them * no need for those, we override them * move over legend, fieldset, progress * line break * delete normalize file * linting * update comment * clarify docs mentions of normalize and reboot * remove normalize excludes from linter * remove normalize excludes from cli task * linting * callout license since we forked part of normalize * Improve comments, move table background reset to .table class instead of in reboot * trailing space
2017-01-21 23:14:25 +01:00
background-color: $table-bg; // Reset for nesting within parents with `background-color`.
2014-12-05 00:25:57 +01:00
th,
td {
padding: $table-cell-padding;
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
border-bottom: $table-border-width solid $table-border-color;
}
tbody {
vertical-align: inherit;
}
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
td {
border-bottom: $table-border-width solid $table-border-color;
}
thead th {
vertical-align: bottom;
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
border-bottom-color: $table-head-border-color;
}
tbody + tbody {
2015-11-15 08:24:48 +01:00
border-top: (2 * $table-border-width) solid $table-border-color;
}
}
//
// Condensed table w/ half padding
//
2014-09-18 07:14:27 +02:00
.table-sm {
th,
td {
padding: $table-cell-padding-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.
.table-bordered {
2015-11-15 08:24:48 +01:00
border: $table-border-width solid $table-border-color;
th,
td {
2015-11-15 08:24:48 +01:00
border: $table-border-width solid $table-border-color;
}
thead {
th,
td {
2018-12-14 17:54:44 +01:00
border-bottom-width: 2 * $table-border-width;
}
}
2011-05-04 03:09:25 +02:00
}
2018-01-21 00:10:19 +01:00
.table-borderless {
th,
td,
thead th,
tbody + tbody {
border: 0;
}
}
// Zebra-striping
//
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
.table-striped {
tbody tr:nth-of-type(#{$table-striped-order}) {
background-color: $table-accent-bg;
}
}
// Hover effect
//
// Placed here since it has to come after the potential zebra striping
.table-hover {
tbody tr {
&:hover {
color: $table-hover-color;
background-color: $table-hover-bg;
}
}
}
// Table backgrounds
//
// Exact selectors below required to override `.table-striped` and prevent
// inheritance to nested tables.
2017-06-28 18:36:27 +02:00
@each $color, $value in $theme-colors {
@include table-row-variant($color, color-level($value, $table-bg-level), color-level($value, $table-border-level));
2017-06-28 18:36:27 +02:00
}
@include table-row-variant(active, $table-active-bg);
// Dark styles
//
// Same table markup, but inverted color scheme: dark background and light text.
2014-07-14 08:45:34 +02:00
// stylelint-disable-next-line no-duplicate-selectors
.table {
.thead-dark {
th {
color: $table-dark-color;
background-color: $table-dark-bg;
border-color: $table-dark-border-color;
}
2014-07-14 08:45:34 +02:00
}
.thead-light {
th {
color: $table-head-color;
background-color: $table-head-bg;
border-color: $table-border-color;
}
2014-07-14 08:45:34 +02:00
}
}
.table-dark {
color: $table-dark-color;
background-color: $table-dark-bg;
2014-07-14 09:23:46 +02:00
th,
2015-01-20 00:52:40 +01:00
td,
thead th {
border-color: $table-dark-border-color;
2014-07-14 09:23:46 +02:00
}
&.table-bordered {
border: 0;
}
&.table-striped {
2019-05-09 08:14:50 +02:00
tbody tr:nth-of-type(#{$table-striped-order}) {
background-color: $table-dark-accent-bg;
}
}
&.table-hover {
tbody tr {
&:hover {
color: $table-dark-hover-color;
background-color: $table-dark-hover-bg;
}
}
}
}
// Responsive tables
//
// Generate series of `.table-responsive-*` classes for configuring the screen
// size of where your table will overflow.
.table-responsive {
@each $breakpoint in map-keys($grid-breakpoints) {
$next: breakpoint-next($breakpoint, $grid-breakpoints);
$infix: breakpoint-infix($next, $grid-breakpoints);
&#{$infix} {
@include media-breakpoint-down($breakpoint) {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
// Prevent double border on horizontal scroll due to use of `display: block;`
> .table-bordered {
border: 0;
}
}
}
}
2014-07-14 09:23:46 +02:00
}