source: imaps-frontend/node_modules/bootstrap/scss/_tables.scss@ d565449

main
Last change on this file since d565449 was d565449, checked in by stefan toskovski <stefantoska84@…>, 4 weeks ago

Update repo after prototype presentation

  • Property mode set to 100644
File size: 4.8 KB
Line 
1//
2// Basic Bootstrap table
3//
4
5.table {
6 // Reset needed for nesting tables
7 --#{$prefix}table-color-type: initial;
8 --#{$prefix}table-bg-type: initial;
9 --#{$prefix}table-color-state: initial;
10 --#{$prefix}table-bg-state: initial;
11 // End of reset
12 --#{$prefix}table-color: #{$table-color};
13 --#{$prefix}table-bg: #{$table-bg};
14 --#{$prefix}table-border-color: #{$table-border-color};
15 --#{$prefix}table-accent-bg: #{$table-accent-bg};
16 --#{$prefix}table-striped-color: #{$table-striped-color};
17 --#{$prefix}table-striped-bg: #{$table-striped-bg};
18 --#{$prefix}table-active-color: #{$table-active-color};
19 --#{$prefix}table-active-bg: #{$table-active-bg};
20 --#{$prefix}table-hover-color: #{$table-hover-color};
21 --#{$prefix}table-hover-bg: #{$table-hover-bg};
22
23 width: 100%;
24 margin-bottom: $spacer;
25 vertical-align: $table-cell-vertical-align;
26 border-color: var(--#{$prefix}table-border-color);
27
28 // Target th & td
29 // We need the child combinator to prevent styles leaking to nested tables which doesn't have a `.table` class.
30 // We use the universal selectors here to simplify the selector (else we would need 6 different selectors).
31 // Another advantage is that this generates less code and makes the selector less specific making it easier to override.
32 // stylelint-disable-next-line selector-max-universal
33 > :not(caption) > * > * {
34 padding: $table-cell-padding-y $table-cell-padding-x;
35 // Following the precept of cascades: https://codepen.io/miriamsuzanne/full/vYNgodb
36 color: var(--#{$prefix}table-color-state, var(--#{$prefix}table-color-type, var(--#{$prefix}table-color)));
37 background-color: var(--#{$prefix}table-bg);
38 border-bottom-width: $table-border-width;
39 box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-bg-state, var(--#{$prefix}table-bg-type, var(--#{$prefix}table-accent-bg)));
40 }
41
42 > tbody {
43 vertical-align: inherit;
44 }
45
46 > thead {
47 vertical-align: bottom;
48 }
49}
50
51.table-group-divider {
52 border-top: calc(#{$table-border-width} * 2) solid $table-group-separator-color; // stylelint-disable-line function-disallowed-list
53}
54
55//
56// Change placement of captions with a class
57//
58
59.caption-top {
60 caption-side: top;
61}
62
63
64//
65// Condensed table w/ half padding
66//
67
68.table-sm {
69 // stylelint-disable-next-line selector-max-universal
70 > :not(caption) > * > * {
71 padding: $table-cell-padding-y-sm $table-cell-padding-x-sm;
72 }
73}
74
75
76// Border versions
77//
78// Add or remove borders all around the table and between all the columns.
79//
80// When borders are added on all sides of the cells, the corners can render odd when
81// these borders do not have the same color or if they are semi-transparent.
82// Therefore we add top and border bottoms to the `tr`s and left and right borders
83// to the `td`s or `th`s
84
85.table-bordered {
86 > :not(caption) > * {
87 border-width: $table-border-width 0;
88
89 // stylelint-disable-next-line selector-max-universal
90 > * {
91 border-width: 0 $table-border-width;
92 }
93 }
94}
95
96.table-borderless {
97 // stylelint-disable-next-line selector-max-universal
98 > :not(caption) > * > * {
99 border-bottom-width: 0;
100 }
101
102 > :not(:first-child) {
103 border-top-width: 0;
104 }
105}
106
107// Zebra-striping
108//
109// Default zebra-stripe styles (alternating gray and transparent backgrounds)
110
111// For rows
112.table-striped {
113 > tbody > tr:nth-of-type(#{$table-striped-order}) > * {
114 --#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
115 --#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
116 }
117}
118
119// For columns
120.table-striped-columns {
121 > :not(caption) > tr > :nth-child(#{$table-striped-columns-order}) {
122 --#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
123 --#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
124 }
125}
126
127// Active table
128//
129// The `.table-active` class can be added to highlight rows or cells
130
131.table-active {
132 --#{$prefix}table-color-state: var(--#{$prefix}table-active-color);
133 --#{$prefix}table-bg-state: var(--#{$prefix}table-active-bg);
134}
135
136// Hover effect
137//
138// Placed here since it has to come after the potential zebra striping
139
140.table-hover {
141 > tbody > tr:hover > * {
142 --#{$prefix}table-color-state: var(--#{$prefix}table-hover-color);
143 --#{$prefix}table-bg-state: var(--#{$prefix}table-hover-bg);
144 }
145}
146
147
148// Table variants
149//
150// Table variants set the table cell backgrounds, border colors
151// and the colors of the striped, hovered & active tables
152
153@each $color, $value in $table-variants {
154 @include table-variant($color, $value);
155}
156
157// Responsive tables
158//
159// Generate series of `.table-responsive-*` classes for configuring the screen
160// size of where your table will overflow.
161
162@each $breakpoint in map-keys($grid-breakpoints) {
163 $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
164
165 @include media-breakpoint-down($breakpoint) {
166 .table-responsive#{$infix} {
167 overflow-x: auto;
168 -webkit-overflow-scrolling: touch;
169 }
170 }
171}
Note: See TracBrowser for help on using the repository browser.