bootsteam-theme 5.3.0 → 5.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (49) hide show
  1. package/dist/bootsteam-theme.css +12397 -12318
  2. package/dist/bootsteam-theme.min.css +5 -5
  3. package/docs/alerts.html +9 -8
  4. package/docs/badges.html +19 -18
  5. package/docs/buttons.html +12 -8
  6. package/docs/carousel.html +8 -7
  7. package/docs/collapse.html +39 -7
  8. package/docs/containers.html +103 -53
  9. package/docs/css/bootsteam-theme.min.css +5 -5
  10. package/docs/dialogs.html +8 -7
  11. package/docs/forms.html +54 -30
  12. package/docs/index.html +8 -7
  13. package/docs/navs.html +11 -10
  14. package/docs/offcanvas.html +8 -7
  15. package/docs/plugins.html +10 -9
  16. package/docs/scripts/scripts.js +0 -6
  17. package/docs/spinners.html +8 -7
  18. package/docs/tables.html +26 -100
  19. package/docs/themes.html +20 -66
  20. package/docs/toasts.html +12 -11
  21. package/docs/typography.html +48 -31
  22. package/docs-templates/alerts.html +1 -1
  23. package/docs-templates/badges.html +11 -11
  24. package/docs-templates/buttons.html +4 -1
  25. package/docs-templates/collapse.html +31 -0
  26. package/docs-templates/containers.html +104 -48
  27. package/docs-templates/forms.html +47 -24
  28. package/docs-templates/navs.html +3 -3
  29. package/docs-templates/partials/_nav.html +6 -5
  30. package/docs-templates/partials/_scripts.html +3 -2
  31. package/docs-templates/plugins.html +2 -2
  32. package/docs-templates/tables.html +18 -93
  33. package/docs-templates/themes.html +12 -3
  34. package/docs-templates/toasts.html +4 -4
  35. package/docs-templates/typography.html +38 -22
  36. package/gulpfile.js +5 -1
  37. package/package.json +3 -3
  38. package/src/_alerts.scss +7 -7
  39. package/src/_buttons.scss +93 -0
  40. package/src/_darkThemeOverrides.scss +24 -7
  41. package/src/_detailsElement.scss +44 -0
  42. package/src/_fieldset.scss +1 -0
  43. package/src/_forms.scss +1 -112
  44. package/src/_tables.scss +55 -43
  45. package/src/_text.scss +48 -0
  46. package/src/_twr-variables.scss +29 -10
  47. package/src/bootsteam.scss +6 -3
  48. package/src/plugins/_slimSelect.scss +1 -1
  49. package/src/_twr-variables-dark.scss +0 -23
@@ -12,21 +12,21 @@
12
12
  </head>
13
13
 
14
14
  <body>
15
- <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
15
+ <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
16
16
  <div class="container">
17
- <a href="index.html" class="navbar-brand">Bootsteam Theme</a>
17
+ <a href="index.html" class="navbar-brand">Tower Bootstrap Theme</a>
18
18
 
19
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-collapse-area">
19
+ <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-collapse-area" aria-label="Toggle Navigation">
20
20
  <span class="navbar-toggler-icon"></span>
21
21
  </button>
22
22
 
23
23
  <div class="collapse navbar-collapse" id="navbar-collapse-area">
24
24
  <ul class="navbar-nav ms-auto">
25
25
  <li class="nav-item dropdown">
26
- <button type="button" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
26
+ <button type="button" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" aria-label="Theme Changer">
27
27
  <span id="current-theme"></span> <span class="d-md-none">Switch Themes</span>
28
28
  </button>
29
- <div class="dropdown-menu dropdown-menu-end">
29
+ <div class="dropdown-menu">
30
30
  <button type="button" class="dropdown-item" data-bs-theme-value="light"><span class="mdi mdi-weather-sunny"></span> Light</button>
31
31
  <button type="button" class="dropdown-item" data-bs-theme-value="dark"><span class="mdi mdi-weather-night"></span> Dark</button>
32
32
  <button type="button" class="dropdown-item" data-bs-theme-value="auto"><span class="mdi mdi-theme-light-dark"></span> Auto</button>
@@ -54,7 +54,7 @@
54
54
  <h4>List Groups</h4>
55
55
  <div class="row">
56
56
  <div class="col-12 col-sm-4">
57
- <ul class="list-group">
57
+ <ul class="list-group mb-3">
58
58
  <li class="list-group-item d-flex justify-content-between align-items-center">
59
59
  Cras justo odio
60
60
  <span class="badge rounded-pill text-bg-primary">14</span>
@@ -70,7 +70,7 @@
70
70
  </ul>
71
71
  </div>
72
72
  <div class="col-12 col-sm-4">
73
- <div class="list-group">
73
+ <div class="list-group mb-3">
74
74
  <a href="#" class="list-group-item list-group-item-action active">
75
75
  Cras justo odio
76
76
  </a>
@@ -86,13 +86,14 @@
86
86
  </div>
87
87
  </div>
88
88
  <div class="col-12 col-sm-4">
89
- <div class="list-group">
89
+ <div class="list-group mb-3">
90
90
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
91
91
  <div class="d-flex w-100 justify-content-between">
92
92
  <h5 class="mb-1">List group item heading</h5>
93
93
  <small>3 days ago</small>
94
94
  </div>
95
- <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
95
+ <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus
96
+ varius blandit.</p>
96
97
  <small>Donec id elit non mi porta.</small>
97
98
  </a>
98
99
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
@@ -100,18 +101,48 @@
100
101
  <h5 class="mb-1">List group item heading</h5>
101
102
  <small class="text-muted">3 days ago</small>
102
103
  </div>
103
- <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
104
+ <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus
105
+ varius blandit.</p>
104
106
  <small class="text-muted">Donec id elit non mi porta.</small>
105
107
  </a>
106
108
  </div>
107
109
  </div>
108
- <div class="col-12 col-sm-4">
110
+ </div>
111
+
112
+ <div class="row">
113
+ <div class="col-md mb-3">
109
114
  <h4>Figures</h4>
110
115
  <figure class="figure">
111
116
  <img class="figure-img img-fluid rounded" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22318%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20318%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_158bd1d28ef%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A16pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_158bd1d28ef%22%3E%3Crect%20width%3D%22318%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22129.359375%22%20y%3D%2297.35%22%3EImage%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Card image">
112
117
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
113
118
  </figure>
114
119
  </div>
120
+
121
+ <div class="col-md mb-3">
122
+ <h4>Backgrounds</h4>
123
+ <div class="row mb-3">
124
+ <div class="col">
125
+ <div class="bg-body-secondary p-3 mb-2">
126
+ bg-body-secondary
127
+ </div>
128
+ <div class="bg-body-tertiary p-3 mb-2">
129
+ bg-body-tertiary
130
+ </div>
131
+ <div class="bg-gradient p-3 mb-2">
132
+ bg-gradient
133
+ </div>
134
+ </div>
135
+ </div>
136
+ </div>
137
+
138
+ <div class="col-md mb-3">
139
+ <h4>Fieldset</h4>
140
+ <fieldset>
141
+ <legend>Legend</legend>
142
+ <p>Content</p>
143
+ <div>More Content</div>
144
+ </fieldset>
145
+ </div>
115
146
  </div>
116
147
 
117
148
  <h4>Cards</h4>
@@ -121,114 +152,130 @@
121
152
  <div class="card-header">Header</div>
122
153
  <div class="card-body">
123
154
  <h4 class="card-title">Primary card title</h4>
124
- <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
155
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of
156
+ the card's content.</p>
125
157
  </div>
126
158
  </div>
127
159
  <div class="card text-white bg-secondary mb-3" style="max-width: 20rem;">
128
160
  <div class="card-header">Header</div>
129
161
  <div class="card-body">
130
162
  <h4 class="card-title">Secondary card title</h4>
131
- <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
163
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of
164
+ the card's content.</p>
132
165
  </div>
133
166
  </div>
134
167
  <div class="card text-white bg-success mb-3" style="max-width: 20rem;">
135
168
  <div class="card-header">Header</div>
136
169
  <div class="card-body">
137
170
  <h4 class="card-title">Success card title</h4>
138
- <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
171
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of
172
+ the card's content.</p>
139
173
  </div>
140
174
  </div>
141
175
  <div class="card text-white bg-danger mb-3" style="max-width: 20rem;">
142
176
  <div class="card-header">Header</div>
143
177
  <div class="card-body">
144
178
  <h4 class="card-title">Danger card title</h4>
145
- <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
179
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of
180
+ the card's content.</p>
146
181
  </div>
147
182
  </div>
148
183
  <div class="card text-dark bg-warning mb-3" style="max-width: 20rem;">
149
184
  <div class="card-header">Header</div>
150
185
  <div class="card-body">
151
186
  <h4 class="card-title">Warning card title</h4>
152
- <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
187
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of
188
+ the card's content.</p>
153
189
  </div>
154
190
  </div>
155
191
  <div class="card text-white bg-info mb-3" style="max-width: 20rem;">
156
192
  <div class="card-header">Header</div>
157
193
  <div class="card-body">
158
194
  <h4 class="card-title">Info card title</h4>
159
- <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
195
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of
196
+ the card's content.</p>
160
197
  </div>
161
198
  </div>
162
199
  <div class="card bg-light text-dark mb-3" style="max-width: 20rem;">
163
200
  <div class="card-header">Header</div>
164
201
  <div class="card-body">
165
202
  <h4 class="card-title">Light card title</h4>
166
- <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
203
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of
204
+ the card's content.</p>
167
205
  </div>
168
206
  </div>
169
207
  <div class="card text-white bg-dark mb-3" style="max-width: 20rem;">
170
208
  <div class="card-header">Header</div>
171
209
  <div class="card-body">
172
210
  <h4 class="card-title">Dark card title</h4>
173
- <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
211
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of
212
+ the card's content.</p>
174
213
  </div>
175
214
  </div>
176
215
  </div>
177
216
  <div class="col-12 col-sm-4">
178
- <div class="card border-primary mb-3" style="max-width: 20rem;">
217
+ <div class="card bg-primary-subtle mb-3" style="max-width: 20rem;">
179
218
  <div class="card-header">Header</div>
180
- <div class="card-body text-primary">
181
- <h4 class="card-title">Primary card title</h4>
182
- <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
219
+ <div class="card-body">
220
+ <h4 class="card-title">Primary subtle card</h4>
221
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of
222
+ the card's content.</p>
183
223
  </div>
184
224
  </div>
185
- <div class="card border-secondary mb-3" style="max-width: 20rem;">
225
+ <div class="card bg-secondary-subtle mb-3" style="max-width: 20rem;">
186
226
  <div class="card-header">Header</div>
187
- <div class="card-body text-secondary">
188
- <h4 class="card-title">Secondary card title</h4>
189
- <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
227
+ <div class="card-body">
228
+ <h4 class="card-title">Secondary subtle card</h4>
229
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of
230
+ the card's content.</p>
190
231
  </div>
191
232
  </div>
192
- <div class="card border-success mb-3" style="max-width: 20rem;">
233
+ <div class="card bg-success-subtle mb-3" style="max-width: 20rem;">
193
234
  <div class="card-header">Header</div>
194
- <div class="card-body text-success">
195
- <h4 class="card-title">Success card title</h4>
196
- <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
235
+ <div class="card-body">
236
+ <h4 class="card-title">Success subtle card</h4>
237
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of
238
+ the card's content.</p>
197
239
  </div>
198
240
  </div>
199
- <div class="card border-danger mb-3" style="max-width: 20rem;">
241
+ <div class="card bg-danger-subtle mb-3" style="max-width: 20rem;">
200
242
  <div class="card-header">Header</div>
201
- <div class="card-body text-danger">
202
- <h4 class="card-title">Danger card title</h4>
203
- <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
243
+ <div class="card-body">
244
+ <h4 class="card-title">Danger subtle card</h4>
245
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of
246
+ the card's content.</p>
204
247
  </div>
205
248
  </div>
206
- <div class="card border-warning mb-3" style="max-width: 20rem;">
249
+ <div class="card bg-warning-subtle mb-3" style="max-width: 20rem;">
207
250
  <div class="card-header">Header</div>
208
- <div class="card-body text-warning">
209
- <h4 class="card-title">Warning card title</h4>
210
- <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
251
+ <div class="card-body">
252
+ <h4 class="card-title">Warning subtle card</h4>
253
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of
254
+ the card's content.</p>
211
255
  </div>
212
256
  </div>
213
- <div class="card border-info mb-3" style="max-width: 20rem;">
257
+ <div class="card bg-info-subtle mb-3" style="max-width: 20rem;">
214
258
  <div class="card-header">Header</div>
215
- <div class="card-body text-info">
216
- <h4 class="card-title">Info card title</h4>
217
- <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
259
+ <div class="card-body">
260
+ <h4 class="card-title">Info subtle card</h4>
261
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of
262
+ the card's content.</p>
218
263
  </div>
219
264
  </div>
220
- <div class="card border-light mb-3" style="max-width: 20rem;">
265
+ <div class="card bg-light-subtle mb-3" style="max-width: 20rem;">
221
266
  <div class="card-header">Header</div>
222
267
  <div class="card-body">
223
- <h4 class="card-title">Light card title</h4>
224
- <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
268
+ <h4 class="card-title">Light subtle card</h4>
269
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of
270
+ the card's content.</p>
225
271
  </div>
226
272
  </div>
227
- <div class="card border-dark mb-3" style="max-width: 20rem;">
273
+ <div class="card bg-dark-subtle mb-3" style="max-width: 20rem;">
228
274
  <div class="card-header">Header</div>
229
275
  <div class="card-body">
230
- <h4 class="card-title">Dark card title</h4>
231
- <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
276
+ <h4 class="card-title">Dark subtle card</h4>
277
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of
278
+ the card's content.</p>
232
279
  </div>
233
280
  </div>
234
281
  </div>
@@ -241,7 +288,8 @@
241
288
  </div>
242
289
  <img style="height: 200px; width: 100%; display: block;" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22318%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20318%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_158bd1d28ef%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A16pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_158bd1d28ef%22%3E%3Crect%20width%3D%22318%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22129.359375%22%20y%3D%2297.35%22%3EImage%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Card image">
243
290
  <div class="card-body">
244
- <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
291
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of
292
+ the card's content.</p>
245
293
  </div>
246
294
  <ul class="list-group list-group-flush">
247
295
  <li class="list-group-item">Cras justo odio</li>
@@ -260,7 +308,8 @@
260
308
  <div class="card-body">
261
309
  <h4 class="card-title">Card title</h4>
262
310
  <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
263
- <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
311
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of
312
+ the card's content.</p>
264
313
  <a href="#" class="card-link">Card link</a>
265
314
  <a href="#" class="card-link">Another link</a>
266
315
  </div>
@@ -299,8 +348,9 @@
299
348
  </footer>
300
349
 
301
350
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
302
- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
303
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
351
+ <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
352
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>-->
353
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
304
354
  <script src="scripts/scripts.js"></script>
305
355
  </body>
306
356