Mercurial > nebulaweb3

comparison default/assets/scss/vendors/bootstrap/_tables.scss @ 0:1d038bc9b3d2 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Up:default
author Liny <dev@neowd.com>
date Sat, 31 May 2025 09:21:51 +0800
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:1d038bc9b3d2
1 //
2 // Basic Bootstrap table
3 //
4
5 .table {
6 width: 100%;
7 max-width: 100%;
8 margin-bottom: $spacer;
9 background-color: $table-bg; // Reset for nesting within parents with `background-color`.
10
11 th,
12 td {
13 padding: $table-cell-padding;
14 vertical-align: top;
15 border-top: $table-border-width solid $table-border-color;
16 }
17
18 thead th {
19 vertical-align: bottom;
20 border-bottom: (2 * $table-border-width) solid $table-border-color;
21 }
22
23 tbody + tbody {
24 border-top: (2 * $table-border-width) solid $table-border-color;
25 }
26
27 .table {
28 background-color: $body-bg;
29 }
30 }
31
32
33 //
34 // Condensed table w/ half padding
35 //
36
37 .table-sm {
38 th,
39 td {
40 padding: $table-cell-padding-sm;
41 }
42 }
43
44
45 // Bordered version
46 //
47 // Add borders all around the table and between all the columns.
48
49 .table-bordered {
50 border: $table-border-width solid $table-border-color;
51
52 th,
53 td {
54 border: $table-border-width solid $table-border-color;
55 }
56
57 thead {
58 th,
59 td {
60 border-bottom-width: (2 * $table-border-width);
61 }
62 }
63 }
64
65
66 // Zebra-striping
67 //
68 // Default zebra-stripe styles (alternating gray and transparent backgrounds)
69
70 .table-striped {
71 tbody tr:nth-of-type(odd) {
72 background-color: $table-accent-bg;
73 }
74 }
75
76
77 // Hover effect
78 //
79 // Placed here since it has to come after the potential zebra striping
80
81 .table-hover {
82 tbody tr {
83 @include hover {
84 background-color: $table-hover-bg;
85 }
86 }
87 }
88
89
90 // Table backgrounds
91 //
92 // Exact selectors below required to override `.table-striped` and prevent
93 // inheritance to nested tables.
94
95 @each $color, $value in $theme-colors {
96 @include table-row-variant($color, theme-color-level($color, -9));
97 }
98
99 @include table-row-variant(active, $table-active-bg);
100
101
102 // Inverse styles
103 //
104 // Same table markup, but inverted color scheme: dark background and light text.
105
106 .thead-inverse {
107 th {
108 color: $table-inverse-color;
109 background-color: $table-inverse-bg;
110 }
111 }
112
113 .thead-default {
114 th {
115 color: $table-head-color;
116 background-color: $table-head-bg;
117 }
118 }
119
120 .table-inverse {
121 color: $table-inverse-color;
122 background-color: $table-inverse-bg;
123
124 th,
125 td,
126 thead th {
127 border-color: $table-inverse-border-color;
128 }
129
130 &.table-bordered {
131 border: 0;
132 }
133
134 &.table-striped {
135 tbody tr:nth-of-type(odd) {
136 background-color: $table-inverse-accent-bg;
137 }
138 }
139
140 &.table-hover {
141 tbody tr {
142 @include hover {
143 background-color: $table-inverse-hover-bg;
144 }
145 }
146 }
147 }
148
149
150 // Responsive tables
151 //
152 // Add `.table-responsive` to `.table`s and we'll make them mobile friendly by
153 // enabling horizontal scrolling. Only applies <768px. Everything above that
154 // will display normally.
155
156 .table-responsive {
157 @include media-breakpoint-down(md) {
158 display: block;
159 width: 100%;
160 overflow-x: auto;
161 -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
162
163 // Prevent double border on horizontal scroll due to use of `display: block;`
164 &.table-bordered {
165 border: 0;
166 }
167 }
168 }