You can not select more than 25 topics
			Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
		
		
		
		
		
			
		
			
				
					
					
						
							180 lines
						
					
					
						
							3.3 KiB
						
					
					
				
			
		
		
		
			
			
			
				
					
				
				
					
				
			
		
		
	
	
							180 lines
						
					
					
						
							3.3 KiB
						
					
					
				| // | |
| // Basic Bootstrap table | |
| // | |
|  | |
| .table { | |
|   width: 100%; | |
|   max-width: 100%; | |
|   margin-bottom: $spacer; | |
|   background-color: $table-bg; // Reset for nesting within parents with `background-color`. | |
|  | |
|   th, | |
|   td { | |
|     padding: $table-cell-padding; | |
|     vertical-align: top; | |
|     border-top: $table-border-width solid $table-border-color; | |
|   } | |
| 
 | |
|   thead th { | |
|     vertical-align: bottom; | |
|     border-bottom: (2 * $table-border-width) solid $table-border-color; | |
|   } | |
| 
 | |
|   tbody + tbody { | |
|     border-top: (2 * $table-border-width) solid $table-border-color; | |
|   } | |
| 
 | |
|   .table { | |
|     background-color: $body-bg; | |
|   } | |
| } | |
| 
 | |
| 
 | |
| // | |
| // Condensed table w/ half padding | |
| // | |
|  | |
| .table-sm { | |
|   th, | |
|   td { | |
|     padding: $table-cell-padding-sm; | |
|   } | |
| } | |
| 
 | |
| 
 | |
| // Bordered version | |
| // | |
| // Add borders all around the table and between all the columns. | |
|  | |
| .table-bordered { | |
|   border: $table-border-width solid $table-border-color; | |
| 
 | |
|   th, | |
|   td { | |
|     border: $table-border-width solid $table-border-color; | |
|   } | |
| 
 | |
|   thead { | |
|     th, | |
|     td { | |
|       border-bottom-width: (2 * $table-border-width); | |
|     } | |
|   } | |
| } | |
| 
 | |
| 
 | |
| // Zebra-striping | |
| // | |
| // Default zebra-stripe styles (alternating gray and transparent backgrounds) | |
|  | |
| .table-striped { | |
|   tbody tr:nth-of-type(odd) { | |
|     background-color: $table-accent-bg; | |
|   } | |
| } | |
| 
 | |
| 
 | |
| // Hover effect | |
| // | |
| // Placed here since it has to come after the potential zebra striping | |
|  | |
| .table-hover { | |
|   tbody tr { | |
|     @include hover { | |
|       background-color: $table-hover-bg; | |
|     } | |
|   } | |
| } | |
| 
 | |
| 
 | |
| // Table backgrounds | |
| // | |
| // Exact selectors below required to override `.table-striped` and prevent | |
| // inheritance to nested tables. | |
|  | |
| @each $color, $value in $theme-colors { | |
|   @include table-row-variant($color, theme-color-level($color, -9)); | |
| } | |
| 
 | |
| @include table-row-variant(active, $table-active-bg); | |
| 
 | |
| 
 | |
| // Dark styles | |
| // | |
| // Same table markup, but inverted color scheme: dark background and light text. | |
|  | |
| // 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; | |
|     } | |
|   } | |
| 
 | |
|   .thead-light { | |
|     th { | |
|       color: $table-head-color; | |
|       background-color: $table-head-bg; | |
|       border-color: $table-border-color; | |
|     } | |
|   } | |
| } | |
| 
 | |
| .table-dark { | |
|   color: $table-dark-color; | |
|   background-color: $table-dark-bg; | |
| 
 | |
|   th, | |
|   td, | |
|   thead th { | |
|     border-color: $table-dark-border-color; | |
|   } | |
| 
 | |
|   &.table-bordered { | |
|     border: 0; | |
|   } | |
| 
 | |
|   &.table-striped { | |
|     tbody tr:nth-of-type(odd) { | |
|       background-color: $table-dark-accent-bg; | |
|     } | |
|   } | |
| 
 | |
|   &.table-hover { | |
|     tbody tr { | |
|       @include hover { | |
|         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; | |
|         -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057 | |
|  | |
|         // Prevent double border on horizontal scroll due to use of `display: block;` | |
|         > .table-bordered { | |
|           border: 0; | |
|         } | |
|       } | |
|     } | |
|   } | |
| }
 |