├── .gitignore ├── LICENSE ├── build.sh ├── dist ├── css │ ├── demo.css │ ├── demo.min.css │ ├── spur.css │ └── spur.min.css ├── html │ ├── blank.html │ ├── cards.html │ ├── chartjs.html │ ├── content.html │ ├── forms.html │ ├── icons.html │ ├── index.html │ ├── login.html │ ├── signup.html │ ├── stats.html │ ├── tables.html │ ├── typography.html │ └── userinterface.html └── js │ ├── chart-js-config.js │ └── spur.js ├── gulpfile.js ├── html ├── _includes │ ├── cards │ │ ├── card-for-chart.html │ │ ├── card-with-menu.html │ │ ├── card.html │ │ ├── chart.js │ │ │ ├── bar.html │ │ │ ├── doughnut.html │ │ │ ├── line.html │ │ │ ├── polar.html │ │ │ └── two-bars.html │ │ ├── forms │ │ │ ├── complex-layout.html │ │ │ ├── horizontal.html │ │ │ ├── inline.html │ │ │ └── simple.html │ │ ├── misc │ │ │ └── notifications.html │ │ ├── tables │ │ │ └── default.html │ │ └── ui │ │ │ ├── alerts.html │ │ │ ├── badges.html │ │ │ ├── buttons-icons.html │ │ │ ├── buttons-social.html │ │ │ ├── buttons.html │ │ │ └── progress.html │ ├── data │ │ └── fontawesome.html │ ├── globals.html │ ├── macros.html │ ├── navigation.html │ ├── stats │ │ ├── stats-signups.html │ │ ├── stats-tickets.html │ │ └── stats.html │ └── toolbar.html ├── _layouts │ ├── base.html │ └── dashboard.html ├── blank.html ├── cards.html ├── chartjs.html ├── content.html ├── forms.html ├── icons.html ├── index.html ├── login.html ├── signup.html ├── stats.html ├── tables.html ├── typography.html └── userinterface.html ├── js ├── chart-js-config.js └── spur.js ├── live-push.sh ├── package-lock.json ├── package.json ├── readme.md ├── scss ├── _card.scss ├── _content.scss ├── _layout.scss ├── _navigation.scss ├── _notification.scss ├── _spur-bundle.scss ├── _spur-npm.scss ├── _stats.scss ├── _table.scss ├── _toolbar.scss ├── _variables.scss ├── demo.scss └── spur.scss └── test-push.sh /.gitignore: -------------------------------------------------------------------------------- 1 | .sass-cache 2 | node_modules/ 3 | package/ 4 | .idea/workspace.xml 5 | .idea/tasks.xml 6 | .idea/ 7 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright 2018 Alexander Rechsteiner 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 8 | -------------------------------------------------------------------------------- /build.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | # Rebuild the dist folder 4 | rm -rf dist/ 5 | gulp 6 | 7 | PACKAGE_VERSION=$(cat package.json \ 8 | | grep version \ 9 | | head -1 \ 10 | | awk -F: '{ print $2 }' \ 11 | | sed 's/[", ]//g') 12 | 13 | echo "$PACKAGE_VERSION" 14 | packageName="spur-admin-$PACKAGE_VERSION" 15 | 16 | rm -rf package 17 | mkdir package 18 | 19 | zip -rq package/$packageName.zip ./dist/* 20 | -------------------------------------------------------------------------------- /dist/css/demo.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * spur-template - An admin template based on Bootstrap 4 3 | * Version v1.1.0 4 | * Copyright 2016 - 2019 Alexander Rechsteiner 5 | * https://hackerthemes.com 6 | * 7 | * Parts of this code were created by the Bootstrap team 8 | * and are available under MIT license at https://getbootstrap.com. 9 | * Bootstrap version: 4.3.1 10 | */ 11 | 12 | .spur-demo-icons { 13 | display: -webkit-box; 14 | display: -webkit-flex; 15 | display: -ms-flexbox; 16 | display: flex; 17 | -webkit-box-orient: horizontal; 18 | -webkit-box-direction: normal; 19 | -webkit-flex-flow: row wrap; 20 | -ms-flex-flow: row wrap; 21 | flex-flow: row wrap; } 22 | .spur-demo-icons .icon { 23 | display: -webkit-box; 24 | display: -webkit-flex; 25 | display: -ms-flexbox; 26 | display: flex; 27 | -webkit-box-orient: horizontal; 28 | -webkit-box-direction: normal; 29 | -webkit-flex-direction: row; 30 | -ms-flex-direction: row; 31 | flex-direction: row; 32 | -webkit-box-align: center; 33 | -webkit-align-items: center; 34 | -ms-flex-align: center; 35 | align-items: center; 36 | -webkit-box-pack: start; 37 | -webkit-justify-content: flex-start; 38 | -ms-flex-pack: start; 39 | justify-content: flex-start; 40 | width: 250px; 41 | height: 50px; 42 | padding: 8px 8px 8px 0; } 43 | .spur-demo-icons .icon i { 44 | font-size: 30px; 45 | width: 40px; 46 | margin-right: 10px; } 47 | .spur-demo-icons .icon span { 48 | font-size: 13px; 49 | opacity: .9; } 50 | 51 | /*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRlbW8uc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztBQUVBO0VBQ0UscUJBQWE7RUFBYixzQkFBYTtFQUFiLHFCQUFhO0VBQWIsY0FBYTtFQUNiLCtCQUFtQjtFQUFuQiw4QkFBbUI7RUFBbkIsNEJBQW1CO01BQW5CLHdCQUFtQjtVQUFuQixvQkFBbUIsRUEyQnBCO0VBN0JEO0lBS0kscUJBQWE7SUFBYixzQkFBYTtJQUFiLHFCQUFhO0lBQWIsY0FBYTtJQUNiLCtCQUFtQjtJQUFuQiw4QkFBbUI7SUFBbkIsNEJBQW1CO1FBQW5CLHdCQUFtQjtZQUFuQixvQkFBbUI7SUFDbkIsMEJBQW1CO0lBQW5CLDRCQUFtQjtRQUFuQix1QkFBbUI7WUFBbkIsb0JBQW1CO0lBQ25CLHdCQUEyQjtJQUEzQixvQ0FBMkI7UUFBM0IscUJBQTJCO1lBQTNCLDRCQUEyQjtJQUMzQixhQUFZO0lBQ1osYUFBWTtJQUNaLHVCQUFzQixFQWlCdkI7SUE1Qkg7TUFrQk0sZ0JBQWU7TUFFZixZQUFXO01BQ1gsbUJBQWtCLEVBQ25CO0lBdEJMO01BeUJNLGdCQUFlO01BQ2YsWUFBVyxFQUNaIiwiZmlsZSI6ImRlbW8uY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLy8gU3R5bGVzIHRoYXQgYXJlIG1vcmUgZm9yIHRoZSBkZW1vIHRoYW4gYW55dGhpbmcgZWxzZVxuXG4uc3B1ci1kZW1vLWljb25zIHtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1mbG93OiByb3cgd3JhcDtcblxuICAuaWNvbiB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBmbGV4LWRpcmVjdGlvbjogcm93O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAganVzdGlmeS1jb250ZW50OiBmbGV4LXN0YXJ0O1xuICAgIHdpZHRoOiAyNTBweDtcbiAgICBoZWlnaHQ6IDUwcHg7XG4gICAgcGFkZGluZzogOHB4IDhweCA4cHggMDtcblxuICAgICY6aG92ZXIge1xuICAgICAgLy9iYWNrZ3JvdW5kOiAjZmZmO1xuICAgIH1cblxuICAgIGkge1xuICAgICAgZm9udC1zaXplOiAzMHB4O1xuICAgICAgLy9oZWlnaHQ6IDQwcHg7XG4gICAgICB3aWR0aDogNDBweDtcbiAgICAgIG1hcmdpbi1yaWdodDogMTBweDtcbiAgICB9XG5cbiAgICBzcGFuIHtcbiAgICAgIGZvbnQtc2l6ZTogMTNweDtcbiAgICAgIG9wYWNpdHk6IC45O1xuICAgIH1cbiAgfVxufVxuIl19 */ 52 | -------------------------------------------------------------------------------- /dist/css/demo.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * spur-template - An admin template based on Bootstrap 4 3 | * Version v1.1.0 4 | * Copyright 2016 - 2019 Alexander Rechsteiner 5 | * https://hackerthemes.com 6 | * 7 | * Parts of this code were created by the Bootstrap team 8 | * and are available under MIT license at https://getbootstrap.com. 9 | * Bootstrap version: 4.3.1 10 | */.spur-demo-icons{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap}.spur-demo-icons .icon{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;width:250px;height:50px;padding:8px 8px 8px 0}.spur-demo-icons .icon i{font-size:30px;width:40px;margin-right:10px}.spur-demo-icons .icon span{font-size:13px;opacity:.9} -------------------------------------------------------------------------------- /dist/html/blank.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Spur - A Bootstrap Admin Template 13 | 14 | 15 | 16 |
17 |
18 |
19 | 20 | 21 | 22 | 23 |
24 | 73 |
74 |
75 |
76 | 77 | 78 | 79 | 80 | 81 | 82 |
83 | 84 | 85 | 86 |
87 |
88 | 89 | 90 | 91 | 92 | 93 | 4 94 | 95 |
96 | 99 |
100 | Profile 101 | Logout 102 |
103 |
104 |
105 |
106 |
107 |
108 |

Blank

109 | 110 |
111 |
112 |
113 |
114 | 115 | 116 | 117 | 118 | 119 | 120 | -------------------------------------------------------------------------------- /dist/html/cards.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Spur - A Bootstrap Admin Template 13 | 14 | 15 | 16 |
17 |
18 |
19 | 20 | 21 | 22 | 23 |
24 | 73 |
74 |
75 |
76 | 77 | 78 | 79 | 80 | 81 | 82 |
83 | 84 | 85 | 86 |
87 |
88 | 89 | 90 | 91 | 92 | 93 | 4 94 | 95 |
96 | 99 |
100 | Profile 101 | Logout 102 |
103 |
104 |
105 |
106 |
107 |
108 |

Cards

109 |

Cards are simply Bootstrap cards with some added features for the dashboard environment.

110 |
111 |
112 |
113 |
114 |
115 | 116 |
117 |
A card
118 |
119 |
120 | 122 |
123 | Action 124 | Another action 125 | Something else here 126 |
127 |
128 |
129 |
130 |
Just a card that can be used to display some content, graphs, tables, and so on.
131 |
132 |
133 |
134 |
135 |
136 |
137 | 138 |
139 |
Primary Header
140 |
141 |
142 | 144 |
145 | Action 146 | Another action 147 | Something else here 148 |
149 |
150 |
151 |
152 |
Just a card that can be used to display some content, graphs, tables, and so on.
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 | 162 |
163 |
Success
164 |
165 |
166 | 168 |
169 | Action 170 | Another action 171 | Something else here 172 |
173 |
174 |
175 |
176 |
Just a card that can be used to display some content, graphs, tables, and so on.
177 |
178 |
179 |
180 |
181 |
182 |
183 | 184 |
185 |
Danger Header
186 |
187 |
188 | 190 |
191 | Action 192 | Another action 193 | Something else here 194 |
195 |
196 |
197 |
198 |
Just a card that can be used to display some content, graphs, tables, and so on.
199 |
200 |
201 |
202 |
203 |
204 |
205 |
206 |
207 | 208 |
209 |
Warning Card
210 |
211 |
212 | 214 |
215 | Action 216 | Another action 217 | Something else here 218 |
219 |
220 |
221 |
222 |
Just a card that can be used to display some content, graphs, tables, and so on.
223 |
224 |
225 |
226 |
227 |
228 |
229 | 230 |
231 |
Dark Card
232 |
233 |
234 | 236 |
237 | Action 238 | Another action 239 | Something else here 240 |
241 |
242 |
243 |
244 |
Just a card that can be used to display some content, graphs, tables, and so on.
245 |
246 |
247 |
248 |
249 |
250 |
251 |
252 |
253 | 254 |
255 |
Secondary Card
256 |
257 |
258 | 260 |
261 | Action 262 | Another action 263 | Something else here 264 |
265 |
266 |
267 |
268 |
Just a card that can be used to display some content, graphs, tables, and so on.
269 |
270 |
271 |
272 |
273 |
274 |
275 | 276 |
277 |
Info Card
278 |
279 |
280 | 282 |
283 | Action 284 | Another action 285 | Something else here 286 |
287 |
288 |
289 |
290 |
Just a card that can be used to display some content, graphs, tables, and so on.
291 |
292 |
293 |
294 |
295 |
296 |
297 |
298 | 299 | 300 | 301 | 302 | 303 | 304 | -------------------------------------------------------------------------------- /dist/html/content.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Spur - A Bootstrap Admin Template 13 | 14 | 15 | 16 |
17 |
18 |
19 | 20 | 21 | 22 | 23 |
24 | 73 |
74 |
75 |
76 | 77 | 78 | 79 | 80 | 81 | 82 |
83 | 84 | 85 | 86 |
87 |
88 | 89 | 90 | 91 | 92 | 93 | 4 94 | 95 |
96 | 99 |
100 | Profile 101 | Logout 102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |

A simple content page

111 |

My first content section

112 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex?

113 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex?

114 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex?

115 |

My second content section

116 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex?

117 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex?

118 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex?

119 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex?

120 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex?

121 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex?

122 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex?

123 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex?

124 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex?

125 |
126 |
127 |
128 |
129 |
130 |
131 | 132 | 133 | 134 | 135 | 136 | 137 | -------------------------------------------------------------------------------- /dist/html/forms.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Spur - A Bootstrap Admin Template 13 | 14 | 15 | 16 |
17 |
18 |
19 | 20 | 21 | 22 | 23 |
24 | 73 |
74 |
75 |
76 | 77 | 78 | 79 | 80 | 81 | 82 |
83 | 84 | 85 | 86 |
87 |
88 | 89 | 90 | 91 | 92 | 93 | 4 94 | 95 |
96 | 99 |
100 | Profile 101 | Logout 102 |
103 |
104 |
105 |
106 |
107 |
108 |

Forms

109 |
110 |
111 |
112 |
113 |
114 | 115 |
116 |
Simple Form
117 |
118 |
119 |
120 |
121 | 122 | 123 |
124 |
125 | 126 | 133 |
134 |
135 | 136 | 143 |
144 |
145 | 146 | 147 |
148 | 149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 | 158 |
159 |
Inline Form
160 |
161 |
162 |
163 |
164 | 165 | 166 |
167 |
168 | 169 | 170 |
171 | 172 |
173 |
174 |
175 |
176 |
177 |
178 | 179 |
180 |
Horizontal Layout
181 |
182 |
183 |
184 |
185 | 186 |
187 | 188 |
189 |
190 |
191 | 192 |
193 | 194 |
195 |
196 |
197 |
198 | Radios 199 |
200 |
201 | 202 | 203 |
204 |
205 | 206 | 207 |
208 |
209 | 210 | 211 |
212 |
213 | 214 | 215 |
216 |
217 |
218 |
219 |
220 |
Checkbox
221 |
222 |
223 | 224 | 225 |
226 |
227 |
228 |
229 |
230 | 231 |
232 |
233 |
234 |
235 |
236 |
237 |
238 |
239 |
240 |
241 |
242 |
243 | 244 |
245 |
Complex layout
246 |
247 |
248 |
249 |
250 |
251 | 252 | 253 |
254 |
255 | 256 | 257 |
258 |
259 |
260 | 261 | 262 |
263 |
264 | 265 | 266 |
267 |
268 |
269 | 270 | 271 |
272 |
273 | 274 | 278 |
279 |
280 | 281 | 282 |
283 |
284 |
285 |
286 | 287 | 288 |
289 |
290 | 291 |
292 |
293 |
294 |
295 |
296 |
297 |
298 |
299 |
300 | 301 | 302 | 303 | 304 | 305 | 306 | -------------------------------------------------------------------------------- /dist/html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Spur - A Bootstrap Admin Template 13 | 14 | 15 | 16 |
17 |
18 |
19 | 20 | 21 | 22 | 23 |
24 | 73 |
74 |
75 |
76 | 77 | 78 | 79 | 80 | 81 | 82 |
83 | 84 | 85 | 86 |
87 |
88 | 89 | 90 | 91 | 92 | 93 | 4 94 | 95 |
96 | 99 |
100 | Profile 101 | Logout 102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |

Sign ups

112 |
113 |
114 | 115 |
116 |
117 |
114
118 |
119 | +25% 120 | from last month 121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |

Revenue

129 |
130 |
131 | 132 |
133 |
134 |
$25,541
135 |
136 | +17.5% 137 | from last month 138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |

Open tickets

146 |
147 |
148 | 149 |
150 |
151 |
5
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 | 163 |
164 |
Bar Chart
165 |
166 |
167 | 169 |
170 | Action 171 | Another action 172 | Something else here 173 |
174 |
175 |
176 |
177 |
178 | 179 | 206 |
207 |
208 |
209 |
210 |
211 |
212 |
213 | 214 |
215 |
Notifications
216 |
217 |
218 |
219 | 220 |
221 | 222 |
223 |
New comment
224 | 21 days ago 225 | 226 | 227 |
228 | 229 |
230 |
New comment
231 | 21 days ago 232 | 233 | 234 |
235 | 236 |
237 |
New comment
238 | 21 days ago 239 | 240 |
241 | Show all 242 |
243 |
244 |
245 |
246 |
247 |
248 |
249 |
250 |
251 |
252 | 253 | 254 | 255 | 256 | 257 | 258 | -------------------------------------------------------------------------------- /dist/html/login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Spur - A Bootstrap Admin Template 13 | 14 | 15 | 16 |
17 | 18 |
19 |
Please sign in
20 |
21 |
22 |
23 | 24 |
25 |
26 | 27 |
28 |
29 |
30 | 31 | 32 |
33 |
34 | 38 |
39 |
40 |
41 |
42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /dist/html/signup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Spur - A Bootstrap Admin Template 13 | 14 | 15 | 16 |
17 | 18 |
19 |
Create an account
20 |
21 |
22 |
23 | 24 |
25 |
26 | 27 |
28 | 32 |
33 |
34 |
35 |
36 | 37 | 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /dist/html/stats.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Spur - A Bootstrap Admin Template 13 | 14 | 15 | 16 |
17 |
18 |
19 | 20 | 21 | 22 | 23 |
24 | 73 |
74 |
75 |
76 | 77 | 78 | 79 | 80 | 81 | 82 |
83 | 84 | 85 | 86 |
87 |
88 | 89 | 90 | 91 | 92 | 93 | 4 94 | 95 |
96 | 99 |
100 | Profile 101 | Logout 102 |
103 |
104 |
105 |
106 |
107 |
108 |

Stats

109 |
110 |
111 |
112 |

Primary

113 |
114 |
115 | 116 |
117 |
118 |
$100
119 |
120 | +17.5% 121 | from last month 122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |

Secondary

130 |
131 |
132 | 133 |
134 |
135 |
$100
136 |
137 | +17.5% 138 | from last month 139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |

Success

147 |
148 |
149 | 150 |
151 |
152 |
$100
153 |
154 | +17.5% 155 | from last month 156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |

Info

164 |
165 |
166 | 167 |
168 |
169 |
$100
170 |
171 | +17.5% 172 | from last month 173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |

Warning

181 |
182 |
183 | 184 |
185 |
186 |
$100
187 |
188 | +17.5% 189 | from last month 190 |
191 |
192 |
193 |
194 |
195 |
196 |
197 |

Danger

198 |
199 |
200 | 201 |
202 |
203 |
$100
204 |
205 | +17.5% 206 | from last month 207 |
208 |
209 |
210 |
211 |
212 |
213 |
214 |

Light

215 |
216 |
217 | 218 |
219 |
220 |
$100
221 |
222 | +17.5% 223 | from last month 224 |
225 |
226 |
227 |
228 |
229 |
230 |
231 |

Dark

232 |
233 |
234 | 235 |
236 |
237 |
$100
238 |
239 | +17.5% 240 | from last month 241 |
242 |
243 |
244 |
245 |
246 |
247 |
248 |
249 |
250 |
251 | 252 | 253 | 254 | 255 | 256 | 257 | -------------------------------------------------------------------------------- /dist/html/tables.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Spur - A Bootstrap Admin Template 13 | 14 | 15 | 16 |
17 |
18 |
19 | 20 | 21 | 22 | 23 |
24 | 73 |
74 |
75 |
76 | 77 | 78 | 79 | 80 | 81 | 82 |
83 | 84 | 85 | 86 |
87 |
88 | 89 | 90 | 91 | 92 | 93 | 4 94 | 95 |
96 | 99 |
100 | Profile 101 | Logout 102 |
103 |
104 |
105 |
106 |
107 |
108 |

Tables

109 |
110 |
111 |
112 |
113 |
114 | 115 |
116 |
Default table
117 |
118 |
119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 |
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 | 157 |
158 |
Table with hover
159 |
160 |
161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 |
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
191 |
192 |
193 |
194 |
195 |
196 |
197 |
198 |
199 |
200 | 201 |
202 |
Striped table
203 |
204 |
205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 |
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
235 |
236 |
237 |
238 |
239 |
240 |
241 |
242 | 243 |
244 |
Dark table
245 |
246 |
247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 |
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
277 |
278 |
279 |
280 |
281 |
282 |
283 |
284 |
285 | 286 | 287 | 288 | 289 | 290 | 291 | -------------------------------------------------------------------------------- /dist/html/typography.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Spur - A Bootstrap Admin Template 13 | 14 | 15 | 16 |
17 |
18 |
19 | 20 | 21 | 22 | 23 |
24 | 73 |
74 |
75 |
76 | 77 | 78 | 79 | 80 | 81 | 82 |
83 | 84 | 85 | 86 |
87 |
88 | 89 | 90 | 91 | 92 | 93 | 4 94 | 95 |
96 | 99 |
100 | Profile 101 | Logout 102 |
103 |
104 |
105 |
106 |
107 |
108 |

Typography

109 |
110 |
111 |
112 |
113 |
114 | 115 |
116 |
Content
117 |
118 |
119 |

A heading

120 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam architecto, atque dignissimos distinctio ea earum eos explicabo officiis praesentium, quo rem, tempora totam? Alias assumenda, blanditiis dicta earum maxime qui!

121 |
    122 |
  1. Hello
    2. 123 |
  2. This
    3. 124 |
  3. Is an ordered
    4. 125 |
  4. List
    5. 126 |
127 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae deleniti distinctio doloremque fugit ipsa ipsum, itaque labore magni necessitatibus nemo optio perspiciatis quasi quibusdam rerum sit sunt vel velit voluptatum!

128 |
    129 |
  • Hello
    • 130 |
  • This
    • 131 |
  • Is an unordered
    • 132 |
  • List
    • 133 |
134 |

A link that does nothing

135 |
136 |
137 |
138 |
139 |
140 | 141 |
142 |
Quote
143 |
144 |
145 |
146 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

147 |
Someone famous in Source Title
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 | 157 |
158 |
Headlines
159 |
160 |
161 |

h1. Bootstrap heading

162 |

h2. Bootstrap heading

163 |

h3. Bootstrap heading

164 |

h4. Bootstrap heading

165 |
h5. Bootstrap heading
166 |
h6. Bootstrap heading
167 |
168 |
169 |
170 |
171 |
172 | 173 |
174 |
Utilities
175 |
176 |
177 |

You can use the mark tag to highlight text.

178 |

This line of text is meant to be treated as deleted text.

179 |

This line of text is meant to be treated as no longer accurate.

180 |

This line of text is meant to be treated as an addition to the document.

181 |

This line of text will render as underlined

182 |

This line of text is meant to be treated as fine print.

183 |

This line rendered as bold text.

184 |

This line rendered as italicized text.

185 |
186 |
187 |
188 |
189 |
190 |
191 |
192 |
193 | 194 | 195 | 196 | 197 | 198 | 199 | -------------------------------------------------------------------------------- /dist/js/chart-js-config.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * spur-template - An admin template based on Bootstrap 4 3 | * Version v1.1.0 4 | * Copyright 2016 - 2019 Alexander Rechsteiner 5 | * https://hackerthemes.com 6 | */ 7 | 8 | Chart.defaults.global.defaultFontFamily = "'Open Sans', 'sans-serif'"; 9 | 10 | window.chartColors = { 11 | primary: '#3F84FC', 12 | secondary: '#727F94', 13 | success: '#1DAB47', 14 | info: '#8A3FFC', 15 | warning: '#FCAE3F', 16 | superwarning: '#fd7e14', 17 | danger: '#FC413F', 18 | }; 19 | -------------------------------------------------------------------------------- /dist/js/spur.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * spur-template - An admin template based on Bootstrap 4 3 | * Version v1.1.0 4 | * Copyright 2016 - 2019 Alexander Rechsteiner 5 | * https://hackerthemes.com 6 | */ 7 | 8 | const mobileBreakpoint = window.matchMedia("(max-width: 991px )"); 9 | 10 | $(document).ready(function(){ 11 | $(".dash-nav-dropdown-toggle").click(function(){ 12 | $(this).closest(".dash-nav-dropdown") 13 | .toggleClass("show") 14 | .find(".dash-nav-dropdown") 15 | .removeClass("show"); 16 | 17 | $(this).parent() 18 | .siblings() 19 | .removeClass("show"); 20 | }); 21 | 22 | $(".menu-toggle").click(function(){ 23 | if (mobileBreakpoint.matches) { 24 | $(".dash-nav").toggleClass("mobile-show"); 25 | } else { 26 | $(".dash").toggleClass("dash-compact"); 27 | } 28 | }); 29 | 30 | $(".searchbox-toggle").click(function(){ 31 | $(".searchbox").toggleClass("show"); 32 | }); 33 | 34 | // Dev utilities 35 | // $("header.dash-toolbar .menu-toggle").click(); 36 | // $(".searchbox-toggle").click(); 37 | }); 38 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'), 2 | sass = require('gulp-sass'), 3 | sourcemaps = require('gulp-sourcemaps'), 4 | cleanCss = require('gulp-clean-css'), 5 | rename = require('gulp-rename'), 6 | postcss = require('gulp-postcss'), 7 | nunjucks = require('gulp-nunjucks-render'), 8 | header = require('gulp-header'), 9 | htmlbeautify = require('gulp-html-beautify'), 10 | touch = require('gulp-touch-fd'), 11 | autoprefixer = require('autoprefixer'); 12 | 13 | // Variables for copyright header 14 | var date = new Date().getFullYear(); 15 | var pkg = require('./package.json'); 16 | var banner = ['/*!', 17 | ' * <%= pkg.name %> - <%= pkg.description %>', 18 | ' * Version v<%= pkg.version %>', 19 | ' * Copyright 2016 - ' + date + ' <%= pkg.author %>', 20 | ' * <%= pkg.homepage %>'].join('\n'); 21 | 22 | var cssBanner = [banner, 23 | ' * ', 24 | ' * Parts of this code were created by the Bootstrap team', 25 | ' * and are available under MIT license at https://getbootstrap.com.', 26 | ' * Bootstrap version: <%= pkg.dependencies.bootstrap %>', 27 | ' */\n', 28 | ''].join('\n'); 29 | 30 | var jsBanner = [banner, 31 | ' */\n', 32 | ''].join('\n'); 33 | 34 | function buildCss(){ 35 | return gulp.src(['scss/*.scss']) 36 | .pipe(sourcemaps.init()) 37 | .pipe(sass().on('error', sass.logError)) 38 | .pipe(postcss([ autoprefixer({ browsers: [ 39 | 'Chrome >= 35', 40 | 'Firefox >= 38', 41 | 'Edge >= 12', 42 | 'Explorer >= 10', 43 | 'iOS >= 8', 44 | 'Safari >= 8', 45 | 'Android 2.3', 46 | 'Android >= 4', 47 | 'Opera >= 12']})])) 48 | .pipe(header(cssBanner, { pkg : pkg } )) 49 | .pipe(sourcemaps.write()) 50 | .pipe(gulp.dest('dist/css/')) 51 | .pipe(cleanCss()) 52 | .pipe(rename({suffix: '.min'})) 53 | .pipe(gulp.dest('dist/css/')) 54 | } 55 | 56 | function buildHtml() { 57 | return gulp.src('html/*.html') 58 | .pipe(nunjucks()) 59 | .pipe(htmlbeautify({"preserve_newlines" : false, "max_preserve_newlines" : 1 })) 60 | .pipe(gulp.dest('dist/html/')) 61 | .pipe(touch()); 62 | } 63 | 64 | function buildJs() { 65 | return gulp.src('js/*.js') 66 | .pipe(header(jsBanner, { pkg : pkg } )) 67 | .pipe(gulp.dest('dist/js/')); 68 | } 69 | 70 | function watcher() { 71 | gulp.watch(['scss/*.scss'], gulp.series(buildCss)); 72 | gulp.watch(['html/**/*.html'], gulp.series(buildHtml)); 73 | gulp.watch(['js/*.js'], gulp.series(buildJs)); 74 | } 75 | 76 | exports.watch = gulp.series(buildCss, buildHtml, buildJs, watcher); 77 | exports.default = gulp.series(buildHtml, buildCss, buildJs); 78 | -------------------------------------------------------------------------------- /html/_includes/cards/card-for-chart.html: -------------------------------------------------------------------------------- 1 | {% extends './card-with-menu.html' %} 2 | 3 | {% block bodyClass %}spur-card-body-chart{% endblock %} 4 | 5 | -------------------------------------------------------------------------------- /html/_includes/cards/card-with-menu.html: -------------------------------------------------------------------------------- 1 | {% extends './card.html' %} 2 | 3 | {% block menu %} 4 |
5 |
6 | 13 | 14 |
15 | Action 16 | Another action 17 | Something else here 18 |
19 |
20 |
21 | {% endblock %} 22 | 23 | -------------------------------------------------------------------------------- /html/_includes/cards/card.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | {% block icon %}{% endblock %} 5 |
6 |
7 | {% block title %}Ricksaw Chart{% endblock %} 8 |
9 | {% block menu %}{% endblock %} 10 |
11 |
12 | {% block body %} 13 | hello I'm a card 14 | {% endblock %} 15 |
16 |
17 | -------------------------------------------------------------------------------- /html/_includes/cards/chart.js/bar.html: -------------------------------------------------------------------------------- 1 | {% extends '../card-for-chart.html' %} 2 | 3 | {% block title %}Bar Chart{% endblock %} 4 | {% block body %} 5 | 6 | 33 | 34 | {% endblock %} 35 | -------------------------------------------------------------------------------- /html/_includes/cards/chart.js/doughnut.html: -------------------------------------------------------------------------------- 1 | {% extends '../card-for-chart.html' %} 2 | 3 | {% block title %}Doughnut{% endblock %} 4 | {% block body %} 5 | 6 | 33 | 34 | {% endblock %} 35 | -------------------------------------------------------------------------------- /html/_includes/cards/chart.js/line.html: -------------------------------------------------------------------------------- 1 | {% extends '../card-for-chart.html' %} 2 | 3 | {% block title %}Line{% endblock %} 4 | {% block body %} 5 | 6 | 33 | 34 | {% endblock %} 35 | -------------------------------------------------------------------------------- /html/_includes/cards/chart.js/polar.html: -------------------------------------------------------------------------------- 1 | {% extends '../card-for-chart.html' %} 2 | 3 | {% block title %}Polar Area{% endblock %} 4 | {% block body %} 5 | 6 | 32 | 33 | {% endblock %} 34 | -------------------------------------------------------------------------------- /html/_includes/cards/chart.js/two-bars.html: -------------------------------------------------------------------------------- 1 | {% extends '../card-for-chart.html' %} 2 | 3 | {% block title %}Two bars{% endblock %} 4 | {% block body %} 5 | 6 | 39 | 40 | {% endblock %} 41 | -------------------------------------------------------------------------------- /html/_includes/cards/forms/complex-layout.html: -------------------------------------------------------------------------------- 1 | {% extends '../card.html' %} 2 | 3 | {% block title %}Complex layout{% endblock %} 4 | {% block body %} 5 |
6 |
7 |
8 | 9 | 10 |
11 |
12 | 13 | 14 |
15 |
16 |
17 | 18 | 19 |
20 |
21 | 22 | 23 |
24 |
25 |
26 | 27 | 28 |
29 |
30 | 31 | 35 |
36 |
37 | 38 | 39 |
40 |
41 |
42 |
43 | 44 | 45 |
46 | 47 |
48 | 49 |
50 | {% endblock %} 51 | -------------------------------------------------------------------------------- /html/_includes/cards/forms/horizontal.html: -------------------------------------------------------------------------------- 1 | {% extends '../card.html' %} 2 | 3 | {% block title %}Horizontal Layout{% endblock %} 4 | {% block body %} 5 |
6 |
7 | 8 |
9 | 10 |
11 |
12 |
13 | 14 |
15 | 16 |
17 |
18 |
19 |
20 | Radios 21 |
22 |
23 | 24 | 25 |
26 |
27 | 28 | 29 |
30 |
31 | 32 | 33 |
34 |
35 | 36 | 37 |
38 |
39 |
40 |
41 |
42 |
Checkbox
43 |
44 |
45 | 46 | 47 |
48 |
49 |
50 |
51 |
52 | 53 |
54 |
55 |
56 | {% endblock %} 57 | -------------------------------------------------------------------------------- /html/_includes/cards/forms/inline.html: -------------------------------------------------------------------------------- 1 | {% extends '../card.html' %} 2 | 3 | {% block title %}Inline Form{% endblock %} 4 | {% block body %} 5 |
6 |
7 | 8 | 9 |
10 |
11 | 12 | 13 |
14 | 15 |
16 | {% endblock %} 17 | -------------------------------------------------------------------------------- /html/_includes/cards/forms/simple.html: -------------------------------------------------------------------------------- 1 | {% extends '../card.html' %} 2 | 3 | {% block title %}Simple Form{% endblock %} 4 | {% block body %} 5 |
6 |
7 | 8 | 9 |
10 |
11 | 12 | 19 |
20 |
21 | 22 | 29 |
30 |
31 | 32 | 33 |
34 | 35 |
36 | {% endblock %} 37 | -------------------------------------------------------------------------------- /html/_includes/cards/misc/notifications.html: -------------------------------------------------------------------------------- 1 | {% extends '../card.html' %} 2 | 3 | {% block icon %}{% endblock %} 4 | {% block title %}Notifications{% endblock %} 5 | 6 | {% block body %} 7 |
8 | 9 |
10 | 11 |
12 |
New comment
13 | 21 days ago 14 | 15 | 16 | 17 |
18 | 19 |
20 |
New comment
21 | 21 days ago 22 | 23 | 24 | 25 |
26 | 27 |
28 |
New comment
29 | 21 days ago 30 | 31 | 32 | 33 |
34 | Show all 35 |
36 |
37 | {% endblock %} 38 | -------------------------------------------------------------------------------- /html/_includes/cards/tables/default.html: -------------------------------------------------------------------------------- 1 | {% extends '../card.html' %} 2 | 3 | {% block icon %}{% endblock %} 4 | {% block title %}Headlines{% endblock %} 5 | 6 | {% block body %} 7 | {% endblock %} 8 | -------------------------------------------------------------------------------- /html/_includes/cards/ui/alerts.html: -------------------------------------------------------------------------------- 1 | {% extends '../card.html' %} 2 | 3 | {% block menu %}{% endblock %} 4 | {% block title %}Alerts{% endblock %} 5 | {% block body %} 6 |
7 | 10 | 13 | 16 | 19 | 22 |
23 | 24 | {% endblock %} 25 | -------------------------------------------------------------------------------- /html/_includes/cards/ui/badges.html: -------------------------------------------------------------------------------- 1 | {% extends '../card.html' %} 2 | 3 | {% block menu %}{% endblock %} 4 | {% block title %}Badges{% endblock %} 5 | {% block body %} 6 |
7 | Primary 8 | Secondary 9 | Success 10 | Danger 11 | Warning 12 | Info 13 | Light 14 | Dark 15 |
16 | 17 |
18 | Primary 19 | Secondary 20 | Success 21 | Danger 22 | Warning 23 | Info 24 | Light 25 | Dark 26 |
27 | 28 | {% endblock %} 29 | -------------------------------------------------------------------------------- /html/_includes/cards/ui/buttons-icons.html: -------------------------------------------------------------------------------- 1 | {% extends '../card.html' %} 2 | 3 | {% block menu %}{% endblock %} 4 | {% block title %}Icon Buttons{% endblock %} 5 | {% block body %} 6 |
7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | {% endblock %} 29 | -------------------------------------------------------------------------------- /html/_includes/cards/ui/buttons-social.html: -------------------------------------------------------------------------------- 1 | {% extends '../card.html' %} 2 | 3 | {% block menu %}{% endblock %} 4 | {% block title %}Social Buttons{% endblock %} 5 | {% block body %} 6 |

Social Buttons

7 | 8 |
9 | 10 | 11 | Sign in with GitHub 12 | 13 | 14 | 15 | Sign in with Facebook 16 | 17 | 18 | 19 | Sign in with Twitter 20 | 21 | 22 | 23 | Sign in with Google 24 | 25 | 26 | 27 | Sign in with VK 28 | 29 | 30 | 31 | Sign in with Instagram 32 | 33 | 34 |
35 | 36 | {% endblock %} 37 | -------------------------------------------------------------------------------- /html/_includes/cards/ui/buttons.html: -------------------------------------------------------------------------------- 1 | {% extends '../card.html' %} 2 | 3 | {% block menu %}{% endblock %} 4 | {% block title %}Buttons{% endblock %} 5 | {% block body %} 6 |
7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 |
29 | 30 | 31 | 32 |
33 | 34 | 35 | 36 | 37 |
38 |
39 | 40 |
41 | 42 |
43 | {% endblock %} 44 | -------------------------------------------------------------------------------- /html/_includes/cards/ui/progress.html: -------------------------------------------------------------------------------- 1 | {% extends '../card.html' %} 2 | 3 | {% block menu %}{% endblock %} 4 | {% block title %}Progress{% endblock %} 5 | {% block body %} 6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 | 22 | {% endblock %} 23 | -------------------------------------------------------------------------------- /html/_includes/globals.html: -------------------------------------------------------------------------------- 1 | {% set github = "https://github.com/HackerThemes/spur-template" %} 2 | -------------------------------------------------------------------------------- /html/_includes/macros.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HackerThemes/spur-template/7ea0c1586828b65afd53f88703d93c9c352e60bb/html/_includes/macros.html -------------------------------------------------------------------------------- /html/_includes/navigation.html: -------------------------------------------------------------------------------- 1 | {% macro navItem(id, url)%} 2 | {{url}} 3 | {% endmacro %} 4 | 5 |
6 | 7 | 8 | 9 | 10 |
11 | 12 | 81 | -------------------------------------------------------------------------------- /html/_includes/stats/stats-signups.html: -------------------------------------------------------------------------------- 1 | {% extends "./stats.html" %} 2 | 3 | {% block class %}stats-primary{% endblock %} 4 | {% block title %}Sign ups{% endblock %} 5 | {% block icon %}{% endblock %} 6 | {% block number %}114{% endblock %} 7 | {% block percentage %}+25%{% endblock %} 8 | -------------------------------------------------------------------------------- /html/_includes/stats/stats-tickets.html: -------------------------------------------------------------------------------- 1 | {% extends "./stats.html" %} 2 | 3 | {% block class %}stats-danger{% endblock %} 4 | {% block title %}Open tickets{% endblock %} 5 | {% block icon %}{% endblock %} 6 | {% block number %}5{% endblock %} 7 | {% block percentage %}-25%{% endblock %} 8 | 9 | {% block change %}{%endblock%} 10 | -------------------------------------------------------------------------------- /html/_includes/stats/stats.html: -------------------------------------------------------------------------------- 1 |
2 |

3 | {% block title %}Revenue{% endblock %} 4 |

5 | 6 |
7 |
8 | {% block icon %}{% endblock %} 9 |
10 | 11 |
12 |
{% block number %}$25,541{% endblock %}
13 | {% block change %} 14 |
15 | {% block percentage %}+17.5%{% endblock %} 16 | {% block timeframe %}from last month{% endblock %} 17 |
18 | {% endblock %} 19 |
20 |
21 |
22 | -------------------------------------------------------------------------------- /html/_includes/toolbar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 |
14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 4 22 | 23 |
24 | 27 |
28 | Profile 29 | Logout 30 |
31 |
32 |
33 | 34 | -------------------------------------------------------------------------------- /html/_layouts/base.html: -------------------------------------------------------------------------------- 1 | 2 | {% import "html/_includes/globals.html" as globals %} 3 | {% import "html/_includes/macros.html" as macros %} 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | Spur - A Bootstrap Admin Template 18 | 19 | {% if include_demo_css %} 20 | 21 | 22 | {% endif %} 23 | 24 | 25 | 26 | {% block main %}{% endblock %} 27 | 28 | {% block js %} 29 | 30 | 31 | 32 | 33 | 34 | {% endblock %} 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /html/_layouts/dashboard.html: -------------------------------------------------------------------------------- 1 | {% extends "html/_layouts/base.html" %} 2 | 3 | {% block main %} 4 |
5 |
6 | {% include "html/_includes/navigation.html" %} 7 |
8 | 9 |
10 |
11 | {% include "html/_includes/toolbar.html" %} 12 |
13 | 14 |
15 |
16 | {%block content %} 17 |
18 |
19 |

Content Area

20 |
21 | 22 |
23 | {% endblock %} 24 |
25 |
26 |
27 |
28 | {% endblock %} 29 | -------------------------------------------------------------------------------- /html/blank.html: -------------------------------------------------------------------------------- 1 | {% extends "html/_layouts/dashboard.html" %} 2 | {% set page_id = "blank" %} 3 | {% set group_id = "layouts" %} 4 | 5 | {% block content %} 6 |

Blank

7 | 8 | 9 | 10 | 11 | {% endblock %} 12 | -------------------------------------------------------------------------------- /html/cards.html: -------------------------------------------------------------------------------- 1 | {% extends "html/_layouts/dashboard.html" %} 2 | {% set page_id = "cards" %} 3 | {% set group_id = "components" %} 4 | 5 | {% macro card(title='A card', headerclass='', bodyclass='') %} 6 |
7 |
8 |
9 | 10 |
11 |
12 | {{ title }} 13 |
14 | 15 |
16 |
17 | 24 | 25 |
26 | Action 27 | Another action 28 | Something else here 29 |
30 |
31 |
32 |
33 |
34 | Just a card that can be used to display some content, graphs, tables, and so on. 35 |
36 |
37 | {% endmacro %} 38 | 39 | {% block content %} 40 | 41 |

Cards

42 | 43 |

Cards are simply Bootstrap cards with some added features for the dashboard environment.

44 | 45 |
46 |
47 | {{card()}} 48 |
49 | 50 |
51 | {{card('Primary Header', 'bg-primary text-white')}} 52 |
53 |
54 | 55 |
56 |
57 | {{card('Success', 'bg-success text-white')}} 58 |
59 | 60 |
61 | {{card('Danger Header', 'bg-danger text-white')}} 62 |
63 |
64 | 65 | 66 |
67 |
68 | {{card('Warning Card', 'bg-warning text-dark', 'bg-warning text-dark')}} 69 |
70 | 71 |
72 | {{card('Dark Card', 'bg-dark text-white', 'bg-dark text-white')}} 73 |
74 | 75 |
76 | 77 |
78 |
79 | {{card('Secondary Card', 'bg-secondary text-white', 'bg-secondary text-white')}} 80 |
81 | 82 |
83 | {{card('Info Card', 'bg-info text-white', 'bg-info text-white')}} 84 |
85 | 86 |
87 | 88 | {% endblock %} 89 | -------------------------------------------------------------------------------- /html/chartjs.html: -------------------------------------------------------------------------------- 1 | {% extends "html/_layouts/dashboard.html" %} 2 | {% set page_id = "chartjs" %} 3 | {% set group_id = "charts" %} 4 | 5 | {% block content %} 6 | 7 |

Chart.js

8 | 9 |

10 | These charts are made using the Chart.js library. You can find more examples and ways to configure 11 | the charts in the Chart.js Documentation. 12 |

13 | 14 |
15 |
16 | {% include "html/_includes/cards/chart.js/two-bars.html" %} 17 |
18 | 19 |
20 | {% include "html/_includes/cards/chart.js/line.html" %} 21 |
22 |
23 | 24 |
25 |
26 | {% include "html/_includes/cards/chart.js/doughnut.html" %} 27 |
28 | 29 |
30 | {% include "html/_includes/cards/chart.js/polar.html" %} 31 |
32 |
33 | 34 | 35 | {% endblock %} 36 | -------------------------------------------------------------------------------- /html/content.html: -------------------------------------------------------------------------------- 1 | {% extends "html/_layouts/dashboard.html" %} 2 | {% set page_id = "content" %} 3 | {% set group_id = "layouts" %} 4 | 5 | {% block content %} 6 | 7 |
8 | 9 |
10 | 11 |

A simple content page

12 | 13 |

My first content section

14 | 15 |

16 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? 17 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? 18 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? 19 |

20 | 21 |

22 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? 23 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? 24 |

25 | 26 |

27 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? 28 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? 29 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? 30 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? 31 |

32 | 33 |

My second content section

34 | 35 |

36 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? 37 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? 38 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? 39 |

40 | 41 |

42 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? 43 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? 44 |

45 | 46 |

47 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? 48 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? 49 |

50 | 51 |

52 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? 53 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? 54 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? 55 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? 56 |

57 | 58 |

59 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? 60 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? 61 |

62 | 63 |

64 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? 65 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? 66 |

67 | 68 |

69 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? 70 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? 71 |

72 | 73 |

74 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? 75 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? 76 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? 77 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? 78 |

79 | 80 |

81 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? 82 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? 83 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? 84 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi architecto aut cupiditate debitis delectus dicta dolor et fugit neque nesciunt, nihil nulla, quisquam reiciendis rerum, sapiente sit. Aliquid, ex? 85 |

86 | 87 |
88 | 89 |
90 | {% endblock %} 91 | 92 | -------------------------------------------------------------------------------- /html/forms.html: -------------------------------------------------------------------------------- 1 | {% extends "html/_layouts/dashboard.html" %} 2 | {% set page_id = "forms" %} 3 | {% set group_id = "components" %} 4 | 5 | {% block content %} 6 | 7 |

Forms

8 | 9 |
10 |
11 | {% include "html/_includes/cards/forms/simple.html" %} 12 |
13 | 14 |
15 | {% include "html/_includes/cards/forms/inline.html" %} 16 | {% include "html/_includes/cards/forms/horizontal.html" %} 17 |
18 |
19 | 20 |
21 |
22 | {% include "html/_includes/cards/forms/complex-layout.html" %} 23 |
24 | 25 |
26 | 27 | 28 | {% endblock %} 29 | -------------------------------------------------------------------------------- /html/icons.html: -------------------------------------------------------------------------------- 1 | {% extends "html/_layouts/dashboard.html" %} 2 | {% import "html/_includes/data/fontawesome.html" as fontawesome %} 3 | {% set page_id = "icons" %} 4 | {% set group_id = "components" %} 5 | {% set subgroup_id = "icons" %} 6 | {% set include_demo_css = true %} 7 | 8 | 9 | {% block content %} 10 |

Font Awesome Icons

11 | 12 |
13 |
14 |
15 | Solid 16 |
17 |
18 | 19 |
20 |
21 | {% for icon in fontawesome.solid %} 22 |
23 | 24 | {{icon}} 25 |
26 | {% endfor %} 27 |
28 |
29 |
30 | 31 | 32 |
33 |
34 |
35 | Regular 36 |
37 |
38 | 39 |
40 |
41 | {% for icon in fontawesome.regular %} 42 |
43 | 44 | {{icon}} 45 |
46 | {% endfor %} 47 |
48 |
49 |
50 | 51 | 52 |
53 |
54 |
55 | Brands 56 |
57 |
58 | 59 |
60 |
61 | {% for icon in fontawesome.brands %} 62 |
63 | 64 | {{icon}} 65 |
66 | {% endfor %} 67 |
68 |
69 |
70 | 71 | {% endblock %} 72 | -------------------------------------------------------------------------------- /html/index.html: -------------------------------------------------------------------------------- 1 | {% extends "html/_layouts/dashboard.html" %} 2 | 3 | {% block content %} 4 |
5 |
6 | {% include "html/_includes/stats/stats-signups.html" %} 7 |
8 | 9 |
10 | {% include "html/_includes/stats/stats.html" %} 11 |
12 | 13 |
14 | {% include "html/_includes/stats/stats-tickets.html" %} 15 |
16 |
17 | 18 |
19 |
20 | {% include "html/_includes/cards/chart.js/bar.html" %} 21 |
22 | 23 |
24 | {% include "html/_includes/cards/misc/notifications.html" %} 25 |
26 |
27 | 28 | {% endblock %} 29 | -------------------------------------------------------------------------------- /html/login.html: -------------------------------------------------------------------------------- 1 | {% extends "html/_layouts/base.html" %} 2 | 3 | {% block main %} 4 | 5 |
6 | 7 | 8 |
9 |
10 | Please sign in 11 |
12 | 13 |
14 |
15 |
16 | 17 |
18 | 19 |
20 | 21 |
22 | 23 |
24 |
25 | 26 | 27 |
28 |
29 | 30 | 31 | 35 |
36 |
37 |
38 | 39 | 40 |
41 | {% endblock %} 42 | -------------------------------------------------------------------------------- /html/signup.html: -------------------------------------------------------------------------------- 1 | {% extends "html/_layouts/base.html" %} 2 | 3 | {% block main %} 4 | 5 |
6 | 7 | 8 |
9 |
10 | Create an account 11 |
12 | 13 |
14 |
15 |
16 | 17 |
18 | 19 |
20 | 21 |
22 | 23 | 27 |
28 |
29 |
30 | 31 | 32 |
33 | {% endblock %} 34 | -------------------------------------------------------------------------------- /html/stats.html: -------------------------------------------------------------------------------- 1 | {% extends "html/_layouts/dashboard.html" %} 2 | {% set page_id = "stats" %} 3 | {% set group_id = "components" %} 4 | 5 | 6 | {% macro stats(title='', class='stats-primary', icon='fas fa-cart-arrow-down', number='$100') %} 7 |
8 |

9 | {{title}} 10 |

11 | 12 |
13 |
14 | 15 |
16 | 17 |
18 |
{{number}}
19 |
20 | +17.5% 21 | from last month 22 |
23 |
24 |
25 |
26 | {% endmacro %} 27 | 28 | {% block content %} 29 | 30 |

Stats

31 | 32 | 33 |
34 |
35 | {{stats('Primary')}} 36 |
37 |
38 | {{stats('Secondary', 'stats-secondary')}} 39 |
40 |
41 | {{stats('Success', 'stats-success')}} 42 |
43 |
44 | {{stats('Info', 'stats-info')}} 45 |
46 |
47 | {{stats('Warning', 'stats-warning')}} 48 |
49 |
50 | {{stats('Danger', 'stats-danger')}} 51 |
52 |
53 | {{stats('Light', 'stats-light')}} 54 |
55 |
56 | {{stats('Dark', 'stats-dark')}} 57 |
58 |
59 | 60 | {% endblock %} 61 | -------------------------------------------------------------------------------- /html/tables.html: -------------------------------------------------------------------------------- 1 | {% extends "html/_layouts/dashboard.html" %} 2 | {% set page_id = "tables" %} 3 | {% set group_id = "components" %} 4 | 5 | {% macro table(title='', class='', cardBodyClass='') %} 6 | 7 |
8 |
9 |
10 | 11 |
12 |
{{title}}
13 |
14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 |
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
45 | 46 |
47 |
48 | {% endmacro %} 49 | 50 | {% block content %} 51 | 52 |

Tables

53 | 54 |
55 |
56 | {{table("Default table", "table-in-card")}} 57 |
58 |
59 | {{table("Table with hover", "table-hover table-in-card")}} 60 |
61 |
62 | 63 |
64 |
65 | {{table("Striped table", "table-striped table-in-card")}} 66 |
67 |
68 | {{table("Dark table", "table-dark table-in-card", "card-body-with-dark-table")}} 69 |
70 |
71 | 72 | 73 | {% endblock %} 74 | -------------------------------------------------------------------------------- /html/typography.html: -------------------------------------------------------------------------------- 1 | {% extends "html/_layouts/dashboard.html" %} 2 | {% set page_id = "typography" %} 3 | {% set group_id = "components" %} 4 | 5 | {% block content %} 6 | 7 |

Typography

8 | 9 |
10 |
11 |
12 |
13 |
14 | 15 |
16 |
Content
17 |
18 |
19 |

A heading

20 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam architecto, atque dignissimos distinctio ea earum eos explicabo officiis praesentium, quo rem, tempora totam? Alias assumenda, blanditiis dicta earum maxime qui!

21 | 22 |
    23 |
  1. Hello
    2. 24 |
  2. This
    3. 25 |
  3. Is an ordered
    4. 26 |
  4. List
    5. 27 |
28 | 29 |

30 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae deleniti distinctio doloremque fugit ipsa ipsum, itaque labore magni necessitatibus nemo optio perspiciatis quasi quibusdam rerum sit sunt vel velit voluptatum! 31 |

32 | 33 |
    34 |
  • Hello
    • 35 |
  • This
    • 36 |
  • Is an unordered
    • 37 |
  • List
    • 38 |
39 | 40 | 41 |

A link that does nothing

42 |
43 |
44 |
45 |
46 |
47 | 48 |
49 |
50 | Quote 51 |
52 |
53 |
54 |
55 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

56 |
Someone famous in Source Title
57 |
58 |
59 |
60 | 61 | 62 |
63 |
64 |
65 |
66 |
67 | 68 |
69 |
70 | Headlines 71 |
72 |
73 |
74 |

h1. Bootstrap heading

75 |

h2. Bootstrap heading

76 |

h3. Bootstrap heading

77 |

h4. Bootstrap heading

78 |
h5. Bootstrap heading
79 |
h6. Bootstrap heading
80 |
81 |
82 | 83 |
84 |
85 |
86 | 87 |
88 |
89 | Utilities 90 |
91 |
92 |
93 |

You can use the mark tag to highlight text.

94 |

This line of text is meant to be treated as deleted text.

95 |

This line of text is meant to be treated as no longer accurate.

96 |

This line of text is meant to be treated as an addition to the document.

97 |

This line of text will render as underlined

98 |

This line of text is meant to be treated as fine print.

99 |

This line rendered as bold text.

100 |

This line rendered as italicized text.

101 |
102 |
103 |
104 |
105 | 106 | 107 | {% endblock %} 108 | -------------------------------------------------------------------------------- /html/userinterface.html: -------------------------------------------------------------------------------- 1 | {% extends "html/_layouts/dashboard.html" %} 2 | {% set page_id = "userinterface" %} 3 | {% set group_id = "components" %} 4 | 5 | {% block content %} 6 | 7 |

User Interface

8 | 9 |
10 |
11 | {% include "html/_includes/cards/ui/alerts.html" %} 12 | {% include "html/_includes/cards/ui/badges.html" %} 13 | {% include "html/_includes/cards/ui/progress.html" %} 14 |
15 | 16 |
17 | {% include "html/_includes/cards/ui/buttons.html" %} 18 | {% include "html/_includes/cards/ui/buttons-icons.html" %} 19 | {% include "html/_includes/cards/ui/buttons-social.html" %} 20 |
21 | 22 |
23 | 24 |
25 |
26 |
27 | 28 |
29 |
30 |
31 | 32 | 33 | {% endblock %} 34 | -------------------------------------------------------------------------------- /js/chart-js-config.js: -------------------------------------------------------------------------------- 1 | Chart.defaults.global.defaultFontFamily = "'Open Sans', 'sans-serif'"; 2 | 3 | window.chartColors = { 4 | primary: '#3F84FC', 5 | secondary: '#727F94', 6 | success: '#1DAB47', 7 | info: '#8A3FFC', 8 | warning: '#FCAE3F', 9 | superwarning: '#fd7e14', 10 | danger: '#FC413F', 11 | }; 12 | -------------------------------------------------------------------------------- /js/spur.js: -------------------------------------------------------------------------------- 1 | const mobileBreakpoint = window.matchMedia("(max-width: 991px )"); 2 | 3 | $(document).ready(function(){ 4 | $(".dash-nav-dropdown-toggle").click(function(){ 5 | $(this).closest(".dash-nav-dropdown") 6 | .toggleClass("show") 7 | .find(".dash-nav-dropdown") 8 | .removeClass("show"); 9 | 10 | $(this).parent() 11 | .siblings() 12 | .removeClass("show"); 13 | }); 14 | 15 | $(".menu-toggle").click(function(){ 16 | if (mobileBreakpoint.matches) { 17 | $(".dash-nav").toggleClass("mobile-show"); 18 | } else { 19 | $(".dash").toggleClass("dash-compact"); 20 | } 21 | }); 22 | 23 | $(".searchbox-toggle").click(function(){ 24 | $(".searchbox").toggleClass("show"); 25 | }); 26 | 27 | // Dev utilities 28 | // $("header.dash-toolbar .menu-toggle").click(); 29 | // $(".searchbox-toggle").click(); 30 | }); 31 | -------------------------------------------------------------------------------- /live-push.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | echo "Building Spur" 4 | . build.sh 5 | 6 | echo "Pushing to live" 7 | 8 | rsync -a --delete dist/ wildmind@wildmind.ch:~/public_html/hackerthemes/hackerthemes.com/spur/demo 9 | rsync -a package/ wildmind@wildmind.ch:~/public_html/hackerthemes/hackerthemes.com/spur/package 10 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "spur-template", 3 | "version": "1.1.0", 4 | "description": "An admin template based on Bootstrap 4", 5 | "main": "index.html", 6 | "repository": "https://github.com/HackerThemes/spur-admin", 7 | "scripts": { 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "keywords": [ 11 | "bootstrap", 12 | "admin", 13 | "theme" 14 | ], 15 | "author": "Alexander Rechsteiner", 16 | "homepage": "https://hackerthemes.com", 17 | "license": "MIT", 18 | "files": [ 19 | "dist/**/*", 20 | "scss/**/*" 21 | ], 22 | "devDependencies": { 23 | "autoprefixer": "^9.4.9", 24 | "gulp": "^4.0.0", 25 | "gulp-clean-css": "^4.0.0", 26 | "gulp-header": "^2.0.7", 27 | "gulp-html-beautify": "^1.0.1", 28 | "gulp-nunjucks-render": "^2.2.2", 29 | "gulp-postcss": "^8.0.0", 30 | "gulp-rename": "^1.4.0", 31 | "gulp-sass": "^4.0.2", 32 | "gulp-sourcemaps": "^2.6.5", 33 | "gulp-touch-fd": "^2.0.0" 34 | }, 35 | "dependencies": { 36 | "bootstrap": "4.3.1" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Spur - A Bootstrap Admin Template 2 | 3 | Spur is a simple dashboard template (aka admin template) based on the latest version of Bootstrap. It features layouts 4 | and components intended to make it easier for developers to build a pretty web application. 5 | 6 | ## Live Demo 7 | 8 | A live demo can be found here: https://hackerthemes.com/spur/demo/html/ 9 | 10 | ## Download and instructions 11 | 12 | The entire template with all necessary assets is found in the `dist/` folder. 13 | Please find the download and detailed instructions at https://hackerthemes.com/bootstrap-templates/spur/. 14 | 15 | You can also install using npm: 16 | 17 | ```npm install spur-template``` 18 | 19 | ## Creators 20 | 21 | **Alexander Rechsteiner** 22 | 23 | - 24 | - 25 | - 26 | 27 | **Bootstrap** 28 | 29 | - 30 | 31 | ## Copyright and license 32 | 33 | Code and documentation copyright 2018 [HackerThemes](https://hacekrthemes.com) Code released under the [MIT License](https://opensource.org/licenses/MIT). 34 | 35 | 36 | ## Changelog 37 | 38 | 1.1.0: Upgrade to Bootstrap 4.3.1 39 | 40 | 1.0.0: Initial Release 41 | -------------------------------------------------------------------------------- /scss/_card.scss: -------------------------------------------------------------------------------- 1 | .spur-card { 2 | border: 1px solid #D3D3D3; 3 | background: #fff; 4 | //min-height: 220px; 5 | margin-bottom: 30px; 6 | 7 | .card-header { 8 | min-height: 57px; 9 | background-color: #F0F1F7; 10 | display: flex; 11 | align-items: center; 12 | padding: 8px 32px; 13 | } 14 | 15 | .card-body { 16 | padding: 24px 32px; 17 | 18 | @include media-breakpoint-down(sm) { 19 | padding: 12px 18px; 20 | } 21 | } 22 | } 23 | 24 | .spur-card-icon { 25 | margin-right: 20px; 26 | } 27 | 28 | .spur-card-title { 29 | font-weight: bold; 30 | } 31 | 32 | .spur-card-menu { 33 | margin-left: auto; 34 | } 35 | 36 | .spur-card-menu-link { 37 | display: flex; 38 | align-items: center; 39 | justify-content: center; 40 | width: 30px; 41 | height: 30px; 42 | margin-right: -15px; 43 | 44 | 45 | &::after { 46 | content: ""; 47 | //margin-left: auto; 48 | display: inline-block; 49 | width: 0; 50 | height: 0; 51 | border-left: 5px solid transparent; 52 | border-right: 5px solid transparent; 53 | border-top: 5px solid rgba($body-color, .8); 54 | } 55 | 56 | .text-white & { 57 | &::after { 58 | border-top-color: #fff; 59 | } 60 | } 61 | } 62 | 63 | .spur-card-body-chart { 64 | @include media-breakpoint-down(sm) { 65 | padding: 12px 5px; 66 | } 67 | 68 | position: relative; 69 | max-width: 99%; 70 | } 71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /scss/_content.scss: -------------------------------------------------------------------------------- 1 | h1 { 2 | font-family: "Nunito", sans-serif; 3 | font-weight: normal; 4 | } 5 | 6 | .dash-title { 7 | margin-bottom: 30px; 8 | } 9 | 10 | .content-anchor { 11 | &::before { 12 | display: block; 13 | height: 6rem; 14 | margin-top: -6rem; 15 | visibility: hidden; 16 | content: ""; 17 | } 18 | } 19 | 20 | .content-anchor-link { 21 | color: #292829; 22 | opacity: .46; 23 | font-size: 19px; 24 | margin-left: 7px; 25 | } 26 | 27 | -------------------------------------------------------------------------------- /scss/_layout.scss: -------------------------------------------------------------------------------- 1 | body { 2 | background: #E9EDF4; 3 | } 4 | 5 | .dash { 6 | display: flex; 7 | min-height: 100vh; 8 | } 9 | 10 | .dash-app { 11 | display: flex; 12 | flex-direction: column; 13 | flex-grow: 2; 14 | 15 | margin-top: 84px; 16 | 17 | @include media-breakpoint-up(lg) { 18 | margin-left: 238px; 19 | 20 | .dash-compact & { 21 | margin-left: 0; 22 | } 23 | } 24 | } 25 | 26 | .dash-content { 27 | flex-grow: 2; 28 | padding: 25px; 29 | 30 | @include media-breakpoint-down(sm) { 31 | padding: 15px 0px; 32 | } 33 | 34 | 35 | > .container-fluid { 36 | //padding: 0; 37 | } 38 | } 39 | 40 | .dash-row { 41 | margin-bottom: 30px; 42 | } 43 | 44 | .form-screen { 45 | display: flex; 46 | flex-direction: column; 47 | align-items: center; 48 | min-height: 100vh; 49 | padding-top: 100px; 50 | 51 | .spur-logo { 52 | margin-bottom: 60px; 53 | opacity: .9; 54 | 55 | i { 56 | color: $body-color; 57 | } 58 | } 59 | } 60 | 61 | .account-dialog { 62 | max-width: 360px; 63 | 64 | @include media-breakpoint-up(xl) { 65 | min-width: 360px; 66 | } 67 | } 68 | 69 | .account-dialog-actions { 70 | display: flex; 71 | flex-direction: row; 72 | align-items: center; 73 | } 74 | 75 | .account-dialog-link { 76 | margin-left: 15px; 77 | font-size: 14px; 78 | color: rgba($body-color, .8); 79 | 80 | &:hover { 81 | color: $body-color; 82 | text-decoration: none; 83 | } 84 | } 85 | -------------------------------------------------------------------------------- /scss/_navigation.scss: -------------------------------------------------------------------------------- 1 | .dash-nav { 2 | min-width: 238px; 3 | position: fixed; 4 | left: 0; 5 | top: 0; 6 | bottom: 0; 7 | overflow: auto; 8 | 9 | .dash-compact & { 10 | display: none; 11 | } 12 | 13 | &::-webkit-scrollbar { 14 | width: 0; 15 | background: transparent; 16 | } 17 | 18 | @include media-breakpoint-down(md) { 19 | display: none; 20 | position: fixed; 21 | top: 0; 22 | right: 0; 23 | left: 0; 24 | bottom: 0; 25 | z-index: 1070; 26 | 27 | &.mobile-show { 28 | display: block; 29 | 30 | } 31 | } 32 | 33 | header { 34 | min-height: 84px; 35 | padding: 8px 27px; 36 | display: flex; 37 | justify-content: center; 38 | align-items: center; 39 | 40 | .menu-toggle { 41 | display: none; 42 | margin-right: auto; 43 | 44 | @include media-breakpoint-down(md) { 45 | display: flex; 46 | } 47 | } 48 | 49 | .spur-logo { 50 | margin-right: auto; 51 | padding-right: 42px; // this equalizes the menu-toggle on the left 52 | } 53 | } 54 | 55 | a { 56 | color: $body-color; 57 | 58 | &:hover { 59 | text-decoration: none; 60 | } 61 | } 62 | 63 | &.dash-nav-dark { 64 | background-color: $dash-nav-dark-bg; 65 | a { 66 | color: $dash-nav-dark-color; 67 | } 68 | } 69 | } 70 | 71 | .spur-logo { 72 | font-family: "Nunito", sans-serif; 73 | font-weight: bold; 74 | font-size: 20px; 75 | display: flex; 76 | color: $body-color; 77 | align-items: center; 78 | 79 | &:focus, 80 | &:active, 81 | &:hover { 82 | color: $body-color; 83 | text-decoration: none; 84 | } 85 | 86 | i { 87 | color: $logo-color; 88 | font-size: 27px; 89 | margin-right: 10px; 90 | } 91 | } 92 | 93 | .dash-nav-list { 94 | display: flex; 95 | flex-direction: column; 96 | } 97 | 98 | .dash-nav-item { 99 | min-height: 56px; 100 | padding: 8px 20px 8px 70px; 101 | display: flex; 102 | align-items: center; 103 | letter-spacing: .02em; 104 | 105 | i { 106 | width: 36px; 107 | font-size: 19px; 108 | margin-left: -40px; 109 | } 110 | 111 | &:hover { 112 | .dash-nav-dark & { 113 | background: $dash-nav-dark-hover-bg; 114 | } 115 | } 116 | } 117 | 118 | .dash-nav-dropdown { 119 | display: flex; 120 | flex-direction: column; 121 | 122 | &.show { 123 | .dash-nav-dark & { 124 | background: $dash-nav-dark-hover-bg; 125 | } 126 | 127 | > .dash-nav-dropdown-toggle { 128 | font-weight: bold; 129 | 130 | &:after { 131 | transform: none; 132 | } 133 | } 134 | 135 | > .dash-nav-dropdown-menu { 136 | display: flex; 137 | } 138 | 139 | .dash-nav-dropdown { 140 | &.show { 141 | background: none; 142 | } 143 | } 144 | } 145 | } 146 | 147 | .dash-nav-dropdown-toggle { 148 | &:after { 149 | content: ""; 150 | margin-left: auto; 151 | display: inline-block; 152 | width: 0; 153 | height: 0; 154 | border-left: 5px solid transparent; 155 | border-right: 5px solid transparent; 156 | border-top: 5px solid rgba($body-color, .8); 157 | transform: rotate(90deg); 158 | 159 | .dash-nav-dark & { 160 | border-top-color: rgba($dash-nav-dark-color, .72); 161 | } 162 | } 163 | } 164 | 165 | .dash-nav-dropdown-menu { 166 | display: none; 167 | flex-direction: column; 168 | 169 | > .dash-nav-dropdown { 170 | .dash-nav-dropdown-menu { 171 | .dash-nav-dropdown-item { 172 | padding-left: 87px; 173 | } 174 | } 175 | } 176 | } 177 | 178 | .dash-nav-dropdown-item { 179 | min-height: 40px; 180 | padding: 8px 20px 8px 70px; 181 | display: flex; 182 | align-items: center; 183 | 184 | &:hover { 185 | background: $dash-nav-dark-hover-bg; 186 | } 187 | } 188 | 189 | 190 | -------------------------------------------------------------------------------- /scss/_notification.scss: -------------------------------------------------------------------------------- 1 | .notifications { 2 | margin: -8px -32px; 3 | 4 | @include media-breakpoint-down(sm) { 5 | margin: -8px -18px; 6 | } 7 | } 8 | 9 | .notification { 10 | display: flex; 11 | flex-direction: row; 12 | padding: 8px 32px; 13 | color: $body-color; 14 | 15 | &:hover, 16 | &:focus, 17 | &:active { 18 | color: $body-color; 19 | text-decoration: none; 20 | background-color: #F0F1F7; 21 | } 22 | } 23 | 24 | .notification-text { 25 | } 26 | 27 | .notification-icon { 28 | //margin-right: 20px; 29 | width: 35px; 30 | } 31 | 32 | .notification-time { 33 | margin-left: auto; 34 | opacity: .8; 35 | } 36 | 37 | .notifications-show-all { 38 | margin-top: 8px; 39 | margin-left: 67px; 40 | 41 | a { 42 | color: $body-color; 43 | text-decoration: underline; 44 | 45 | &:focus, 46 | &:hover, 47 | &:active { 48 | color: $body-color; 49 | } 50 | 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /scss/_spur-bundle.scss: -------------------------------------------------------------------------------- 1 | @import 'card'; 2 | @import 'content'; 3 | @import 'layout'; 4 | @import 'navigation'; 5 | @import 'notification'; 6 | @import 'table'; 7 | @import 'toolbar'; 8 | @import 'stats'; 9 | -------------------------------------------------------------------------------- /scss/_spur-npm.scss: -------------------------------------------------------------------------------- 1 | @import 'variables'; 2 | @import '../../bootstrap/scss/bootstrap'; 3 | @import 'spur-bundle'; 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /scss/_stats.scss: -------------------------------------------------------------------------------- 1 | .stats { 2 | padding: 18px 23px; 3 | font-family: "Nunito", sans-serif; 4 | box-shadow: 0 0 5px rgba(#000, .25); 5 | display: flex; 6 | flex-direction: column; 7 | min-height: 170px; 8 | margin-bottom: 30px; 9 | } 10 | 11 | .stats-content { 12 | display: flex; 13 | margin-top: auto; 14 | align-items: flex-end; 15 | } 16 | 17 | .stats-title { 18 | font-size: 26px; 19 | font-weight: 600; 20 | letter-spacing: .04em; 21 | } 22 | 23 | .stats-icon { 24 | display: flex; 25 | align-items: flex-end; 26 | font-size: 20px; 27 | } 28 | 29 | .stats-data { 30 | display: flex; 31 | flex-direction: column; 32 | align-items: flex-end; 33 | margin-left: auto; 34 | } 35 | 36 | .stats-number { 37 | font-size: 33px; 38 | line-height: 33px; 39 | font-weight: 600; 40 | letter-spacing: .04em; 41 | } 42 | 43 | .stats-change { 44 | margin-top: 5px; 45 | font-family: "Open Sans", sans-serif; 46 | } 47 | 48 | .stats-percentage { 49 | opacity: 1; 50 | } 51 | 52 | .stats-timeframe { 53 | opacity: .5; 54 | } 55 | 56 | @mixin stats-variant($background) { 57 | color: color-yiq($background); 58 | background: $background; 59 | } 60 | 61 | @each $color, $value in $theme-colors { 62 | .stats-#{$color} { 63 | @include stats-variant($value); 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /scss/_table.scss: -------------------------------------------------------------------------------- 1 | .table-in-card { 2 | margin: -12px 0; 3 | 4 | thead { 5 | tr { 6 | th { 7 | border-top-color: transparent; 8 | } 9 | } 10 | } 11 | } 12 | 13 | .card-body-with-dark-table { 14 | background-color: #212529; 15 | } 16 | -------------------------------------------------------------------------------- /scss/_toolbar.scss: -------------------------------------------------------------------------------- 1 | %toolbar-icon { 2 | position: relative; 3 | width: 42px; 4 | height: 42px; 5 | display: flex; 6 | align-items: center; 7 | justify-content: center; 8 | color: $body-color; 9 | 10 | &:hover, 11 | &:active, 12 | &:focus { 13 | text-decoration: none; 14 | color: $body-color; 15 | } 16 | 17 | i { 18 | font-size: 20px; 19 | } 20 | } 21 | 22 | %icon-notification-counter { 23 | width: 15px; 24 | height: 15px; 25 | border-radius: 20px; 26 | display: flex; 27 | align-items: center; 28 | justify-content: center; 29 | position: absolute; 30 | top: 3px; 31 | right: 3px; 32 | font-style: normal; 33 | font-size: 11px; 34 | background: #FF5A00; 35 | color: #fff; 36 | } 37 | 38 | 39 | .dash-toolbar { 40 | min-height: 84px; 41 | background-color: $toolbar-bg; 42 | display: flex; 43 | align-items: center; 44 | padding: 8px 27px; 45 | position: fixed; 46 | top: 0; 47 | right: 0; 48 | left: 0; 49 | z-index: 1000; 50 | 51 | @include media-breakpoint-up(lg) { 52 | left: 238px; 53 | 54 | .dash-compact & { 55 | left: 0; 56 | } 57 | } 58 | 59 | @include media-breakpoint-down(xs) { 60 | //padding: 8px 84px 8px 16px; 61 | } 62 | } 63 | 64 | .menu-toggle { 65 | @extend %toolbar-icon; 66 | } 67 | 68 | .searchbox { 69 | display: flex; 70 | align-items: center; 71 | flex-grow: 2; 72 | 73 | @include media-breakpoint-down(sm) { 74 | display: none; 75 | position: fixed; 76 | top: 0; 77 | right: 0; 78 | left: 0; 79 | background: $toolbar-bg; 80 | min-height: 84px; 81 | z-index: 1071; 82 | padding: 8px 27px; 83 | 84 | &.show { 85 | display: flex; 86 | } 87 | } 88 | } 89 | 90 | .searchbox-toggle { 91 | @extend %toolbar-icon; 92 | display: none; 93 | color: $body-color; 94 | 95 | &:hover, 96 | &:active, 97 | &:focus { 98 | text-decoration: none; 99 | color: $body-color; 100 | } 101 | 102 | @include media-breakpoint-down(sm) { 103 | display: flex; 104 | } 105 | 106 | } 107 | 108 | .searchbox-input { 109 | border: none; 110 | background-color: $toolbar-bg; 111 | //background-color: fuchsia; 112 | height: 50px; 113 | //width: 400px; 114 | padding: 8px 8px 11px 4px; 115 | flex-grow: 2; 116 | width: 100px; 117 | 118 | &::placeholder { 119 | color: $searchbox-input-placeholder; 120 | } 121 | 122 | &:focus { 123 | outline: none; 124 | } 125 | } 126 | 127 | .searchbox-submit { 128 | @extend %toolbar-icon; 129 | border: none; 130 | background: none; 131 | //color: $searchbox-input-placeholder; 132 | padding: 0; 133 | 134 | @include media-breakpoint-down(sm) { 135 | order: 9; 136 | } 137 | 138 | &:focus { 139 | outline: none; 140 | } 141 | 142 | &:hover { 143 | cursor: pointer; 144 | } 145 | } 146 | 147 | .tools { 148 | margin-left: auto; 149 | display: flex; 150 | 151 | a { 152 | color: $body-color; 153 | } 154 | } 155 | 156 | .tools-item { 157 | @extend %toolbar-icon; 158 | 159 | //margin-left: 41px; 160 | // 161 | //&:first-child { 162 | // margin-left: 0; 163 | //} 164 | 165 | .tools-item-count { 166 | @extend %icon-notification-counter; 167 | } 168 | } 169 | -------------------------------------------------------------------------------- /scss/_variables.scss: -------------------------------------------------------------------------------- 1 | // Bootstrap variables 2 | 3 | $font-family-sans-serif: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; 4 | $body-color: #515151 !default; 5 | 6 | $primary: #3F84FC !default; 7 | $secondary: #727F94 !default; 8 | $success: #1DAB47 !default; 9 | $info: #8A3FFC !default; 10 | $warning: #FCAE3F !default; 11 | $danger: #FC413F !default; 12 | $light: #f8f9fa !default; 13 | $dark: #1E232D !default; 14 | 15 | $border-radius: 0 !default; 16 | 17 | // Spur variables 18 | $logo-color: #576177 !default; 19 | $toolbar-bg: #F3F3F3 !default; 20 | 21 | $dash-nav-dark-color: #fff !default; 22 | $dash-nav-dark-hover-bg: rgba(#fff, .04) !default; 23 | $dash-nav-dark-bg: #181F2C !default; 24 | 25 | $searchbox-input-placeholder: #8b8b8b !default; 26 | 27 | -------------------------------------------------------------------------------- /scss/demo.scss: -------------------------------------------------------------------------------- 1 | // Styles that are more for the demo than anything else 2 | 3 | .spur-demo-icons { 4 | display: flex; 5 | flex-flow: row wrap; 6 | 7 | .icon { 8 | display: flex; 9 | flex-direction: row; 10 | align-items: center; 11 | justify-content: flex-start; 12 | width: 250px; 13 | height: 50px; 14 | padding: 8px 8px 8px 0; 15 | 16 | &:hover { 17 | //background: #fff; 18 | } 19 | 20 | i { 21 | font-size: 30px; 22 | //height: 40px; 23 | width: 40px; 24 | margin-right: 10px; 25 | } 26 | 27 | span { 28 | font-size: 13px; 29 | opacity: .9; 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /scss/spur.scss: -------------------------------------------------------------------------------- 1 | @import 'variables'; 2 | @import '../node_modules/bootstrap/scss/bootstrap'; 3 | @import 'spur-bundle'; 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /test-push.sh: -------------------------------------------------------------------------------- 1 | 2 | #!/bin/bash 3 | 4 | echo "Building Spur" 5 | . build.sh 6 | 7 | echo "Pushing to test" 8 | 9 | rsync -at --delete dist/ wildmind@wildmind.ch:~/public_html/hackerthemes/test.hackerthemes.com/spur/demo 10 | rsync -at package/ wildmind@wildmind.ch:~/public_html/hackerthemes/test.hackerthemes.com/spur/package 11 | --------------------------------------------------------------------------------