bootsteam-theme 5.3.0
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.
- package/.gitattributes +66 -0
- package/README.md +5 -0
- package/dist/bootsteam-theme.css +12319 -0
- package/dist/bootsteam-theme.min.css +5 -0
- package/docs/alerts.html +118 -0
- package/docs/badges.html +140 -0
- package/docs/buttons.html +194 -0
- package/docs/carousel.html +109 -0
- package/docs/collapse.html +105 -0
- package/docs/containers.html +307 -0
- package/docs/css/bootsteam-theme.min.css +5 -0
- package/docs/dialogs.html +154 -0
- package/docs/forms.html +335 -0
- package/docs/index.html +108 -0
- package/docs/navs.html +250 -0
- package/docs/offcanvas.html +92 -0
- package/docs/plugins.html +99 -0
- package/docs/scripts/scripts.js +70 -0
- package/docs/scripts/themeHandler.js +57 -0
- package/docs/spinners.html +145 -0
- package/docs/tables.html +613 -0
- package/docs/themes.html +166 -0
- package/docs/toasts.html +119 -0
- package/docs/typography.html +176 -0
- package/docs-templates/alerts.html +76 -0
- package/docs-templates/badges.html +98 -0
- package/docs-templates/buttons.html +152 -0
- package/docs-templates/carousel.html +67 -0
- package/docs-templates/collapse.html +63 -0
- package/docs-templates/containers.html +265 -0
- package/docs-templates/dialogs.html +112 -0
- package/docs-templates/forms.html +293 -0
- package/docs-templates/index.html +66 -0
- package/docs-templates/navs.html +208 -0
- package/docs-templates/offcanvas.html +50 -0
- package/docs-templates/partials/_footer.html +4 -0
- package/docs-templates/partials/_head.html +7 -0
- package/docs-templates/partials/_nav.html +29 -0
- package/docs-templates/partials/_scripts.html +5 -0
- package/docs-templates/plugins.html +57 -0
- package/docs-templates/spinners.html +103 -0
- package/docs-templates/tables.html +571 -0
- package/docs-templates/themes.html +68 -0
- package/docs-templates/toasts.html +77 -0
- package/docs-templates/typography.html +134 -0
- package/gulpfile.js +51 -0
- package/package.json +17 -0
- package/src/_alerts.scss +65 -0
- package/src/_darkThemeOverrides.scss +74 -0
- package/src/_fieldset.scss +27 -0
- package/src/_forms.scss +134 -0
- package/src/_tables.scss +77 -0
- package/src/_twr-variables-dark.scss +23 -0
- package/src/_twr-variables.scss +71 -0
- package/src/bootsteam.scss +25 -0
- package/src/plugins/_allPlugins.scss +2 -0
- package/src/plugins/_slimSelect.scss +106 -0
- package/src/plugins/_summernote.scss +45 -0
package/docs/navs.html
ADDED
|
@@ -0,0 +1,250 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<title>Navs | Tower Bootstrap Theme</title>
|
|
6
|
+
<meta charset="utf-8" />
|
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
8
|
+
<meta name="description" content="Demo of custom Bootstrap theme">
|
|
9
|
+
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@7.3.67/css/materialdesignicons.min.css" rel="stylesheet" />
|
|
10
|
+
<link href="css/bootsteam-theme.min.css" rel="stylesheet" />
|
|
11
|
+
<script src="scripts/themeHandler.js" type="text/javascript"></script>
|
|
12
|
+
</head>
|
|
13
|
+
|
|
14
|
+
<body>
|
|
15
|
+
<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
|
|
16
|
+
<div class="container">
|
|
17
|
+
<a href="index.html" class="navbar-brand">Bootsteam Theme</a>
|
|
18
|
+
|
|
19
|
+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-collapse-area">
|
|
20
|
+
<span class="navbar-toggler-icon"></span>
|
|
21
|
+
</button>
|
|
22
|
+
|
|
23
|
+
<div class="collapse navbar-collapse" id="navbar-collapse-area">
|
|
24
|
+
<ul class="navbar-nav ms-auto">
|
|
25
|
+
<li class="nav-item dropdown">
|
|
26
|
+
<button type="button" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
|
|
27
|
+
<span id="current-theme"></span> <span class="d-md-none">Switch Themes</span>
|
|
28
|
+
</button>
|
|
29
|
+
<div class="dropdown-menu dropdown-menu-end">
|
|
30
|
+
<button type="button" class="dropdown-item" data-bs-theme-value="light"><span class="mdi mdi-weather-sunny"></span> Light</button>
|
|
31
|
+
<button type="button" class="dropdown-item" data-bs-theme-value="dark"><span class="mdi mdi-weather-night"></span> Dark</button>
|
|
32
|
+
<button type="button" class="dropdown-item" data-bs-theme-value="auto"><span class="mdi mdi-theme-light-dark"></span> Auto</button>
|
|
33
|
+
</div>
|
|
34
|
+
</li>
|
|
35
|
+
<li class="nav-item">
|
|
36
|
+
<a href="https://github.com/StrutTower/bootsteam-theme" rel="noreferrer noopener" class="nav-link">
|
|
37
|
+
GitHub
|
|
38
|
+
</a>
|
|
39
|
+
</li>
|
|
40
|
+
</ul>
|
|
41
|
+
</div>
|
|
42
|
+
</div>
|
|
43
|
+
</nav>
|
|
44
|
+
|
|
45
|
+
<main class="container mt-5 pt-2">
|
|
46
|
+
<ol class="breadcrumb">
|
|
47
|
+
<li class="breadcrumb-item"><a href="index.html">Homepage</a></li>
|
|
48
|
+
<li class="breadcrumb-item active">Navbars</li>
|
|
49
|
+
</ol>
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
<h2 class="display-4">Navbars</h2>
|
|
53
|
+
<hr />
|
|
54
|
+
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
|
|
55
|
+
<div class="container-fluid">
|
|
56
|
+
<a class="navbar-brand" href="#">Navbar</a>
|
|
57
|
+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation" style="">
|
|
58
|
+
<span class="navbar-toggler-icon"></span>
|
|
59
|
+
</button>
|
|
60
|
+
|
|
61
|
+
<div class="collapse navbar-collapse" id="navbarColor01">
|
|
62
|
+
<ul class="navbar-nav me-auto">
|
|
63
|
+
<li class="nav-item active">
|
|
64
|
+
<a class="nav-link" href="#">Home</a>
|
|
65
|
+
</li>
|
|
66
|
+
<li class="nav-item">
|
|
67
|
+
<a class="nav-link" href="#">Features</a>
|
|
68
|
+
</li>
|
|
69
|
+
<li class="nav-item">
|
|
70
|
+
<a class="nav-link" href="#">Pricing</a>
|
|
71
|
+
</li>
|
|
72
|
+
<li class="nav-item">
|
|
73
|
+
<a class="nav-link" href="#">About</a>
|
|
74
|
+
</li>
|
|
75
|
+
</ul>
|
|
76
|
+
<form class="d-flex">
|
|
77
|
+
<div class="input-group">
|
|
78
|
+
<input class="form-control mr-sm-2" type="text" placeholder="Search">
|
|
79
|
+
<button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
|
|
80
|
+
</div>
|
|
81
|
+
</form>
|
|
82
|
+
</div>
|
|
83
|
+
</div>
|
|
84
|
+
</nav>
|
|
85
|
+
|
|
86
|
+
<br />
|
|
87
|
+
|
|
88
|
+
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
|
89
|
+
<div class="container-fluid">
|
|
90
|
+
<a class="navbar-brand" href="#">Navbar</a>
|
|
91
|
+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation" style="">
|
|
92
|
+
<span class="navbar-toggler-icon"></span>
|
|
93
|
+
</button>
|
|
94
|
+
|
|
95
|
+
<div class="collapse navbar-collapse" id="navbarColor02">
|
|
96
|
+
<ul class="navbar-nav me-auto">
|
|
97
|
+
<li class="nav-item active">
|
|
98
|
+
<a class="nav-link" href="#">Home <span class="visually-hidden">(current)</span></a>
|
|
99
|
+
</li>
|
|
100
|
+
<li class="nav-item">
|
|
101
|
+
<a class="nav-link" href="#">Features</a>
|
|
102
|
+
</li>
|
|
103
|
+
<li class="nav-item">
|
|
104
|
+
<a class="nav-link" href="#">Pricing</a>
|
|
105
|
+
</li>
|
|
106
|
+
<li class="nav-item">
|
|
107
|
+
<a class="nav-link" href="#">About</a>
|
|
108
|
+
</li>
|
|
109
|
+
</ul>
|
|
110
|
+
<form class="d-flex">
|
|
111
|
+
<div class="input-group">
|
|
112
|
+
<input class="form-control mr-sm-2" type="text" placeholder="Search">
|
|
113
|
+
<button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
|
|
114
|
+
</div>
|
|
115
|
+
</form>
|
|
116
|
+
</div>
|
|
117
|
+
</div>
|
|
118
|
+
</nav>
|
|
119
|
+
|
|
120
|
+
<br />
|
|
121
|
+
|
|
122
|
+
<nav class="navbar navbar-expand-lg bg-body-tertiary">
|
|
123
|
+
<div class="container-fluid">
|
|
124
|
+
<a class="navbar-brand" href="#">Navbar</a>
|
|
125
|
+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation" style="">
|
|
126
|
+
<span class="navbar-toggler-icon"></span>
|
|
127
|
+
</button>
|
|
128
|
+
|
|
129
|
+
<div class="collapse navbar-collapse" id="navbarColor03">
|
|
130
|
+
<ul class="navbar-nav me-auto">
|
|
131
|
+
<li class="nav-item active">
|
|
132
|
+
<a class="nav-link" href="#">Home <span class="visually-hidden">(current)</span></a>
|
|
133
|
+
</li>
|
|
134
|
+
<li class="nav-item">
|
|
135
|
+
<a class="nav-link" href="#">Features</a>
|
|
136
|
+
</li>
|
|
137
|
+
<li class="nav-item">
|
|
138
|
+
<a class="nav-link" href="#">Pricing</a>
|
|
139
|
+
</li>
|
|
140
|
+
<li class="nav-item">
|
|
141
|
+
<a class="nav-link" href="#">About</a>
|
|
142
|
+
</li>
|
|
143
|
+
</ul>
|
|
144
|
+
<form class="d-flex">
|
|
145
|
+
<div class="input-group">
|
|
146
|
+
<input class="form-control mr-sm-2" type="text" placeholder="Search">
|
|
147
|
+
<button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
|
|
148
|
+
</div>
|
|
149
|
+
</form>
|
|
150
|
+
</div>
|
|
151
|
+
</div>
|
|
152
|
+
</nav>
|
|
153
|
+
|
|
154
|
+
<br />
|
|
155
|
+
<div class="row">
|
|
156
|
+
<div class="col-12 col-sm-6">
|
|
157
|
+
<h4>Tabs</h4>
|
|
158
|
+
<!-- Nav tabs -->
|
|
159
|
+
<ul class="nav nav-tabs" id="myTab" role="tablist">
|
|
160
|
+
<li class="nav-item">
|
|
161
|
+
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
|
|
162
|
+
</li>
|
|
163
|
+
<li class="nav-item">
|
|
164
|
+
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
|
|
165
|
+
</li>
|
|
166
|
+
<li class="nav-item">
|
|
167
|
+
<a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
|
|
168
|
+
</li>
|
|
169
|
+
</ul>
|
|
170
|
+
|
|
171
|
+
<!-- Tab panes -->
|
|
172
|
+
<div class="tab-content">
|
|
173
|
+
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Home</div>
|
|
174
|
+
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile</div>
|
|
175
|
+
<div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">Messages</div>
|
|
176
|
+
</div>
|
|
177
|
+
</div>
|
|
178
|
+
|
|
179
|
+
<div class="col-12 col-sm-6">
|
|
180
|
+
<h4>Pills</h4>
|
|
181
|
+
<p>
|
|
182
|
+
<ul class="nav nav-pills">
|
|
183
|
+
<li class="nav-item">
|
|
184
|
+
<a class="nav-link active" href="#">Active</a>
|
|
185
|
+
</li>
|
|
186
|
+
<li class="nav-item">
|
|
187
|
+
<a class="nav-link" href="#">Link</a>
|
|
188
|
+
</li>
|
|
189
|
+
<li class="nav-item">
|
|
190
|
+
<a class="nav-link" href="#">Link</a>
|
|
191
|
+
</li>
|
|
192
|
+
<li class="nav-item">
|
|
193
|
+
<a class="nav-link disabled" href="#">Disabled</a>
|
|
194
|
+
</li>
|
|
195
|
+
</ul>
|
|
196
|
+
</p>
|
|
197
|
+
<p>
|
|
198
|
+
<ul class="nav nav-pills flex-column">
|
|
199
|
+
<li class="nav-item">
|
|
200
|
+
<a class="nav-link active" href="#">Active</a>
|
|
201
|
+
</li>
|
|
202
|
+
<li class="nav-item">
|
|
203
|
+
<a class="nav-link" href="#">Link</a>
|
|
204
|
+
</li>
|
|
205
|
+
<li class="nav-item">
|
|
206
|
+
<a class="nav-link" href="#">Link</a>
|
|
207
|
+
</li>
|
|
208
|
+
<li class="nav-item">
|
|
209
|
+
<a class="nav-link disabled" href="#">Disabled</a>
|
|
210
|
+
</li>
|
|
211
|
+
</ul>
|
|
212
|
+
</p>
|
|
213
|
+
</div>
|
|
214
|
+
<div class="col-12 col-sm-6">
|
|
215
|
+
<h4>Breadcrumbs</h4>
|
|
216
|
+
<nav aria-label="breadcrumb">
|
|
217
|
+
<ol class="breadcrumb">
|
|
218
|
+
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
|
219
|
+
<li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
220
|
+
<li class="breadcrumb-item active" aria-current="page">Data</li>
|
|
221
|
+
</ol>
|
|
222
|
+
</nav>
|
|
223
|
+
</div>
|
|
224
|
+
<div class="col-12 col-sm-6">
|
|
225
|
+
<h4>Pagination</h4>
|
|
226
|
+
<nav aria-label="Page navigation example">
|
|
227
|
+
<ul class="pagination">
|
|
228
|
+
<li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
|
|
229
|
+
<li class="page-item"><a class="page-link" href="#">1</a></li>
|
|
230
|
+
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
|
231
|
+
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
|
232
|
+
<li class="page-item"><a class="page-link" href="#">Next</a></li>
|
|
233
|
+
</ul>
|
|
234
|
+
</nav>
|
|
235
|
+
</div>
|
|
236
|
+
</div>
|
|
237
|
+
</main>
|
|
238
|
+
|
|
239
|
+
<footer class="container">
|
|
240
|
+
<hr />
|
|
241
|
+
<p>TowerSoft</p>
|
|
242
|
+
</footer>
|
|
243
|
+
|
|
244
|
+
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
|
245
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
|
|
246
|
+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
|
|
247
|
+
<script src="scripts/scripts.js"></script>
|
|
248
|
+
</body>
|
|
249
|
+
|
|
250
|
+
</html>
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<title>Offcanvas | Tower Bootstrap Theme</title>
|
|
6
|
+
<meta charset="utf-8" />
|
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
8
|
+
<meta name="description" content="Demo of custom Bootstrap theme">
|
|
9
|
+
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@7.3.67/css/materialdesignicons.min.css" rel="stylesheet" />
|
|
10
|
+
<link href="css/bootsteam-theme.min.css" rel="stylesheet" />
|
|
11
|
+
<script src="scripts/themeHandler.js" type="text/javascript"></script>
|
|
12
|
+
</head>
|
|
13
|
+
|
|
14
|
+
<body>
|
|
15
|
+
<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
|
|
16
|
+
<div class="container">
|
|
17
|
+
<a href="index.html" class="navbar-brand">Bootsteam Theme</a>
|
|
18
|
+
|
|
19
|
+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-collapse-area">
|
|
20
|
+
<span class="navbar-toggler-icon"></span>
|
|
21
|
+
</button>
|
|
22
|
+
|
|
23
|
+
<div class="collapse navbar-collapse" id="navbar-collapse-area">
|
|
24
|
+
<ul class="navbar-nav ms-auto">
|
|
25
|
+
<li class="nav-item dropdown">
|
|
26
|
+
<button type="button" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
|
|
27
|
+
<span id="current-theme"></span> <span class="d-md-none">Switch Themes</span>
|
|
28
|
+
</button>
|
|
29
|
+
<div class="dropdown-menu dropdown-menu-end">
|
|
30
|
+
<button type="button" class="dropdown-item" data-bs-theme-value="light"><span class="mdi mdi-weather-sunny"></span> Light</button>
|
|
31
|
+
<button type="button" class="dropdown-item" data-bs-theme-value="dark"><span class="mdi mdi-weather-night"></span> Dark</button>
|
|
32
|
+
<button type="button" class="dropdown-item" data-bs-theme-value="auto"><span class="mdi mdi-theme-light-dark"></span> Auto</button>
|
|
33
|
+
</div>
|
|
34
|
+
</li>
|
|
35
|
+
<li class="nav-item">
|
|
36
|
+
<a href="https://github.com/StrutTower/bootsteam-theme" rel="noreferrer noopener" class="nav-link">
|
|
37
|
+
GitHub
|
|
38
|
+
</a>
|
|
39
|
+
</li>
|
|
40
|
+
</ul>
|
|
41
|
+
</div>
|
|
42
|
+
</div>
|
|
43
|
+
</nav>
|
|
44
|
+
|
|
45
|
+
<main class="container mt-5 pt-2">
|
|
46
|
+
<ol class="breadcrumb">
|
|
47
|
+
<li class="breadcrumb-item"><a href="index.html">Homepage</a></li>
|
|
48
|
+
<li class="breadcrumb-item active">Offcanvas</li>
|
|
49
|
+
</ol>
|
|
50
|
+
|
|
51
|
+
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
|
|
52
|
+
Link with href
|
|
53
|
+
</a>
|
|
54
|
+
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
|
|
55
|
+
Button with data-bs-target
|
|
56
|
+
</button>
|
|
57
|
+
|
|
58
|
+
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
|
|
59
|
+
<div class="offcanvas-header">
|
|
60
|
+
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
|
|
61
|
+
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
|
62
|
+
</div>
|
|
63
|
+
<div class="offcanvas-body">
|
|
64
|
+
<div>
|
|
65
|
+
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
|
|
66
|
+
</div>
|
|
67
|
+
<div class="dropdown mt-3">
|
|
68
|
+
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
|
|
69
|
+
Dropdown button
|
|
70
|
+
</button>
|
|
71
|
+
<ul class="dropdown-menu">
|
|
72
|
+
<li><a class="dropdown-item" href="#">Action</a></li>
|
|
73
|
+
<li><a class="dropdown-item" href="#">Another action</a></li>
|
|
74
|
+
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
|
75
|
+
</ul>
|
|
76
|
+
</div>
|
|
77
|
+
</div>
|
|
78
|
+
</div>
|
|
79
|
+
</main>
|
|
80
|
+
|
|
81
|
+
<footer class="container">
|
|
82
|
+
<hr />
|
|
83
|
+
<p>TowerSoft</p>
|
|
84
|
+
</footer>
|
|
85
|
+
|
|
86
|
+
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
|
87
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
|
|
88
|
+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
|
|
89
|
+
<script src="scripts/scripts.js"></script>
|
|
90
|
+
</body>
|
|
91
|
+
|
|
92
|
+
</html>
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<link href="https://unpkg.com/slim-select@latest/dist/slimselect.css" rel="stylesheet" />
|
|
6
|
+
<title>Plugins | Tower Bootstrap Theme</title>
|
|
7
|
+
<meta charset="utf-8" />
|
|
8
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
9
|
+
<meta name="description" content="Demo of custom Bootstrap theme">
|
|
10
|
+
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@7.3.67/css/materialdesignicons.min.css" rel="stylesheet" />
|
|
11
|
+
<link href="css/bootsteam-theme.min.css" rel="stylesheet" />
|
|
12
|
+
<script src="scripts/themeHandler.js" type="text/javascript"></script>
|
|
13
|
+
</head>
|
|
14
|
+
|
|
15
|
+
<body>
|
|
16
|
+
<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
|
|
17
|
+
<div class="container">
|
|
18
|
+
<a href="index.html" class="navbar-brand">Bootsteam Theme</a>
|
|
19
|
+
|
|
20
|
+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-collapse-area">
|
|
21
|
+
<span class="navbar-toggler-icon"></span>
|
|
22
|
+
</button>
|
|
23
|
+
|
|
24
|
+
<div class="collapse navbar-collapse" id="navbar-collapse-area">
|
|
25
|
+
<ul class="navbar-nav ms-auto">
|
|
26
|
+
<li class="nav-item dropdown">
|
|
27
|
+
<button type="button" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
|
|
28
|
+
<span id="current-theme"></span> <span class="d-md-none">Switch Themes</span>
|
|
29
|
+
</button>
|
|
30
|
+
<div class="dropdown-menu dropdown-menu-end">
|
|
31
|
+
<button type="button" class="dropdown-item" data-bs-theme-value="light"><span class="mdi mdi-weather-sunny"></span> Light</button>
|
|
32
|
+
<button type="button" class="dropdown-item" data-bs-theme-value="dark"><span class="mdi mdi-weather-night"></span> Dark</button>
|
|
33
|
+
<button type="button" class="dropdown-item" data-bs-theme-value="auto"><span class="mdi mdi-theme-light-dark"></span> Auto</button>
|
|
34
|
+
</div>
|
|
35
|
+
</li>
|
|
36
|
+
<li class="nav-item">
|
|
37
|
+
<a href="https://github.com/StrutTower/bootsteam-theme" rel="noreferrer noopener" class="nav-link">
|
|
38
|
+
GitHub
|
|
39
|
+
</a>
|
|
40
|
+
</li>
|
|
41
|
+
</ul>
|
|
42
|
+
</div>
|
|
43
|
+
</div>
|
|
44
|
+
</nav>
|
|
45
|
+
|
|
46
|
+
<main class="container mt-5 pt-2">
|
|
47
|
+
<ol class="breadcrumb">
|
|
48
|
+
<li class="breadcrumb-item"><a href="index.html">Homepage</a></li>
|
|
49
|
+
<li class="breadcrumb-item active">Plugins</li>
|
|
50
|
+
</ol>
|
|
51
|
+
|
|
52
|
+
<h2 class="display-5">Plugin Styles</h2>
|
|
53
|
+
<p class="text-muted">The following are JavaScript plugins that have support in this theme.</p>
|
|
54
|
+
<hr />
|
|
55
|
+
|
|
56
|
+
<div class="mb-3">
|
|
57
|
+
<h3>Slim Select <span class="h5"><a href="https://slimselectjs.com/" target="_blank" rel="noopener noreferrer" class="small">https://slimselectjs.com/</a></span></h3>
|
|
58
|
+
|
|
59
|
+
<div class="mb-3">
|
|
60
|
+
<label>Single Select List</label>
|
|
61
|
+
<select class="slim-select-test">
|
|
62
|
+
<option value="1">Option 1</option>
|
|
63
|
+
<option value="2">Option 2</option>
|
|
64
|
+
<option value="3">Option 3</option>
|
|
65
|
+
<option value="4">Option 4</option>
|
|
66
|
+
<option value="5">Option 5</option>
|
|
67
|
+
</select>
|
|
68
|
+
</div>
|
|
69
|
+
|
|
70
|
+
<div class="mb-3">
|
|
71
|
+
<label>Multiple Select List</label>
|
|
72
|
+
<select class="slim-select-test" multiple>
|
|
73
|
+
<option value="1">Option 1</option>
|
|
74
|
+
<option value="2">Option 2</option>
|
|
75
|
+
<option value="3">Option 3</option>
|
|
76
|
+
<option value="4">Option 4</option>
|
|
77
|
+
<option value="5">Option 5</option>
|
|
78
|
+
</select>
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
|
|
82
|
+
<br />
|
|
83
|
+
<br />
|
|
84
|
+
<br />
|
|
85
|
+
</main>
|
|
86
|
+
|
|
87
|
+
<footer class="container">
|
|
88
|
+
<hr />
|
|
89
|
+
<p>TowerSoft</p>
|
|
90
|
+
</footer>
|
|
91
|
+
<script src="https://unpkg.com/slim-select@latest/dist/slimselect.min.js"></script>
|
|
92
|
+
|
|
93
|
+
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
|
94
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
|
|
95
|
+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
|
|
96
|
+
<script src="scripts/scripts.js"></script>
|
|
97
|
+
</body>
|
|
98
|
+
|
|
99
|
+
</html>
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
$(document).ready(function () {
|
|
2
|
+
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
|
|
3
|
+
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
|
4
|
+
return new bootstrap.Tooltip(tooltipTriggerEl)
|
|
5
|
+
})
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
|
|
9
|
+
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
|
|
10
|
+
return new bootstrap.Popover(popoverTriggerEl)
|
|
11
|
+
})
|
|
12
|
+
|
|
13
|
+
$('#theme-switch').on('click', function (e) {
|
|
14
|
+
e.preventDefault();
|
|
15
|
+
theme = $('html').attr('data-bs-theme');
|
|
16
|
+
|
|
17
|
+
if (theme === 'dark') {
|
|
18
|
+
$('html').attr('data-bs-theme', 'light')
|
|
19
|
+
} else {
|
|
20
|
+
$('html').attr('data-bs-theme', 'dark')
|
|
21
|
+
}
|
|
22
|
+
});
|
|
23
|
+
|
|
24
|
+
$('[href="#"]').on('click', function (e) {
|
|
25
|
+
e.preventDefault();
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
$('form').on('submit', function (e) {
|
|
29
|
+
e.preventDefault();
|
|
30
|
+
});
|
|
31
|
+
|
|
32
|
+
$('.toast').toast('show');
|
|
33
|
+
|
|
34
|
+
if ($.fn.summernote) {
|
|
35
|
+
$('#summernote-test').summernote();
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
if ($.fn.select2) {
|
|
39
|
+
$('.select2-test').select2({
|
|
40
|
+
width: '100%'
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
if (window.matchMedia('(prefers-color-scheme: dark)').media === 'not all') {
|
|
45
|
+
$('#not-supported-warning').show();
|
|
46
|
+
}
|
|
47
|
+
});
|
|
48
|
+
|
|
49
|
+
document.querySelectorAll('.slim-select-test').forEach(function(element) {
|
|
50
|
+
new SlimSelect({
|
|
51
|
+
select: element
|
|
52
|
+
});
|
|
53
|
+
})
|
|
54
|
+
|
|
55
|
+
function toast(text, type) {
|
|
56
|
+
var template = $('#toast-template').find('.toast').clone();
|
|
57
|
+
|
|
58
|
+
$('#toast-notifications').append(template);
|
|
59
|
+
template.find('.toast-body').text(text);
|
|
60
|
+
|
|
61
|
+
if (type !== undefined && type.length > 0) {
|
|
62
|
+
var header = template.find('.toast-header').removeClass('.bg-primary').addClass(type);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
new bootstrap.Toast(template[0]).show();
|
|
66
|
+
|
|
67
|
+
setTimeout(function () {
|
|
68
|
+
template.remove();
|
|
69
|
+
}, 6000);
|
|
70
|
+
}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
// Update the theme ASAP to prevent the view flashing white
|
|
2
|
+
updateTheme(localStorage.getItem('preferred-theme'));
|
|
3
|
+
|
|
4
|
+
// Updates to the supplied theme
|
|
5
|
+
function updateTheme(theme) {
|
|
6
|
+
if (theme === null || theme === 'auto') {
|
|
7
|
+
theme = getPreferedTheme();
|
|
8
|
+
updateThemeSelector('auto');
|
|
9
|
+
} else {
|
|
10
|
+
updateThemeSelector(theme);
|
|
11
|
+
}
|
|
12
|
+
document.documentElement.setAttribute('data-bs-theme', theme);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
// Returns the prefers-color-scheme setting
|
|
16
|
+
function getPreferedTheme() {
|
|
17
|
+
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
// Updates the theme selector icon
|
|
21
|
+
function updateThemeSelector(theme) {
|
|
22
|
+
document.querySelectorAll('[data-bs-theme-value]').forEach(function (selector) {
|
|
23
|
+
if (selector.getAttribute('data-bs-theme-value') === theme) {
|
|
24
|
+
selector.classList.add('active');
|
|
25
|
+
document.getElementById('current-theme').className = selector.firstElementChild.className
|
|
26
|
+
} else {
|
|
27
|
+
selector.classList.remove('active');
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
document.addEventListener('DOMContentLoaded', function () {
|
|
33
|
+
// Update the theme again after the page has loaded. This is mainly to update the theme picker icon.
|
|
34
|
+
updateTheme(localStorage.getItem('preferred-theme'));
|
|
35
|
+
|
|
36
|
+
// Add event listener to the theme switcher buttons
|
|
37
|
+
document.querySelectorAll('[data-bs-theme-value]').forEach(function (button) {
|
|
38
|
+
button.addEventListener('click', function () {
|
|
39
|
+
const theme = button.getAttribute('data-bs-theme-value');
|
|
40
|
+
if (theme === 'auto') {
|
|
41
|
+
localStorage.removeItem('preferred-theme');
|
|
42
|
+
} else {
|
|
43
|
+
localStorage.setItem('preferred-theme', theme);
|
|
44
|
+
}
|
|
45
|
+
updateTheme(theme);
|
|
46
|
+
});
|
|
47
|
+
});
|
|
48
|
+
});
|
|
49
|
+
|
|
50
|
+
// Add an event listener if prefers-color-scheme is updated.
|
|
51
|
+
window.matchMedia('(prefers-color-scheme: dark)')
|
|
52
|
+
.addEventListener('change', ({ matches }) => {
|
|
53
|
+
const theme = localStorage.getItem('preferred-theme');
|
|
54
|
+
if (theme === null || theme === 'auto') {
|
|
55
|
+
updateTheme(getPreferedTheme());
|
|
56
|
+
}
|
|
57
|
+
});
|