├── .browserslistrc ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── assets ├── btn-learn-more.png ├── btn-live-preview.png ├── demo-preview.gif └── preview.png ├── babel.config.js ├── package.json ├── postcss.config.js ├── public ├── favicon.ico └── index.html ├── src ├── App.vue ├── assets │ ├── images │ │ ├── avatars │ │ │ ├── 0.jpg │ │ │ ├── 1.jpg │ │ │ ├── 2.jpg │ │ │ └── 3.jpg │ │ ├── content-management │ │ │ ├── 1.jpeg │ │ │ ├── 10.jpeg │ │ │ ├── 11.jpeg │ │ │ ├── 12.jpeg │ │ │ ├── 13.jpeg │ │ │ ├── 14.jpeg │ │ │ ├── 15.jpeg │ │ │ ├── 16.jpeg │ │ │ ├── 2.jpeg │ │ │ ├── 3.jpeg │ │ │ ├── 4.jpeg │ │ │ ├── 5.jpeg │ │ │ ├── 6.jpeg │ │ │ ├── 7.jpeg │ │ │ ├── 8.jpeg │ │ │ └── 9.jpeg │ │ └── shards-dashboards-logo.svg │ └── scss │ │ └── date-range.scss ├── components │ ├── add-new-post │ │ ├── Editor.vue │ │ ├── SidebarActions.vue │ │ └── SidebarCategories.vue │ ├── blog │ │ ├── Discussions.vue │ │ ├── NewDraft.vue │ │ ├── UsersByDeviceLite.vue │ │ └── UsersOverview.vue │ ├── common │ │ ├── CountryReports.vue │ │ ├── SmallStats.vue │ │ └── TopReferrals.vue │ ├── layout │ │ ├── MainFooter │ │ │ └── MainFooter.vue │ │ ├── MainNavbar │ │ │ ├── MainNavbar.vue │ │ │ ├── NavbarNav.vue │ │ │ ├── NavbarSearch.vue │ │ │ └── NavbarToggle.vue │ │ └── MainSidebar │ │ │ └── MainSidebar.vue │ └── user-profile-lite │ │ ├── UserAccountDetails.vue │ │ └── UserDetails.vue ├── data │ └── sidebar-nav-items.js ├── layouts │ └── Default.vue ├── main.js ├── router.js ├── scss │ ├── _alert.scss │ ├── _badge.scss │ ├── _button-group.scss │ ├── _buttons.scss │ ├── _card.scss │ ├── _custom-forms.scss │ ├── _custom-sliders.scss │ ├── _dropdown.scss │ ├── _icons.scss │ ├── _images.scss │ ├── _input-group.scss │ ├── _list-group.scss │ ├── _navbar.scss │ ├── _overrides.scss │ ├── _reboot.scss │ ├── _utilities.scss │ ├── _variables.scss │ ├── blocks │ │ ├── _main-content.scss │ │ ├── _main-footer.scss │ │ ├── _main-navbar.scss │ │ ├── _main-sidebar.scss │ │ └── _page-header.scss │ ├── components │ │ ├── _card-post.scss │ │ └── _error.scss │ ├── extras.scss │ ├── plugins │ │ └── _quill.scss │ ├── shards-dashboards.scss │ ├── templates │ │ ├── _blog-add-new-post.scss │ │ ├── _blog-overview.scss │ │ └── _common.scss │ └── utilities │ │ ├── _borders.scss │ │ ├── _general.scss │ │ └── _text.scss ├── utils │ ├── chart.js │ └── index.js └── views │ ├── AddNewPost.vue │ ├── BlogPosts.vue │ ├── ComponentsOverview.vue │ ├── Errors.vue │ ├── PersonalBlog.vue │ ├── Tables.vue │ └── UserProfileLite.vue └── yarn.lock /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not ie <= 8 4 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | src/shards-dashboard-pro/**/* 2 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true, 5 | }, 6 | extends: [ 7 | 'plugin:vue/essential', 8 | '@vue/airbnb', 9 | ], 10 | rules: { 11 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 12 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 13 | 'global-require': 'off', 14 | 'no-new': 0, // Intrusive when using Chart.js instances. 15 | 'no-underscore-dangle': 0, // Chart.js uses underscore dangles (_) internally. 16 | 'import/no-unresolved': 0, // False positives regarding imports that use aliases. 17 | }, 18 | overrides: [ 19 | { 20 | files: ['*.vue'], 21 | rules: { 22 | 'max-len': 'off', 23 | }, 24 | }, 25 | ], 26 | parserOptions: { 27 | parser: 'babel-eslint', 28 | }, 29 | }; 30 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw* 22 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. 4 | 5 | ### 1.0.0 - (2018-10-18) 6 | 7 | * Initial release. 8 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 DesignRevision 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | 4 | 5 |

6 | 7 |

Shards Dashboard Vue

8 |

9 | 10 | 11 | 12 | 13 | 14 | 15 |

16 | 17 |

18 | A free Vue admin dashboard template pack featuring a modern design system
and lots of custom templates and components. 19 |

20 | 21 |

22 | 23 | 24 | 25 | 26 | 27 | 28 |

29 | 30 |
31 | 32 |

33 | 34 | 35 | 36 |

37 | 38 |
39 | 40 | > ✨ **Note:** You can download the Sketch files from the official product page. 41 | 42 |
43 | 44 | ### Quick Start 45 | 46 | * Install dependencies by running `yarn`. 47 | * Run `yarn serve` to start the local development server. 48 | * 😎 **That's it!** You're ready to start building awesome dashboards. 49 | 50 |
51 | 52 | ### Project Structure 53 | 54 | * All templates are located inside `src/views` and most of them are self-contained. 55 | * There's only one single layout defined (Default) inside `src/layouts`, however the current structure provides an easy way of extending the UI kit. 56 | * The `src/components` directory hosts all template-specific subcomponents in their own subdirectory. 57 | * Almost all components have their styles isolated in SFC, however, some global styles are also placed inside `src/assets/scss` next to Shards Dashboard Lite's base styles. 58 | * The `src/utils` directory contains generic Chart.js utilities. 59 | 60 |
61 | 62 | ### 🌟 Pro Version 63 | 64 | If you're looking for something more, check out [Shards Dashboard Pro Vue](https://designrevision.com/downloads/shards-dashboard-pro-vue/) which features many more custom templates and components. Use the `GITHUB15` coupon code for a **15% discount off the current price**. 65 | 66 |
67 | 68 | ### Built using 69 | 70 | * [Shards Vue](https://designrevision.com/downloads/shards-vue) 71 | * [Chart.js](http://www.chartjs.org/) 72 | * [Vue Datepicker](https://github.com/charliekassel/vuejs-datepicker) 73 | * [NoUiSlider](https://refreshless.com/nouislider/) 74 | * [Quill](https://quilljs.com/) 75 | * [Material Icons](http://material.io/icons) 76 | * [FontAwesome Icons](http://fontawesome.io) 77 | 78 |
79 | 80 | ### Changelog 81 | 82 | Please check out the [CHANGELOG](CHANGELOG.md). 83 | -------------------------------------------------------------------------------- /assets/btn-learn-more.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-dashboard-vue/db291be87ecb6ce54925e6d17e8d6cd1928a02ee/assets/btn-learn-more.png -------------------------------------------------------------------------------- /assets/btn-live-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-dashboard-vue/db291be87ecb6ce54925e6d17e8d6cd1928a02ee/assets/btn-live-preview.png -------------------------------------------------------------------------------- /assets/demo-preview.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-dashboard-vue/db291be87ecb6ce54925e6d17e8d6cd1928a02ee/assets/demo-preview.gif -------------------------------------------------------------------------------- /assets/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-dashboard-vue/db291be87ecb6ce54925e6d17e8d6cd1928a02ee/assets/preview.png -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app', 4 | ], 5 | }; 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "shards-dashboard-lite-vue", 3 | "version": "1.0.0", 4 | "private": true, 5 | "license": "MIT", 6 | "scripts": { 7 | "lint": "vue-cli-service lint", 8 | "serve": "vue-cli-service serve", 9 | "build": "vue-cli-service build" 10 | }, 11 | "dependencies": { 12 | "bootstrap": "^4.1.3", 13 | "chart.js": "^2.7.2", 14 | "quill": "^1.3.6", 15 | "shards-ui": "^2.1.0", 16 | "shards-vue": "^1.0.4", 17 | "vue": "^2.5.17", 18 | "vue-router": "^3.0.1" 19 | }, 20 | "devDependencies": { 21 | "@babel/preset-env": "^7.1.0", 22 | "@vue/cli-plugin-babel": "^3.0.3", 23 | "@vue/cli-plugin-eslint": "^3.0.3", 24 | "@vue/cli-service": "^3.0.3", 25 | "@vue/eslint-config-airbnb": "^3.0.3", 26 | "node-sass": "^4.9.0", 27 | "sass-loader": "^7.0.1", 28 | "vue-template-compiler": "^2.5.17" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {}, 4 | }, 5 | }; 6 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-dashboard-vue/db291be87ecb6ce54925e6d17e8d6cd1928a02ee/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Shards Dashboard Lite - Vue 11 | 12 | 13 | 16 |
17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | -------------------------------------------------------------------------------- /src/assets/images/avatars/0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-dashboard-vue/db291be87ecb6ce54925e6d17e8d6cd1928a02ee/src/assets/images/avatars/0.jpg -------------------------------------------------------------------------------- /src/assets/images/avatars/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-dashboard-vue/db291be87ecb6ce54925e6d17e8d6cd1928a02ee/src/assets/images/avatars/1.jpg -------------------------------------------------------------------------------- /src/assets/images/avatars/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-dashboard-vue/db291be87ecb6ce54925e6d17e8d6cd1928a02ee/src/assets/images/avatars/2.jpg -------------------------------------------------------------------------------- /src/assets/images/avatars/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-dashboard-vue/db291be87ecb6ce54925e6d17e8d6cd1928a02ee/src/assets/images/avatars/3.jpg -------------------------------------------------------------------------------- /src/assets/images/content-management/1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-dashboard-vue/db291be87ecb6ce54925e6d17e8d6cd1928a02ee/src/assets/images/content-management/1.jpeg -------------------------------------------------------------------------------- /src/assets/images/content-management/10.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-dashboard-vue/db291be87ecb6ce54925e6d17e8d6cd1928a02ee/src/assets/images/content-management/10.jpeg -------------------------------------------------------------------------------- /src/assets/images/content-management/11.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-dashboard-vue/db291be87ecb6ce54925e6d17e8d6cd1928a02ee/src/assets/images/content-management/11.jpeg -------------------------------------------------------------------------------- /src/assets/images/content-management/12.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-dashboard-vue/db291be87ecb6ce54925e6d17e8d6cd1928a02ee/src/assets/images/content-management/12.jpeg -------------------------------------------------------------------------------- /src/assets/images/content-management/13.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-dashboard-vue/db291be87ecb6ce54925e6d17e8d6cd1928a02ee/src/assets/images/content-management/13.jpeg -------------------------------------------------------------------------------- /src/assets/images/content-management/14.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-dashboard-vue/db291be87ecb6ce54925e6d17e8d6cd1928a02ee/src/assets/images/content-management/14.jpeg -------------------------------------------------------------------------------- /src/assets/images/content-management/15.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-dashboard-vue/db291be87ecb6ce54925e6d17e8d6cd1928a02ee/src/assets/images/content-management/15.jpeg -------------------------------------------------------------------------------- /src/assets/images/content-management/16.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-dashboard-vue/db291be87ecb6ce54925e6d17e8d6cd1928a02ee/src/assets/images/content-management/16.jpeg -------------------------------------------------------------------------------- /src/assets/images/content-management/2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-dashboard-vue/db291be87ecb6ce54925e6d17e8d6cd1928a02ee/src/assets/images/content-management/2.jpeg -------------------------------------------------------------------------------- /src/assets/images/content-management/3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-dashboard-vue/db291be87ecb6ce54925e6d17e8d6cd1928a02ee/src/assets/images/content-management/3.jpeg -------------------------------------------------------------------------------- /src/assets/images/content-management/4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-dashboard-vue/db291be87ecb6ce54925e6d17e8d6cd1928a02ee/src/assets/images/content-management/4.jpeg -------------------------------------------------------------------------------- /src/assets/images/content-management/5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-dashboard-vue/db291be87ecb6ce54925e6d17e8d6cd1928a02ee/src/assets/images/content-management/5.jpeg -------------------------------------------------------------------------------- /src/assets/images/content-management/6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-dashboard-vue/db291be87ecb6ce54925e6d17e8d6cd1928a02ee/src/assets/images/content-management/6.jpeg -------------------------------------------------------------------------------- /src/assets/images/content-management/7.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-dashboard-vue/db291be87ecb6ce54925e6d17e8d6cd1928a02ee/src/assets/images/content-management/7.jpeg -------------------------------------------------------------------------------- /src/assets/images/content-management/8.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-dashboard-vue/db291be87ecb6ce54925e6d17e8d6cd1928a02ee/src/assets/images/content-management/8.jpeg -------------------------------------------------------------------------------- /src/assets/images/content-management/9.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-dashboard-vue/db291be87ecb6ce54925e6d17e8d6cd1928a02ee/src/assets/images/content-management/9.jpeg -------------------------------------------------------------------------------- /src/assets/images/shards-dashboards-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Logo Icon 5 | Created with Sketch. 6 | 7 | 8 | 9 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/assets/scss/date-range.scss: -------------------------------------------------------------------------------- 1 | .date-range .vdp-datepicker { 2 | max-width: 150px; 3 | 4 | input { 5 | font-size: .6875rem !important; 6 | text-align: center; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/components/add-new-post/Editor.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 39 | 40 | -------------------------------------------------------------------------------- /src/components/add-new-post/SidebarActions.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 44 | -------------------------------------------------------------------------------- /src/components/add-new-post/SidebarCategories.vue: -------------------------------------------------------------------------------- 1 | 35 | 36 | 50 | 51 | -------------------------------------------------------------------------------- /src/components/blog/Discussions.vue: -------------------------------------------------------------------------------- 1 | 59 | 60 | 133 | -------------------------------------------------------------------------------- /src/components/blog/NewDraft.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 47 | -------------------------------------------------------------------------------- /src/components/blog/UsersByDeviceLite.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | 119 | 120 | -------------------------------------------------------------------------------- /src/components/blog/UsersOverview.vue: -------------------------------------------------------------------------------- 1 | 38 | 39 | 161 | 162 | -------------------------------------------------------------------------------- /src/components/common/CountryReports.vue: -------------------------------------------------------------------------------- 1 | 49 | 50 | 170 | -------------------------------------------------------------------------------- /src/components/common/SmallStats.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 221 | -------------------------------------------------------------------------------- /src/components/common/TopReferrals.vue: -------------------------------------------------------------------------------- 1 | 45 | 46 | 96 | -------------------------------------------------------------------------------- /src/components/layout/MainFooter/MainFooter.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 63 | -------------------------------------------------------------------------------- /src/components/layout/MainNavbar/MainNavbar.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 33 | 34 | 41 | -------------------------------------------------------------------------------- /src/components/layout/MainNavbar/NavbarNav.vue: -------------------------------------------------------------------------------- 1 | 53 | 54 | 59 | -------------------------------------------------------------------------------- /src/components/layout/MainNavbar/NavbarSearch.vue: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /src/components/layout/MainNavbar/NavbarToggle.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 19 | -------------------------------------------------------------------------------- /src/components/layout/MainSidebar/MainSidebar.vue: -------------------------------------------------------------------------------- 1 | 46 | 47 | 84 | 85 | 95 | -------------------------------------------------------------------------------- /src/components/user-profile-lite/UserAccountDetails.vue: -------------------------------------------------------------------------------- 1 | 94 | 95 | 109 | -------------------------------------------------------------------------------- /src/components/user-profile-lite/UserDetails.vue: -------------------------------------------------------------------------------- 1 | 45 | 46 | 72 | -------------------------------------------------------------------------------- /src/data/sidebar-nav-items.js: -------------------------------------------------------------------------------- 1 | export default function () { 2 | return [{ 3 | title: 'Blog Dashboard', 4 | to: { 5 | name: 'blog-overview', 6 | }, 7 | htmlBefore: 'edit', 8 | htmlAfter: '', 9 | }, { 10 | title: 'Blog Posts', 11 | htmlBefore: 'vertical_split', 12 | to: { 13 | name: 'blog-posts', 14 | }, 15 | }, { 16 | title: 'Add New Post', 17 | htmlBefore: 'note_add', 18 | to: { 19 | name: 'add-new-post', 20 | }, 21 | }, { 22 | title: 'Forms & Components', 23 | htmlBefore: 'view_module', 24 | to: { 25 | name: 'components-overview', 26 | }, 27 | }, { 28 | title: 'Tables', 29 | htmlBefore: 'table_chart', 30 | to: { 31 | name: 'tables', 32 | }, 33 | }, { 34 | title: 'User Profile', 35 | htmlBefore: 'person', 36 | to: { 37 | name: 'user-profile-lite', 38 | }, 39 | }, { 40 | title: 'Errors', 41 | htmlBefore: 'error', 42 | to: { 43 | name: 'errors', 44 | }, 45 | }]; 46 | } 47 | -------------------------------------------------------------------------------- /src/layouts/Default.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 45 | 46 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import Vue from 'vue'; 3 | import ShardsVue from 'shards-vue'; 4 | 5 | // Styles 6 | import 'bootstrap/dist/css/bootstrap.css'; 7 | import '@/scss/shards-dashboards.scss'; 8 | import '@/assets/scss/date-range.scss'; 9 | 10 | // Core 11 | import App from './App.vue'; 12 | import router from './router'; 13 | 14 | // Layouts 15 | import Default from '@/layouts/Default.vue'; 16 | 17 | ShardsVue.install(Vue); 18 | 19 | Vue.component('default-layout', Default); 20 | 21 | Vue.config.productionTip = false; 22 | Vue.prototype.$eventHub = new Vue(); 23 | 24 | new Vue({ 25 | router, 26 | render: h => h(App), 27 | }).$mount('#app'); 28 | -------------------------------------------------------------------------------- /src/router.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Router from 'vue-router'; 3 | 4 | import PersonalBlog from './views/PersonalBlog.vue'; 5 | import UserProfileLite from './views/UserProfileLite.vue'; 6 | import AddNewPost from './views/AddNewPost.vue'; 7 | import Errors from './views/Errors.vue'; 8 | import ComponentsOverview from './views/ComponentsOverview.vue'; 9 | import Tables from './views/Tables.vue'; 10 | import BlogPosts from './views/BlogPosts.vue'; 11 | 12 | Vue.use(Router); 13 | 14 | export default new Router({ 15 | mode: 'history', 16 | base: process.env.BASE_URL, 17 | linkActiveClass: 'active', 18 | linkExactActiveClass: 'exact-active', 19 | scrollBehavior() { 20 | return { x: 0, y: 0 }; 21 | }, 22 | routes: [ 23 | { 24 | path: '/', 25 | redirect: '/blog-overview', 26 | }, 27 | { 28 | path: '/blog-overview', 29 | name: 'blog-overview', 30 | component: PersonalBlog, 31 | }, 32 | { 33 | path: '/user-profile-lite', 34 | name: 'user-profile-lite', 35 | component: UserProfileLite, 36 | }, 37 | { 38 | path: '/add-new-post', 39 | name: 'add-new-post', 40 | component: AddNewPost, 41 | }, 42 | { 43 | path: '/errors', 44 | name: 'errors', 45 | component: Errors, 46 | }, 47 | { 48 | path: '/components-overview', 49 | name: 'components-overview', 50 | component: ComponentsOverview, 51 | }, 52 | { 53 | path: '/tables', 54 | name: 'tables', 55 | component: Tables, 56 | }, 57 | { 58 | path: '/blog-posts', 59 | name: 'blog-posts', 60 | component: BlogPosts, 61 | }, { 62 | path: '*', 63 | redirect: '/errors', 64 | }, 65 | ], 66 | }); 67 | -------------------------------------------------------------------------------- /src/scss/_alert.scss: -------------------------------------------------------------------------------- 1 | // Alert Adjustments 2 | 3 | // Alternate style for the accent color 4 | .alert-accent { 5 | color: lighten($accent-color, 48%); 6 | background-color: $accent-color; 7 | 8 | .alert-link { 9 | color: lighten($accent-color, 48%); 10 | } 11 | } 12 | 13 | .alert-dismissible .close { 14 | padding-top: 0.5rem; 15 | padding-bottom: 0.5rem; 16 | } 17 | -------------------------------------------------------------------------------- /src/scss/_badge.scss: -------------------------------------------------------------------------------- 1 | // Badge Adjustments 2 | 3 | // Accent color badge variations 4 | .badge-accent { 5 | @include badge-variant($accent-color); 6 | } 7 | 8 | // Accent color outline badge variation 9 | .badge-outline-accent { 10 | background: none; 11 | border: 1px solid $accent-color; 12 | color: $accent-color; 13 | } 14 | -------------------------------------------------------------------------------- /src/scss/_button-group.scss: -------------------------------------------------------------------------------- 1 | // Button group 2 | 3 | // Adjust button groups icons 4 | .btn-group-sm i { 5 | transform: scale(1.3); 6 | } 7 | -------------------------------------------------------------------------------- /src/scss/_buttons.scss: -------------------------------------------------------------------------------- 1 | // Buttons Adjustments 2 | 3 | // White and black button adjustments specific to Shards Dashboard. 4 | // If you want to use the default Shards buttons just comment the 5 | // styles below. 6 | 7 | .btn-white, 8 | .btn-black { 9 | // Set the defaults to use the accent color. 10 | &:not([disabled]):not(.disabled):active, 11 | &:not([disabled]):not(.disabled).active { 12 | box-shadow: none !important; 13 | background-color: $accent-color; 14 | border-color: $accent-color; 15 | color: $white; 16 | 17 | + .btn { 18 | border-left: 1px solid $accent-color; 19 | } 20 | } 21 | 22 | &:hover { 23 | background: $white; 24 | border-color: $white; 25 | box-shadow: 0px 0.125rem 0.625rem rgba($reagent-gray, .2), 26 | 0 0.0625rem 0.125rem rgba($reagent-gray, .3); 27 | } 28 | } 29 | 30 | // White button accent color modifiers. 31 | // Selector specificity to override existing active state. 32 | .btn.btn-white { 33 | border: 1px solid $border-color; 34 | color: $fiord-blue; 35 | 36 | @mixin btn-active-modifier($color, $value) { 37 | &:not([disabled]):not(.disabled).active-#{$color} { 38 | &.active, 39 | &:active { 40 | background-color: $value; 41 | border-color: $value; 42 | color: color-yiq($value); 43 | 44 | & + .btn { 45 | border-left: 1px solid red; 46 | } 47 | } 48 | } 49 | } 50 | 51 | // Existent theme colors 52 | @each $color, $value in $theme-colors { 53 | @include btn-active-modifier($color, $value); 54 | } 55 | } 56 | 57 | 58 | // Button variation for the accent color. 59 | .btn-accent { 60 | @include button-variant($accent-color); 61 | } 62 | 63 | // Outline button variation for the accent color. 64 | .btn-outline-accent { 65 | @include button-outline-variant($accent-color); 66 | } 67 | -------------------------------------------------------------------------------- /src/scss/_card.scss: -------------------------------------------------------------------------------- 1 | // Card adjustments 2 | 3 | // Block handles 4 | .card-header { 5 | h1, h2, h3, h4, h5, h6 { 6 | font-weight: $card-headings-font-weight; 7 | } 8 | } 9 | 10 | // Small "Full Report" cards element adjustments 11 | .card .view-report { 12 | margin-top: auto; 13 | margin-bottom: auto; 14 | font-size: $card-view-report-font-size; 15 | 16 | a { 17 | color: $card-view-report-link-color; 18 | 19 | &:hover { 20 | color: $card-view-report-link-color-hover; 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/scss/_custom-forms.scss: -------------------------------------------------------------------------------- 1 | // Custom forms adjustments 2 | 3 | .custom-select-sm { 4 | font-size: $font-size-sm; 5 | border-radius: $btn-border-radius; 6 | } 7 | 8 | .custom-select-lg { 9 | border-radius: $btn-border-radius; 10 | } 11 | 12 | // Adjust the custom control line height. 13 | .custom-control { 14 | line-height: 1.5rem; 15 | } 16 | 17 | 18 | // Adjust custom controls disabled states. 19 | 20 | // Custom checkboxes 21 | .custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label { 22 | &::after { 23 | border-color: $custom-control-disabled-color; 24 | } 25 | } 26 | 27 | // Custom radios 28 | .custom-radio .custom-control-input:disabled:checked ~ .custom-control-label { 29 | &::after { 30 | background: $custom-control-disabled-color; 31 | } 32 | } 33 | 34 | // Custom toggle 35 | .custom-toggle .custom-control-input:checked:disabled ~ .custom-control-label { 36 | &::after { 37 | background: $custom-control-disabled-color; 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/scss/_custom-sliders.scss: -------------------------------------------------------------------------------- 1 | // Custom Sliders Adjustments 2 | 3 | // Accent color slider 4 | .slider-accent .noUi-connect { 5 | background: $slider-accent-background; 6 | } 7 | 8 | .noUi-pips { 9 | font-size: $slider-pips-font-size; 10 | } 11 | 12 | .noUi-tooltip { 13 | font-size: $slider-tooltip-font-size; 14 | padding: $slider-tooltip-padding; 15 | } 16 | 17 | .noUi-horizontal { 18 | .noUi-tooltip { 19 | bottom: $slider-horizontal-tooltip-bottom; 20 | } 21 | 22 | .noUi-handle { 23 | left: $slider-horizontal-handle-left; 24 | top: $slider-horizontal-handle-top; 25 | } 26 | } 27 | 28 | .noUi-handle { 29 | width: $slider-handle-width; 30 | height: $slider-handle-height; 31 | } 32 | -------------------------------------------------------------------------------- /src/scss/_dropdown.scss: -------------------------------------------------------------------------------- 1 | // Dropdown adjustments 2 | 3 | // Adjust dropdown icons 4 | .dropdown { 5 | .fa, 6 | .material-icons { 7 | color: lighten($blueish-grey, 40); 8 | margin-right: 0.25rem; 9 | } 10 | 11 | .dropdown-item { 12 | &:hover { 13 | background-color: lighten($blueish-grey, 60); 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/scss/_icons.scss: -------------------------------------------------------------------------------- 1 | // Icons adjustments 2 | 3 | i.material-icons { 4 | top: 2px; 5 | } 6 | -------------------------------------------------------------------------------- /src/scss/_images.scss: -------------------------------------------------------------------------------- 1 | // Images adjustments 2 | 3 | .thumbnail { 4 | border: 1px solid #D4D4D4; 5 | } 6 | -------------------------------------------------------------------------------- /src/scss/_input-group.scss: -------------------------------------------------------------------------------- 1 | // Input groups adjustments 2 | 3 | // Set a min width for the input groups. 4 | // Without this some components might break (datepickers). 5 | .input-group { 6 | min-width: 7.5rem; 7 | } 8 | 9 | // Adjust the input group font size. 10 | .input-group-text { 11 | font-size: $input-font-size; 12 | } 13 | 14 | // Adjust the seamless input group - input's padding. 15 | .input-group.input-group-seamless > .form-control:not(:first-child), 16 | .input-group.input-group-seamless > .custom-select:not(:first-child) { 17 | padding-left: 1.875rem; 18 | } 19 | 20 | // Adjust the input group icons. 21 | .input-group-text i { 22 | transform: scale(1.1); 23 | 24 | &.fa { 25 | font-size: 0.75rem; 26 | } 27 | 28 | &.material-icons { 29 | top: 0; 30 | font-size: 0.8125rem; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/scss/_list-group.scss: -------------------------------------------------------------------------------- 1 | // List Group Adjustments 2 | 3 | // List group accent color variation 4 | @include list-group-item-variant($accent-color, theme-color-level($accent-color, -9), theme-color-level($accent-color, 6)); 5 | -------------------------------------------------------------------------------- /src/scss/_navbar.scss: -------------------------------------------------------------------------------- 1 | // General navbar adjustments 2 | 3 | .navbar-light .navbar-brand { 4 | font-weight: $navbar-brand-font-weight; 5 | color: $navbar-brand-color; 6 | } 7 | 8 | .nav-link { 9 | font-size: $nav-link-font-size; 10 | font-weight: $nav-link-font-weight; 11 | 12 | &-icon { 13 | color: $nav-link-icon-color; 14 | 15 | @include hover-focus { 16 | color: darken($nav-link-icon-color, 10); 17 | } 18 | 19 | &__wrapper { 20 | position: relative; 21 | } 22 | 23 | i { 24 | font-size: $nav-link-icon-font-size; 25 | 26 | &.material-icons { 27 | font-size: $nav-link-material-icons-font-size; 28 | } 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/scss/_overrides.scss: -------------------------------------------------------------------------------- 1 | // Shards Variables Overrides 2 | 3 | // Colors 4 | $light: #FBFBFB; 5 | $border-color: #e1e5eb; 6 | 7 | 8 | // Cards 9 | $card-cap-bg: #fff; 10 | 11 | 12 | // Typography & Fonts 13 | 14 | // Disable Google Fonts imports 15 | $enable-fonts-import: false; 16 | 17 | // Use the System UI font instead of Poppins. 18 | $font-family-poppins-first: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 19 | 20 | $headings-color: #3D5170; 21 | $font-size-sm: 0.6875rem; 22 | 23 | 24 | // Body 25 | $body-background: #F5F6F8; 26 | 27 | $font-size-sm: 0.6875rem; 28 | $font-size-lg: 0.875rem; 29 | 30 | 31 | // Buttons 32 | $btn-font-size: 0.75rem; 33 | $btn-font-weight: 400; 34 | $btn-border-radius: 0.25rem; 35 | $btn-padding-y: 0.5625rem; 36 | $btn-padding-x: 1rem; 37 | 38 | $btn-font-size-sm: 0.6875rem; 39 | $btn-padding-y-sm: 0.4286rem; 40 | $btn-padding-x-sm: 0.875rem; 41 | 42 | $btn-border-radius-sm: $btn-border-radius; 43 | 44 | 45 | // Inputs 46 | $input-btn-padding-y: 0.4375rem; 47 | $input-btn-padding-x: 0.75rem; 48 | 49 | $input-group-padding-y: 0.75rem; 50 | $input-group-padding-x: 0.625rem; 51 | 52 | 53 | // Forms 54 | $input-font-size: 0.8125rem; 55 | 56 | $input-padding-y-sm: 0.4286rem; 57 | $input-padding-x-sm: 0.8125rem; 58 | 59 | $input-padding-y-lg: 0.8125rem; 60 | $input-padding-x-lg: 0.8125rem; 61 | $input-border-radius-lg: 0.375rem; 62 | 63 | $custom-select-line-height: 1.5; 64 | 65 | $input-padding-x-sm: 0.625rem; 66 | 67 | $input-border-radius: 0.25rem; 68 | $input-border-radius-sm: $input-border-radius; 69 | 70 | $custom-select-border-radius: $input-border-radius; 71 | 72 | $custom-file-height: calc(2.0625rem + 2px); 73 | $custom-file-border-radius: $input-border-radius; 74 | 75 | // Navs 76 | $nav-link-padding-x: 0.625rem; 77 | 78 | 79 | // Navbar brand 80 | $navbar-brand-font-size: 0.9rem; 81 | 82 | // Dropdowns 83 | $dropdown-padding-y: 10px; 84 | -------------------------------------------------------------------------------- /src/scss/_reboot.scss: -------------------------------------------------------------------------------- 1 | // Reboot / Shards Improvements 2 | 3 | // HTML 4 | html { 5 | font-size: 16px; 6 | font-weight: 500; 7 | 8 | // Adjust font sizes for 144dpi+ (including retina). 9 | @media (-webkit-min-device-pixel-ratio: 1.5), 10 | (min-resolution: 144dpi) { 11 | font-size: 16px; 12 | font-weight: 400; 13 | } 14 | } 15 | 16 | 17 | // Body 18 | body { 19 | background: $body-background; 20 | font-size: 15px; 21 | font-weight: 500; 22 | 23 | @media (-webkit-min-device-pixel-ratio: 2), 24 | (min-resolution: 192dpi) { 25 | font-size: 13px; 26 | font-weight: 400; 27 | } 28 | } 29 | 30 | 31 | // Links 32 | a { 33 | color: $accent-color; 34 | 35 | @include hover { 36 | color: darken($accent-color, 15%); 37 | } 38 | } 39 | 40 | 41 | // Labels 42 | label { 43 | font-weight: 400; 44 | } 45 | 46 | 47 | // Datepicker adjustments 48 | .datepicker { 49 | font-size: .75rem; 50 | padding: 0.625rem; 51 | 52 | table tr td, 53 | table tr th { 54 | width: 1.875rem; 55 | height: 1.875rem; 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /src/scss/_utilities.scss: -------------------------------------------------------------------------------- 1 | @import "utilities/general"; 2 | @import "utilities/text"; 3 | @import "utilities/borders"; 4 | -------------------------------------------------------------------------------- /src/scss/_variables.scss: -------------------------------------------------------------------------------- 1 | // Shards Dashboard Variables 2 | 3 | // New grays 4 | $fiord-blue: #3D5170 !default; 5 | $shuttle-gray: #5A6169 !default; 6 | $reagent-gray: #818EA3 !default; 7 | $mischka: #CACEDB !default; 8 | $athens-gray: #E9ECEF !default; 9 | 10 | // New grays map 11 | $new-grays: () !default; 12 | $new-grays: map-merge(( 13 | "fiord-blue" : $fiord-blue, 14 | "shuttle-gray": $shuttle-gray, 15 | "reagent-gray": $reagent-gray, 16 | "mischka" : $mischka, 17 | "athens-gray" : $athens-gray, 18 | ), $new-grays); 19 | 20 | 21 | // Accent color 22 | // Override this color and recompile the package to quickly change 23 | // the general accent color theme. 24 | $accent-color: theme-color('primary') !default; 25 | 26 | 27 | // Text color adjustments 28 | $text-light-color: $reagent-gray !default; 29 | 30 | // Text font weights 31 | $text-semibold-font-weight: 400 !default; 32 | 33 | // Fonts 34 | $font-family-system-first: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default; 35 | $font-family-roboto-mono-first: "Roboto Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; 36 | $font-family-roboto-first: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif !default; 37 | 38 | 39 | // Icons 40 | $icon-color: $mischka !default; 41 | 42 | $clear-white: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTE5IDYuNDFMMTcuNTkgNSAxMiAxMC41OSA2LjQxIDUgNSA2LjQxIDEwLjU5IDEyIDUgMTcuNTkgNi40MSAxOSAxMiAxMy40MSAxNy41OSAxOSAxOSAxNy41OSAxMy40MSAxMnoiLz4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==); 43 | $check-white: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPiAgICA8cGF0aCBkPSJNOSAxNi4xN0w0LjgzIDEybC0xLjQyIDEuNDFMOSAxOSAyMSA3bC0xLjQxLTEuNDF6Ii8+PC9zdmc+); 44 | 45 | 46 | // Shadows 47 | $side-shadow: 0 0.125rem 9.375rem rgba($shuttle-gray, .1), 48 | 0 0.25rem 0.5rem rgba($shuttle-gray, .12), 49 | 0 0.9375rem 1.375rem rgba($shuttle-gray, .10), 50 | 0 0.4375rem 2.1875rem rgba(#A5B6C9, .10); 51 | 52 | 53 | // Body 54 | $body-background: #F5F6F8 !default; 55 | $body-font-size: 15px !default; 56 | 57 | 58 | // Cards 59 | $card-headings-font-weight: 500 !default; 60 | 61 | // Card -> View Report Link 62 | $card-view-report-font-size: 0.75rem !default; 63 | $card-view-report-link-color: $fiord-blue !default; 64 | $card-view-report-link-color-hover: $accent-color !default; 65 | 66 | 67 | // Forms 68 | $custom-control-disabled-color: #becad6 !default; 69 | 70 | 71 | // Navbar 72 | $navbar-brand-color: $fiord-blue !default; 73 | $navbar-brand-font-weight: 500 !default; 74 | 75 | // Navbar search 76 | $navbar-search-padding-y: 23px !default; 77 | 78 | // Nav 79 | $nav-link-color: $reagent-gray !default; 80 | $nav-link-icon-color: $nav-link-color !default; 81 | $nav-link-icon-font-size: 1.25rem !default; 82 | $nav-link-material-icons-font-size: 1.5625rem !default; 83 | $nav-link-font-size: 0.8125rem !default; 84 | $nav-link-font-weight: 400 !default; 85 | 86 | 87 | // Main Navbar 88 | $main-navbar-height: 3.75rem !default; 89 | $main-navbar-box-shadow: 0 0.125rem 0.625rem rgba(90,97,105,.12) !default; 90 | $main-navbar-nav-link-min-width: 3.75rem !default; 91 | $main-navbar-actions-link-border: 1px solid #e3e6ec !default; 92 | $main-navbar-nav-link-icon-line-height: 2.5rem !default; 93 | $main-navbar-brand-font-size: 1rem !default; 94 | 95 | // Main Navbar -> Notifications 96 | $notifications-badge-padding-x: 0.375rem !default; 97 | $notifications-badge-padding-y: 0.25rem !default; 98 | $notifications-badge-font-size: 0.5rem !default; 99 | 100 | $notifications-dropdown-min-width: 25rem !default; 101 | $notifications-dropdown-item-padding-top: 0.625rem !default; 102 | $notifications-dropdown-item-padding-bottom: 0.625rem !default; 103 | $notifications-dropdown-item-border-bottom: 1px solid $border-color !default; 104 | 105 | $notifications-icon-background-color: $body-background !default; 106 | $notifications-icon-width: 2.1875rem !default; 107 | $notifications-icon-height: 2.1875rem !default; 108 | $notifications-icon-color: $text-light-color !default; 109 | $notifications-icon-line-height: 2.0625rem !default; 110 | $notifications-icon-font-size: 1.0625rem !default; 111 | $notifications-icon-box-shadow: 0 0 0 1px white, 112 | inset 0 0 3px rgba(0, 0, 0, 0.2); 113 | 114 | $notification-content-padding: 0 0.625rem !default; 115 | $notification-content-paragraph-font-size: 0.75rem !default; 116 | 117 | $notification-category-font-size: 0.5625rem !default; 118 | $notification-category-color: $reagent-gray !default; 119 | $notification-category-letter-spacing: 0.0938rem !default; 120 | 121 | // Main Navbar -> User Avatar 122 | $user-avatar-max-width: 2.5rem !default; 123 | 124 | 125 | // Header Navigation 126 | $header-navbar-icon-font-size: 0.875rem !default; 127 | $header-navbar-icon-margin-right: 0.125rem !default; 128 | 129 | $header-navbar-dropdown-nav-link-padding-right: 1.25rem !default; 130 | 131 | $header-navbar-nav-link-color: $fiord-blue !default; 132 | $header-navbar-nav-link-border: none !default; 133 | $header-navbar-nav-link-padding: 1.125rem 0 !default; 134 | $header-navbar-nav-link-margin-right: 1.25rem !default; 135 | $header-navbar-nav-link-line-height: 1 !default; 136 | $header-navbar-nav-link-border-radius: 0 !default; 137 | $header-navbar-nav-link-font-size: 0.8125rem !default; 138 | $header-navbar-nav-link-background: transparent !default; 139 | $header-navbar-nav-link-border-bottom: 1px solid transparent !default; 140 | 141 | // ahs: active, hover, show 142 | $header-navbar-nav-item-ahs-border-bottom: 1px solid $accent-color !default; 143 | $header-navbar-nav-item-ahs-color: $accent-color !default; 144 | $header-navbar-nav-item-ahs-icon-color: $accent-color !default; 145 | 146 | $header-navbar-nav-link-md-font-size: 0.875rem !default; 147 | 148 | $header-navbar-dropdown-item-md-border-radius: 5px !default; 149 | $header-navbar-dropdown-item-md-font-size: 0.875rem !default; 150 | $header-navbar-dropdown-item-md-padding: 0.625rem 1.375rem !default; 151 | $header-navbar-dropdown-item-md-font-weight: 400 !default; 152 | 153 | 154 | // Page Header 155 | $page-title-font-size: 1.625rem !default; 156 | $page-title-sm-font-size: 2rem !default; 157 | $page-title-font-weight: 500 !default; 158 | $page-title-line-height: 1 !default; 159 | $page-title-margin: 0 !default; 160 | $page-title-padding: 0 !default; 161 | 162 | $page-subtitle-letter-spacing: 0.125rem !default; 163 | $page-subtitle-color: $reagent-gray !default; 164 | $page-subtitle-font-size: 0.625rem !default; 165 | $page-subtitle-font-size-sm: 0.8125rem !default; 166 | $page-subtitle-font-weight-sm: 400 !default; 167 | 168 | 169 | // Main footer 170 | $main-footer-height: $main-navbar-height !default; 171 | $main-footer-copyright-color: $reagent-gray !default; 172 | 173 | 174 | // Main sidebar 175 | $dropdown-icon-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTcuNDEgNy44NEwxMiAxMi40Mmw0LjU5LTQuNThMMTggOS4yNWwtNiA2LTYtNnoiLz4gICAgPHBhdGggZD0iTTAtLjc1aDI0djI0SDB6IiBmaWxsPSJub25lIi8+PC9zdmc+); 176 | $dropdown-icon-width: 0.875rem; 177 | $dropdown-icon-height: 0.5625rem; 178 | $dropdown-icon-background-position: center center; 179 | $dropdown-icon-transition: transform $transition-duration ease-in-out; 180 | 181 | $main-sidebar-height: calc(100vh) !default; 182 | $main-sidebar-zindex: 1070 !default; 183 | $main-sidebar-background: $white !default; 184 | $main-sidebar-will-change: transform !default; 185 | $main-sidebar-transition: transform 200ms ease-in-out !default; 186 | 187 | $main-sidebar-toggle-font-size: 1.25rem !default; 188 | $main-sidebar-toggle-padding: 1.25rem !default; 189 | $main-sidebar-toggle-border-left: 1px solid $border-color !default; 190 | 191 | $main-sidebar-nav-wrapper-height: calc(100vh - 3.75rem - 1px) !default; 192 | $main-sidebar-nav-border-bottom: 1px solid $border-color !default; 193 | 194 | $main-sidebar-nav-link-active-background-color: #FBFBFB !default; 195 | $main-sidebar-nav-link-active-color: $accent-color !default; 196 | $main-sidebar-nav-link-active-box-shadow: inset 0.1875rem 0 0 $accent-color !default; 197 | $main-sidebar-nav-link-active-icon-color: $accent-color !default; 198 | 199 | $main-sidebar-nav-link-border: 1px solid $border-color !default; 200 | $main-sidebar-nav-link-font-weight: 400 !default; 201 | $main-sidebar-nav-link-font-size: 0.85rem !default; 202 | $main-sidebar-nav-link-padding-x: 1.5625rem !default; 203 | $main-sidebar-nav-link-padding-y: 0.9375rem !default; 204 | $main-sidebar-nav-link-color: $fiord-blue !default; 205 | $main-sidebar-nav-link-font-family: $font-family-system-first !default; 206 | $main-sidebar-nav-link-will-change: background-color, box-shadow, color !default; 207 | $main-sidebar-nav-link-transition: box-shadow 200ms ease, 208 | color 200ms ease, 209 | background-color 200ms ease !default; 210 | 211 | $main-sidebar-nav-link-icon-transition: color 200ms ease !default; 212 | $main-sidebar-nav-link-icon-margin-right: 0.375rem !default; 213 | $main-sidebar-nav-link-icon-color: $icon-color !default; 214 | $main-sidebar-nav-link-icon-will-change: color !default; 215 | 216 | $main-sidebar-dropdown-menu-box-shadow: inset 0 -0.1875rem 0.1875rem rgba($fiord-blue, .08) !default; 217 | 218 | $main-sidebar-dropdown-item-background-color-active: $main-sidebar-nav-link-active-background-color !default; 219 | $main-sidebar-dropdown-item-background-hover: none !default; 220 | $main-sidebar-dropdown-item-padding-x: 1.75rem !default; 221 | $main-sidebar-dropdown-item-padding-y: 0.75rem !default; 222 | $main-sidebar-dropdown-item-border: 1px solid lighten($border-color, 5) !default; 223 | $main-sidebar-dropdown-item-last-border: 1px solid $border-color !default; 224 | $main-sidebar-dropdown-item-color: $fiord-blue !default; 225 | $main-sidebar-dropdown-item-active-color: $accent-color !default; 226 | 227 | $main-sidebar-nav-no-borders-nav-link-border-bottom: 0 !default; 228 | $main-sidebar-nav-no-borders-dropdown-menu-box-shadow: inset 0 0 0.4375rem rgba($fiord-blue, .2) !default; 229 | $main-sidebar-nav-no-borders-dropdown-item-first-border-top: $main-sidebar-dropdown-item-last-border !default; 230 | 231 | $main-sidebar-dropdown-item-font-size: 0.8125rem !default; 232 | $main-sidebar-dropdown-item-font-weight: 400 !default; 233 | $main-sidebar-dropdown-item-font-weight-retina: 300 !default; 234 | 235 | 236 | // Components -> Card Post 237 | $card-post-padding-x: 1.5625rem !default; 238 | $card-post-padding-y: 1.5625rem !default; 239 | $card-post-padding: $card-post-padding-y $card-post-padding-x !default; 240 | 241 | $card-post-image-min-height: 10.3125rem !default; 242 | 243 | $card-post-author-avatar-width: 2.8125rem !default; // 45px 244 | $card-post-author-avatar-height: 2.8125rem !default; // 45px 245 | $card-post-author-avatar-small-width: 2.1875rem !default; // 35px 246 | $card-post-author-avatar-small-height: 2.1875rem !default; // 35px 247 | $card-post-author-avatar-box-shadow: 0 0 0 0.125rem $white, 0 0.1875rem 0.4375rem rgba($blueish-grey, 0.5) !default; 248 | 249 | 250 | // Components -> Card Post -> Variation 1 251 | $card-post-v1-author-transform: translateY(50%) !default; 252 | $card-post-v1-author-margin-left: 1.5625rem !default; // 25px 253 | $card-post-v1-category-top: 0.9375rem !default; // 15px 254 | $card-post-v1-category-right: 0.9375rem !default; // 15px 255 | $card-post-v1-body-padding-top: 2.1875rem !default; // 35px 256 | 257 | $card-post-aside-v1-body-padding: $card-post-padding !default; 258 | $card-post-aside-v1-author-left: 0.9375rem !default; // 15px 259 | $card-post-aside-v1-author-bottom: 0.9375rem !default; // 15px 260 | $card-post-aside-v1-category-top: 0.9375rem !default; // 15px 261 | $card-post-aside-v1-category-left: 0.9375rem !default; // 15px 262 | 263 | 264 | // Components -> Sliders 265 | // Core Shards UI sliders adjustments. 266 | $slider-accent-background: $accent-color !default; 267 | $slider-pips-font-size: 0.625rem !default; // 10px 268 | $slider-tooltip-font-size: 0.6875rem !default; // 11px 269 | $slider-tooltip-padding: 0.1875rem 0.5rem !default; // 3,8px 270 | $slider-horizontal-tooltip-bottom: 1.625rem !default; // 26px 271 | $slider-horizontal-handle-left: -0.625rem !default; // -10px 272 | $slider-horizontal-handle-top: -0.5rem !default; // -8px 273 | $slider-handle-width: 1.1875rem !default; // 19px 274 | $slider-handle-height: 1.1875rem !default; // 19px 275 | 276 | 277 | // 278 | // Statistics Blocks and Charts Styles 279 | // 280 | 281 | 282 | // Small stats block 283 | // Used in: Blog overview page templates. 284 | $small-stats-min-height: 8.7rem !default; 285 | 286 | $small-stats-value-font-family: $font-family-roboto-first !default; 287 | $small-stats-value-font-size: 1.5rem !default; 288 | $small-stats-value-font-weight: 500 !default; 289 | $small-stats-value-color: $fiord-blue !default; 290 | 291 | $small-stats-label-font-size: 0.625rem !default; 292 | $small-stats-label-color: $reagent-gray !default; 293 | $small-stats-label-letter-spacing: 0.0625rem !default; 294 | 295 | $small-stats-percentage-font-size: 0.75rem !default; 296 | $small-stats-percentage-padding-left: 0.9375rem !default; 297 | 298 | // Small Stats -- 1 299 | $small-stats-1-data-max-width: 100% !default; 300 | $small-stats-1-percentage-margin: 0 auto !default; 301 | $small-stats-1-value-font-size: 2.0625rem !default; // 33px 302 | $small-stats-1-label-font-size: 0.75rem !default; // 12px 303 | $small-stats-1-percentage-font-size: 0.75rem !default; // 12px 304 | $small-stats-1-chart-opacity: 0.5 !default; 305 | 306 | 307 | // Quick Post Form 308 | // Used in: Blog Overview 309 | $qp-form-display: flex !default; 310 | $qp-form-flex-flow: column !default; 311 | $qp-form-flex: 1 !default; 312 | 313 | $qp-form-textarea-min-height: 100px !default; 314 | 315 | 316 | // Blog Comments Component 317 | // Used in: Blog Overview 318 | $bc-avatar-img-width: 3.125rem !default; // 50px 319 | $bc-avatar-img-height: 3.125rem !default; // 50px 320 | $bc-avatar-img-border-radius: 0.25rem !default; // 4px 321 | 322 | $bc-item-border-bottom: 1px solid $border-color !default; 323 | 324 | $bc-actions-font-size: 95% !default; 325 | $bc-actions-button-group-padding: 0.25rem 0.5625rem !default; 326 | 327 | 328 | // Error(s) templates 329 | $error-tpl-height: calc(100vh - #{$main-navbar-height}) !default; 330 | 331 | $error-tpl-content-padding: 0 0.9375rem !default; // 0,15px 332 | 333 | $error-tpl-content-heading-color: $mischka !default; 334 | $error-tpl-content-heading-font-weight: 700 !default; 335 | $error-tpl-content-heading-font-size: 3.75rem !default; // 60px 336 | $error-tpl-content-heading-margin-bottom: 1.5625rem !default; // 25px 337 | 338 | $error-tpl-content-subheading-font-weight: 500 !default; 339 | $error-tpl-content-subheading-font-size: 2.1875rem !default; // 35px 340 | $error-tpl-content-subheading-margin-bottom: 0.625rem !default; // 10px 341 | 342 | $error-tpl-content-paragraph-color: $reagent-gray !default; 343 | -------------------------------------------------------------------------------- /src/scss/blocks/_main-content.scss: -------------------------------------------------------------------------------- 1 | // Main content adjustments 2 | 3 | .main-content > .main-content-container.container-fluid { 4 | min-height: calc(100vh - #{$main-navbar-height + $main-footer-height}); 5 | } 6 | -------------------------------------------------------------------------------- /src/scss/blocks/_main-footer.scss: -------------------------------------------------------------------------------- 1 | // Main footer 2 | 3 | .main-footer { 4 | height: $main-footer-height; 5 | 6 | .copyright { 7 | color: $main-footer-copyright-color; 8 | } 9 | 10 | @include media-breakpoint-down(sm) { 11 | display: block !important; 12 | height: auto; 13 | 14 | .nav { 15 | width: 100%; 16 | display: block; 17 | border-bottom: 1px solid $border-color; 18 | padding-bottom: $spacer / 2; 19 | } 20 | 21 | .copyright { 22 | display: inline-block; 23 | width: 100%; 24 | padding: 1rem; 25 | text-align: center; 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/scss/blocks/_main-navbar.scss: -------------------------------------------------------------------------------- 1 | // Main navbar adjustments 2 | 3 | .main-navbar .navbar { 4 | height: $main-navbar-height; 5 | 6 | > * { 7 | display: flex; 8 | } 9 | 10 | .nav-link { 11 | min-width: $main-navbar-nav-link-min-width; 12 | } 13 | 14 | // Notifications 15 | .notifications { 16 | position: relative; 17 | 18 | @include media-breakpoint-down(sm) { 19 | position: static; 20 | 21 | .dropdown-menu { 22 | min-width: 100% !important; 23 | border-left: none; 24 | } 25 | } 26 | 27 | .badge { 28 | position: absolute; 29 | padding: $notifications-badge-padding-y $notifications-badge-padding-x; 30 | font-size: $notifications-badge-font-size; 31 | left: 50%; 32 | top: 50%; 33 | } 34 | 35 | .dropdown-menu { 36 | padding: 0; 37 | min-width: $notifications-dropdown-min-width; 38 | border-right: 0; 39 | left: auto; 40 | 41 | // Adjust the dropdown menu on smaller screens. 42 | @include media-breakpoint-down(sm) { 43 | left: 0; 44 | right: 0; 45 | } 46 | 47 | .dropdown-item { 48 | white-space: normal; 49 | display: flex; 50 | flex-flow: row; 51 | padding-top: $notifications-dropdown-item-padding-top; 52 | padding-bottom: $notifications-dropdown-item-padding-bottom; 53 | border-bottom: $notifications-dropdown-item-border-bottom; 54 | 55 | &:last-child { 56 | border-bottom: 0; 57 | } 58 | } 59 | 60 | .notification { 61 | &__icon-wrapper { 62 | display: flex; 63 | padding: 0 5px; 64 | } 65 | 66 | &__icon { 67 | background-color: $notifications-icon-background-color; 68 | box-shadow: $notifications-icon-box-shadow; 69 | width: $notifications-icon-width; 70 | height: $notifications-icon-height; 71 | line-height: 0; 72 | display: block; 73 | text-align: center; 74 | margin: auto; 75 | border-radius: 50%; 76 | 77 | i { 78 | color: $notifications-icon-color; 79 | line-height: $notifications-icon-line-height; 80 | font-size: $notifications-icon-font-size; 81 | margin: 0; 82 | } 83 | } 84 | 85 | &__content { 86 | padding: $notification-content-padding; 87 | 88 | p { 89 | margin: 0; 90 | line-height: 1.5; 91 | font-size: $notification-content-paragraph-font-size; 92 | } 93 | } 94 | 95 | &__category { 96 | font-size: $notification-category-font-size; 97 | color: $notification-category-color; 98 | letter-spacing: $notification-category-letter-spacing; 99 | display: inline-block; 100 | text-transform: uppercase; 101 | margin-bottom: 5px; 102 | font-weight: 500; 103 | } 104 | 105 | // All notifications link. 106 | &__all { 107 | display: block; 108 | font-weight: 500; 109 | font-size: 11px; 110 | border-bottom-left-radius: $border-radius; 111 | border-bottom-right-radius: $border-radius; 112 | } 113 | } 114 | } 115 | } 116 | 117 | // User avatar 118 | .user-avatar { 119 | max-width: $user-avatar-max-width; 120 | } 121 | 122 | // Navbar 123 | .navbar-nav .dropdown-menu { 124 | position: absolute; 125 | right: 0; 126 | width: 100%; 127 | border-top-left-radius: 0; 128 | border-top-right-radius: 0; 129 | border-top: none; 130 | } 131 | 132 | .nav-link-icon i { 133 | line-height: $main-navbar-nav-link-icon-line-height; 134 | } 135 | } 136 | 137 | // Main navbar shadow. 138 | .main-content > .main-navbar, 139 | .main-content .header-navbar { 140 | box-shadow: $main-navbar-box-shadow; 141 | } 142 | 143 | -------------------------------------------------------------------------------- /src/scss/blocks/_main-sidebar.scss: -------------------------------------------------------------------------------- 1 | // Main sidebar 2 | 3 | .main-sidebar { 4 | top: 0; 5 | position: fixed; 6 | height: $main-sidebar-height; 7 | background: $main-sidebar-background; 8 | z-index: $main-sidebar-zindex; 9 | will-change: $main-sidebar-will-change; 10 | transition: $main-sidebar-transition; 11 | box-shadow: $side-shadow; 12 | 13 | @include media-breakpoint-down(sm) { 14 | transform: translateX(-100%); 15 | box-shadow: none; 16 | } 17 | 18 | // Opened state 19 | &.open { 20 | transform: translateX(0); 21 | box-shadow: $side-shadow; 22 | } 23 | 24 | // Toggle sidebar 25 | .toggle-sidebar { 26 | position: absolute; 27 | right: 0; 28 | height: 100%; 29 | padding: $main-sidebar-toggle-padding; 30 | font-size: $main-sidebar-toggle-font-size; 31 | border-left: $main-sidebar-toggle-border-left; 32 | 33 | &:hover { 34 | cursor: pointer; 35 | } 36 | } 37 | 38 | // Sidebar navbar brand 39 | .navbar-brand { 40 | overflow: hidden; 41 | height: $main-navbar-height; 42 | font-size: $main-navbar-brand-font-size; 43 | 44 | @include media-breakpoint-down(md) { 45 | font-size: 90%; 46 | } 47 | } 48 | 49 | .nav-wrapper { 50 | overflow-y: auto; 51 | overflow-x: hidden; 52 | height: $main-sidebar-nav-wrapper-height; 53 | } 54 | 55 | // Nav 56 | .nav { 57 | .nav-item, 58 | .nav-link { 59 | white-space: nowrap; 60 | min-width: 100%; 61 | max-width: 100%; 62 | overflow: hidden; 63 | text-overflow: ellipsis; 64 | font-family: $main-sidebar-nav-link-font-family; 65 | will-change: $main-sidebar-nav-link-will-change; 66 | transition: $main-sidebar-nav-link-transition; 67 | font-size: $main-sidebar-nav-link-font-size; 68 | } 69 | 70 | .nav-item { 71 | .nav-link { 72 | border-bottom: $main-sidebar-nav-link-border; 73 | font-weight: $main-sidebar-nav-link-font-weight; 74 | color: $main-sidebar-nav-link-color; 75 | padding: $main-sidebar-nav-link-padding-y $main-sidebar-nav-link-padding-x; 76 | 77 | i { 78 | min-width: 1.25rem; 79 | font-size: 90%; 80 | text-align: center; 81 | vertical-align: middle; 82 | will-change: $main-sidebar-nav-link-icon-will-change; 83 | color: $main-sidebar-nav-link-icon-color; 84 | transition: $main-sidebar-nav-link-icon-transition; 85 | margin-right: $main-sidebar-nav-link-icon-margin-right; 86 | } 87 | 88 | i.material-icons { 89 | font-size: 1.125rem; 90 | top: -1px; 91 | } 92 | } 93 | 94 | &.active, .nav-link.active, 95 | &:hover, .nav-link:hover { 96 | box-shadow: $main-sidebar-nav-link-active-box-shadow; 97 | background-color: $main-sidebar-nav-link-active-background-color; 98 | color: $main-sidebar-nav-link-active-color; 99 | 100 | i { 101 | color: $main-sidebar-nav-link-active-icon-color; 102 | } 103 | } 104 | } 105 | 106 | // Nav Item -- No borders 107 | &--no-borders { 108 | .nav-item .nav-link { 109 | border-bottom: $main-sidebar-nav-no-borders-nav-link-border-bottom; 110 | } 111 | 112 | .dropdown-menu { 113 | box-shadow: $main-sidebar-nav-no-borders-dropdown-menu-box-shadow; 114 | 115 | .dropdown-item:first-child { 116 | border-top: $main-sidebar-nav-no-borders-dropdown-item-first-border-top; 117 | } 118 | } 119 | } 120 | } 121 | 122 | // Dropdown menu 123 | .dropdown-menu { 124 | position: static !important; 125 | transform: translate(0) !important; 126 | box-shadow: none; 127 | border-radius: 0; 128 | width: 100%; 129 | border: none; 130 | padding: 0; 131 | box-shadow: $main-sidebar-dropdown-menu-box-shadow; 132 | 133 | .dropdown-item { 134 | padding: $main-sidebar-dropdown-item-padding-y $main-sidebar-dropdown-item-padding-x ; 135 | border-bottom: $main-sidebar-dropdown-item-border; 136 | color: $main-sidebar-dropdown-item-color; 137 | font-size: $main-sidebar-dropdown-item-font-size; 138 | font-weight: $main-sidebar-dropdown-item-font-weight; 139 | 140 | @media (-webkit-min-device-pixel-ratio: 1.5), 141 | (min-resolution: 144dpi) { 142 | font-weight: $main-sidebar-dropdown-item-font-weight-retina; 143 | } 144 | 145 | &:hover, 146 | &.active { 147 | color: $main-sidebar-dropdown-item-active-color; 148 | } 149 | 150 | &:hover { 151 | background: $main-sidebar-dropdown-item-background-hover; 152 | } 153 | 154 | &.active { 155 | background-color: $main-sidebar-dropdown-item-background-color-active; 156 | } 157 | 158 | &:last-of-type { 159 | border-bottom: $main-sidebar-dropdown-item-last-border; 160 | } 161 | } 162 | 163 | .dropdown-divider { 164 | margin: 0; 165 | } 166 | } 167 | 168 | // Dropdown toggle 169 | .dropdown-toggle { 170 | position: relative; 171 | 172 | &::after { 173 | background-image: $dropdown-icon-image; 174 | background-position: $dropdown-icon-background-position; 175 | width: $dropdown-icon-width; 176 | height: $dropdown-icon-height; 177 | transition: $dropdown-icon-transition; 178 | border: none; 179 | position: absolute; 180 | top: 50%; 181 | right: 0.625rem; 182 | transform: translateY(-50%); 183 | opacity: .1; 184 | will-change: transform; 185 | } 186 | } 187 | 188 | .dropdown.show { 189 | .dropdown-toggle::after { 190 | transform: translateY(-50%) rotateZ(180deg); 191 | } 192 | } 193 | 194 | &__search { 195 | @include media-breakpoint-down(sm) { 196 | box-sizing: border-box; 197 | border-right: 0 !important; 198 | padding: 0.625rem 0; 199 | border-bottom: 1px solid $border-color; 200 | 201 | .input-group { 202 | margin: 0 !important; 203 | } 204 | } 205 | } 206 | } 207 | 208 | 209 | // 210 | // Common styles for both main navbar and 211 | // main sidebar search elements. 212 | // 213 | 214 | .main-navbar__search, 215 | .main-sidebar__search { 216 | .input-group-prepend { 217 | .input-group-text { 218 | font-size: 0.6875rem; 219 | padding: 0.75rem 1.0625rem; 220 | } 221 | } 222 | 223 | input.form-control { 224 | border: none; 225 | font-size: 0.8125rem; 226 | border-radius: 0; 227 | 228 | @include hover-focus { 229 | box-shadow: none; 230 | } 231 | } 232 | } 233 | -------------------------------------------------------------------------------- /src/scss/blocks/_page-header.scss: -------------------------------------------------------------------------------- 1 | // Page headers 2 | // 3 | // Used across the UI kit to emphasize each page by using a title 4 | // and optional description. 5 | 6 | .page-header { 7 | .page-title { 8 | font-size: $page-title-font-size; 9 | font-weight: $page-title-font-weight; 10 | line-height: $page-title-line-height; 11 | margin: $page-title-margin; 12 | padding: $page-title-padding; 13 | 14 | @include media-breakpoint-down(sm) { 15 | font-size: $page-title-sm-font-size; 16 | } 17 | } 18 | 19 | .page-subtitle { 20 | letter-spacing: $page-subtitle-letter-spacing; 21 | color: $page-subtitle-color; 22 | font-size: $page-subtitle-font-size; 23 | 24 | @include media-breakpoint-down(sm) { 25 | font-size: $page-subtitle-font-size-sm; 26 | font-weight: $page-subtitle-font-weight-sm; 27 | } 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/scss/components/_card-post.scss: -------------------------------------------------------------------------------- 1 | // Content Post Component 2 | // Used in templates: Components > Blog Posts 3 | 4 | // Blog Post Cards 5 | .card-post { 6 | 7 | // Adjust the card post inner elements' paddings. 8 | .card-body { 9 | padding: $card-post-padding; 10 | } 11 | 12 | .card-footer, 13 | .card-header { 14 | padding-left: $card-post-padding-x; 15 | padding-right: $card-post-padding-x; 16 | } 17 | 18 | // Card Post :: Image 19 | &__image { 20 | position: relative; 21 | min-height: $card-post-image-min-height; 22 | border-top-left-radius: $card-border-radius; 23 | border-top-right-radius: $card-border-radius; 24 | background-size: cover; 25 | background-position: center; 26 | background-repeat: no-repeat; 27 | } 28 | 29 | // Card Post :: Author :: Avatar 30 | &__author-avatar { 31 | width: $card-post-author-avatar-width; 32 | height: $card-post-author-avatar-height; 33 | box-shadow: $card-post-author-avatar-box-shadow; 34 | display: block; 35 | background-position: center; 36 | background-size: cover; 37 | border-radius: 50%; 38 | text-indent: -9999px; 39 | 40 | // Author Avatar -- Small Modifier 41 | &--small { 42 | width: $card-post-author-avatar-small-width; 43 | height: $card-post-author-avatar-small-height; 44 | } 45 | } 46 | 47 | // Card Post :: Author :: Name 48 | &__author-name { 49 | font-weight: 500; 50 | } 51 | 52 | // Card Post -- Aside Modifier 53 | &--aside { 54 | display: flex; 55 | flex-flow: row; 56 | 57 | .card-post__image { 58 | border-top-right-radius: 0; 59 | border-top-left-radius: $card-border-radius; 60 | border-bottom-left-radius: $card-border-radius; 61 | min-width: 180px; 62 | } 63 | } 64 | 65 | // 66 | // Variations 67 | // 68 | 69 | // Variation 1 70 | &--1 { 71 | .card-post__author, 72 | .card-post__category { 73 | position: absolute; 74 | } 75 | 76 | .card-post__author { 77 | transform: $card-post-v1-author-transform; 78 | margin-left: $card-post-v1-author-margin-left; 79 | position: absolute; 80 | bottom: 0; 81 | } 82 | 83 | .card-post__category { 84 | top: $card-post-v1-category-top; 85 | right: $card-post-v1-category-right; 86 | position: absolute; 87 | text-transform: uppercase; 88 | } 89 | 90 | .card-body { 91 | padding-top: $card-post-v1-body-padding-top; 92 | } 93 | 94 | // Card Post Aside Adjustments 95 | &.card-post--aside { 96 | .card-body { 97 | padding: $card-post-aside-v1-body-padding; 98 | } 99 | 100 | .card-post__author { 101 | left: $card-post-aside-v1-author-left; 102 | bottom: $card-post-aside-v1-author-bottom; 103 | transform: none; 104 | margin: 0; 105 | } 106 | 107 | .card-post__category { 108 | right: initial; 109 | top: $card-post-aside-v1-category-top; 110 | left: $card-post-aside-v1-category-left; 111 | } 112 | } 113 | } 114 | } 115 | -------------------------------------------------------------------------------- /src/scss/components/_error.scss: -------------------------------------------------------------------------------- 1 | // Error component 2 | // Used in: Error templates. 3 | 4 | .error { 5 | height: $error-tpl-height; 6 | display: flex; 7 | 8 | &__content { 9 | padding: $error-tpl-content-padding; 10 | display: flex; 11 | flex-flow: column; 12 | margin: auto; 13 | align-items: center; 14 | text-align: center; 15 | 16 | h2 { 17 | color: $error-tpl-content-heading-color; 18 | font-weight: $error-tpl-content-heading-font-weight; 19 | font-size: $error-tpl-content-heading-font-size; 20 | margin-bottom: $error-tpl-content-heading-margin-bottom; 21 | } 22 | 23 | h3 { 24 | font-weight: $error-tpl-content-subheading-font-weight; 25 | font-size: $error-tpl-content-subheading-font-size; 26 | margin-bottom: $error-tpl-content-subheading-margin-bottom; 27 | } 28 | 29 | p { 30 | color: $error-tpl-content-paragraph-color; 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/scss/extras.scss: -------------------------------------------------------------------------------- 1 | // Extras 2 | 3 | @import "../../node_modules/shards-ui/src/scss/functions"; 4 | @import "../../node_modules/shards-ui/src/scss/mixins"; 5 | @import "../../node_modules/shards-ui/src/scss/variables"; 6 | @import "variables"; 7 | 8 | @import '../../node_modules/animate.css/source/_base'; 9 | @import '../../node_modules/animate.css/source/bouncing_entrances/bounceIn'; 10 | @import '../../node_modules/animate.css/source/sliding_entrances/slideInUp'; 11 | @import '../../node_modules/animate.css/source/attention_seekers/pulse'; 12 | 13 | $brand-color: #2d53fe; 14 | $price-color: #37ae2a; 15 | 16 | @media (max-width: 860px) { 17 | .color-switcher, 18 | .color-switcher-toggle { 19 | display: none !important; 20 | } 21 | } 22 | 23 | // Promo Popup 24 | .promo-popup { 25 | display: none; 26 | opacity: 0; 27 | position: fixed; 28 | right: 24px; 29 | bottom: 0; 30 | background: #fff; 31 | box-shadow: 0 0 10px rgba(24, 29, 39, .1), 0 15px 30px rgba(24, 29, 39, .1), 0 5px 10px rgba(24, 29, 39, .05); 32 | z-index: 2000; 33 | overflow: hidden; 34 | max-width: 430px; 35 | border-radius: 7px; 36 | transform: translate(-100%, -100%); 37 | transition: transform 280ms ease-in-out, 38 | bottom 280ms ease-in-out; 39 | 40 | .up { 41 | display: none; 42 | } 43 | 44 | &.slideInUp { 45 | bottom: 30px; 46 | transform: translate(0,0); 47 | display: block; 48 | opacity: 1; 49 | } 50 | 51 | &.bounceIn { 52 | bottom: 30px; 53 | display: block; 54 | } 55 | 56 | &.hidden { 57 | bottom: -156px; 58 | right: 24px; 59 | opacity: 1; 60 | 61 | img { 62 | transform: translateX(-100%); 63 | } 64 | 65 | .pp-intro-bar { 66 | padding-left: 20px; 67 | &:hover, 68 | h2:hover { 69 | cursor: pointer; 70 | } 71 | } 72 | 73 | .up { 74 | display: block; 75 | } 76 | 77 | .close { 78 | display: none; 79 | } 80 | } 81 | 82 | &.visible { 83 | transform: translateX(0); 84 | } 85 | 86 | img { 87 | position: absolute; 88 | left: 0; 89 | bottom: 0; 90 | height: 100%; 91 | top: 10px; 92 | box-shadow: 0px 0 15px rgba(0, 0, 0, .2); 93 | z-index: 1; 94 | transition: transform 280ms ease-in-out; 95 | } 96 | 97 | .pp-intro-bar { 98 | background: #2d53fe; 99 | color: #fff; 100 | text-transform: uppercase; 101 | font-weight: 500; 102 | font-size: 11px; 103 | letter-spacing: 3px; 104 | padding: 10px 0; 105 | padding-left: 172px; 106 | position: relative; 107 | transition: padding 280ms ease-in-out; 108 | line-height: 1.5; 109 | 110 | .close, 111 | .up { 112 | position: absolute; 113 | bottom: 0; 114 | right: 0; 115 | top: 0; 116 | line-height: 36px; 117 | width: 32px; 118 | text-align: center; 119 | transition: all 250ms ease-in-out; 120 | color: #fff; 121 | 122 | i { 123 | opacity: .7; 124 | font-size: 17px; 125 | transition: all 250ms ease-in-out; 126 | } 127 | 128 | &:hover { 129 | cursor: pointer; 130 | background: darken($brand-color, 5); 131 | i { opacity: 1; } 132 | } 133 | } 134 | 135 | .up { 136 | line-height: 26px; 137 | i { 138 | top: 11px; 139 | } 140 | } 141 | 142 | .close { 143 | i { 144 | top: 0; 145 | } 146 | } 147 | } 148 | 149 | .pp-inner-content { 150 | padding: 22px; 151 | padding-left: 172px !important; 152 | 153 | h2 { 154 | margin-bottom: 7px; 155 | font-size: 24px; 156 | line-height: 1; 157 | } 158 | 159 | p { 160 | font-size: 12px; 161 | margin-bottom: 17px; 162 | line-height: 1.4; 163 | color: #5d6f82; 164 | } 165 | 166 | a { 167 | font-size: 12px; 168 | font-weight: 400; 169 | color: #fff; 170 | background: $brand-color; 171 | padding: 7px 15px; 172 | border-radius: 50px; 173 | display: inline-block; 174 | 175 | &:hover { 176 | text-decoration: none; 177 | } 178 | } 179 | } 180 | 181 | @media (max-width: 500px) { 182 | left: 10px; 183 | right: 10px; 184 | bottom: 10px !important; 185 | 186 | h2 { 187 | font-size: 22px !important; 188 | font-weight: 500; 189 | letter-spacing: 0; 190 | } 191 | 192 | &.hidden { 193 | bottom: -158px !important; 194 | left: 10px !important; 195 | right: 10px !important; 196 | 197 | .pp-intro-bar { 198 | padding-left: 20px !important; 199 | } 200 | } 201 | 202 | img { 203 | left: -80px; 204 | } 205 | 206 | .pp-inner-content, 207 | .pp-intro-bar { 208 | padding-left: 85px !important; 209 | } 210 | } 211 | } 212 | 213 | // Color Switcher 214 | .color-switcher { 215 | position: fixed; 216 | left: 0; 217 | bottom: 30px; 218 | z-index: 2001; 219 | background:#181a23; 220 | padding: 20px 20px; 221 | padding-top: 25px; 222 | border-radius: 5px; 223 | transform: translateX(-110%); 224 | transition: transform 300ms ease-in-out, left 300ms ease-in-out; 225 | @include box-shadow($card-box-shadow); 226 | 227 | &.visible { 228 | transform: translateX(0); 229 | left: 24px; 230 | } 231 | 232 | h5 { 233 | font-size: 11px; 234 | font-weight: 500; 235 | margin-bottom: 0; 236 | line-height: 1; 237 | letter-spacing: 2px; 238 | color: #84899e; 239 | text-align: center; 240 | text-transform: uppercase; 241 | } 242 | 243 | .accent-colors { 244 | display: flex; 245 | padding: 5px; 246 | margin: 15px auto 20px auto; 247 | justify-content: center; 248 | 249 | li { 250 | display: inline-block; 251 | width: 14px; 252 | height: 14px; 253 | border-radius: 50%; 254 | transition: transform 180ms ease-in-out; 255 | text-align: center; 256 | margin: 0 4px; 257 | 258 | &:hover:not(.active) { 259 | cursor: pointer; 260 | transform: scale(1.3); 261 | } 262 | 263 | i { 264 | transition: opacity 180ms ease-in-out; 265 | line-height: 1; 266 | color: #fff; 267 | font-size: 10px; 268 | position: absolute; 269 | left: 50%; 270 | top: 50%; 271 | opacity: 0; 272 | transform: translate(-50%, -50%); 273 | } 274 | 275 | &.active { 276 | transform: scale(1.5); 277 | 278 | i { 279 | opacity: 1; 280 | } 281 | } 282 | 283 | &.accent-primary { background-color: $primary; } 284 | &.accent-secondary { background-color: $secondary; } 285 | &.accent-success { background-color: $success; } 286 | &.accent-info { background-color: $info; } 287 | &.accent-warning { background-color: $warning; } 288 | &.accent-danger { background-color: $danger; } 289 | } 290 | } 291 | 292 | .actions { 293 | margin: 15px 0; 294 | } 295 | 296 | .social-actions { 297 | padding: 10px 0; 298 | border-top: 1px solid #2c2f44; 299 | 300 | .inner-wrapper { 301 | display: table; 302 | margin: 0 auto; 303 | } 304 | 305 | iframe { 306 | margin: 5px 0 0 10px; 307 | } 308 | } 309 | 310 | #social-share { 311 | display: table; 312 | margin: 0 auto; 313 | } 314 | 315 | .sharrre .box{ 316 | float:left; 317 | } 318 | 319 | .sharrre .count { 320 | color:#444444; 321 | display:block; 322 | font-size:17px; 323 | line-height:34px; 324 | height:34px; 325 | padding:4px 0; 326 | position:relative; 327 | text-align:center; 328 | text-decoration:none; 329 | width:50px; 330 | background-color:#eee; 331 | -webkit-border-radius:4px; 332 | -moz-border-radius:4px; 333 | border-radius:4px; 334 | } 335 | 336 | .sharrre .share { 337 | color:#FFFFFF; 338 | display:block; 339 | font-size:11px; 340 | height:16px; 341 | line-height:16px; 342 | margin-top:3px; 343 | padding:0; 344 | text-align:center; 345 | text-decoration:none; 346 | width:50px; 347 | background-color:#9CCE39; 348 | -webkit-border-radius:4px; 349 | -moz-border-radius:4px; 350 | border-radius:4px; 351 | } 352 | 353 | .sharrre .buttons { 354 | display: block; 355 | } 356 | 357 | .sharrre .button { 358 | float:left; 359 | margin-left:10px; 360 | 361 | &.facebook { 362 | margin-left: 0; 363 | } 364 | } 365 | 366 | .close { 367 | position: absolute; 368 | right: 10px; 369 | top: 10px; 370 | font-size: 15px; 371 | background: rgb(45, 48, 68); 372 | width: 25px; 373 | height: 25px; 374 | overflow: hidden; 375 | text-align: center; 376 | border-radius: 50%; 377 | line-height: 25px; 378 | } 379 | } 380 | 381 | .color-switcher-toggle { 382 | position: fixed; 383 | left: 26px; 384 | bottom: 33px; 385 | z-index: 2000; 386 | width: 45px; 387 | height: 45px; 388 | background: $brand-color; 389 | color: #fff; 390 | text-align: center; 391 | line-height: 45px; 392 | font-size: 23px; 393 | border-radius: 50%; 394 | transition: color 200ms ease-in-out; 395 | animation-duration: 1500ms; 396 | 397 | @include box-shadow($card-box-shadow); 398 | 399 | &:hover { 400 | cursor: pointer; 401 | color: #fff; 402 | } 403 | 404 | i { top: 3px; } 405 | } 406 | 407 | // Loader 408 | .social-wrapper { 409 | position: relative; 410 | 411 | .loading-overlay { 412 | position: absolute; 413 | top: 0; 414 | left: 0; 415 | right: 0; 416 | bottom: 0; 417 | background: #181a23; 418 | } 419 | 420 | .spinner { 421 | position: absolute; 422 | top: 50%; 423 | left: 50%; 424 | margin-left: -10px; 425 | margin-top: -10px; 426 | } 427 | } 428 | 429 | .spinner { 430 | height: 20px; 431 | width: 20px; 432 | animation: rotate 0.8s infinite linear; 433 | border: 2px solid #84899e; 434 | border-right-color: transparent; 435 | border-radius: 50%; 436 | } 437 | 438 | @keyframes rotate { 439 | 0% { transform: rotate(0deg); } 440 | 100% { transform: rotate(360deg); } 441 | } 442 | -------------------------------------------------------------------------------- /src/scss/plugins/_quill.scss: -------------------------------------------------------------------------------- 1 | // Quill Adjustments 2 | 3 | // Container 4 | // Note: Using html for specificity here 5 | html { 6 | .ql-container, 7 | .ql-toolbar { 8 | &.ql-snow { 9 | border-color: $border-color; 10 | } 11 | } 12 | 13 | .ql-container { 14 | border-bottom-left-radius: $btn-border-radius; 15 | border-bottom-right-radius: $btn-border-radius; 16 | } 17 | 18 | .ql-editor strong, 19 | .ql-editor b { 20 | font-weight: 600; 21 | } 22 | 23 | .ql-toolbar { 24 | border-top-left-radius: $btn-border-radius; 25 | border-top-right-radius: $btn-border-radius; 26 | color: $headings-color !important; 27 | 28 | .ql-fill, 29 | .ql-stroke.ql-fill { 30 | fill: $reagent-gray; 31 | } 32 | 33 | .ql-stroke { 34 | stroke: $reagent-gray; 35 | } 36 | 37 | button:hover, 38 | button:active, 39 | button:focus { 40 | .ql-fill, 41 | .ql-stroke.ql-fill { 42 | fill: $accent-color !important; 43 | } 44 | 45 | .ql-stroke { 46 | stroke: $accent-color !important; 47 | } 48 | } 49 | 50 | .ql-picker { 51 | .ql-picker-item:hover { 52 | color: $accent-color !important; 53 | } 54 | 55 | .ql-picker-options { 56 | padding: 6px 20px; 57 | border: 0 !important; 58 | box-shadow: $card-box-shadow; 59 | border-radius: $border-radius; 60 | } 61 | } 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /src/scss/shards-dashboards.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Shards Dashboard Lite UI Kit v1.0.0 3 | * Project URL: https://designrevision.com/downloads/shards-dashboard-lite 4 | * Based on: Shards UI Kit v2.0.3 (https://designrevision.com/downloads/shards) 5 | * Based on: Bootstrap v4.1.1 (https://getbootstrap.com) 6 | * Copyright 2017-* DesignRevision (https://designrevision.com) 7 | * Copyright 2017-* Catalin Vasile (contact@catalin.me) 8 | * License: MIT 9 | */ 10 | 11 | // Shards variables overrides. 12 | @import "overrides"; 13 | 14 | // Base Shards UI Kit 15 | @import "../../node_modules/shards-ui/src/scss/shards"; 16 | 17 | /* Shards Dashboards Lite Styles */ 18 | 19 | // Core 20 | @import "variables"; 21 | 22 | // Components 23 | @import "reboot"; 24 | @import "buttons"; 25 | @import "button-group"; 26 | @import "navbar"; 27 | @import "badge"; 28 | @import "alert"; 29 | @import "input-group"; 30 | @import "custom-forms"; 31 | @import "custom-sliders"; 32 | @import "images"; 33 | @import "icons"; 34 | @import "dropdown"; 35 | @import "card"; 36 | @import "utilities"; 37 | 38 | // Blocks 39 | @import "blocks/main-navbar"; 40 | @import "blocks/main-sidebar"; 41 | @import "blocks/main-content"; 42 | @import "blocks/main-footer"; 43 | @import "blocks/page-header"; 44 | 45 | // Templates 46 | @import "templates/common"; // Required common styles for all pages. 47 | @import "templates/blog-overview"; 48 | @import "templates/blog-add-new-post"; 49 | 50 | // Plugins 51 | @import "plugins/quill"; 52 | 53 | // Components 54 | @import "components/card-post"; 55 | @import "components/error"; 56 | -------------------------------------------------------------------------------- /src/scss/templates/_blog-add-new-post.scss: -------------------------------------------------------------------------------- 1 | // Blog Add New Post Template 2 | 3 | // Add New Post Form 4 | .add-new-post { 5 | &__editor { 6 | min-height: 400px; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/scss/templates/_blog-overview.scss: -------------------------------------------------------------------------------- 1 | // Blog Overview Page Template 2 | 3 | // The `Quick Draft` component. 4 | .quick-post-form { 5 | display: $qp-form-display; 6 | flex-flow: $qp-form-flex-flow; 7 | flex: $qp-form-flex; 8 | 9 | // Select second form group el (which contains the textarea). 10 | .form-group:nth-child(2) { 11 | display: flex; 12 | flex: 1; 13 | } 14 | 15 | textarea { 16 | resize: none; 17 | min-height: $qp-form-textarea-min-height; 18 | } 19 | } 20 | 21 | // Blog comments component. 22 | .blog-comments { 23 | &__avatar img { 24 | width: $bc-avatar-img-width; 25 | height: $bc-avatar-img-height; 26 | border-radius: $bc-avatar-img-border-radius; 27 | } 28 | 29 | &__item { 30 | padding: 0; 31 | border-bottom: $bc-item-border-bottom; 32 | 33 | &:last-child { 34 | border: 0; 35 | } 36 | } 37 | 38 | &__actions { 39 | font-size: $bc-actions-font-size; 40 | 41 | .btn-group button { 42 | padding: $bc-actions-button-group-padding; 43 | } 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/scss/templates/_common.scss: -------------------------------------------------------------------------------- 1 | // Common styles for blocks used across all templates. 2 | 3 | // Small stats 4 | // Used in all templates. 5 | 6 | // Default styles for the small stats. 7 | .stats-small { 8 | min-height: $small-stats-min-height; 9 | overflow: hidden !important; 10 | 11 | canvas { 12 | position: absolute; 13 | bottom: 0; 14 | } 15 | 16 | &__data { 17 | flex: 1; 18 | display: flex; 19 | justify-content: center; 20 | flex-flow: column; 21 | max-width: 50%; 22 | z-index: 1; 23 | } 24 | 25 | &__label { 26 | font-size: $small-stats-label-font-size; 27 | letter-spacing: $small-stats-label-letter-spacing; 28 | color: $small-stats-label-color; 29 | } 30 | 31 | &__value { 32 | font-family: $small-stats-value-font-family; 33 | font-size: $small-stats-value-font-size; 34 | font-weight: $small-stats-value-font-weight; 35 | } 36 | 37 | &__percentage { 38 | position: relative; 39 | display: table; 40 | margin-left: auto; 41 | padding-left: $small-stats-percentage-padding-left; 42 | 43 | &--increase, 44 | &--decrease { 45 | font-size: $small-stats-percentage-font-size; 46 | 47 | &::before { 48 | content: ""; 49 | width: 0.75rem; 50 | height: 0.375rem; 51 | position: absolute; 52 | left: 0; 53 | top: 50%; 54 | transform: translateY(-50%); 55 | background-position: center center; 56 | background-repeat: no-repeat; 57 | } 58 | } 59 | 60 | &--increase { 61 | color: theme-color('success'); 62 | &::before { 63 | background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMTdjNjcxIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gPHBhdGggZD0iTTcgMTRsNS01IDUgNXoiLz4gPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPiA8L3N2Zz4=); 64 | } 65 | } 66 | 67 | &--decrease { 68 | color: theme-color('danger'); 69 | &::before { 70 | background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjYzQxODNjIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTcgMTBsNSA1IDUtNXoiLz4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==); 71 | } 72 | } 73 | } 74 | 75 | // Stats Small - Alternate 1 76 | // Follow the same structure, but with the content centered. 77 | &--1 { 78 | .stats-small { 79 | &__data { 80 | max-width: $small-stats-1-data-max-width; 81 | } 82 | 83 | &__percentage { 84 | margin: $small-stats-1-percentage-margin; 85 | } 86 | 87 | &__value { 88 | font-size: $small-stats-1-value-font-size; 89 | } 90 | 91 | &__label { 92 | font-size: $small-stats-1-label-font-size; 93 | } 94 | 95 | &__percentage { 96 | font-size: $small-stats-1-percentage-font-size; 97 | } 98 | } 99 | 100 | canvas { 101 | opacity: $small-stats-1-chart-opacity; 102 | } 103 | } 104 | } 105 | 106 | // Adjust the small stats cards in case they're used inside card groups. 107 | .card-group .stats-small { 108 | position: relative; 109 | overflow: hidden; 110 | } 111 | -------------------------------------------------------------------------------- /src/scss/utilities/_borders.scss: -------------------------------------------------------------------------------- 1 | // Borders adjustments 2 | .border { border: 1px solid $border-color !important; } 3 | .border-top { border-top: 1px solid $border-color !important; } 4 | .border-right { border-right: 1px solid $border-color !important; } 5 | .border-bottom { border-bottom: 1px solid $border-color !important; } 6 | .border-left { border-left: 1px solid $border-color !important; } 7 | 8 | // Border radius 9 | 10 | .rounded { 11 | border-radius: 5px !important; 12 | } 13 | 14 | .rounded-top { 15 | border-top-left-radius: 5px !important; 16 | border-top-right-radius: 5px !important; 17 | } 18 | 19 | .rounded-right { 20 | border-top-right-radius: 5px !important; 21 | border-bottom-right-radius: 5px !important; 22 | } 23 | 24 | .rounded-bottom { 25 | border-bottom-right-radius: 5px !important; 26 | border-bottom-left-radius: 5px !important; 27 | } 28 | 29 | .rounded-left { 30 | border-top-left-radius: 5px !important; 31 | border-bottom-left-radius: 5px !important; 32 | } 33 | 34 | // Accent color border variation 35 | .border-accent { 36 | border-color: $accent-color !important; 37 | } 38 | -------------------------------------------------------------------------------- /src/scss/utilities/_general.scss: -------------------------------------------------------------------------------- 1 | // General utilities 2 | 3 | // Overflow helpers 4 | .overflow { 5 | &-hidden { overflow: hidden; } 6 | &-visible { overflow: visible; } 7 | &-scroll { overflow: scroll; } 8 | &-auto { overflow: auto; } 9 | } 10 | 11 | // Remove shadows 12 | .no-shadow { 13 | box-shadow: none !important; 14 | } 15 | -------------------------------------------------------------------------------- /src/scss/utilities/_text.scss: -------------------------------------------------------------------------------- 1 | // Text utilities adjustments 2 | 3 | // Create text color variants for the new grays 4 | @each $color, $value in $new-grays { 5 | @include text-emphasis-variant(".text-#{$color}", $value); 6 | } 7 | 8 | // Create text color variants for the accent color 9 | @include text-emphasis-variant(".text-accent", $accent-color); 10 | 11 | // Light text adjustments 12 | .text-light { 13 | color: $text-light-color !important; 14 | } 15 | 16 | // Semibold text 17 | .text-semibold { 18 | font-weight: $text-semibold-font-weight; 19 | } 20 | -------------------------------------------------------------------------------- /src/utils/chart.js: -------------------------------------------------------------------------------- 1 | import Chart from 'chart.js'; 2 | 3 | Chart.defaults.LineWithLine = Chart.defaults.line; 4 | Chart.controllers.LineWithLine = Chart.controllers.line.extend({ 5 | draw(ease) { 6 | Chart.controllers.line.prototype.draw.call(this, ease); 7 | 8 | if (this.chart.tooltip._active && this.chart.tooltip._active.length) { 9 | const activePoint = this.chart.tooltip._active[0]; 10 | const { ctx } = this.chart; 11 | const { x } = activePoint.tooltipPosition(); 12 | const topY = this.chart.scales['y-axis-0'].top; 13 | const bottomY = this.chart.scales['y-axis-0'].bottom; 14 | 15 | // Draw the line 16 | ctx.save(); 17 | ctx.beginPath(); 18 | ctx.moveTo(x, topY); 19 | ctx.lineTo(x, bottomY); 20 | ctx.lineWidth = 0.5; 21 | ctx.strokeStyle = '#ddd'; 22 | ctx.stroke(); 23 | ctx.restore(); 24 | } 25 | }, 26 | }); 27 | 28 | export default Chart; 29 | -------------------------------------------------------------------------------- /src/utils/index.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DesignRevision/shards-dashboard-vue/db291be87ecb6ce54925e6d17e8d6cd1928a02ee/src/utils/index.js -------------------------------------------------------------------------------- /src/views/AddNewPost.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 42 | -------------------------------------------------------------------------------- /src/views/BlogPosts.vue: -------------------------------------------------------------------------------- 1 | 98 | 99 | 230 | 231 | -------------------------------------------------------------------------------- /src/views/ComponentsOverview.vue: -------------------------------------------------------------------------------- 1 | 454 | -------------------------------------------------------------------------------- /src/views/Errors.vue: -------------------------------------------------------------------------------- 1 | 14 | -------------------------------------------------------------------------------- /src/views/PersonalBlog.vue: -------------------------------------------------------------------------------- 1 | 48 | 49 | 168 | 169 | -------------------------------------------------------------------------------- /src/views/Tables.vue: -------------------------------------------------------------------------------- 1 | 130 | -------------------------------------------------------------------------------- /src/views/UserProfileLite.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 35 | 36 | --------------------------------------------------------------------------------