├── .github └── workflows │ └── main.yml ├── .gitignore ├── CHANGELOG.md ├── ISSUE_TEMPLATE.md ├── LICENSE.md ├── README.md ├── angular.json ├── documentation ├── css │ ├── bootstrap.min.css │ ├── demo-documentation.css │ └── material-dashboard.css ├── js │ ├── arrive.min.js │ ├── bootstrap-notify.js │ ├── bootstrap.min.js │ ├── chartist.min.js │ ├── demo.js │ ├── initMenu.js │ ├── jquery-3.2.1.min.js │ ├── material-dashboard.js │ └── material.min.js └── tutorial-components.html ├── e2e ├── app.e2e-spec.ts ├── app.po.ts └── tsconfig.e2e.json ├── karma.conf.js ├── package.json ├── protractor.conf.js ├── src ├── app │ ├── app.component.css │ ├── app.component.html │ ├── app.component.spec.ts │ ├── app.component.ts │ ├── app.module.ts │ ├── app.routing.ts │ ├── components │ │ ├── components.module.ts │ │ ├── footer │ │ │ ├── footer.component.css │ │ │ ├── footer.component.html │ │ │ ├── footer.component.spec.ts │ │ │ └── footer.component.ts │ │ ├── navbar │ │ │ ├── navbar.component.css │ │ │ ├── navbar.component.html │ │ │ ├── navbar.component.spec.ts │ │ │ └── navbar.component.ts │ │ └── sidebar │ │ │ ├── sidebar.component.css │ │ │ ├── sidebar.component.html │ │ │ ├── sidebar.component.spec.ts │ │ │ └── sidebar.component.ts │ ├── dashboard │ │ ├── dashboard.component.css │ │ ├── dashboard.component.html │ │ ├── dashboard.component.spec.ts │ │ └── dashboard.component.ts │ ├── icons │ │ ├── icons.component.css │ │ ├── icons.component.html │ │ ├── icons.component.spec.ts │ │ └── icons.component.ts │ ├── layouts │ │ └── admin-layout │ │ │ ├── admin-layout.component.html │ │ │ ├── admin-layout.component.scss │ │ │ ├── admin-layout.component.spec.ts │ │ │ ├── admin-layout.component.ts │ │ │ ├── admin-layout.module.ts │ │ │ └── admin-layout.routing.ts │ ├── maps │ │ ├── maps.component.css │ │ ├── maps.component.html │ │ ├── maps.component.spec.ts │ │ └── maps.component.ts │ ├── notifications │ │ ├── notifications.component.css │ │ ├── notifications.component.html │ │ ├── notifications.component.spec.ts │ │ └── notifications.component.ts │ ├── table-list │ │ ├── table-list.component.css │ │ ├── table-list.component.html │ │ ├── table-list.component.spec.ts │ │ └── table-list.component.ts │ ├── typography │ │ ├── typography.component.css │ │ ├── typography.component.html │ │ ├── typography.component.spec.ts │ │ └── typography.component.ts │ ├── upgrade │ │ ├── upgrade.component.css │ │ ├── upgrade.component.html │ │ ├── upgrade.component.spec.ts │ │ └── upgrade.component.ts │ └── user-profile │ │ ├── user-profile.component.css │ │ ├── user-profile.component.html │ │ ├── user-profile.component.spec.ts │ │ └── user-profile.component.ts ├── assets │ ├── .gitkeep │ ├── css │ │ └── demo.css │ ├── img │ │ ├── angular.png │ │ ├── angular2-logo-red.png │ │ ├── angular2-logo.png │ │ ├── apple-icon.png │ │ ├── cover.jpeg │ │ ├── faces │ │ │ └── marc.jpg │ │ ├── favicon.png │ │ ├── gears.gif │ │ ├── html.png │ │ ├── mask.png │ │ ├── new_logo.png │ │ ├── sidebar-1.jpg │ │ ├── sidebar-2.jpg │ │ ├── sidebar-3.jpg │ │ ├── sidebar-4.jpg │ │ └── tim_80x80.png │ └── scss │ │ ├── core │ │ ├── _alerts.scss │ │ ├── _angular-modal.scss │ │ ├── _buttons.scss │ │ ├── _cards.scss │ │ ├── _checkboxes.scss │ │ ├── _dropdown.scss │ │ ├── _example-pages.scss │ │ ├── _fixed-plugin.scss │ │ ├── _footers.scss │ │ ├── _forms.scss │ │ ├── _images.scss │ │ ├── _input-group.scss │ │ ├── _misc.scss │ │ ├── _mixins.scss │ │ ├── _navbar.scss │ │ ├── _popover.scss │ │ ├── _popups.scss │ │ ├── _radios.scss │ │ ├── _responsive.scss │ │ ├── _ripples.scss │ │ ├── _sidebar-and-main-panel.scss │ │ ├── _tables.scss │ │ ├── _tabs.scss │ │ ├── _togglebutton.scss │ │ ├── _tooltip.scss │ │ ├── _type.scss │ │ ├── _variables.scss │ │ ├── cards │ │ │ ├── _card-plain.scss │ │ │ ├── _card-profile.scss │ │ │ └── _card-stats.scss │ │ ├── mixins │ │ │ ├── _alert.scss │ │ │ ├── _animations.scss │ │ │ ├── _breakpoints.scss │ │ │ ├── _buttons.scss │ │ │ ├── _chartist.scss │ │ │ ├── _colored-shadows.scss │ │ │ ├── _drawer.scss │ │ │ ├── _forms.scss │ │ │ ├── _hover.scss │ │ │ ├── _layout.scss │ │ │ ├── _navbar-colors.scss │ │ │ ├── _navs.scss │ │ │ ├── _sidebar-color.scss │ │ │ ├── _transparency.scss │ │ │ ├── _type.scss │ │ │ ├── _utilities.scss │ │ │ ├── _variables.scss │ │ │ └── _vendor-prefixes.scss │ │ ├── plugins │ │ │ ├── _animate.scss │ │ │ ├── _chartist.scss │ │ │ └── _perfect-scrollbar.scss │ │ └── variables │ │ │ ├── _body.scss │ │ │ ├── _bootstrap-material-design-base.scss │ │ │ ├── _bootstrap-material-design.scss │ │ │ ├── _brand.scss │ │ │ ├── _buttons.scss │ │ │ ├── _card.scss │ │ │ ├── _code.scss │ │ │ ├── _colors-map.scss │ │ │ ├── _colors.scss │ │ │ ├── _custom-forms.scss │ │ │ ├── _drawer.scss │ │ │ ├── _dropdown.scss │ │ │ ├── _forms.scss │ │ │ ├── _layout.scss │ │ │ ├── _list-group.scss │ │ │ ├── _menu.scss │ │ │ ├── _modals.scss │ │ │ ├── _nav.scss │ │ │ ├── _pagination.scss │ │ │ ├── _shadow.scss │ │ │ ├── _snackbar.scss │ │ │ ├── _spacing.scss │ │ │ ├── _state.scss │ │ │ ├── _tables.scss │ │ │ ├── _tooltip.scss │ │ │ └── _type.scss │ │ └── material-dashboard.scss ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── favicon.ico ├── index.html ├── main.ts ├── polyfills.ts ├── styles.css ├── test.ts ├── tsconfig.app.json ├── tsconfig.spec.json └── typings.d.ts ├── tsconfig.json └── tslint.json /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | name: Autocloser 2 | on: [issues] 3 | jobs: 4 | autoclose: 5 | runs-on: ubuntu-latest 6 | steps: 7 | - name: Issue auto-closer 8 | uses: roots/issue-closer-action@v1.1 9 | with: 10 | repo-token: ${{ secrets.GITHUB_TOKEN }} 11 | issue-close-message: "@${issue.user.login} this issue was automatically closed because it did not follow the bellow rules:\n\n
\n\n\n\nIMPORTANT: Please use the following link to create a new issue:\n\nhttps://www.creative-tim.com/new-issue/material-dashboard-angular2\n\n**If your issue was not created using the app above, it will be closed immediately.**\n\n\n\nLove Creative Tim? Do you need Angular, React, Vuejs or HTML? You can visit:\n👉  https://www.creative-tim.com/bundles\n👉  https://www.creative-tim.com\n\n\n
\n\n" 12 | issue-pattern: (\#\#\# Version([\S\s.*]*?)\#\#\# Reproduction link([\S\s.*]*?)\#\#\# Operating System([\S\s.*]*?)\#\#\# Device([\S\s.*]*?)\#\#\# Browser & Version([\S\s.*]*?)\#\#\# Steps to reproduce([\S\s.*]*?)\#\#\# What is expected([\S\s.*]*?)\#\#\# What is actually happening([\S\s.*]*?)---([\S\s.*]*?)\#\#\# Solution([\S\s.*]*?)\#\#\# Additional comments([\S\s.*]*?)\<\!-- generated by creative-tim-issues\. DO NOT REMOVE --\>)|(\#\#\# What is your enhancement([\S\s.*]*?)\<\!-- generated by creative-tim-issues\. DO NOT REMOVE --\>) 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | 8 | # dependencies 9 | /node_modules 10 | 11 | # IDEs and editors 12 | /.idea 13 | .project 14 | .classpath 15 | .c9/ 16 | *.launch 17 | .settings/ 18 | *.sublime-workspace 19 | 20 | # IDE - VSCode 21 | .vscode/* 22 | !.vscode/settings.json 23 | !.vscode/tasks.json 24 | !.vscode/launch.json 25 | !.vscode/extensions.json 26 | 27 | # misc 28 | /.sass-cache 29 | /connect.lock 30 | /coverage 31 | /libpeerconnection.log 32 | npm-debug.log 33 | testem.log 34 | /typings 35 | 36 | # e2e 37 | /e2e/*.js 38 | /e2e/*.map 39 | 40 | # System Files 41 | .DS_Store 42 | Thumbs.db 43 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## [2.6.0] - 2021-07-15 2 | ### Updates 3 | - update to Angular 12 4 | - update all dependencies to match Angular 12 version 5 | 6 | When you build and serve your app it is possible that some warnings to appear on your terminal. Those will NOT affect your product. 7 | 8 | ## [2.5.0] - 2020-10-07 9 | ### Updates 10 | - update to Angular 10 11 | - update all dependencies to match Angular 10 version 12 | 13 | 14 | ## [2.4.0] - 2020-03-05 15 | ### Updates 16 | - update to Angular 9 17 | - update all dependencies to match Angular 9 version 18 | 19 | ## [2.3.0] - 2019-06-11 20 | ### Updates 21 | - update to Angular 8 22 | - update all dependencies to match Angular 8 version 23 | ``` 24 | @agm/core 1.0.0-beta.5 → 1.0.0-beta.6 25 | @angular/animations 7.0.2 → 8.0.0 26 | @angular/cdk 7.0.2 → 8.0.1 27 | @angular/common 7.0.2 → 8.0.0 28 | @angular/compiler 7.0.2 → 8.0.0 29 | @angular/core 7.0.2 → 8.0.0 30 | @angular/forms 7.0.2 → 8.0.0 31 | @angular/http 7.0.2 → 7.2.15 32 | @angular/material 7.0.2 → 8.0.1 33 | @angular/platform-browser 7.0.2 → 8.0.0 34 | @angular/platform-browser-dynamic 7.0.2 → 8.0.0 35 | @angular/platform-server 7.0.2 → 8.0.0 36 | @angular/router 7.0.2 → 8.0.0 37 | ajv 6.4.0 → 6.10.0 38 | bootstrap 4.1.0 → 4.3.1 39 | bootstrap-material-design 4.1.1 → 4.1.2 40 | chartist 0.11.0 → 0.11.2 41 | core-js 2.4.1 → 3.1.3 42 | express 4.16.3 → 4.17.1 43 | googleapis 28.1.0 → 40.0.0 44 | jquery 3.2.1 → 3.4.1 45 | moment 2.22.1 → 2.24.0 46 | perfect-scrollbar 1.1.0 → 1.4.0 47 | popper.js 1.14.3 → 1.15.0 48 | rxjs 6.3.3 → 6.5.2 49 | rxjs-compat 6.3.3 → 6.5.2 50 | zone.js 0.8.26 → 0.9.1 51 | @angular-devkit/build-angular 0.6.3 → 0.800.2 52 | @angular/cli 7.0.2 → 8.0.2 53 | @angular/compiler-cli 7.0.2 → 8.0.0 54 | @angular/language-service 7.0.2 → 8.0.0 55 | @types/bootstrap 3.3.32 → 4.3.0 56 | @types/chartist 0.9.34 → 0.9.46 57 | @types/googlemaps 3.30.8 → 3.36.4 58 | @types/jasmine 2.5.38 → 3.3.13 59 | @types/jquery 1.10.31 → 3.3.29 60 | @types/node 6.0.73 → 12.0.7 61 | codelyzer 4.2.1 → 5.1.0 62 | jasmine-core 3.3.0 → 3.4.0 63 | karma 2.0.0 → 4.1.0 64 | karma-cli 1.0.1 → 2.0.0 65 | karma-coverage-istanbul-reporter 1.4.2 → 2.0.5 66 | karma-jasmine 1.1.1 → 2.0.1 67 | karma-jasmine-html-reporter 1.4.0 → 1.4.2 68 | protractor 5.3.1 → 5.4.2 69 | ts-node 5.0.1 → 8.2.0 70 | tslint 5.9.1 → 5.17.0 71 | typescript 3.1.6 → 3.4.5 72 | ``` 73 | ### Bug fixing 74 | - browser console error 75 | ``` 76 | href="#pablo" -> href="javascript:void(0)" 77 | href="#" -> href="javascript:void(0)" 78 | ``` 79 | - form-validation error from the `_forms.scss` file 80 | ``` 81 | @include form-validation-state("valid", $label-color); -> @include form-validation-state("valid", $label-color, $form-feedback-icon-valid); 82 | ``` 83 | - added hash for google url validation 84 | 85 | ## [2.2.0] - 2018-11-14 86 | ### Changes 87 | - update to Angular 7 88 | - update all dependencies to match Angular 7 version 89 | 90 | ## [2.1.1] - 2018-05-23 91 | ### Fixes 92 | - changed some links 93 | 94 | ## [2.1.0] - 2018-04-27 95 | ### Fixes 96 | - changed file structure 97 | - moved documentation online 98 | 99 | ## [2.0.0] - 2018-04-20 100 | ### Fixes 101 | - added bootstrap 4 102 | - added angular 5 103 | 104 | ## [1.4.2] - 2017-10-01 105 | ### Fixes 106 | - added Perfect Scrollbar 107 | - added scrollTop on route change 108 | - added closeSidebar on mobile 109 | - autocompile scss files 110 | - fixes for IE 111 | - update package dependencies to 4.4.4 112 | 113 | ## [1.4.1] - 2017-09-19 114 | ### Material 115 | - added material.init() 116 | - fixed input float problem 117 | - fixed checkboxes in tabs 118 | 119 | ## [1.4.0] - 2017-08-23 120 | ### Changes for Angular 4 121 | - added angular-cli 122 | - update to Angular 4 123 | 124 | ## [v1.3.0] 2017-08-23 125 | ### skipped for sync with Angular 4 version convention 126 | 127 | ## [1.2.0] - 2017-04-05 128 | ### Added 129 | - added Upgrade to PRO page 130 | - update package 131 | - made sidebar dynamic 132 | 133 | ## [1.1.1] - 2017-03-21 134 | ### Added 135 | - added "@types/core-js": "0.9.35" in package 136 | 137 | ## [1.1.0] - 2017-03-20 138 | ### small fix 139 | 140 | ## [1.0.0] - 2017-01-30 141 | ### initial Release 142 | -------------------------------------------------------------------------------- /ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Creative Tim (www.creative-tim.com) 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 | -------------------------------------------------------------------------------- /documentation/js/arrive.min.js: -------------------------------------------------------------------------------- 1 | /* 2 | * arrive.js 3 | * v2.4.1 4 | * https://github.com/uzairfarooq/arrive 5 | * MIT licensed 6 | * 7 | * Copyright (c) 2014-2017 Uzair Farooq 8 | */ 9 | 10 | var Arrive=function(e,t,n){"use strict";function r(e,t,n){l.addMethod(t,n,e.unbindEvent),l.addMethod(t,n,e.unbindEventWithSelectorOrCallback),l.addMethod(t,n,e.unbindEventWithSelectorAndCallback)}function i(e){e.arrive=f.bindEvent,r(f,e,"unbindArrive"),e.leave=d.bindEvent,r(d,e,"unbindLeave")}if(e.MutationObserver&&"undefined"!=typeof HTMLElement){var o=0,l=function(){var t=HTMLElement.prototype.matches||HTMLElement.prototype.webkitMatchesSelector||HTMLElement.prototype.mozMatchesSelector||HTMLElement.prototype.msMatchesSelector;return{matchesSelector:function(e,n){return e instanceof HTMLElement&&t.call(e,n)},addMethod:function(e,t,r){var i=e[t];e[t]=function(){return r.length==arguments.length?r.apply(this,arguments):"function"==typeof i?i.apply(this,arguments):n}},callCallbacks:function(e,t){t&&t.options.onceOnly&&1==t.firedElems.length&&(e=[e[0]]);for(var n,r=0;n=e[r];r++)n&&n.callback&&n.callback.call(n.elem,n.elem);t&&t.options.onceOnly&&1==t.firedElems.length&&t.me.unbindEventWithSelectorAndCallback.call(t.target,t.selector,t.callback)},checkChildNodesRecursively:function(e,t,n,r){for(var i,o=0;i=e[o];o++)n(i,t,r)&&r.push({callback:t.callback,elem:i}),i.childNodes.length>0&&l.checkChildNodesRecursively(i.childNodes,t,n,r)},mergeArrays:function(e,t){var n,r={};for(n in e)e.hasOwnProperty(n)&&(r[n]=e[n]);for(n in t)t.hasOwnProperty(n)&&(r[n]=t[n]);return r},toElementsArray:function(t){return n===t||"number"==typeof t.length&&t!==e||(t=[t]),t}}}(),c=function(){var e=function(){this._eventsBucket=[],this._beforeAdding=null,this._beforeRemoving=null};return e.prototype.addEvent=function(e,t,n,r){var i={target:e,selector:t,options:n,callback:r,firedElems:[]};return this._beforeAdding&&this._beforeAdding(i),this._eventsBucket.push(i),i},e.prototype.removeEvent=function(e){for(var t,n=this._eventsBucket.length-1;t=this._eventsBucket[n];n--)if(e(t)){this._beforeRemoving&&this._beforeRemoving(t);var r=this._eventsBucket.splice(n,1);r&&r.length&&(r[0].callback=null)}},e.prototype.beforeAdding=function(e){this._beforeAdding=e},e.prototype.beforeRemoving=function(e){this._beforeRemoving=e},e}(),a=function(t,r){var i=new c,o=this,a={fireOnAttributesModification:!1};return i.beforeAdding(function(n){var i,l=n.target;(l===e.document||l===e)&&(l=document.getElementsByTagName("html")[0]),i=new MutationObserver(function(e){r.call(this,e,n)});var c=t(n.options);i.observe(l,c),n.observer=i,n.me=o}),i.beforeRemoving(function(e){e.observer.disconnect()}),this.bindEvent=function(e,t,n){t=l.mergeArrays(a,t);for(var r=l.toElementsArray(this),o=0;o0?l.checkChildNodesRecursively(n,t,r,o):"attributes"===e.type&&r(i,t,o)&&o.push({callback:t.callback,elem:i}),l.callCallbacks(o,t)})}function r(e,t){return l.matchesSelector(e,t.selector)&&(e._id===n&&(e._id=o++),-1==t.firedElems.indexOf(e._id))?(t.firedElems.push(e._id),!0):!1}var i={fireOnAttributesModification:!1,onceOnly:!1,existing:!1};f=new a(e,t);var c=f.bindEvent;return f.bindEvent=function(e,t,r){n===r?(r=t,t=i):t=l.mergeArrays(i,t);var o=l.toElementsArray(this);if(t.existing){for(var a=[],s=0;s0&&l.checkChildNodesRecursively(n,t,r,i),l.callCallbacks(i,t)})}function r(e,t){return l.matchesSelector(e,t.selector)}var i={};d=new a(e,t);var o=d.bindEvent;return d.bindEvent=function(e,t,r){n===r?(r=t,t=i):t=l.mergeArrays(i,t),o.call(this,e,t,r)},d},f=new s,d=new u;t&&i(t.fn),i(HTMLElement.prototype),i(NodeList.prototype),i(HTMLCollection.prototype),i(HTMLDocument.prototype),i(Window.prototype);var h={};return r(f,h,"unbindAllArrive"),r(d,h,"unbindAllLeave"),h}}(window,"undefined"==typeof jQuery?null:jQuery,void 0); 11 | -------------------------------------------------------------------------------- /documentation/js/material-dashboard.js: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Material Dashboard Angular 2 - V1.2.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/material-dashboard-angular2 8 | * Copyright 2017 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/material-dashboard-angular/blob/master/LICENSE.md) 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | 15 | */ 16 | 17 | 18 | var searchVisible = 0; 19 | var transparent = true; 20 | 21 | var transparentDemo = true; 22 | var fixedTop = false; 23 | 24 | var seq = 0, delays = 80, durations = 500; 25 | var seq2 = 0, delays2 = 80, durations2 = 500; 26 | 27 | $(document).ready(function(){ 28 | 29 | $sidebar = $('.sidebar'); 30 | 31 | $.material.init(); 32 | 33 | window_width = $(window).width(); 34 | // check if there is an image set for the sidebar's background 35 | // Activate the tooltips 36 | $('[rel="tooltip"]').tooltip(); 37 | 38 | 39 | $('.form-control').on("focus", function(){ 40 | $(this).parent('.input-group').addClass("input-group-focus"); 41 | }).on("blur", function(){ 42 | $(this).parent(".input-group").removeClass("input-group-focus"); 43 | }); 44 | 45 | }); 46 | 47 | // activate collapse right menu when the windows is resized 48 | $(window).resize(function(){ 49 | // reset the seq for charts drawing animations 50 | seq = seq2 = 0; 51 | 52 | }); 53 | 54 | md = { 55 | misc:{ 56 | navbar_menu_visible: 0, 57 | active_collapse: true, 58 | disabled_collapse_init: 0, 59 | }, 60 | 61 | 62 | checkScrollForTransparentNavbar: debounce(function() { 63 | if($(document).scrollTop() > 381 ) { 64 | if(transparent) { 65 | transparent = false; 66 | $('.navbar-color-on-scroll').removeClass('navbar-transparent'); 67 | $('.navbar-title').removeClass('hidden'); 68 | } 69 | } else { 70 | if( !transparent ) { 71 | transparent = true; 72 | $('.navbar-color-on-scroll').addClass('navbar-transparent'); 73 | $('.navbar-title').addClass('hidden'); 74 | } 75 | } 76 | }, 17), 77 | 78 | 79 | startAnimationForLineChart: function(chart){ 80 | 81 | chart.on('draw', function(data) { 82 | if(data.type === 'line' || data.type === 'area') { 83 | data.element.animate({ 84 | d: { 85 | begin: 600, 86 | dur: 700, 87 | from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(), 88 | to: data.path.clone().stringify(), 89 | easing: Chartist.Svg.Easing.easeOutQuint 90 | } 91 | }); 92 | } else if(data.type === 'point') { 93 | seq++; 94 | data.element.animate({ 95 | opacity: { 96 | begin: seq * delays, 97 | dur: durations, 98 | from: 0, 99 | to: 1, 100 | easing: 'ease' 101 | } 102 | }); 103 | } 104 | }); 105 | 106 | seq = 0; 107 | }, 108 | startAnimationForBarChart: function(chart){ 109 | 110 | chart.on('draw', function(data) { 111 | if(data.type === 'bar'){ 112 | seq2++; 113 | data.element.animate({ 114 | opacity: { 115 | begin: seq2 * delays2, 116 | dur: durations2, 117 | from: 0, 118 | to: 1, 119 | easing: 'ease' 120 | } 121 | }); 122 | } 123 | }); 124 | 125 | seq2 = 0; 126 | } 127 | } 128 | 129 | 130 | // Returns a function, that, as long as it continues to be invoked, will not 131 | // be triggered. The function will be called after it stops being called for 132 | // N milliseconds. If `immediate` is passed, trigger the function on the 133 | // leading edge, instead of the trailing. 134 | 135 | function debounce(func, wait, immediate) { 136 | var timeout; 137 | return function() { 138 | var context = this, args = arguments; 139 | clearTimeout(timeout); 140 | timeout = setTimeout(function() { 141 | timeout = null; 142 | if (!immediate) func.apply(context, args); 143 | }, wait); 144 | if (immediate && !timeout) func.apply(context, args); 145 | }; 146 | }; 147 | -------------------------------------------------------------------------------- /documentation/tutorial-components.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Material Dashboard Angular by Creative Tim 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 105 | 106 |
107 |
108 |
109 |
110 |

Material Dashboard Angular 111 |

112 | 113 |

Documentation v2.6.0

114 |
115 | View documentation 116 |
117 |
118 |
119 |
120 | 121 | 122 | 153 | 154 | 155 | -------------------------------------------------------------------------------- /e2e/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { MaterialDashboardAngularPage } from './app.po'; 2 | 3 | describe('material-dashboard-angular App', () => { 4 | let page: MaterialDashboardAngularPage; 5 | 6 | beforeEach(() => { 7 | page = new MaterialDashboardAngularPage(); 8 | }); 9 | 10 | it('should display message saying app works', () => { 11 | page.navigateTo(); 12 | expect(page.getParagraphText()).toEqual('app works!'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /e2e/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, element, by } from 'protractor'; 2 | 3 | export class MaterialDashboardAngularPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getParagraphText() { 9 | return element(by.css('app-root h1')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /e2e/tsconfig.e2e.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/e2e", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types":[ 8 | "jasmine", 9 | "node" 10 | ] 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/0.13/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client:{ 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | files: [ 19 | 20 | ], 21 | preprocessors: { 22 | 23 | }, 24 | mime: { 25 | 'text/x-typescript': ['ts','tsx'] 26 | }, 27 | coverageIstanbulReporter: { 28 | dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ], 29 | fixWebpackSourcePaths: true 30 | }, 31 | angularCli: { 32 | environment: 'dev' 33 | }, 34 | reporters: config.angularCli && config.angularCli.codeCoverage 35 | ? ['progress', 'coverage-istanbul'] 36 | : ['progress', 'kjhtml'], 37 | port: 9876, 38 | colors: true, 39 | logLevel: config.LOG_INFO, 40 | autoWatch: true, 41 | browsers: ['Chrome'], 42 | singleRun: false 43 | }); 44 | }; 45 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "material-dashboard-angular", 3 | "version": "2.6.0", 4 | "license": "MIT", 5 | "scripts": { 6 | "ng": "ng", 7 | "start": "ng serve", 8 | "build": "ng build", 9 | "test": "ng test", 10 | "lint": "ng lint", 11 | "e2e": "ng e2e", 12 | "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && ng serve -o" 13 | }, 14 | "engines": { 15 | "node": "6.11.1", 16 | "npm": "3.10.9" 17 | }, 18 | "private": true, 19 | "dependencies": { 20 | "@agm/core": "^1.1.0", 21 | "@angular/animations": "12.1.2", 22 | "@angular/cdk": "12.1.2", 23 | "@angular/common": "12.1.2", 24 | "@angular/compiler": "12.1.2", 25 | "@angular/core": "12.1.2", 26 | "@angular/forms": "12.1.2", 27 | "@angular/material": "12.1.2", 28 | "@angular/platform-browser": "12.1.2", 29 | "@angular/platform-browser-dynamic": "12.1.2", 30 | "@angular/platform-server": "12.1.2", 31 | "@angular/router": "12.1.2", 32 | "ajv": "8.6.1", 33 | "arrive": "2.4.1", 34 | "bootstrap": "4.5.2", 35 | "bootstrap-material-design": "4.1.3", 36 | "bootstrap-notify": "3.1.3", 37 | "chartist": "0.11.4", 38 | "classlist.js": "1.1.20150312", 39 | "core-js": "3.15.2", 40 | "eslint": "^7.30.0", 41 | "express": "4.17.1", 42 | "googleapis": "81.0.0", 43 | "hammerjs": "2.0.8", 44 | "jquery": "3.6.0", 45 | "moment": "2.29.1", 46 | "perfect-scrollbar": "1.5.0", 47 | "popper.js": "1.16.1", 48 | "rxjs": "6.6.3", 49 | "rxjs-compat": "6.6.3", 50 | "web-animations-js": "2.3.2", 51 | "zone.js": "0.11.4" 52 | }, 53 | "devDependencies": { 54 | "@angular-devkit/build-angular": "12.1.2", 55 | "@angular/cli": "12.1.2", 56 | "@angular/compiler-cli": "12.1.2", 57 | "@angular/language-service": "12.1.2", 58 | "@types/bootstrap": "4.5.0", 59 | "@types/chartist": "0.11.1", 60 | "@types/googlemaps": "3.43.3", 61 | "@types/jasmine": "3.8.1", 62 | "@types/jquery": "3.5.6", 63 | "@types/node": "16.3.2", 64 | "codelyzer": "6.0.2", 65 | "jasmine-core": "3.8.0", 66 | "jasmine-spec-reporter": "7.0.0", 67 | "karma": "6.3.4", 68 | "karma-chrome-launcher": "3.1.0", 69 | "karma-cli": "2.0.0", 70 | "karma-coverage-istanbul-reporter": "3.0.3", 71 | "karma-jasmine": "4.0.1", 72 | "karma-jasmine-html-reporter": "1.7.0", 73 | "protractor": "7.0.0", 74 | "sass": "1.32.13", 75 | "ts-node": "10.1.0", 76 | "tslint": "6.1.3", 77 | "typescript": "4.3.5" 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /protractor.conf.js: -------------------------------------------------------------------------------- 1 | // Protractor configuration file, see link for more information 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts 3 | 4 | const { SpecReporter } = require('jasmine-spec-reporter'); 5 | 6 | exports.config = { 7 | allScriptsTimeout: 11000, 8 | specs: [ 9 | './e2e/**/*.e2e-spec.ts' 10 | ], 11 | capabilities: { 12 | 'browserName': 'chrome' 13 | }, 14 | directConnect: true, 15 | baseUrl: 'http://localhost:4200/', 16 | framework: 'jasmine', 17 | jasmineNodeOpts: { 18 | showColors: true, 19 | defaultTimeoutInterval: 30000, 20 | print: function() {} 21 | }, 22 | beforeLaunch: function() { 23 | require('ts-node').register({ 24 | project: 'e2e/tsconfig.e2e.json' 25 | }); 26 | }, 27 | onPrepare() { 28 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 29 | } 30 | }; 31 | -------------------------------------------------------------------------------- /src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ashutosh102/Angular_Dashboard_example/ee0f8433f4f59cd3eea14ea1cc947e1d898621d8/src/app/app.component.css -------------------------------------------------------------------------------- /src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, async } from '@angular/core/testing'; 2 | 3 | import { AppComponent } from './app.component'; 4 | 5 | describe('AppComponent', () => { 6 | beforeEach(async(() => { 7 | TestBed.configureTestingModule({ 8 | declarations: [ 9 | AppComponent 10 | ], 11 | }).compileComponents(); 12 | })); 13 | 14 | it('should create the app', async(() => { 15 | const fixture = TestBed.createComponent(AppComponent); 16 | const app = fixture.debugElement.componentInstance; 17 | expect(app).toBeTruthy(); 18 | })); 19 | 20 | it(`should have as title 'app works!'`, async(() => { 21 | const fixture = TestBed.createComponent(AppComponent); 22 | const app = fixture.debugElement.componentInstance; 23 | expect(app.title).toEqual('app works!'); 24 | })); 25 | 26 | it('should render title in a h1 tag', async(() => { 27 | const fixture = TestBed.createComponent(AppComponent); 28 | fixture.detectChanges(); 29 | const compiled = fixture.debugElement.nativeElement; 30 | expect(compiled.querySelector('h1').textContent).toContain('app works!'); 31 | })); 32 | }); 33 | -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component} from '@angular/core'; 2 | 3 | 4 | @Component({ 5 | selector: 'app-root', 6 | templateUrl: './app.component.html', 7 | styleUrls: ['./app.component.css'] 8 | }) 9 | export class AppComponent { 10 | 11 | } 12 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 2 | import { NgModule } from '@angular/core'; 3 | import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 4 | import { HttpClientModule } from '@angular/common/http'; 5 | import { RouterModule } from '@angular/router'; 6 | 7 | 8 | import { AppRoutingModule } from './app.routing'; 9 | import { ComponentsModule } from './components/components.module'; 10 | 11 | import { AppComponent } from './app.component'; 12 | 13 | import { DashboardComponent } from './dashboard/dashboard.component'; 14 | import { UserProfileComponent } from './user-profile/user-profile.component'; 15 | import { TableListComponent } from './table-list/table-list.component'; 16 | import { TypographyComponent } from './typography/typography.component'; 17 | import { IconsComponent } from './icons/icons.component'; 18 | import { MapsComponent } from './maps/maps.component'; 19 | import { NotificationsComponent } from './notifications/notifications.component'; 20 | import { UpgradeComponent } from './upgrade/upgrade.component'; 21 | import { 22 | AgmCoreModule 23 | } from '@agm/core'; 24 | import { AdminLayoutComponent } from './layouts/admin-layout/admin-layout.component'; 25 | 26 | @NgModule({ 27 | imports: [ 28 | BrowserAnimationsModule, 29 | FormsModule, 30 | ReactiveFormsModule, 31 | HttpClientModule, 32 | ComponentsModule, 33 | RouterModule, 34 | AppRoutingModule, 35 | AgmCoreModule.forRoot({ 36 | apiKey: 'YOUR_GOOGLE_MAPS_API_KEY' 37 | }) 38 | ], 39 | declarations: [ 40 | AppComponent, 41 | AdminLayoutComponent, 42 | 43 | ], 44 | providers: [], 45 | bootstrap: [AppComponent] 46 | }) 47 | export class AppModule { } 48 | -------------------------------------------------------------------------------- /src/app/app.routing.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule, } from '@angular/common'; 3 | import { BrowserModule } from '@angular/platform-browser'; 4 | import { Routes, RouterModule } from '@angular/router'; 5 | 6 | import { AdminLayoutComponent } from './layouts/admin-layout/admin-layout.component'; 7 | 8 | const routes: Routes =[ 9 | { 10 | path: '', 11 | redirectTo: 'dashboard', 12 | pathMatch: 'full', 13 | }, { 14 | path: '', 15 | component: AdminLayoutComponent, 16 | children: [{ 17 | path: '', 18 | loadChildren: () => import('./layouts/admin-layout/admin-layout.module').then(m => m.AdminLayoutModule) 19 | }] 20 | } 21 | ]; 22 | 23 | @NgModule({ 24 | imports: [ 25 | CommonModule, 26 | BrowserModule, 27 | RouterModule.forRoot(routes,{ 28 | useHash: true 29 | }) 30 | ], 31 | exports: [ 32 | ], 33 | }) 34 | export class AppRoutingModule { } 35 | -------------------------------------------------------------------------------- /src/app/components/components.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { RouterModule } from '@angular/router'; 4 | 5 | import { FooterComponent } from './footer/footer.component'; 6 | import { NavbarComponent } from './navbar/navbar.component'; 7 | import { SidebarComponent } from './sidebar/sidebar.component'; 8 | 9 | @NgModule({ 10 | imports: [ 11 | CommonModule, 12 | RouterModule, 13 | ], 14 | declarations: [ 15 | FooterComponent, 16 | NavbarComponent, 17 | SidebarComponent 18 | ], 19 | exports: [ 20 | FooterComponent, 21 | NavbarComponent, 22 | SidebarComponent 23 | ] 24 | }) 25 | export class ComponentsModule { } 26 | -------------------------------------------------------------------------------- /src/app/components/footer/footer.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ashutosh102/Angular_Dashboard_example/ee0f8433f4f59cd3eea14ea1cc947e1d898621d8/src/app/components/footer/footer.component.css -------------------------------------------------------------------------------- /src/app/components/footer/footer.component.html: -------------------------------------------------------------------------------- 1 | 34 | -------------------------------------------------------------------------------- /src/app/components/footer/footer.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { FooterComponent } from './footer.component'; 4 | 5 | describe('FooterComponent', () => { 6 | let component: FooterComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ FooterComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(FooterComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/components/footer/footer.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-footer', 5 | templateUrl: './footer.component.html', 6 | styleUrls: ['./footer.component.css'] 7 | }) 8 | export class FooterComponent implements OnInit { 9 | test : Date = new Date(); 10 | 11 | constructor() { } 12 | 13 | ngOnInit() { 14 | } 15 | 16 | } 17 | -------------------------------------------------------------------------------- /src/app/components/navbar/navbar.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ashutosh102/Angular_Dashboard_example/ee0f8433f4f59cd3eea14ea1cc947e1d898621d8/src/app/components/navbar/navbar.component.css -------------------------------------------------------------------------------- /src/app/components/navbar/navbar.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { NavbarComponent } from './navbar.component'; 4 | 5 | describe('NavbarComponent', () => { 6 | let component: NavbarComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ NavbarComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(NavbarComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/components/navbar/navbar.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, ElementRef } from '@angular/core'; 2 | import { ROUTES } from '../sidebar/sidebar.component'; 3 | import {Location, LocationStrategy, PathLocationStrategy} from '@angular/common'; 4 | import { Router } from '@angular/router'; 5 | 6 | @Component({ 7 | selector: 'app-navbar', 8 | templateUrl: './navbar.component.html', 9 | styleUrls: ['./navbar.component.css'] 10 | }) 11 | export class NavbarComponent implements OnInit { 12 | private listTitles: any[]; 13 | location: Location; 14 | mobile_menu_visible: any = 0; 15 | private toggleButton: any; 16 | private sidebarVisible: boolean; 17 | 18 | constructor(location: Location, private element: ElementRef, private router: Router) { 19 | this.location = location; 20 | this.sidebarVisible = false; 21 | } 22 | 23 | ngOnInit(){ 24 | this.listTitles = ROUTES.filter(listTitle => listTitle); 25 | const navbar: HTMLElement = this.element.nativeElement; 26 | this.toggleButton = navbar.getElementsByClassName('navbar-toggler')[0]; 27 | this.router.events.subscribe((event) => { 28 | this.sidebarClose(); 29 | var $layer: any = document.getElementsByClassName('close-layer')[0]; 30 | if ($layer) { 31 | $layer.remove(); 32 | this.mobile_menu_visible = 0; 33 | } 34 | }); 35 | } 36 | 37 | sidebarOpen() { 38 | const toggleButton = this.toggleButton; 39 | const body = document.getElementsByTagName('body')[0]; 40 | setTimeout(function(){ 41 | toggleButton.classList.add('toggled'); 42 | }, 500); 43 | 44 | body.classList.add('nav-open'); 45 | 46 | this.sidebarVisible = true; 47 | }; 48 | sidebarClose() { 49 | const body = document.getElementsByTagName('body')[0]; 50 | this.toggleButton.classList.remove('toggled'); 51 | this.sidebarVisible = false; 52 | body.classList.remove('nav-open'); 53 | }; 54 | sidebarToggle() { 55 | // const toggleButton = this.toggleButton; 56 | // const body = document.getElementsByTagName('body')[0]; 57 | var $toggle = document.getElementsByClassName('navbar-toggler')[0]; 58 | 59 | if (this.sidebarVisible === false) { 60 | this.sidebarOpen(); 61 | } else { 62 | this.sidebarClose(); 63 | } 64 | const body = document.getElementsByTagName('body')[0]; 65 | 66 | if (this.mobile_menu_visible == 1) { 67 | // $('html').removeClass('nav-open'); 68 | body.classList.remove('nav-open'); 69 | if ($layer) { 70 | $layer.remove(); 71 | } 72 | setTimeout(function() { 73 | $toggle.classList.remove('toggled'); 74 | }, 400); 75 | 76 | this.mobile_menu_visible = 0; 77 | } else { 78 | setTimeout(function() { 79 | $toggle.classList.add('toggled'); 80 | }, 430); 81 | 82 | var $layer = document.createElement('div'); 83 | $layer.setAttribute('class', 'close-layer'); 84 | 85 | 86 | if (body.querySelectorAll('.main-panel')) { 87 | document.getElementsByClassName('main-panel')[0].appendChild($layer); 88 | }else if (body.classList.contains('off-canvas-sidebar')) { 89 | document.getElementsByClassName('wrapper-full-page')[0].appendChild($layer); 90 | } 91 | 92 | setTimeout(function() { 93 | $layer.classList.add('visible'); 94 | }, 100); 95 | 96 | $layer.onclick = function() { //asign a function 97 | body.classList.remove('nav-open'); 98 | this.mobile_menu_visible = 0; 99 | $layer.classList.remove('visible'); 100 | setTimeout(function() { 101 | $layer.remove(); 102 | $toggle.classList.remove('toggled'); 103 | }, 400); 104 | }.bind(this); 105 | 106 | body.classList.add('nav-open'); 107 | this.mobile_menu_visible = 1; 108 | 109 | } 110 | }; 111 | 112 | getTitle(){ 113 | var titlee = this.location.prepareExternalUrl(this.location.path()); 114 | if(titlee.charAt(0) === '#'){ 115 | titlee = titlee.slice( 1 ); 116 | } 117 | 118 | for(var item = 0; item < this.listTitles.length; item++){ 119 | if(this.listTitles[item].path === titlee){ 120 | return this.listTitles[item].title; 121 | } 122 | } 123 | return 'Dashboard'; 124 | } 125 | } 126 | -------------------------------------------------------------------------------- /src/app/components/sidebar/sidebar.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ashutosh102/Angular_Dashboard_example/ee0f8433f4f59cd3eea14ea1cc947e1d898621d8/src/app/components/sidebar/sidebar.component.css -------------------------------------------------------------------------------- /src/app/components/sidebar/sidebar.component.html: -------------------------------------------------------------------------------- 1 | 9 |
10 | 57 | 65 |
66 | -------------------------------------------------------------------------------- /src/app/components/sidebar/sidebar.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { SidebarComponent } from './sidebar.component'; 4 | 5 | describe('SidebarComponent', () => { 6 | let component: SidebarComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ SidebarComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(SidebarComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/components/sidebar/sidebar.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | declare const $: any; 4 | declare interface RouteInfo { 5 | path: string; 6 | title: string; 7 | icon: string; 8 | class: string; 9 | } 10 | export const ROUTES: RouteInfo[] = [ 11 | { path: '/dashboard', title: 'Dashboard', icon: 'dashboard', class: '' }, 12 | { path: '/user-profile', title: 'User Profile', icon:'person', class: '' }, 13 | { path: '/table-list', title: 'Table List', icon:'content_paste', class: '' }, 14 | { path: '/typography', title: 'Typography', icon:'library_books', class: '' }, 15 | { path: '/icons', title: 'Icons', icon:'bubble_chart', class: '' }, 16 | { path: '/maps', title: 'Maps', icon:'location_on', class: '' }, 17 | { path: '/notifications', title: 'Notifications', icon:'notifications', class: '' }, 18 | { path: '/upgrade', title: 'Upgrade to PRO', icon:'unarchive', class: 'active-pro' }, 19 | ]; 20 | 21 | @Component({ 22 | selector: 'app-sidebar', 23 | templateUrl: './sidebar.component.html', 24 | styleUrls: ['./sidebar.component.css'] 25 | }) 26 | export class SidebarComponent implements OnInit { 27 | menuItems: any[]; 28 | 29 | constructor() { } 30 | 31 | ngOnInit() { 32 | this.menuItems = ROUTES.filter(menuItem => menuItem); 33 | } 34 | isMobileMenu() { 35 | if ($(window).width() > 991) { 36 | return false; 37 | } 38 | return true; 39 | }; 40 | } 41 | -------------------------------------------------------------------------------- /src/app/dashboard/dashboard.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ashutosh102/Angular_Dashboard_example/ee0f8433f4f59cd3eea14ea1cc947e1d898621d8/src/app/dashboard/dashboard.component.css -------------------------------------------------------------------------------- /src/app/dashboard/dashboard.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { DashboardComponent } from './dashboard.component'; 4 | 5 | describe('DashboardComponent', () => { 6 | let component: DashboardComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ DashboardComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(DashboardComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/dashboard/dashboard.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import * as Chartist from 'chartist'; 3 | 4 | @Component({ 5 | selector: 'app-dashboard', 6 | templateUrl: './dashboard.component.html', 7 | styleUrls: ['./dashboard.component.css'] 8 | }) 9 | export class DashboardComponent implements OnInit { 10 | 11 | constructor() { } 12 | startAnimationForLineChart(chart){ 13 | let seq: any, delays: any, durations: any; 14 | seq = 0; 15 | delays = 80; 16 | durations = 500; 17 | 18 | chart.on('draw', function(data) { 19 | if(data.type === 'line' || data.type === 'area') { 20 | data.element.animate({ 21 | d: { 22 | begin: 600, 23 | dur: 700, 24 | from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(), 25 | to: data.path.clone().stringify(), 26 | easing: Chartist.Svg.Easing.easeOutQuint 27 | } 28 | }); 29 | } else if(data.type === 'point') { 30 | seq++; 31 | data.element.animate({ 32 | opacity: { 33 | begin: seq * delays, 34 | dur: durations, 35 | from: 0, 36 | to: 1, 37 | easing: 'ease' 38 | } 39 | }); 40 | } 41 | }); 42 | 43 | seq = 0; 44 | }; 45 | startAnimationForBarChart(chart){ 46 | let seq2: any, delays2: any, durations2: any; 47 | 48 | seq2 = 0; 49 | delays2 = 80; 50 | durations2 = 500; 51 | chart.on('draw', function(data) { 52 | if(data.type === 'bar'){ 53 | seq2++; 54 | data.element.animate({ 55 | opacity: { 56 | begin: seq2 * delays2, 57 | dur: durations2, 58 | from: 0, 59 | to: 1, 60 | easing: 'ease' 61 | } 62 | }); 63 | } 64 | }); 65 | 66 | seq2 = 0; 67 | }; 68 | ngOnInit() { 69 | /* ----------========== Daily Sales Chart initialization For Documentation ==========---------- */ 70 | 71 | const dataDailySalesChart: any = { 72 | labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'], 73 | series: [ 74 | [12, 17, 7, 17, 23, 18, 38] 75 | ] 76 | }; 77 | 78 | const optionsDailySalesChart: any = { 79 | lineSmooth: Chartist.Interpolation.cardinal({ 80 | tension: 0 81 | }), 82 | low: 0, 83 | high: 50, // creative tim: we recommend you to set the high sa the biggest value + something for a better look 84 | chartPadding: { top: 0, right: 0, bottom: 0, left: 0}, 85 | } 86 | 87 | var dailySalesChart = new Chartist.Line('#dailySalesChart', dataDailySalesChart, optionsDailySalesChart); 88 | 89 | this.startAnimationForLineChart(dailySalesChart); 90 | 91 | 92 | /* ----------========== Completed Tasks Chart initialization ==========---------- */ 93 | 94 | const dataCompletedTasksChart: any = { 95 | labels: ['12p', '3p', '6p', '9p', '12p', '3a', '6a', '9a'], 96 | series: [ 97 | [230, 750, 450, 300, 280, 240, 200, 190] 98 | ] 99 | }; 100 | 101 | const optionsCompletedTasksChart: any = { 102 | lineSmooth: Chartist.Interpolation.cardinal({ 103 | tension: 0 104 | }), 105 | low: 0, 106 | high: 1000, // creative tim: we recommend you to set the high sa the biggest value + something for a better look 107 | chartPadding: { top: 0, right: 0, bottom: 0, left: 0} 108 | } 109 | 110 | var completedTasksChart = new Chartist.Line('#completedTasksChart', dataCompletedTasksChart, optionsCompletedTasksChart); 111 | 112 | // start animation for the Completed Tasks Chart - Line Chart 113 | this.startAnimationForLineChart(completedTasksChart); 114 | 115 | 116 | 117 | /* ----------========== Emails Subscription Chart initialization ==========---------- */ 118 | 119 | var datawebsiteViewsChart = { 120 | labels: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'], 121 | series: [ 122 | [542, 443, 320, 780, 553, 453, 326, 434, 568, 610, 756, 895] 123 | 124 | ] 125 | }; 126 | var optionswebsiteViewsChart = { 127 | axisX: { 128 | showGrid: false 129 | }, 130 | low: 0, 131 | high: 1000, 132 | chartPadding: { top: 0, right: 5, bottom: 0, left: 0} 133 | }; 134 | var responsiveOptions: any[] = [ 135 | ['screen and (max-width: 640px)', { 136 | seriesBarDistance: 5, 137 | axisX: { 138 | labelInterpolationFnc: function (value) { 139 | return value[0]; 140 | } 141 | } 142 | }] 143 | ]; 144 | var websiteViewsChart = new Chartist.Bar('#websiteViewsChart', datawebsiteViewsChart, optionswebsiteViewsChart, responsiveOptions); 145 | 146 | //start animation for the Emails Subscription Chart 147 | this.startAnimationForBarChart(websiteViewsChart); 148 | } 149 | 150 | } 151 | -------------------------------------------------------------------------------- /src/app/icons/icons.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ashutosh102/Angular_Dashboard_example/ee0f8433f4f59cd3eea14ea1cc947e1d898621d8/src/app/icons/icons.component.css -------------------------------------------------------------------------------- /src/app/icons/icons.component.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 |
5 |
6 |

Material Design Icons

7 |

Handcrafted by our friends from 8 | Google 9 |

10 |
11 |
12 |
13 |
14 |
15 | 18 |
19 |
20 |
The icons are visible on Desktop mode inside an iframe. Since the iframe is not working on Mobile and Tablets please visit the icons on their original page on Google. Check the 21 | Material Icons 22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 | -------------------------------------------------------------------------------- /src/app/icons/icons.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { IconsComponent } from './icons.component'; 4 | 5 | describe('IconsComponent', () => { 6 | let component: IconsComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ IconsComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(IconsComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/icons/icons.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-icons', 5 | templateUrl: './icons.component.html', 6 | styleUrls: ['./icons.component.css'] 7 | }) 8 | export class IconsComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /src/app/layouts/admin-layout/admin-layout.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ashutosh102/Angular_Dashboard_example/ee0f8433f4f59cd3eea14ea1cc947e1d898621d8/src/app/layouts/admin-layout/admin-layout.component.scss -------------------------------------------------------------------------------- /src/app/layouts/admin-layout/admin-layout.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { AdminLayoutComponent } from './admin-layout.component'; 4 | 5 | describe('AdminLayoutComponent', () => { 6 | let component: AdminLayoutComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ AdminLayoutComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(AdminLayoutComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/layouts/admin-layout/admin-layout.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule } from '@angular/router'; 3 | import { CommonModule } from '@angular/common'; 4 | import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 5 | import { AdminLayoutRoutes } from './admin-layout.routing'; 6 | import { DashboardComponent } from '../../dashboard/dashboard.component'; 7 | import { UserProfileComponent } from '../../user-profile/user-profile.component'; 8 | import { TableListComponent } from '../../table-list/table-list.component'; 9 | import { TypographyComponent } from '../../typography/typography.component'; 10 | import { IconsComponent } from '../../icons/icons.component'; 11 | import { MapsComponent } from '../../maps/maps.component'; 12 | import { NotificationsComponent } from '../../notifications/notifications.component'; 13 | import { UpgradeComponent } from '../../upgrade/upgrade.component'; 14 | import {MatButtonModule} from '@angular/material/button'; 15 | import {MatInputModule} from '@angular/material/input'; 16 | import {MatRippleModule} from '@angular/material/core'; 17 | import {MatFormFieldModule} from '@angular/material/form-field'; 18 | import {MatTooltipModule} from '@angular/material/tooltip'; 19 | import {MatSelectModule} from '@angular/material/select'; 20 | 21 | @NgModule({ 22 | imports: [ 23 | CommonModule, 24 | RouterModule.forChild(AdminLayoutRoutes), 25 | FormsModule, 26 | ReactiveFormsModule, 27 | MatButtonModule, 28 | MatRippleModule, 29 | MatFormFieldModule, 30 | MatInputModule, 31 | MatSelectModule, 32 | MatTooltipModule, 33 | ], 34 | declarations: [ 35 | DashboardComponent, 36 | UserProfileComponent, 37 | TableListComponent, 38 | TypographyComponent, 39 | IconsComponent, 40 | MapsComponent, 41 | NotificationsComponent, 42 | UpgradeComponent, 43 | ] 44 | }) 45 | 46 | export class AdminLayoutModule {} 47 | -------------------------------------------------------------------------------- /src/app/layouts/admin-layout/admin-layout.routing.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | import { DashboardComponent } from '../../dashboard/dashboard.component'; 4 | import { UserProfileComponent } from '../../user-profile/user-profile.component'; 5 | import { TableListComponent } from '../../table-list/table-list.component'; 6 | import { TypographyComponent } from '../../typography/typography.component'; 7 | import { IconsComponent } from '../../icons/icons.component'; 8 | import { MapsComponent } from '../../maps/maps.component'; 9 | import { NotificationsComponent } from '../../notifications/notifications.component'; 10 | import { UpgradeComponent } from '../../upgrade/upgrade.component'; 11 | 12 | export const AdminLayoutRoutes: Routes = [ 13 | // { 14 | // path: '', 15 | // children: [ { 16 | // path: 'dashboard', 17 | // component: DashboardComponent 18 | // }]}, { 19 | // path: '', 20 | // children: [ { 21 | // path: 'userprofile', 22 | // component: UserProfileComponent 23 | // }] 24 | // }, { 25 | // path: '', 26 | // children: [ { 27 | // path: 'icons', 28 | // component: IconsComponent 29 | // }] 30 | // }, { 31 | // path: '', 32 | // children: [ { 33 | // path: 'notifications', 34 | // component: NotificationsComponent 35 | // }] 36 | // }, { 37 | // path: '', 38 | // children: [ { 39 | // path: 'maps', 40 | // component: MapsComponent 41 | // }] 42 | // }, { 43 | // path: '', 44 | // children: [ { 45 | // path: 'typography', 46 | // component: TypographyComponent 47 | // }] 48 | // }, { 49 | // path: '', 50 | // children: [ { 51 | // path: 'upgrade', 52 | // component: UpgradeComponent 53 | // }] 54 | // } 55 | { path: 'dashboard', component: DashboardComponent }, 56 | { path: 'user-profile', component: UserProfileComponent }, 57 | { path: 'table-list', component: TableListComponent }, 58 | { path: 'typography', component: TypographyComponent }, 59 | { path: 'icons', component: IconsComponent }, 60 | { path: 'maps', component: MapsComponent }, 61 | { path: 'notifications', component: NotificationsComponent }, 62 | { path: 'upgrade', component: UpgradeComponent }, 63 | ]; 64 | -------------------------------------------------------------------------------- /src/app/maps/maps.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ashutosh102/Angular_Dashboard_example/ee0f8433f4f59cd3eea14ea1cc947e1d898621d8/src/app/maps/maps.component.css -------------------------------------------------------------------------------- /src/app/maps/maps.component.html: -------------------------------------------------------------------------------- 1 |
2 | -------------------------------------------------------------------------------- /src/app/maps/maps.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { MapsComponent } from './maps.component'; 4 | 5 | describe('MapsComponent', () => { 6 | let component: MapsComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ MapsComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(MapsComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/maps/maps.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | declare const google: any; 4 | 5 | interface Marker { 6 | lat: number; 7 | lng: number; 8 | label?: string; 9 | draggable?: boolean; 10 | } 11 | @Component({ 12 | selector: 'app-maps', 13 | templateUrl: './maps.component.html', 14 | styleUrls: ['./maps.component.css'] 15 | }) 16 | export class MapsComponent implements OnInit { 17 | 18 | constructor() { } 19 | 20 | ngOnInit() { 21 | 22 | var myLatlng = new google.maps.LatLng(40.748817, -73.985428); 23 | var mapOptions = { 24 | zoom: 13, 25 | center: myLatlng, 26 | scrollwheel: false, //we disable de scroll over the map, it is a really annoing when you scroll through page 27 | styles: [{ 28 | "featureType": "water", 29 | "stylers": [{ 30 | "saturation": 43 31 | }, { 32 | "lightness": -11 33 | }, { 34 | "hue": "#0088ff" 35 | }] 36 | }, { 37 | "featureType": "road", 38 | "elementType": "geometry.fill", 39 | "stylers": [{ 40 | "hue": "#ff0000" 41 | }, { 42 | "saturation": -100 43 | }, { 44 | "lightness": 99 45 | }] 46 | }, { 47 | "featureType": "road", 48 | "elementType": "geometry.stroke", 49 | "stylers": [{ 50 | "color": "#808080" 51 | }, { 52 | "lightness": 54 53 | }] 54 | }, { 55 | "featureType": "landscape.man_made", 56 | "elementType": "geometry.fill", 57 | "stylers": [{ 58 | "color": "#ece2d9" 59 | }] 60 | }, { 61 | "featureType": "poi.park", 62 | "elementType": "geometry.fill", 63 | "stylers": [{ 64 | "color": "#ccdca1" 65 | }] 66 | }, { 67 | "featureType": "road", 68 | "elementType": "labels.text.fill", 69 | "stylers": [{ 70 | "color": "#767676" 71 | }] 72 | }, { 73 | "featureType": "road", 74 | "elementType": "labels.text.stroke", 75 | "stylers": [{ 76 | "color": "#ffffff" 77 | }] 78 | }, { 79 | "featureType": "poi", 80 | "stylers": [{ 81 | "visibility": "off" 82 | }] 83 | }, { 84 | "featureType": "landscape.natural", 85 | "elementType": "geometry.fill", 86 | "stylers": [{ 87 | "visibility": "on" 88 | }, { 89 | "color": "#b8cb93" 90 | }] 91 | }, { 92 | "featureType": "poi.park", 93 | "stylers": [{ 94 | "visibility": "on" 95 | }] 96 | }, { 97 | "featureType": "poi.sports_complex", 98 | "stylers": [{ 99 | "visibility": "on" 100 | }] 101 | }, { 102 | "featureType": "poi.medical", 103 | "stylers": [{ 104 | "visibility": "on" 105 | }] 106 | }, { 107 | "featureType": "poi.business", 108 | "stylers": [{ 109 | "visibility": "simplified" 110 | }] 111 | }] 112 | 113 | }; 114 | var map = new google.maps.Map(document.getElementById("map"), mapOptions); 115 | 116 | var marker = new google.maps.Marker({ 117 | position: myLatlng, 118 | title: "Hello World!" 119 | }); 120 | 121 | // To add the marker to the map, call setMap(); 122 | marker.setMap(map); 123 | } 124 | 125 | } 126 | -------------------------------------------------------------------------------- /src/app/notifications/notifications.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ashutosh102/Angular_Dashboard_example/ee0f8433f4f59cd3eea14ea1cc947e1d898621d8/src/app/notifications/notifications.component.css -------------------------------------------------------------------------------- /src/app/notifications/notifications.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { NotificationsComponent } from './notifications.component'; 4 | 5 | describe('NotificationsComponent', () => { 6 | let component: NotificationsComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ NotificationsComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(NotificationsComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/notifications/notifications.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | declare var $: any; 3 | @Component({ 4 | selector: 'app-notifications', 5 | templateUrl: './notifications.component.html', 6 | styleUrls: ['./notifications.component.css'] 7 | }) 8 | export class NotificationsComponent implements OnInit { 9 | 10 | constructor() { } 11 | showNotification(from, align){ 12 | const type = ['','info','success','warning','danger']; 13 | 14 | const color = Math.floor((Math.random() * 4) + 1); 15 | 16 | $.notify({ 17 | icon: "notifications", 18 | message: "Welcome to Material Dashboard - a beautiful freebie for every web developer." 19 | 20 | },{ 21 | type: type[color], 22 | timer: 4000, 23 | placement: { 24 | from: from, 25 | align: align 26 | }, 27 | template: '' 37 | }); 38 | } 39 | ngOnInit() { 40 | } 41 | 42 | } 43 | -------------------------------------------------------------------------------- /src/app/table-list/table-list.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ashutosh102/Angular_Dashboard_example/ee0f8433f4f59cd3eea14ea1cc947e1d898621d8/src/app/table-list/table-list.component.css -------------------------------------------------------------------------------- /src/app/table-list/table-list.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { TableListComponent } from './table-list.component'; 4 | 5 | describe('TableListComponent', () => { 6 | let component: TableListComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ TableListComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(TableListComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/table-list/table-list.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-table-list', 5 | templateUrl: './table-list.component.html', 6 | styleUrls: ['./table-list.component.css'] 7 | }) 8 | export class TableListComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /src/app/typography/typography.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ashutosh102/Angular_Dashboard_example/ee0f8433f4f59cd3eea14ea1cc947e1d898621d8/src/app/typography/typography.component.css -------------------------------------------------------------------------------- /src/app/typography/typography.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |

Material Dashboard Heading

6 |

Created using Roboto Font Family

7 |
8 |
9 |
10 |
11 |

Typography

12 |
13 |
14 |
15 |

16 | Header 1The Life of Material Dashboard

17 |
18 |
19 |

20 | Header 2The Life of Material Dashboard

21 |
22 |
23 |

24 | Header 3The Life of Material Dashboard

25 |
26 |
27 |

28 | Header 4The Life of Material Dashboard

29 |
30 |
31 |
32 | Header 5The Life of Material Dashboard
33 |
34 |
35 |
36 | Header 6The Life of Material Dashboard
37 |
38 |
39 |

40 | Paragraph 41 | I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.

42 |
43 |
44 | Quote 45 |
46 |

47 | I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. 48 |

49 | 50 | Kanye West, Musician 51 | 52 |
53 |
54 |
55 | Muted Text 56 |

57 | I will be the leader of a company that ends up being worth billions of dollars, because I got the answers... 58 |

59 |
60 |
61 | Primary Text 62 |

63 | I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...

64 |
65 |
66 | Info Text 67 |

68 | I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...

69 |
70 |
71 | Success Text 72 |

73 | I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...

74 |
75 |
76 | Warning Text 77 |

78 | I will be the leader of a company that ends up being worth billions of dollars, because I got the answers... 79 |

80 |
81 |
82 | Danger Text 83 |

84 | I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...

85 |
86 |
87 |

88 | Small Tag 89 | Header with small subtitle 90 |
91 | Use "small" tag for the headers 92 |

93 |
94 |
95 |
96 |
97 |
98 |
99 | -------------------------------------------------------------------------------- /src/app/typography/typography.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { TypographyComponent } from './typography.component'; 4 | 5 | describe('TypographyComponent', () => { 6 | let component: TypographyComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ TypographyComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(TypographyComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/typography/typography.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-typography', 5 | templateUrl: './typography.component.html', 6 | styleUrls: ['./typography.component.css'] 7 | }) 8 | export class TypographyComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /src/app/upgrade/upgrade.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ashutosh102/Angular_Dashboard_example/ee0f8433f4f59cd3eea14ea1cc947e1d898621d8/src/app/upgrade/upgrade.component.css -------------------------------------------------------------------------------- /src/app/upgrade/upgrade.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 |
7 |

Material Dashboard PRO Angular

8 |

Are you looking for more components? Please check our Premium Version of Material Dashboard Angular.

9 |
10 |
11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 66 | 69 | 70 | 71 |
FreePRO
Components60200
Plugins215
Example Pages327
Login, Register, Pricing, Lock Pages
DataTables, VectorMap, SweetAlert, Wizard, jQueryValidation, FullCalendar etc...
Mini Sidebar
Premium Support
FreeJust $59
64 | Current Version 65 | 67 | Upgrade to PRO 68 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 | -------------------------------------------------------------------------------- /src/app/upgrade/upgrade.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { UpgradeComponent } from './upgrade.component'; 4 | 5 | describe('UpgradeComponent', () => { 6 | let component: UpgradeComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ UpgradeComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(UpgradeComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/upgrade/upgrade.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-upgrade', 5 | templateUrl: './upgrade.component.html', 6 | styleUrls: ['./upgrade.component.css'] 7 | }) 8 | export class UpgradeComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /src/app/user-profile/user-profile.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ashutosh102/Angular_Dashboard_example/ee0f8433f4f59cd3eea14ea1cc947e1d898621d8/src/app/user-profile/user-profile.component.css -------------------------------------------------------------------------------- /src/app/user-profile/user-profile.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { UserProfileComponent } from './user-profile.component'; 4 | 5 | describe('UserProfileComponent', () => { 6 | let component: UserProfileComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ UserProfileComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(UserProfileComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/user-profile/user-profile.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-user-profile', 5 | templateUrl: './user-profile.component.html', 6 | styleUrls: ['./user-profile.component.css'] 7 | }) 8 | export class UserProfileComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ashutosh102/Angular_Dashboard_example/ee0f8433f4f59cd3eea14ea1cc947e1d898621d8/src/assets/.gitkeep -------------------------------------------------------------------------------- /src/assets/css/demo.css: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Material Dashboard Angular - v2.6.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/material-dashboard-angular2 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/material-dashboard-angular2/blob/master/LICENSE.md) 10 | 11 | * Coded by Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | .tim-typo{ 19 | padding-left: 25%; 20 | margin-bottom: 40px; 21 | position: relative; 22 | width: 100%; 23 | } 24 | .tim-typo .tim-note{ 25 | bottom: 5px; 26 | color: #c0c1c2; 27 | display: block; 28 | font-weight: 400; 29 | font-size: 13px; 30 | line-height: 15px; 31 | left: 0; 32 | margin-left: 20px; 33 | position: absolute; 34 | width: 260px; 35 | } 36 | -------------------------------------------------------------------------------- /src/assets/img/angular.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ashutosh102/Angular_Dashboard_example/ee0f8433f4f59cd3eea14ea1cc947e1d898621d8/src/assets/img/angular.png -------------------------------------------------------------------------------- /src/assets/img/angular2-logo-red.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ashutosh102/Angular_Dashboard_example/ee0f8433f4f59cd3eea14ea1cc947e1d898621d8/src/assets/img/angular2-logo-red.png -------------------------------------------------------------------------------- /src/assets/img/angular2-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ashutosh102/Angular_Dashboard_example/ee0f8433f4f59cd3eea14ea1cc947e1d898621d8/src/assets/img/angular2-logo.png -------------------------------------------------------------------------------- /src/assets/img/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ashutosh102/Angular_Dashboard_example/ee0f8433f4f59cd3eea14ea1cc947e1d898621d8/src/assets/img/apple-icon.png -------------------------------------------------------------------------------- /src/assets/img/cover.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ashutosh102/Angular_Dashboard_example/ee0f8433f4f59cd3eea14ea1cc947e1d898621d8/src/assets/img/cover.jpeg -------------------------------------------------------------------------------- /src/assets/img/faces/marc.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ashutosh102/Angular_Dashboard_example/ee0f8433f4f59cd3eea14ea1cc947e1d898621d8/src/assets/img/faces/marc.jpg -------------------------------------------------------------------------------- /src/assets/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ashutosh102/Angular_Dashboard_example/ee0f8433f4f59cd3eea14ea1cc947e1d898621d8/src/assets/img/favicon.png -------------------------------------------------------------------------------- /src/assets/img/gears.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ashutosh102/Angular_Dashboard_example/ee0f8433f4f59cd3eea14ea1cc947e1d898621d8/src/assets/img/gears.gif -------------------------------------------------------------------------------- /src/assets/img/html.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ashutosh102/Angular_Dashboard_example/ee0f8433f4f59cd3eea14ea1cc947e1d898621d8/src/assets/img/html.png -------------------------------------------------------------------------------- /src/assets/img/mask.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ashutosh102/Angular_Dashboard_example/ee0f8433f4f59cd3eea14ea1cc947e1d898621d8/src/assets/img/mask.png -------------------------------------------------------------------------------- /src/assets/img/new_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ashutosh102/Angular_Dashboard_example/ee0f8433f4f59cd3eea14ea1cc947e1d898621d8/src/assets/img/new_logo.png -------------------------------------------------------------------------------- /src/assets/img/sidebar-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ashutosh102/Angular_Dashboard_example/ee0f8433f4f59cd3eea14ea1cc947e1d898621d8/src/assets/img/sidebar-1.jpg -------------------------------------------------------------------------------- /src/assets/img/sidebar-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ashutosh102/Angular_Dashboard_example/ee0f8433f4f59cd3eea14ea1cc947e1d898621d8/src/assets/img/sidebar-2.jpg -------------------------------------------------------------------------------- /src/assets/img/sidebar-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ashutosh102/Angular_Dashboard_example/ee0f8433f4f59cd3eea14ea1cc947e1d898621d8/src/assets/img/sidebar-3.jpg -------------------------------------------------------------------------------- /src/assets/img/sidebar-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ashutosh102/Angular_Dashboard_example/ee0f8433f4f59cd3eea14ea1cc947e1d898621d8/src/assets/img/sidebar-4.jpg -------------------------------------------------------------------------------- /src/assets/img/tim_80x80.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ashutosh102/Angular_Dashboard_example/ee0f8433f4f59cd3eea14ea1cc947e1d898621d8/src/assets/img/tim_80x80.png -------------------------------------------------------------------------------- /src/assets/scss/core/_alerts.scss: -------------------------------------------------------------------------------- 1 | .alert { 2 | border: 0; 3 | border-radius: 3px; 4 | position: relative; 5 | padding: 20px 15px; 6 | line-height: 20px; 7 | 8 | b{ 9 | font-weight: $font-weight-bold; 10 | text-transform: uppercase; 11 | font-size: $font-size-small; 12 | } 13 | // SASS conversion note: please mirror any content change in _mixins-shared.scss alert-variations-content 14 | @include alert-variations(unquote(".alert"), unquote(""), $mdb-text-color-light); 15 | 16 | &-info, &-danger, &-warning, &-success, &-rose { 17 | color: $mdb-text-color-light; 18 | } 19 | 20 | &-default { 21 | a, .alert-link { 22 | color: $mdb-text-color-primary; 23 | } 24 | } 25 | 26 | span{ 27 | display: block; 28 | max-width: 89%; 29 | } 30 | 31 | &.alert-danger{ 32 | @include shadow-alert-color($brand-danger); 33 | @include alert-icon-color($brand-danger); 34 | } 35 | &.alert-warning{ 36 | @include shadow-alert-color($brand-warning); 37 | @include alert-icon-color($brand-warning); 38 | } 39 | &.alert-success{ 40 | @include shadow-alert-color($brand-success); 41 | @include alert-icon-color($brand-success); 42 | } 43 | &.alert-info{ 44 | @include shadow-alert-color($brand-info); 45 | @include alert-icon-color($brand-info); 46 | } 47 | &.alert-primary{ 48 | @include shadow-alert-color($brand-primary); 49 | @include alert-icon-color($brand-primary); 50 | } 51 | &.alert-rose{ 52 | @include shadow-alert-color($brand-rose); 53 | @include alert-icon-color($brand-rose); 54 | } 55 | 56 | &.alert-with-icon{ 57 | padding-left: 66px; 58 | 59 | i[data-notify="icon"] { 60 | font-size: 30px; 61 | display: block; 62 | left: 15px; 63 | position: absolute; 64 | top: 50%; 65 | margin-top: -15px; 66 | color: #fff; 67 | } 68 | } 69 | 70 | .mat-button.close{ 71 | min-width: auto; 72 | line-height: .5; 73 | i{ 74 | color: $white-color; 75 | font-size: 11px; 76 | } 77 | } 78 | 79 | i[data-notify="icon"]{ 80 | display: none; 81 | } 82 | 83 | .alert-icon{ 84 | display: block; 85 | float: left; 86 | margin-right: $margin-base; 87 | 88 | i{ 89 | margin-top: -7px; 90 | top: 5px; 91 | position: relative; 92 | } 93 | } 94 | 95 | [data-notify="dismiss"]{ 96 | margin-right: 5px; 97 | } 98 | } 99 | 100 | .places-buttons .btn { 101 | margin-bottom: 30px; 102 | } 103 | // 104 | // .alert { 105 | // border: 0; 106 | // border-radius: 3px; 107 | // 108 | // padding: 20px 15px; 109 | // line-height: 20px; 110 | // 111 | // //@include shadow-z-2(); 112 | // 113 | // b{ 114 | // font-weight: $font-weight-bold; 115 | // text-transform: uppercase; 116 | // font-size: $font-size-small; 117 | // } 118 | // // SASS conversion note: please mirror any content change in _mixins-shared.scss alert-variations-content 119 | // @include alert-variations(unquote(".alert"), unquote(""), $mdb-text-color-light); 120 | // 121 | // &-info, &-danger, &-warning, &-success { 122 | // color: $mdb-text-color-light; 123 | // } 124 | // 125 | // &-default { 126 | // a, .alert-link { 127 | // color: $mdb-text-color-primary; 128 | // } 129 | // } 130 | // 131 | // .alert-icon{ 132 | // display: block; 133 | // float: left; 134 | // margin-right: $margin-base; 135 | // 136 | // i{ 137 | // margin-top: -7px; 138 | // top: 5px; 139 | // position: relative; 140 | // } 141 | // } 142 | // .mat-button.close, 143 | // .close{ 144 | // min-width: auto; 145 | // color: $white-color; 146 | // text-shadow: none; 147 | // opacity: .9; 148 | // 149 | // i{ 150 | // font-size: 11px; 151 | // } 152 | // 153 | // &:hover, 154 | // &:focus{ 155 | // opacity: 1; 156 | // } 157 | // } 158 | // } 159 | // .alert .close { 160 | // line-height: .5; 161 | // } 162 | -------------------------------------------------------------------------------- /src/assets/scss/core/_angular-modal.scss: -------------------------------------------------------------------------------- 1 | .modal.modal-angular{ 2 | .modal-header{ 3 | border-bottom: none; 4 | position: relative; 5 | } 6 | 7 | .modal-footer{ 8 | border-top: none; 9 | } 10 | 11 | .modal-body{ 12 | .separator{ 13 | border-bottom: 1px solid rgba(220,220,220, .2); 14 | width: 100%; 15 | display: block; 16 | margin: 11px 0; 17 | } 18 | 19 | .image-container{ 20 | width: 35px; 21 | overflow: hidden; 22 | margin: 0px auto; 23 | margin-bottom: 17px; 24 | 25 | img{ 26 | width: 100%; 27 | vertical-align: top; 28 | } 29 | 30 | &.image-angular-cli{ 31 | width: 44px; 32 | position: relative; 33 | top: 4px; 34 | margin-top: -9px; 35 | } 36 | } 37 | 38 | h4{ 39 | padding-left: 0px; 40 | font-size: 16px; 41 | font-weight: 400; 42 | 43 | &.margin-top{ 44 | margin-top: 15px; 45 | } 46 | 47 | i{ 48 | color: #c5a47e; 49 | } 50 | } 51 | 52 | a.modal-button{ 53 | display: inline-block; 54 | padding: 20px 15px; 55 | background-color: #fdfdfd; 56 | font-size: 14px; 57 | text-align: center; 58 | color: inherit; 59 | border-radius: 6px; 60 | transition: box-shadow 150ms ease-in; 61 | width: 130px; 62 | max-width: 130px; 63 | margin-bottom: 10px; 64 | font-weight: 100; 65 | border: 1px solid rgba(220,220,220, .4); 66 | 67 | &:nth-child(2n+1){ 68 | margin-left: 10px; 69 | margin-right: 10px; 70 | } 71 | 72 | &.disabled{ 73 | opacity: .5; 74 | pointer-events: none; 75 | } 76 | 77 | &:hover, 78 | &:focus{ 79 | box-shadow: 0px 3px 25px 0px rgba(0, 0, 0, 0.2); 80 | } 81 | 82 | .product-type{ 83 | font-size: 12px; 84 | font-weight: 600; 85 | } 86 | 87 | .price{ 88 | font-size: 11px; 89 | font-weight: 100; 90 | 91 | span{ 92 | display: block; 93 | font-size: 27px; 94 | position: relative; 95 | font-weight: 500; 96 | margin-top: 3px; 97 | 98 | i{ 99 | font-size: 10px; 100 | position: absolute; 101 | width: 8px; 102 | top: 4px; 103 | } 104 | } 105 | } 106 | 107 | .wrapper-card{ 108 | position: relative; 109 | } 110 | } 111 | } 112 | } 113 | 114 | @media (min-width: 768px){ 115 | .modal.modal-angular{ 116 | .modal-dialog{ 117 | width: 570px; 118 | } 119 | } 120 | } 121 | -------------------------------------------------------------------------------- /src/assets/scss/core/_dropdown.scss: -------------------------------------------------------------------------------- 1 | @use "sass:math"; 2 | 3 | // Menus https://www.google.com/design/spec/components/menus.html#menus-specs 4 | // Dropdown buttons (mobile and desktop) https://www.google.com/design/spec/components/buttons.html#buttons-dropdown-buttons 5 | 6 | .dropdown-menu { 7 | display: none; 8 | padding: $bmd-dropdown-margin-y 0; 9 | border: 0; 10 | opacity: 0; 11 | transform: scale(0); 12 | transform-origin: 0 0; 13 | will-change: transform, opacity; 14 | transition: transform $bmd-menu-expand-duration $bmd-animation-curve-default, 15 | opacity $bmd-menu-fade-duration $bmd-animation-curve-default; 16 | box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); 17 | 18 | &.showing { 19 | animation-name: bmd-dropdown-animation; 20 | animation-duration: $bmd-menu-expand-duration; 21 | animation-fill-mode: forwards; 22 | animation-timing-function: $bmd-animation-curve-default; 23 | } 24 | 25 | .open > &, 26 | &.show { 27 | display: block; 28 | opacity: 1; 29 | transform: scale(1); 30 | } 31 | 32 | &.hiding { 33 | display: block; 34 | opacity: 0; 35 | transform: scale(0); 36 | } 37 | 38 | &[x-placement="bottom-start"] { 39 | transform-origin: 0 0; 40 | } 41 | 42 | &[x-placement="bottom-end"] { 43 | transform-origin: 100% 0; 44 | } 45 | 46 | &[x-placement="top-start"] { 47 | transform-origin: 0 100%; 48 | } 49 | 50 | &[x-placement="top-end"] { 51 | transform-origin: 100% 100%; 52 | } 53 | 54 | .disabled > a{ 55 | color: $bmd-dropdown-header-color; 56 | 57 | &:focus, 58 | &:hover{ 59 | text-decoration: none; 60 | background-color: transparent; 61 | background-image: none; 62 | color: $bmd-dropdown-header-color; 63 | } 64 | } 65 | 66 | &.dropdown-with-icons .dropdown-item{ 67 | padding: $dropdown-item-padding-y + 0.125 $dropdown-item-padding-x $dropdown-item-padding-y + 0.125 $dropdown-item-padding-y + 0.125; 68 | 69 | & .material-icons{ 70 | vertical-align: middle; 71 | font-size: 24px; 72 | position: relative; 73 | margin-top: -4px; 74 | top: 1px; 75 | margin-right: 12px; 76 | opacity: .5; 77 | } 78 | } 79 | 80 | 81 | // https://www.google.com/design/spec/components/menus.html#menus-specs 82 | .dropdown-item, 83 | li > a{ // used to properly size the ripple container 84 | position: relative; 85 | width: auto; 86 | 87 | display: flex; 88 | flex-flow: nowrap; 89 | align-items: center; 90 | color: $bmd-dropdown-link-color; 91 | font-weight: normal; 92 | text-decoration: none; 93 | 94 | font-size: .8125rem; 95 | border-radius: math.div($border-radius, 2); 96 | margin: 0 $bmd-dropdown-margin-y; 97 | @include transitions($fast-transition-time, $transition-linear); 98 | 99 | min-width: $bmd-menu-item-min-width; 100 | 101 | padding: $dropdown-item-padding-y $dropdown-item-padding-x; 102 | 103 | overflow: hidden; 104 | line-height: $bmd-line-height; 105 | text-overflow: ellipsis; 106 | word-wrap: break-word; 107 | 108 | @include media-breakpoint-up(md) { 109 | padding-right: $bmd-menu-item-padding-right-md; 110 | padding-left: $bmd-menu-item-padding-left-md; 111 | } 112 | } 113 | 114 | .dropdown-item:hover, 115 | .dropdown-item:focus, 116 | a:hover, 117 | a:focus, 118 | a:active { 119 | @include shadow-small-color($brand-primary); 120 | background-color: $brand-primary; 121 | color: #FFFFFF; 122 | } 123 | } 124 | 125 | // this could be in a .btn-group or .dropdown 126 | .dropdown-toggle { 127 | &.bmd-btn-icon, 128 | &.bmd-btn-fab { 129 | // remove the dropdown icon 130 | &::after { 131 | display: none; 132 | } 133 | 134 | ~ .dropdown-menu { 135 | &.dropdown-menu-top-left, 136 | &.dropdown-menu-top-right { 137 | bottom: $bmd-btn-icon-size; // push up the bottom of the menu the height of the button 138 | } 139 | } 140 | } 141 | 142 | &:after{ 143 | will-change: transform; 144 | transition: transform $bmd-animation-dropdown-caret linear; 145 | } 146 | 147 | .show &:after{ 148 | @include rotate-180(); 149 | } 150 | 151 | &.bmd-btn-fab-sm { 152 | ~ .dropdown-menu { 153 | &.dropdown-menu-top-left, 154 | &.dropdown-menu-top-right { 155 | bottom: $bmd-btn-fab-size-sm; // push up the bottom of the menu the height of the button 156 | } 157 | } 158 | } 159 | 160 | &.bmd-btn-icon { 161 | ~ .dropdown-menu { 162 | // collapse some spacing 163 | margin: 0; 164 | } 165 | } 166 | } 167 | 168 | .dropdown-header{ 169 | font-size: 0.75rem; 170 | padding-top: $dropdown-header-padding-y; 171 | padding-bottom: $dropdown-header-padding-y; 172 | text-transform: none; 173 | color: $bmd-dropdown-header-color; 174 | line-height: $bmd-line-height; 175 | font-weight: inherit; 176 | } 177 | 178 | @keyframes bmd-dropdown-animation { 179 | from { 180 | opacity: 0; 181 | transform: scale(0); 182 | } 183 | to { 184 | opacity: 1; 185 | transform: scale(1); 186 | } 187 | } 188 | 189 | .dropdown-menu.bootstrap-datetimepicker-widget{ 190 | opacity: 0; 191 | transform: scale(0); 192 | transition-duration: $bmd-menu-expand-duration; 193 | transition-timing-function: $bmd-animation-curve-default; 194 | transform-origin: 0 0; 195 | will-change: transform, opacity; 196 | top: 0; 197 | } 198 | 199 | .dropdown-menu.bootstrap-datetimepicker-widget.top{ 200 | transform-origin: 0 100%; 201 | } 202 | 203 | .dropdown-menu.bootstrap-datetimepicker-widget.open{ 204 | opacity: 1; 205 | transform: scale(1); 206 | top: 0; 207 | } 208 | -------------------------------------------------------------------------------- /src/assets/scss/core/_example-pages.scss: -------------------------------------------------------------------------------- 1 | .card-signup { 2 | .card-header { 3 | .social-line { 4 | .btn { 5 | color: $white-color; 6 | } 7 | } 8 | } 9 | .text-divider { 10 | margin-top: 30px; 11 | margin-bottom: 0px; 12 | text-align: center; 13 | } 14 | } 15 | 16 | .signup-page { 17 | .page-header { 18 | min-height: 100vh; 19 | height: auto; 20 | display: inherit; 21 | 22 | .container{ 23 | padding-top: 20vh; 24 | } 25 | } 26 | 27 | .card-signup { 28 | border-radius: $border-radius-base * 2; 29 | @include shadow-16dp(); 30 | margin-bottom: 100px; 31 | padding: 40px 0px; 32 | 33 | } 34 | .info-horizontal { 35 | padding: 0px 0px 20px; 36 | } 37 | 38 | .social { 39 | .btn { 40 | margin: 5px; 41 | } 42 | h4 { 43 | margin-top: 20px; 44 | } 45 | } 46 | .footer { 47 | .container { 48 | padding: 0; 49 | } 50 | .copyright, 51 | a{ 52 | color: $white-color; 53 | } 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /src/assets/scss/core/_footers.scss: -------------------------------------------------------------------------------- 1 | .footer{ 2 | padding: $padding-general-x 0; 3 | text-align: center; 4 | display: -webkit-flex; /* Safari */ /* Safari 6.1+ */ 5 | display: flex; 6 | 7 | ul{ 8 | margin-bottom: 0; 9 | padding: 0; 10 | list-style: none; 11 | 12 | li{ 13 | display: inline-block; 14 | 15 | a{ 16 | color: inherit; 17 | padding: $padding-general-x; 18 | font-weight: $font-weight-bold; 19 | font-size: $mdb-btn-font-size-base; 20 | text-transform: uppercase; 21 | border-radius: $border-radius-base; 22 | text-decoration: none; 23 | position: relative; 24 | display: block; 25 | 26 | &:hover{ 27 | text-decoration: none; 28 | } 29 | } 30 | 31 | .btn{ 32 | margin: 0; 33 | } 34 | } 35 | 36 | &.links-horizontal{ 37 | &:first-child a{ 38 | padding-left: 0; 39 | } 40 | 41 | &:last-child a{ 42 | padding-right: 0; 43 | } 44 | } 45 | 46 | &.links-vertical{ 47 | li{ 48 | display: block; 49 | margin-left: -5px; 50 | margin-right: -5px; 51 | 52 | a{ 53 | padding: 5px; 54 | } 55 | } 56 | } 57 | } 58 | 59 | .social-buttons{ 60 | a, 61 | .btn{ 62 | margin-top: 5px; 63 | margin-bottom: 5px; 64 | } 65 | } 66 | 67 | .footer-brand{ 68 | float: left; 69 | height: 50px; 70 | padding: 15px 15px; 71 | font-size: 18px; 72 | line-height: 20px; 73 | margin-left: -15px; 74 | 75 | &:hover, 76 | &:focus{ 77 | color: $black-color; 78 | } 79 | } 80 | .copyright{ 81 | padding: 15px 0; 82 | .material-icons{ 83 | font-size: 18px; 84 | position: relative; 85 | top: 3px; 86 | } 87 | 88 | } 89 | 90 | .pull-center{ 91 | display: inline-block; 92 | float: none; 93 | } 94 | } 95 | 96 | .off-canvas-sidebar { 97 | .footer { 98 | position: absolute; 99 | bottom: 0; 100 | width: 100%; 101 | } 102 | } 103 | -------------------------------------------------------------------------------- /src/assets/scss/core/_images.scss: -------------------------------------------------------------------------------- 1 | .img-thumbnail{ 2 | border-radius: 16px; 3 | } 4 | .img-raised{ 5 | @include shadow-big-image(); 6 | } 7 | 8 | .rounded{ 9 | border-radius: $border-radius-large !important; 10 | } 11 | -------------------------------------------------------------------------------- /src/assets/scss/core/_input-group.scss: -------------------------------------------------------------------------------- 1 | // ----------------------------------------- 2 | // input-group and input-group-addon styles 3 | // note: form-groups are not required 4 | // 5 | @mixin input-group-button-variation($vertical-padding) { 6 | .input-group-btn { 7 | .btn { 8 | //margin: 0 0 $vertical-padding 0; 9 | } 10 | } 11 | } 12 | 13 | // default margin - no form-group required 14 | @include input-group-button-variation(input-padding-y); 15 | 16 | .bmd-form-group-sm { 17 | @include input-group-button-variation($input-padding-y-sm); 18 | } 19 | 20 | .bmd-form-group-lg { 21 | @include input-group-button-variation($input-padding-y-lg); 22 | } 23 | 24 | .input-group { 25 | // may be in or outside of form-group 26 | 27 | .input-group-text { 28 | display: flex; 29 | justify-content: center; 30 | align-items: center; 31 | padding: 0 15px 0 15px; 32 | background-color: transparent; 33 | border-color: transparent; 34 | } 35 | 36 | } 37 | -------------------------------------------------------------------------------- /src/assets/scss/core/_misc.scss: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: #eee; 3 | color: $black-color; 4 | font-weight: 300; 5 | } 6 | 7 | legend { 8 | border-bottom: 0; 9 | } 10 | 11 | .serif-font{ 12 | font-family: $font-family-serif; 13 | } 14 | 15 | // Prevent highlight on mobile 16 | * { 17 | -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 18 | -webkit-tap-highlight-color: transparent; 19 | &:focus { 20 | outline: 0; 21 | } 22 | } 23 | 24 | a{ 25 | color: $link-color; 26 | &:hover, 27 | &:focus{ 28 | color: darken($link-color, 5%); 29 | text-decoration: none; 30 | } 31 | 32 | &.text-info{ 33 | &:hover, &:focus{ 34 | color: darken($brand-info, 5%); 35 | } 36 | } 37 | 38 | & .material-icons { 39 | vertical-align: middle; 40 | } 41 | } 42 | 43 | .form-check, 44 | label{ 45 | font-size: 14px; 46 | line-height: 1.42857; 47 | color: $checkboxes-text-color; 48 | font-weight: 400; 49 | } 50 | 51 | /* Animations */ 52 | .animation-transition-general{ 53 | @include transition-all($general-transition-time, $transition-linear); 54 | } 55 | 56 | .animation-transition-slow{ 57 | @include transition-all($slow-transition-time, $transition-linear); 58 | } 59 | 60 | .animation-transition-fast{ 61 | @include transition-all($fast-transition-time, $transition-ease); 62 | } 63 | 64 | .caret, 65 | .sidebar a{ 66 | @include transition-all($fast-transition-time, $transition-ease-in); 67 | } 68 | #map { 69 | position: relative; 70 | z-index: 2; 71 | width: 100%; 72 | height: calc(100vh - 70px); 73 | margin-top: 70px; 74 | } 75 | -------------------------------------------------------------------------------- /src/assets/scss/core/_mixins.scss: -------------------------------------------------------------------------------- 1 | @import "mixins/utilities"; 2 | @import "mixins/breakpoints"; 3 | @import "mixins/animations"; 4 | @import "mixins/type"; 5 | @import "mixins/layout"; 6 | @import "mixins/drawer"; 7 | @import "mixins/forms"; 8 | @import "mixins/buttons"; 9 | @import "mixins/hover"; 10 | @import "mixins/navs"; 11 | @import "mixins/colored-shadows"; 12 | @import "mixins/navbar-colors"; 13 | @import "mixins/alert"; 14 | @import "mixins/sidebar-color"; 15 | @import "mixins/variables"; 16 | @import "mixins/vendor-prefixes"; 17 | -------------------------------------------------------------------------------- /src/assets/scss/core/_popover.scss: -------------------------------------------------------------------------------- 1 | .popover, .tooltip-inner { 2 | line-height: 1.5em; 3 | background: $white-color; 4 | border: none; 5 | border-radius: $border-radius-base; 6 | @include shadow-8dp(); 7 | color: $popover-color; 8 | } 9 | 10 | 11 | .popover{ 12 | padding: 0; 13 | @include shadow-16dp(); 14 | 15 | &.left, 16 | &.right, 17 | &.top, 18 | &.bottom{ 19 | > .arrow{ 20 | border: none; 21 | } 22 | } 23 | 24 | 25 | &.bs-popover-top, 26 | &.bs-popover-auto[x-placement^="top"], 27 | &.bs-popover-bottom, 28 | &.bs-popover-auto[x-placement^="bottom"], 29 | &.bs-popover-right, 30 | &.bs-popover-auto[x-placement^="right"], 31 | &.bs-popover-left, 32 | &.bs-popover-auto[x-placement^="left"]{ 33 | & .arrow::before{ 34 | border: 0; 35 | } 36 | } 37 | 38 | } 39 | 40 | .popover-header{ 41 | background-color: $white-color; 42 | border: none; 43 | padding: 15px 15px 5px; 44 | font-size: $font-size-h4; 45 | margin: 0; 46 | color: $popover-color; 47 | } 48 | 49 | .popover-body{ 50 | padding: 10px 15px 15px; 51 | line-height: 1.4; 52 | color: $popover-color; 53 | } 54 | -------------------------------------------------------------------------------- /src/assets/scss/core/_popups.scss: -------------------------------------------------------------------------------- 1 | .popover{ 2 | font-size: $font-size-base; 3 | box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.2); 4 | border: none; 5 | line-height: 1.7; 6 | max-width: 240px; 7 | 8 | &.bs-popover-top .arrow:before, 9 | &.bs-popover-left .arrow:before, 10 | &.bs-popover-right .arrow:before, 11 | &.bs-popover-bottom .arrow:before,{ 12 | border-top-color: transparent; 13 | border-left-color: transparent; 14 | border-right-color: transparent; 15 | border-bottom-color: transparent; 16 | } 17 | 18 | .popover-header{ 19 | color: $default-color-opacity; 20 | font-size: $font-size-base; 21 | text-transform: capitalize; 22 | font-weight: $font-weight-semi; 23 | margin: 0; 24 | margin-top: 5px; 25 | border: none; 26 | background-color: transparent; 27 | } 28 | 29 | &:before{ 30 | display: none; 31 | } 32 | 33 | &.bs-tether-element-attached-top:after{ 34 | border-bottom-color:$white-color; 35 | top: -9px; 36 | } 37 | 38 | &.popover-primary{ 39 | @include popover-color($primary-color, $white-color); 40 | } 41 | 42 | &.popover-info{ 43 | @include popover-color($info-color, $white-color); 44 | } 45 | 46 | &.popover-warning{ 47 | @include popover-color($warning-color, $white-color); 48 | } 49 | 50 | &.popover-danger{ 51 | @include popover-color($danger-color, $white-color); 52 | } 53 | 54 | &.popover-success{ 55 | @include popover-color($success-color, $white-color); 56 | } 57 | } 58 | 59 | 60 | .tooltip{ 61 | &.bs-tooltip-right .arrow:before{ 62 | border-right-color:$white-color; 63 | } 64 | 65 | &.bs-tooltip-top .arrow:before{ 66 | border-top-color:$white-color; 67 | } 68 | 69 | &.bs-tooltip-bottom .arrow:before{ 70 | border-bottom-color:$white-color; 71 | } 72 | 73 | &.bs-tooltip-left .arrow:before{ 74 | border-left-color:$white-color; 75 | } 76 | } 77 | 78 | .tooltip-inner{ 79 | padding: $padding-base-vertical $padding-base-horizontal; 80 | min-width: 130px; 81 | background-color: $white-color; 82 | font-size: $font-size-base; 83 | color: inherit; 84 | box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2); 85 | } 86 | -------------------------------------------------------------------------------- /src/assets/scss/core/_radios.scss: -------------------------------------------------------------------------------- 1 | 2 | @mixin radio-color($color, $opacity){ 3 | & ~ .check, 4 | & ~ .circle { 5 | opacity: $opacity; 6 | } 7 | 8 | & ~ .check { 9 | background-color: $color; 10 | } 11 | 12 | & ~ .circle { 13 | border-color: $color; 14 | } 15 | } 16 | 17 | .form-check{ 18 | .form-check-label { 19 | cursor: pointer; 20 | padding-left: 25px; 21 | position: relative; 22 | @include mdb-label-color-toggle-focus(); 23 | 24 | span { 25 | display: block; 26 | position: absolute; 27 | left: -1px; 28 | top: -1px; 29 | transition-duration: 0.2s; 30 | } 31 | .circle { 32 | border: 1px solid $mdb-radio-color-off; 33 | height: 15px; 34 | width: 15px; 35 | border-radius: 100%; 36 | top: 1px; 37 | 38 | .check { 39 | height: 15px; 40 | width: 15px; 41 | border-radius: 100%; 42 | background-color: $mdb-radio-color-on; 43 | @include transform-scale3d(unquote('0,0,0')); 44 | 45 | 46 | } 47 | } 48 | 49 | 50 | .form-check-input:not(:checked) ~ .check:after { 51 | @include animation(rippleOff 500ms); 52 | } 53 | 54 | .form-check-input:checked ~ .check:after { 55 | @include animation(rippleOff 500ms); 56 | } 57 | 58 | } 59 | 60 | .form-check-input { 61 | opacity: 0; 62 | height: 0; 63 | width: 0; 64 | overflow: hidden; 65 | 66 | &:checked { 67 | @include radio-color($mdb-radio-color-on, 1); 68 | } 69 | &:checked ~ .circle .check { 70 | @include transform-scale3d(unquote('0.65, 0.65, 1')); 71 | } 72 | } 73 | 74 | .form-check-input[disabled] { 75 | 76 | // light theme spec: Disabled: #000000, Opacity 26% 77 | @include radio-color($black, 0.26); 78 | 79 | & + .circle .check{ 80 | background-color: $black; 81 | } 82 | } 83 | 84 | 85 | .form-check-sign{ 86 | vertical-align: middle; 87 | position: relative; 88 | top: -2px; 89 | float: left; 90 | padding-right: 10px; 91 | display: inline-block; 92 | 93 | } 94 | } 95 | 96 | .form-check + .form-check { 97 | margin-top: 0; 98 | } 99 | -------------------------------------------------------------------------------- /src/assets/scss/core/_ripples.scss: -------------------------------------------------------------------------------- 1 | // marker class (used as a selector for one-off elements to decorate) 2 | .ripple { 3 | position: relative; 4 | } 5 | 6 | .ripple-container { 7 | position: absolute; 8 | top: 0; 9 | left: 0; 10 | z-index: 1; 11 | width: 100%; 12 | height: 100%; 13 | overflow: hidden; 14 | pointer-events: none; 15 | border-radius: inherit; 16 | 17 | .ripple-decorator { 18 | position: absolute; 19 | width: 20px; 20 | height: 20px; 21 | margin-top: -10px; 22 | margin-left: -10px; 23 | pointer-events: none; 24 | background-color: rgba($black, 0.05); 25 | border-radius: 100%; 26 | opacity: 0; 27 | transform: scale(1); 28 | transform-origin: 50%; 29 | 30 | &.ripple-on { 31 | opacity: 0.1; 32 | transition: opacity 0.15s ease-in 0s, 33 | transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s; 34 | } 35 | 36 | &.ripple-out { 37 | opacity: 0; 38 | transition: opacity 0.1s linear 0s !important; 39 | } 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/assets/scss/core/_tables.scss: -------------------------------------------------------------------------------- 1 | .table{ 2 | > thead > tr > th{ 3 | border-bottom-width: 1px; 4 | font-size: $font-size-h5; 5 | font-weight: $font-weight-light; 6 | } 7 | 8 | .form-check{ 9 | margin-top: 0; 10 | 11 | .form-check-sign{ 12 | top: -13px; 13 | left: 0; 14 | padding-right: 0; 15 | } 16 | } 17 | 18 | .radio, 19 | .checkbox{ 20 | margin-top: 0; 21 | margin-bottom: 0; 22 | padding: 0; 23 | width: 15px; 24 | 25 | .icons{ 26 | position: relative; 27 | } 28 | } 29 | > thead > tr > th, 30 | > tbody > tr > th, 31 | > tfoot > tr > th, 32 | > thead > tr > td, 33 | > tbody > tr > td, 34 | > tfoot > tr > td{ 35 | padding: 12px 8px; 36 | vertical-align: middle; 37 | } 38 | 39 | thead{ 40 | tr{ 41 | th{ 42 | font-size: 1.063rem; 43 | } 44 | } 45 | } 46 | 47 | .th-description{ 48 | max-width: 150px; 49 | } 50 | .td-price{ 51 | font-size: 26px; 52 | font-weight: $font-weight-light; 53 | margin-top: 5px; 54 | text-align: right; 55 | } 56 | .td-total{ 57 | font-weight: $font-weight-bold; 58 | font-size: $font-size-h5; 59 | padding-top: 20px; 60 | text-align: right; 61 | } 62 | 63 | .td-actions .btn{ 64 | margin: 0px; 65 | padding: 5px; 66 | } 67 | 68 | > tbody > tr{ 69 | position: relative; 70 | } 71 | } 72 | 73 | .table-shopping{ 74 | > thead > tr > th{ 75 | font-size: $font-size-h6; 76 | text-transform: uppercase; 77 | } 78 | > tbody > tr > td{ 79 | font-size: $font-paragraph; 80 | 81 | b{ 82 | display: block; 83 | margin-bottom: 5px; 84 | } 85 | } 86 | .td-name{ 87 | font-weight: $font-weight-default; 88 | font-size: 1.5em; 89 | line-height: 1.42857143; 90 | 91 | small{ 92 | color: $gray-light; 93 | font-size: 0.75em; 94 | font-weight: $font-weight-light; 95 | } 96 | } 97 | .td-number{ 98 | font-weight: $font-weight-light; 99 | font-size: $font-size-h4; 100 | } 101 | .td-name{ 102 | min-width: 200px; 103 | } 104 | .td-number{ 105 | text-align: right; 106 | min-width: 150px; 107 | 108 | small{ 109 | margin-right: 3px; 110 | } 111 | } 112 | 113 | .img-container{ 114 | width: 120px; 115 | max-height: 160px; 116 | overflow: hidden; 117 | display: block; 118 | 119 | img{ 120 | width: 100%; 121 | } 122 | } 123 | } 124 | 125 | 126 | 127 | 128 | // BS4 has not yet converted the following to variables - keep an eye on it and move to variables when possible. 129 | .thead-inverse { 130 | th { 131 | //color: $bmd-inverse; // #fff; 132 | //background-color: $gray-dark; 133 | } 134 | } 135 | .thead-default { 136 | th { 137 | //color: $gray; 138 | //background-color: $bmd-inverse-lighter; //$gray-lighter; 139 | } 140 | } 141 | 142 | .table-inverse { 143 | color: $bmd-inverse-light; //$gray-lighter; 144 | //background-color: $gray-dark; 145 | 146 | //th, 147 | //td, 148 | //thead th { 149 | // border-color: $gray; 150 | //} 151 | } 152 | 153 | .table { 154 | thead th { 155 | font-size: $bmd-table-header-font-size; 156 | font-weight: 500; 157 | 158 | border-top-width: 0; 159 | border-bottom-width: $table-border-width; 160 | } 161 | } 162 | 163 | thead.thead-inverse, 164 | // needs specificity 165 | .table-inverse thead { 166 | th { 167 | color: $bmd-inverse-lighter; 168 | } 169 | } 170 | 171 | .table-inverse { 172 | th, 173 | td, 174 | thead th { 175 | border-color: $bmd-table-border-color-inverse; 176 | } 177 | } 178 | 179 | .table-striped>tbody>tr:nth-of-type(odd){ 180 | background-color: #f9f9f9; 181 | } 182 | 183 | .table.table-hover tbody tr:hover{ 184 | background-color: #f5f5f5; 185 | } 186 | -------------------------------------------------------------------------------- /src/assets/scss/core/_tabs.scss: -------------------------------------------------------------------------------- 1 | 2 | .nav-tabs { 3 | border: 0; 4 | border-radius: $border-radius-base; 5 | padding: 0 15px; 6 | 7 | .nav-item { 8 | .nav-link { 9 | color: $white-color; 10 | border: 0; 11 | margin: 0; 12 | border-radius: $border-radius-base; 13 | line-height: $mdb-btn-font-size-base * 2; 14 | text-transform: uppercase; 15 | font-size: $mdb-btn-font-size-base; 16 | padding: 10px 15px; 17 | background-color: transparent; 18 | transition: 0.3s background-color 0s; 19 | 20 | &:hover { 21 | border: 0; 22 | } 23 | } 24 | .nav-link, 25 | .nav-link:hover, 26 | .nav-link:focus { 27 | border: 0 !important; 28 | color: $white-color !important; 29 | font-weight: $font-weight-bold; 30 | } 31 | &.disabled .nav-link, 32 | &.disabled .nav-link:hover { 33 | color: rgba(255,255,255,0.5); 34 | } 35 | 36 | .material-icons{ 37 | margin: -1px 5px 0 0; 38 | } 39 | 40 | .nav-link.active{ 41 | background-color: rgba(255,255,255, .2); 42 | transition: 0.3s background-color 0.2s; 43 | } 44 | } 45 | } 46 | 47 | 48 | .nav-tabs { 49 | .nav-link { 50 | border-bottom: $bmd-nav-tabs-border-size solid transparent; 51 | } 52 | 53 | // colors 54 | @include bmd-tabs-color($bmd-nav-tabs-color, $bmd-nav-tabs-active-color, $bmd-nav-tabs-active-border-color, $bmd-nav-tabs-disabled-link-color, $bmd-nav-tabs-disabled-link-color-hover); 55 | 56 | &.header-primary { 57 | @include bmd-tabs-color($bmd-nav-tabs-primary-color, $bmd-nav-tabs-primary-active-color, $bmd-nav-tabs-primary-active-border-color, $bmd-nav-tabs-primary-disabled-link-color, $bmd-nav-tabs-primary-disabled-link-color-hover); 58 | } 59 | 60 | &.bg-inverse { 61 | @include bmd-tabs-color($bmd-nav-tabs-inverse-color, $bmd-nav-tabs-inverse-active-color, $bmd-nav-tabs-inverse-active-border-color, $bmd-nav-tabs-inverse-disabled-link-color, $bmd-nav-tabs-inverse-disabled-link-color-hover); 62 | } 63 | } 64 | 65 | 66 | 67 | .card-nav-tabs{ 68 | margin-top: 45px; 69 | 70 | .card-header{ 71 | margin-top: -30px !important; 72 | } 73 | } 74 | 75 | .tab-content .tab-pane .td-actions{ 76 | display: -webkit-box; 77 | display: -ms-flexbox; 78 | display: flex; 79 | } 80 | 81 | .card .tab-content .form-check{ 82 | margin-top: 6px; 83 | } 84 | -------------------------------------------------------------------------------- /src/assets/scss/core/_togglebutton.scss: -------------------------------------------------------------------------------- 1 | @use "sass:math"; 2 | 3 | .togglebutton { 4 | vertical-align: middle; 5 | &, label, input, .toggle { 6 | user-select: none; 7 | } 8 | label { 9 | cursor: pointer; 10 | color: $mdb-toggle-label-color; 11 | @include mdb-label-color-toggle-focus(); 12 | 13 | // Hide original checkbox 14 | input[type=checkbox] { 15 | opacity: 0; 16 | width: 0; 17 | height: 0; 18 | } 19 | 20 | .toggle { 21 | text-align: left; // Issue #737 horizontal form 22 | margin-left: 5px; 23 | } 24 | // Switch bg off and disabled 25 | .toggle, 26 | input[type=checkbox][disabled] + .toggle { 27 | content: ""; 28 | display: inline-block; 29 | width: 30px; 30 | height: 15px; 31 | background-color: rgba(80, 80, 80, 0.7); 32 | border-radius: 15px; 33 | margin-right: 15px; 34 | transition: background 0.3s ease; 35 | vertical-align: middle; 36 | } 37 | // Handle off 38 | .toggle:after { 39 | content: ""; 40 | display: inline-block; 41 | width: 20px; 42 | height: 20px; 43 | background-color: #FFFFFF; 44 | border-radius: 20px; 45 | position: relative; 46 | box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4); 47 | left: -5px; 48 | top: -2.5px; 49 | border: 1px solid $mdb-checkbox-border-color; 50 | transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease; 51 | } 52 | input[type=checkbox] { 53 | // Handle disabled 54 | &[disabled] { 55 | & + .toggle:after, 56 | &:checked + .toggle:after { 57 | background-color: #BDBDBD; 58 | } 59 | } 60 | 61 | & + .toggle:active:after, 62 | &[disabled] + .toggle:active:after { 63 | box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.1); 64 | } 65 | 66 | // Ripple off and disabled 67 | &:checked + .toggle:after { 68 | left: 15px; 69 | } 70 | } 71 | 72 | // set bg when checked 73 | input[type=checkbox]:checked { 74 | + .toggle { 75 | background-color: rgba($brand-primary, (math.div(70,100))); // Switch bg on 76 | } 77 | 78 | + .toggle:after { 79 | border-color: $brand-primary; // Handle on 80 | } 81 | 82 | + .toggle:active:after { 83 | box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba($brand-primary, (math.div(10,100))); // Ripple on 84 | } 85 | } 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /src/assets/scss/core/_tooltip.scss: -------------------------------------------------------------------------------- 1 | // This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten. 2 | 3 | .tooltip-inner, .mat-tooltip { 4 | color: $gray !important; 5 | line-height: 1.5em; 6 | background: $white-color; 7 | border: none; 8 | border-radius: $border-radius-base !important; 9 | @include shadow-8dp(); 10 | } 11 | 12 | .tooltip, .tooltip.in { 13 | //opacity: 1; 14 | } 15 | .tooltip.in{ 16 | opacity: 1; 17 | @include transform-translate-y(0px); 18 | } 19 | .tooltip{ 20 | opacity: 0; 21 | transition: opacity, transform .2s ease; 22 | @include transform-translate-y(5px); 23 | 24 | &.left{ 25 | .tooltip-arrow{ 26 | border-left-color: $white-color; 27 | } 28 | } 29 | &.right{ 30 | .tooltip-arrow{ 31 | border-right-color: $white-color; 32 | } 33 | } 34 | &.top{ 35 | .tooltip-arrow{ 36 | border-top-color: $white-color; 37 | } 38 | } 39 | &.bottom{ 40 | .tooltip-arrow{ 41 | border-bottom-color: $white-color; 42 | } 43 | } 44 | } 45 | 46 | .tooltip-inner, .mat-tooltip{ 47 | padding: 10px 15px; 48 | min-width: 130px; 49 | } 50 | 51 | .mat-tooltip{ 52 | text-align: center; 53 | } 54 | -------------------------------------------------------------------------------- /src/assets/scss/core/_type.scss: -------------------------------------------------------------------------------- 1 | html * { 2 | -webkit-font-smoothing: antialiased; 3 | -moz-osx-font-smoothing: grayscale; 4 | } 5 | 6 | body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 { 7 | font-family: $font-family-sans-serif; 8 | font-weight: 300; 9 | line-height: 1.5em; 10 | } 11 | 12 | 13 | h1, .h1 { 14 | font-size: $font-size-h1; 15 | line-height: 1.15em; 16 | } 17 | h2, .h2{ 18 | font-size: $font-size-h2; 19 | } 20 | h3, .h3{ 21 | font-size: $font-size-h3; 22 | line-height: 1.4em; 23 | margin: 20px 0 10px; 24 | } 25 | h4, .h4{ 26 | font-size: $font-size-h4; 27 | line-height: 1.4em; 28 | font-weight: 300; 29 | } 30 | h5, .h5 { 31 | font-size: $font-size-h5; 32 | line-height: 1.4em; 33 | margin-bottom: 15px; 34 | } 35 | h6, .h6{ 36 | font-size: $font-size-h6; 37 | text-transform: uppercase; 38 | font-weight: $font-weight-bold; 39 | } 40 | 41 | .title, 42 | .card-title, 43 | .info-title, 44 | .footer-brand, 45 | .footer-big h5, 46 | .footer-big h4, 47 | .media .media-heading{ 48 | //font-weight: $font-weight-extra-bold; 49 | // font-family: $font-family-serif; 50 | 51 | &, 52 | a{ 53 | color: $black-color; 54 | text-decoration: none; 55 | } 56 | } 57 | 58 | .card-blog .card-title{ 59 | font-weight: $font-weight-extra-bold; 60 | } 61 | 62 | h2.title{ 63 | margin-bottom: $margin-base * 2; 64 | } 65 | 66 | .description, 67 | .card-description, 68 | .footer-big p{ 69 | color: $gray-light; 70 | } 71 | 72 | .text-warning { 73 | color: $brand-warning !important; 74 | } 75 | .text-primary { 76 | color: $brand-primary !important; 77 | } 78 | .text-danger { 79 | color: $brand-danger !important; 80 | } 81 | .text-success { 82 | color: $brand-success !important; 83 | } 84 | .text-info { 85 | color: $brand-info !important; 86 | } 87 | .text-rose{ 88 | color: $brand-rose !important; 89 | } 90 | .text-gray{ 91 | color: $gray-color !important; 92 | } 93 | -------------------------------------------------------------------------------- /src/assets/scss/core/_variables.scss: -------------------------------------------------------------------------------- 1 | @import "variables/colors"; 2 | @import "variables/shadow"; 3 | 4 | @import "variables/bootstrap-material-design-base"; 5 | 6 | // Customized BS variables 7 | @import "variables/custom-forms"; 8 | @import "variables/spacing"; 9 | @import "variables/body"; 10 | @import "variables/brand"; 11 | @import "variables/buttons"; 12 | @import "variables/card"; 13 | @import "variables/code"; 14 | @import "variables/dropdown"; 15 | @import "variables/forms"; 16 | @import "variables/list-group"; 17 | @import "variables/nav"; 18 | @import "variables/pagination"; 19 | @import "variables/state"; 20 | @import "variables/tables"; 21 | @import "variables/tooltip"; 22 | @import "variables/type"; 23 | @import "variables/modals"; 24 | 25 | // import their vars after customization for use below 26 | $enable-flex: true; // fully adopt flexbox layouts 27 | $enable-shadows: true; // enable shadows, set to false to turn off shadows 28 | 29 | 30 | @import "variables/layout"; 31 | @import "variables/menu"; 32 | @import "variables/drawer"; 33 | @import "variables/snackbar"; 34 | 35 | @import "variables/bootstrap-material-design"; 36 | -------------------------------------------------------------------------------- /src/assets/scss/core/cards/_card-plain.scss: -------------------------------------------------------------------------------- 1 | .card-plain { 2 | background: transparent; 3 | box-shadow: none; 4 | 5 | .card-header:not(.card-avatar) { 6 | margin-left: 0; 7 | margin-right: 0; 8 | } 9 | 10 | .card-body { 11 | padding-left: 5px; 12 | padding-right: 5px; 13 | } 14 | 15 | .card-header-image { 16 | margin: 0 !important; 17 | border-radius: $border-radius-large; 18 | 19 | img { 20 | border-radius: $border-radius-large; 21 | } 22 | } 23 | .card-footer { 24 | padding-left: 5px; 25 | padding-right: 5px; 26 | background-color: transparent; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/assets/scss/core/cards/_card-profile.scss: -------------------------------------------------------------------------------- 1 | .card-profile{ 2 | margin-top: 30px; 3 | text-align: center; 4 | 5 | 6 | .card-avatar { 7 | margin: -50px auto 0; 8 | border-radius: 50%; 9 | overflow: hidden; 10 | padding: 0; 11 | 12 | @include shadow-big(); 13 | 14 | & + .card-body { 15 | margin-top: 15px; 16 | } 17 | img { 18 | width: 100%; 19 | height: auto; 20 | } 21 | } 22 | 23 | .card-body + .card-footer { 24 | margin-top: -15px; 25 | } 26 | 27 | .card-footer { 28 | .btn.btn-just-icon { 29 | font-size: 20px; 30 | padding: 12px 12px; 31 | line-height: 1em; 32 | } 33 | } 34 | 35 | &.card-plain { 36 | .card-avatar { 37 | margin-top: 0; 38 | } 39 | } 40 | 41 | .card-header:not([class*="card-header-"]){ 42 | background: transparent; 43 | } 44 | .card-avatar { 45 | max-width: 130px; 46 | max-height: 130px; 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /src/assets/scss/core/cards/_card-stats.scss: -------------------------------------------------------------------------------- 1 | .card-stats{ 2 | .card-header{ 3 | &.card-header-icon, 4 | &.card-header-text{ 5 | text-align: right; 6 | } 7 | 8 | .card-icon + .card-title, 9 | .card-icon + .card-category{ 10 | padding-top: 10px; 11 | } 12 | 13 | &.card-header-icon .card-title, 14 | &.card-header-text .card-title, 15 | &.card-header-icon .card-category, 16 | &.card-header-text .card-category { 17 | margin: 0; 18 | } 19 | .card-category { 20 | margin-bottom: 0; 21 | margin-top: 0; 22 | 23 | &:not([class*="text-"]){ 24 | color: $gray-color; 25 | font-size: $font-paragraph; 26 | } 27 | } 28 | 29 | & + .card-footer{ 30 | border-top: 1px solid #eee; 31 | margin-top: 14px; 32 | } 33 | 34 | &.card-header-icon i { 35 | font-size: 36px; 36 | line-height: 56px; 37 | width: 56px; 38 | height: 56px; 39 | text-align: center; 40 | } 41 | } 42 | 43 | .card-body { 44 | text-align: right; 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/assets/scss/core/mixins/_alert.scss: -------------------------------------------------------------------------------- 1 | // alert-variations("", $brand-primary) 2 | @mixin alert-variations($component, $selector-suffix, $brand-default) { 3 | @include generic-variations($component, $selector-suffix, $brand-default, "alert-variations-content", null); 4 | } 5 | 6 | @mixin alert-variations-content($args){ 7 | $variation-color: map-get($args, variation-color); 8 | $variation-color-text: map-get($args, variation-color-text); 9 | 10 | background-color: lighten($variation-color,3%); 11 | color: $variation-color-text; 12 | 13 | a, .alert-link { 14 | color: $variation-color-text; 15 | } 16 | } 17 | // interpolation of mixin-name is not allowed evidently, so we statically include based on the mixin-name given 18 | @mixin call-variations-content-mixin($args) { 19 | $mixin-name: map-get($args, mixin-name); 20 | @if $mixin-name == variations-content { 21 | @include variations-content($args); 22 | } @else if $mixin-name == background-variations-content { 23 | @include background-variations-content($args); 24 | } @else if $mixin-name == text-variations-content { 25 | @include text-variations-content($args); 26 | } @else if $mixin-name == button-variations-content { 27 | @include button-variations-content($args); 28 | } @else if $mixin-name == bg-color-variations-content { 29 | @include bg-color-variations-content($args); 30 | } @else if $mixin-name == bg-box-shadow-variations-content { 31 | @include bg-box-shadow-variations-content($args); 32 | } @else if $mixin-name == bg-img-variations-content { 33 | @include bg-img-variations-content($args); 34 | } @else if $mixin-name == navbar-variations-content { 35 | @include navbar-variations-content($args); 36 | }@else if $mixin-name == alert-variations-content { 37 | @include alert-variations-content($args); 38 | } @else { 39 | @error "Unknown mixin: #{$mixin-name}" 40 | } 41 | } 42 | 43 | // 44 | // To use this mixin you should pass a function as final parameter to define 45 | // the style. In that definition you can use the following variables to define it. 46 | // 47 | // $variation-color-name ---> "red", "green", "indigo" ... 48 | // $variation-color-full-name ---> "red", "green-50", "indigo-400" ... 49 | // $variation-color ---> #f44336, #e8f5e9, #5c6bc0 ... 50 | // $variation-color-text ---> rgba(255,255,255,0.84), rgba(0,0,0,0.84), rgba(255,255,255,0.84) ... 51 | // 52 | 53 | @mixin generic-variations($component, $selector-suffix, $color-default, $mixin-name, $mdb-param-1) { 54 | 55 | //setup map to pass parameters (instead of the incredibly long-error-prone list for each and every @include) 56 | $args: ( 57 | //extra: $selector-suffix, 58 | //default: $color-default, 59 | mixin-name: $mixin-name, 60 | material-param-1: $mdb-param-1 61 | ); 62 | 63 | // bootstrap styles 64 | &#{$selector-suffix}, 65 | &#{$component}-default#{$selector-suffix} { 66 | 67 | $args-extra: map-merge($args, ( 68 | variation-color: $white-color, 69 | variation-color-text: $gray 70 | )); 71 | @include call-variations-content-mixin($args-extra); 72 | } 73 | &#{$component}-inverse#{$selector-suffix} { 74 | $args-inverse: map-merge($args, ( 75 | variation-color: #212121, 76 | variation-color-text: #fff 77 | )); 78 | @include call-variations-content-mixin($args-inverse); 79 | } 80 | &#{$component}-primary#{$selector-suffix} { 81 | $args-primary: map-merge($args, ( 82 | variation-color: $brand-primary, 83 | variation-color-text: $mdb-text-color-light 84 | )); 85 | @include call-variations-content-mixin($args-primary); 86 | } 87 | &#{$component}-success#{$selector-suffix} { 88 | $args-success: map-merge($args, ( 89 | variation-color: $brand-success, 90 | variation-color-text: $mdb-text-color-light 91 | )); 92 | @include call-variations-content-mixin($args-success); 93 | } 94 | &#{$component}-info#{$selector-suffix} { 95 | $args-info: map-merge($args, ( 96 | variation-color: $brand-info, 97 | variation-color-text: $mdb-text-color-light 98 | )); 99 | @include call-variations-content-mixin($args-info); 100 | } 101 | &#{$component}-warning#{$selector-suffix} { 102 | $args-warning: map-merge($args, ( 103 | variation-color: $brand-warning, 104 | variation-color-text: $mdb-text-color-light 105 | )); 106 | @include call-variations-content-mixin($args-warning); 107 | } 108 | &#{$component}-danger#{$selector-suffix} { 109 | $args-danger: map-merge($args, ( 110 | variation-color: $brand-danger, 111 | variation-color-text: $mdb-text-color-light 112 | )); 113 | @include call-variations-content-mixin($args-danger); 114 | } 115 | 116 | &#{$component}-rose#{$selector-suffix} { 117 | $args-rose: map-merge($args, ( 118 | variation-color: $brand-rose, 119 | variation-color-text: $mdb-text-color-light 120 | )); 121 | @include call-variations-content-mixin($args-rose); 122 | } 123 | 124 | } 125 | 126 | @mixin alert-icon-color($color) { 127 | i{ 128 | color: $color; 129 | } 130 | } 131 | -------------------------------------------------------------------------------- /src/assets/scss/core/mixins/_animations.scss: -------------------------------------------------------------------------------- 1 | // Animations (from mdl http://www.getmdl.io/) 2 | 3 | @mixin material-animation-fast-out-slow-in($duration:0.2s) { 4 | transition-duration: $duration; 5 | transition-timing-function: $bmd-animation-curve-fast-out-slow-in; 6 | } 7 | 8 | @mixin material-animation-linear-out-slow-in($duration:0.2s) { 9 | transition-duration: $duration; 10 | transition-timing-function: $bmd-animation-curve-linear-out-slow-in; 11 | } 12 | 13 | @mixin material-animation-fast-out-linear-in($duration:0.2s) { 14 | transition-duration: $duration; 15 | transition-timing-function: $bmd-animation-curve-fast-out-linear-in; 16 | } 17 | 18 | @mixin material-animation-default($duration:0.2s) { 19 | transition-duration: $duration; 20 | transition-timing-function: $bmd-animation-curve-default; 21 | } 22 | 23 | @mixin rotate-180() { 24 | -webkit-transform: rotate( 180deg ); 25 | -moz-transform: rotate( 180deg ); 26 | -o-transform: rotate( 180deg ); 27 | -ms-transform: rotate(180deg); 28 | transform: rotate( 180deg ); 29 | } 30 | 31 | @mixin transform-scale($value){ 32 | -webkit-transform: scale($value); 33 | -moz-transform: scale($value); 34 | -o-transform: scale($value); 35 | -ms-transform: scale($value); 36 | transform: scale($value); 37 | } 38 | 39 | @mixin rotateY-180() { 40 | -webkit-transform: rotateY( 180deg ); 41 | -moz-transform: rotateY( 180deg ); 42 | -o-transform: rotateY( 180deg ); 43 | -ms-transform: rotateY(180deg); 44 | transform: rotateY( 180deg ); 45 | } 46 | 47 | @mixin transitions($time, $type){ 48 | -webkit-transition: all $time $type; 49 | -moz-transition: all $time $type; 50 | -o-transition: all $time $type; 51 | -ms-transition: all $time $type; 52 | transition: all $time $type; 53 | } 54 | 55 | @mixin transitions-property($property, $time, $type){ 56 | -webkit-transition: $property $time $type; 57 | -moz-transition: $property $time $type; 58 | -o-transition: $property $time $type; 59 | -ms-transition: $property $time $type; 60 | transition: $property $time $type; 61 | } 62 | 63 | @mixin transform-translate-x($value){ 64 | -webkit-transform: translate3d($value, 0, 0); 65 | -moz-transform: translate3d($value, 0, 0); 66 | -o-transform: translate3d($value, 0, 0); 67 | -ms-transform: translate3d($value, 0, 0); 68 | transform: translate3d($value, 0, 0); 69 | } 70 | 71 | @mixin transform-translate-y($value){ 72 | -webkit-transform: translate3d(0,$value, 0); 73 | -moz-transform: translate3d(0, $value, 0); 74 | -o-transform: translate3d(0, $value, 0); 75 | -ms-transform: translate3d(0, $value, 0); 76 | transform: translate3d(0, $value, 0); 77 | } 78 | 79 | @mixin perspective($value){ 80 | -webkit-perspective: $value; 81 | -moz-perspective: $value; 82 | -o-perspective: $value; 83 | -ms-perspective: $value; 84 | perspective: $value; 85 | } 86 | 87 | @mixin transform-style($type){ 88 | -webkit-transform-style: $type; 89 | -moz-transform-style: $type; 90 | -o-transform-style: $type; 91 | -ms-transform-style: $type; 92 | transform-style: $type; 93 | } 94 | 95 | @mixin backface-visibility($type){ 96 | -webkit-backface-visibility: $type; 97 | -moz-backface-visibility: $type; 98 | -o-backface-visibility: $type; 99 | -ms-backface-visibility: $type; 100 | backface-visibility: $type; 101 | } 102 | 103 | @mixin transform-translate-y-dropdown($value){ 104 | -webkit-transform: translate3d(0, $value, 0) !important; 105 | -moz-transform: translate3d(0, $value, 0) !important; 106 | -o-transform: translate3d(0, $value, 0) !important; 107 | -ms-transform: translate3d(0, $value, 0) !important; 108 | transform: translate3d(0, $value, 0) !important; 109 | } 110 | -------------------------------------------------------------------------------- /src/assets/scss/core/mixins/_breakpoints.scss: -------------------------------------------------------------------------------- 1 | // case where behavior is responsive, or with a marker class 2 | @mixin media-breakpoint-down-or($breakpoint, $name) { 3 | #{unquote($name)} { 4 | @content; 5 | } 6 | 7 | @include media-breakpoint-down($breakpoint) { 8 | @content; 9 | } 10 | } 11 | 12 | // case where behavior is responsive, or with a marker class 13 | @mixin media-breakpoint-up-or($breakpoint, $name) { 14 | #{unquote($name)} { 15 | @content; 16 | } 17 | 18 | @include media-breakpoint-up($breakpoint) { 19 | @content; 20 | } 21 | } 22 | 23 | // Name of the previous breakpoint, or null 24 | // 25 | // >> breakpoint-next(sm) 26 | // xs 27 | // >> breakpoint-next(sm, (xs: 0, sm: 544px, md: 768px)) 28 | // xs 29 | // >> breakpoint-next(sm, $breakpoint-names: (xs sm md)) 30 | // xs 31 | @function breakpoint-previous($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) { 32 | $n: index($breakpoint-names, $name); 33 | @return if($n > 1, nth($breakpoint-names, $n - 1), null); 34 | } 35 | -------------------------------------------------------------------------------- /src/assets/scss/core/mixins/_chartist.scss: -------------------------------------------------------------------------------- 1 | // Scales for responsive SVG containers 2 | $ct-scales: ((1), (15/16), (8/9), (5/6), (4/5), (3/4), (2/3), (5/8), (1/1.618), (3/5), (9/16), (8/15), (1/2), (2/5), (3/8), (1/3), (1/4)) !default; 3 | $ct-scales-names: (ct-square, ct-minor-second, ct-major-second, ct-minor-third, ct-major-third, ct-perfect-fourth, ct-perfect-fifth, ct-minor-sixth, ct-golden-section, ct-major-sixth, ct-minor-seventh, ct-major-seventh, ct-octave, ct-major-tenth, ct-major-eleventh, ct-major-twelfth, ct-double-octave) !default; 4 | 5 | $ct-class-chart: ct-chart !default; 6 | $ct-class-chart-line: ct-chart-line !default; 7 | $ct-class-chart-bar: ct-chart-bar !default; 8 | $ct-class-horizontal-bars: ct-horizontal-bars !default; 9 | $ct-class-chart-pie: ct-chart-pie !default; 10 | $ct-class-chart-donut: ct-chart-donut !default; 11 | $ct-class-label: ct-label !default; 12 | $ct-class-series: ct-series !default; 13 | $ct-class-line: ct-line !default; 14 | $ct-class-point: ct-point !default; 15 | $ct-class-area: ct-area !default; 16 | $ct-class-bar: ct-bar !default; 17 | $ct-class-slice-pie: ct-slice-pie !default; 18 | $ct-class-slice-donut: ct-slice-donut !default; 19 | $ct-class-grid: ct-grid !default; 20 | $ct-class-slice-donut-solid: ct-slice-donut-solid !default; 21 | $ct-class-grid-background: ct-grid-background !default; 22 | $ct-class-vertical: ct-vertical !default; 23 | $ct-class-horizontal: ct-horizontal !default; 24 | $ct-class-start: ct-start !default; 25 | $ct-class-end: ct-end !default; 26 | 27 | // Class names to be used when generating CSS 28 | 29 | 30 | 31 | // Container ratio 32 | $ct-container-ratio: (1/1.618) !default; 33 | 34 | // Text styles for labels 35 | $ct-text-color: rgba(0, 0, 0, 0.4) !default; 36 | $ct-text-size: 1.3rem !default; 37 | $ct-text-align: flex-start !default; 38 | $ct-text-justify: flex-start !default; 39 | $ct-text-line-height: 1; 40 | 41 | // Grid styles 42 | $ct-grid-color: rgba(0, 0, 0, 0.2) !default; 43 | $ct-grid-dasharray: 2px !default; 44 | $ct-grid-width: 1px !default; 45 | $ct-grid-background-fill: none !default; 46 | 47 | // Line chart properties 48 | $ct-line-width: 4px !default; 49 | $ct-line-dasharray: false !default; 50 | $ct-point-size: 10px !default; 51 | 52 | // Line chart point, can be either round or square 53 | $ct-point-shape: round !default; 54 | // Area fill transparency between 0 and 1 55 | $ct-area-opacity: 0.1 !default; 56 | 57 | // Bar chart bar width 58 | $ct-bar-width: 10px !default; 59 | 60 | // Donut width (If donut width is to big it can cause issues where the shape gets distorted) 61 | $ct-donut-width: 60px !default; 62 | 63 | // If set to true it will include the default classes and generate CSS output. If you're planning to use the mixins you 64 | // should set this property to false 65 | $ct-include-classes: true !default; 66 | 67 | // If this is set to true the CSS will contain colored series. You can extend or change the color with the 68 | // properties below 69 | $ct-include-colored-series: $ct-include-classes !default; 70 | 71 | // If set to true this will include all responsive container variations using the scales defined at the top of the script 72 | $ct-include-alternative-responsive-containers: $ct-include-classes !default; 73 | 74 | // Series names and colors. This can be extended or customized as desired. Just add more series and colors. 75 | $ct-series-names: (a, b, c, d, e, f, g, h, i, j, k, l, m, n, o) !default; 76 | $ct-series-colors: ( 77 | $brand-info, 78 | $brand-danger, 79 | $brand-warning, 80 | $brand-primary, 81 | $brand-success, 82 | $font-background-light-grey, 83 | $gray-color, 84 | $social-google, 85 | $social-tumblr, 86 | $social-youtube, 87 | $social-twitter, 88 | $social-pinterest, 89 | $social-behance, 90 | #6188e2, 91 | #a748ca 92 | ) !default; 93 | -------------------------------------------------------------------------------- /src/assets/scss/core/mixins/_colored-shadows.scss: -------------------------------------------------------------------------------- 1 | @mixin shadow-big(){ 2 | box-shadow: 0 16px 38px -12px rgba(0, 0, 0, $bmd-shadow-penumbra-opacity * 4), 3 | 0 4px 25px 0px rgba(0, 0, 0, $bmd-shadow-ambient-opacity), 4 | 0 8px 10px -5px rgba(0, 0, 0, $bmd-shadow-umbra-opacity); 5 | } 6 | 7 | @mixin shadow-big-image(){ 8 | // new box shadow optimized for Tables and Phones 9 | box-shadow: 0 5px 15px -8px rgba(0, 0, 0, $bmd-shadow-ambient-opacity * 2), 10 | 0 8px 10px -5px rgba(0, 0, 0, $bmd-shadow-umbra-opacity); 11 | } 12 | 13 | @mixin shadow-big-navbar(){ 14 | box-shadow: 0 10px 20px -12px rgba(0, 0, 0, $bmd-shadow-penumbra-opacity * 3), 15 | 0 3px 20px 0px rgba(0, 0, 0, $bmd-shadow-ambient-opacity), 16 | 0 8px 10px -5px rgba(0, 0, 0, $bmd-shadow-umbra-opacity); 17 | } 18 | 19 | // @mixin shadow-big-color($color){ 20 | // // new box shadow optimized for Tables and Phones 21 | // box-shadow: 0 5px 20px 0px rgba(0, 0, 0, 0.2), 22 | // 0 13px 24px -11px rgba($color, 0.60); 23 | // } 24 | 25 | @mixin shadow-small-color($color){ 26 | // new box shadow optimized for Tablets and Phones 27 | box-shadow: 0 4px 20px 0px rgba(0, 0, 0, .14), 28 | 0 7px 10px -5px rgba($color, 0.4) 29 | } 30 | 31 | @mixin shadow-navbar-color($color){ 32 | // new box shadow optimized for Tablets and Phones 33 | 34 | @if($color == $white-color) { 35 | box-shadow: 0 4px 18px 0px rgba(0, 0, 0, .12), 36 | 0 7px 10px -5px rgba(0,0,0, 0.15); 37 | }@else{ 38 | box-shadow: 0 4px 20px 0px rgba(0, 0, 0, .14), 39 | 0 7px 12px -5px rgba($color, 0.46); 40 | } 41 | } 42 | 43 | @mixin shadow-2dp(){ 44 | box-shadow: 0 2px 2px 0 rgba(0, 0, 0, $bmd-shadow-penumbra-opacity), 45 | 0 3px 1px -2px rgba(0, 0, 0, $bmd-shadow-ambient-opacity), 46 | 0 1px 5px 0 rgba(0, 0, 0, $bmd-shadow-umbra-opacity); 47 | } 48 | 49 | @mixin shadow-4dp(){ 50 | box-shadow: 0 4px 5px 0 rgba(0, 0, 0, $bmd-shadow-penumbra-opacity), 51 | 0 1px 10px 0 rgba(0, 0, 0, $bmd-shadow-ambient-opacity), 52 | 0 2px 4px -1px rgba(0, 0, 0, $bmd-shadow-umbra-opacity); 53 | } 54 | 55 | @mixin shadow-6dp(){ 56 | box-shadow: 0 6px 10px 0 rgba(0, 0, 0, $bmd-shadow-penumbra-opacity), 57 | 0 1px 18px 0 rgba(0, 0, 0, $bmd-shadow-ambient-opacity), 58 | 0 3px 5px -1px rgba(0, 0, 0, $bmd-shadow-umbra-opacity); 59 | } 60 | 61 | @mixin shadow-8dp(){ 62 | box-shadow: 0 8px 10px 1px rgba(0, 0, 0, $bmd-shadow-penumbra-opacity), 63 | 0 3px 14px 2px rgba(0, 0, 0, $bmd-shadow-ambient-opacity), 64 | 0 5px 5px -3px rgba(0, 0, 0, $bmd-shadow-umbra-opacity); 65 | } 66 | 67 | 68 | @mixin shadow-16dp(){ 69 | box-shadow: 0 16px 24px 2px rgba(0, 0, 0, $bmd-shadow-penumbra-opacity), 70 | 0 6px 30px 5px rgba(0, 0, 0, $bmd-shadow-ambient-opacity), 71 | 0 8px 10px -5px rgba(0, 0, 0, $bmd-shadow-umbra-opacity); 72 | } 73 | 74 | @mixin shadow-2dp-color($color){ 75 | box-shadow: 0 2px 2px 0 rgba($color, $bmd-shadow-penumbra-opacity), 76 | 0 3px 1px -2px rgba($color, $bmd-shadow-umbra-opacity), 77 | 0 1px 5px 0 rgba($color, $bmd-shadow-ambient-opacity); 78 | } 79 | 80 | @mixin shadow-4dp-color($color){ 81 | box-shadow: 0 4px 5px 0 rgba($color, $bmd-shadow-penumbra-opacity), 82 | 0 1px 10px 0 rgba($color, $bmd-shadow-ambient-opacity), 83 | 0 2px 4px -1px rgba($color, $bmd-shadow-umbra-opacity); 84 | } 85 | 86 | @mixin shadow-8dp-color($color){ 87 | box-shadow: 0 8px 10px 1px rgba($color, $bmd-shadow-penumbra-opacity), 88 | 0 3px 14px 2px rgba(0, 0, 0, $bmd-shadow-ambient-opacity), 89 | 0 5px 5px -3px rgba($color, $bmd-shadow-umbra-opacity); 90 | } 91 | 92 | @mixin shadow-16dp-color($color){ 93 | box-shadow: 0 16px 24px 2px rgba($color, $bmd-shadow-penumbra-opacity), 94 | 0 6px 30px 5px rgba(0, 0, 0, $bmd-shadow-ambient-opacity), 95 | 0 8px 10px -5px rgba($color, $bmd-shadow-umbra-opacity); 96 | } 97 | 98 | @mixin button-shadow-color($color){ 99 | box-shadow: 0 14px 26px -12px rgba($color, $bmd-shadow-penumbra-opacity * 3), 100 | 0 4px 23px 0px rgba(0,0,0, $bmd-shadow-ambient-opacity), 101 | 0 8px 10px -5px rgba($color, $bmd-shadow-umbra-opacity); 102 | } 103 | 104 | @mixin shadow-z-1(){ 105 | box-shadow: 106 | 0 1px 6px 0 rgba(0, 0, 0, 0.12), 107 | 0 1px 6px 0 rgba(0, 0, 0, 0.12); 108 | } 109 | 110 | @mixin shadow-z-1-hover(){ 111 | box-shadow: 112 | 0 5px 11px 0 rgba(0, 0, 0, 0.18), 113 | 0 4px 15px 0 rgba(0, 0, 0, 0.15); 114 | } 115 | 116 | @mixin shadow-z-2(){ 117 | box-shadow: 118 | 0 8px 17px 0 rgba(0, 0, 0, 0.2), 119 | 0 6px 20px 0 rgba(0, 0, 0, 0.19); 120 | } 121 | 122 | @mixin shadow-z-3(){ 123 | box-shadow: 124 | 0 12px 15px 0 rgba(0, 0, 0, 0.24), 125 | 0 17px 50px 0 rgba(0, 0, 0, 0.19); 126 | } 127 | 128 | @mixin shadow-z-4(){ 129 | box-shadow: 130 | 0 16px 28px 0 rgba(0, 0, 0, 0.22), 131 | 0 25px 55px 0 rgba(0, 0, 0, 0.21); 132 | } 133 | 134 | @mixin shadow-z-5(){ 135 | box-shadow: 136 | 0 27px 24px 0 rgba(0, 0, 0, 0.2), 137 | 0 40px 77px 0 rgba(0, 0, 0, 0.22); 138 | } 139 | -------------------------------------------------------------------------------- /src/assets/scss/core/mixins/_hover.scss: -------------------------------------------------------------------------------- 1 | @mixin bmd-hover-focus-active { 2 | // add the .active to the whole mix of hover-focus-active 3 | &.active { 4 | @content; 5 | } 6 | @include hover-focus-active() { 7 | @content; 8 | } 9 | } 10 | 11 | @mixin transform-translate-y($value){ 12 | -webkit-transform: translate3d(0,$value, 0); 13 | -moz-transform: translate3d(0, $value, 0); 14 | -o-transform: translate3d(0, $value, 0); 15 | -ms-transform: translate3d(0, $value, 0); 16 | transform: translate3d(0, $value, 0); 17 | } 18 | -------------------------------------------------------------------------------- /src/assets/scss/core/mixins/_layout.scss: -------------------------------------------------------------------------------- 1 | // Generates the `.in` style for the generic backdrop used components such as the drawer in overlay mode 2 | @mixin bmd-layout-backdrop-in() { 3 | > .bmd-layout-backdrop { 4 | .in { 5 | visibility: visible; 6 | background-color: rgba(0, 0, 0, 0.5); 7 | } 8 | 9 | @supports (pointer-events: auto) { 10 | &.in { 11 | pointer-events: auto; 12 | opacity: 1; 13 | } 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/assets/scss/core/mixins/_navbar-colors.scss: -------------------------------------------------------------------------------- 1 | @mixin navbar-colors($color, $link-color) { 2 | color: $link-color; 3 | background-color: $color !important; 4 | @include shadow-navbar-color($color); 5 | 6 | .dropdown-item:hover, 7 | .dropdown-item:focus{ 8 | @include shadow-small-color($color); 9 | background-color: $color; 10 | color: $link-color; 11 | } 12 | 13 | .navbar-toggler{ 14 | .navbar-toggler-icon{ 15 | background-color: $link-color; 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/assets/scss/core/mixins/_navs.scss: -------------------------------------------------------------------------------- 1 | @mixin bmd-tabs-color($color, $active-color, $active-border, $disabled-link-color, $disabled-link-hover-color) { 2 | .nav-link { 3 | color: $color; 4 | 5 | &.active { 6 | color: $active-color; 7 | border-color: $active-border; 8 | @include hover-focus { 9 | border-color: $active-border; 10 | } 11 | } 12 | 13 | // Disabled state lightens text and removes hover/tab effects 14 | &.disabled { 15 | color: $disabled-link-color; 16 | 17 | @include plain-hover-focus { 18 | color: $disabled-link-hover-color; 19 | } 20 | } 21 | } 22 | } 23 | 24 | @mixin set-wizard-color($color) { 25 | 26 | .moving-tab{ 27 | background-color: $color; 28 | @include shadow-big-color($color); 29 | } 30 | 31 | .picture{ 32 | &:hover{ 33 | border-color: $color; 34 | } 35 | } 36 | 37 | .choice{ 38 | &:hover, 39 | &.active{ 40 | .icon{ 41 | border-color: $color; 42 | color: $color; 43 | } 44 | } 45 | } 46 | 47 | 48 | .checkbox input[type=checkbox]:checked + .checkbox-material{ 49 | .check{ 50 | background-color: $color; 51 | } 52 | } 53 | 54 | .radio input[type=radio]:checked ~ .check { 55 | background-color: $color; 56 | } 57 | 58 | .radio input[type=radio]:checked ~ .circle { 59 | border-color: $color; 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /src/assets/scss/core/mixins/_sidebar-color.scss: -------------------------------------------------------------------------------- 1 | @mixin sidebar-background-color($background-color, $font-color){ 2 | .nav{ 3 | .nav-item{ 4 | .nav-link{ 5 | color: $font-color; 6 | } 7 | i{ 8 | color: rgba($font-color, .8); 9 | } 10 | 11 | &.active, 12 | &:hover{ 13 | [data-toggle="collapse"]{ 14 | color: $font-color; 15 | i{ 16 | color: rgba($font-color, .8); 17 | } 18 | } 19 | } 20 | } 21 | } 22 | .user{ 23 | a{ 24 | color: $font-color; 25 | } 26 | } 27 | .simple-text{ 28 | color: $font-color; 29 | } 30 | .sidebar-background:after{ 31 | background: $background-color; 32 | opacity: .8; 33 | } 34 | } 35 | 36 | @mixin sidebar-active-color($font-color){ 37 | .nav{ 38 | .nav-item{ 39 | &.active > a:not([data-toggle="collapse"]){ 40 | color: $font-color; 41 | opacity: 1; 42 | @include shadow-big-color($font-color); 43 | 44 | i{ 45 | color: rgba($font-color, .8); 46 | } 47 | } 48 | } 49 | } 50 | } 51 | 52 | @mixin set-background-color-button($color){ 53 | 54 | li.active > a{ 55 | background-color: $color; 56 | @include shadow-big-color($color); 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /src/assets/scss/core/mixins/_transparency.scss: -------------------------------------------------------------------------------- 1 | // Opacity 2 | 3 | @mixin opacity($opacity) { 4 | opacity: $opacity; 5 | // IE8 filter 6 | $opacity-ie: ($opacity * 100); 7 | filter: #{alpha(opacity=$opacity-ie)}; 8 | } 9 | 10 | @mixin black-filter($opacity){ 11 | top: 0; 12 | left: 0; 13 | height: 100%; 14 | width: 100%; 15 | position: absolute; 16 | background-color: rgba(17,17,17,$opacity); 17 | display: block; 18 | content: ""; 19 | z-index: 1; 20 | } -------------------------------------------------------------------------------- /src/assets/scss/core/mixins/_type.scss: -------------------------------------------------------------------------------- 1 | @mixin headings() { 2 | h1, 3 | h2, 4 | h3, 5 | h4, 6 | h5, 7 | h6 { 8 | @content; 9 | } 10 | } 11 | 12 | // 14sp font 13 | %std-font { 14 | font-size: .875rem; 15 | } 16 | -------------------------------------------------------------------------------- /src/assets/scss/core/mixins/_utilities.scss: -------------------------------------------------------------------------------- 1 | @use "sass:math"; 2 | 3 | @function calc-top($line-height-base, $font-size, $component-height) { 4 | @return (($line-height-base * $font-size) - $component-height) / 2; // vertical center of line-height 5 | } 6 | 7 | // Emulate the less #contrast function 8 | // TODO: this may be useful for the inverse theme, but if not, remove (it is unused after the removal of fullpalette) 9 | // contrast-color and brightness borrowed from compass 10 | // Copyright (c) 2009-2014 Christopher M. Eppstein 11 | // Complies with license: https://github.com/Compass/compass/blob/stable/LICENSE.markdown 12 | @function contrast-color($color, $dark: $contrasted-dark-default, $light: $contrasted-light-default, $threshold: null) { 13 | @if $threshold { 14 | // Deprecated in Compass 0.13 15 | @warn "The $threshold argment to contrast-color is no longer needed and will be removed in the next release."; 16 | } 17 | 18 | @if $color == null { 19 | @return null; 20 | } @else { 21 | $color-brightness: brightness($color); 22 | $dark-text-brightness: brightness($dark); 23 | $light-text-brightness: brightness($light); 24 | @return if(abs($color-brightness - $light-text-brightness) > abs($color-brightness - $dark-text-brightness), $light, $dark); 25 | } 26 | } 27 | 28 | @function brightness($color) { 29 | @if type-of($color) == color { 30 | @return math.div(red($color) * 0.299 + green($color) * 0.587 + blue($color) * 0.114, 255) * 100%; 31 | } @else { 32 | @return unquote("brightness(#{$color})"); 33 | } 34 | } 35 | 36 | @mixin linear-gradient($color1, $color2){ 37 | background: $color1; /* For browsers that do not support gradients */ 38 | background: -webkit-linear-gradient(60deg, $color1 , $color2); /* For Safari 5.1 to 6.0 */ 39 | background: -o-linear-gradient(60deg, $color1, $color2); /* For Opera 11.1 to 12.0 */ 40 | background: -moz-linear-gradient(60deg, $color1, $color2); /* For Firefox 3.6 to 15 */ 41 | background: linear-gradient(60deg, $color1 , $color2); /* Standard syntax */ 42 | } 43 | 44 | @mixin radial-gradient($extern-color, $center-color){ 45 | background: $extern-color; 46 | background: -moz-radial-gradient(center, ellipse cover, $center-color 0%, $extern-color 100%); /* FF3.6+ */ 47 | background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,$center-color), color-stop(100%,$extern-color)); /* Chrome,Safari4+ */ 48 | background: -webkit-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* Chrome10+,Safari5.1+ */ 49 | background: -o-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* Opera 12+ */ 50 | background: -ms-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* IE10+ */ 51 | background: radial-gradient(ellipse at center, $center-color 0%,$extern-color 100%); /* W3C */ 52 | background-size: 550% 450%; 53 | } 54 | @mixin badges-color($color){ 55 | .tag{ 56 | background-color: $color; 57 | color: $white-color; 58 | 59 | .tagsinput-remove-link{ 60 | color: $white-color; 61 | } 62 | } 63 | // .tagsinput-add{ 64 | // color: $color; 65 | // } 66 | } 67 | @mixin create-colored-badges(){ 68 | 69 | &.primary-badge{ 70 | @include badges-color($brand-primary); 71 | } 72 | &.info-badge { 73 | @include badges-color($brand-info); 74 | } 75 | &.success-badge{ 76 | @include badges-color($brand-success); 77 | } 78 | &.warning-badge{ 79 | @include badges-color($brand-warning); 80 | } 81 | &.danger-badge{ 82 | @include badges-color($brand-danger); 83 | } 84 | &.rose-badge{ 85 | @include badges-color($brand-rose); 86 | } 87 | } 88 | 89 | @mixin badge-color() { 90 | &.badge-primary{ 91 | background-color: $brand-primary; 92 | } 93 | &.badge-info { 94 | background-color: $brand-info; 95 | } 96 | &.badge-success{ 97 | background-color: $brand-success; 98 | } 99 | &.badge-warning{ 100 | background-color: $brand-warning; 101 | } 102 | &.badge-danger{ 103 | background-color: $brand-danger; 104 | } 105 | &.badge-rose{ 106 | background-color: $brand-rose; 107 | } 108 | &.badge-default{ 109 | background-color: $gray-light; 110 | } 111 | } 112 | -------------------------------------------------------------------------------- /src/assets/scss/core/mixins/_variables.scss: -------------------------------------------------------------------------------- 1 | //== Buttons 2 | // 3 | //## For each of Bootstrap's buttons, define text, background and border color. 4 | 5 | $opacity-gray-3: rgba(222,222,222, .3) !default; 6 | $opacity-gray-5: rgba(222,222,222, .5) !default; 7 | $opacity-gray-8: rgba(222,222,222, .8) !default; 8 | 9 | $opacity-5: rgba(255,255,255, .5) !default; 10 | $opacity-8: rgba(255,255,255, .8) !default; 11 | 12 | $opacity-1: rgba(255,255,255, .1) !default; 13 | $opacity-2: rgba(255,255,255, .2) !default; 14 | 15 | //== Components 16 | // 17 | 18 | $topbar-x: topbar-x !default; 19 | $topbar-back: topbar-back !default; 20 | $bottombar-x: bottombar-x !default; 21 | $bottombar-back: bottombar-back !default; 22 | 23 | // Sidebar variables 24 | $sidebar-width: calc(100% - 260px) !default; 25 | $sidebar-mini-width: calc(100% - 80px) !default; 26 | -------------------------------------------------------------------------------- /src/assets/scss/core/plugins/_animate.scss: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | // This file was modified by Creative Tim to keep only the animation that we need for Bootstrap Notify 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | @charset "UTF-8"; 37 | 38 | /* 39 | Animate.css - http://daneden.me/animate 40 | Licensed under the MIT license - http://opensource.org/licenses/MIT 41 | 42 | Copyright (c) 2015 Daniel Eden 43 | */ 44 | 45 | .animated { 46 | -webkit-animation-duration: 1s; 47 | animation-duration: 1s; 48 | -webkit-animation-fill-mode: both; 49 | animation-fill-mode: both; 50 | } 51 | 52 | .animated.infinite { 53 | -webkit-animation-iteration-count: infinite; 54 | animation-iteration-count: infinite; 55 | } 56 | 57 | .animated.hinge { 58 | -webkit-animation-duration: 2s; 59 | animation-duration: 2s; 60 | } 61 | 62 | .animated.bounceIn, 63 | .animated.bounceOut { 64 | -webkit-animation-duration: .75s; 65 | animation-duration: .75s; 66 | } 67 | 68 | .animated.flipOutX, 69 | .animated.flipOutY { 70 | -webkit-animation-duration: .75s; 71 | animation-duration: .75s; 72 | } 73 | 74 | @-webkit-keyframes shake { 75 | from, to { 76 | -webkit-transform: translate3d(0, 0, 0); 77 | transform: translate3d(0, 0, 0); 78 | } 79 | 80 | 10%, 30%, 50%, 70%, 90% { 81 | -webkit-transform: translate3d(-10px, 0, 0); 82 | transform: translate3d(-10px, 0, 0); 83 | } 84 | 85 | 20%, 40%, 60%, 80% { 86 | -webkit-transform: translate3d(10px, 0, 0); 87 | transform: translate3d(10px, 0, 0); 88 | } 89 | } 90 | 91 | @keyframes shake { 92 | from, to { 93 | -webkit-transform: translate3d(0, 0, 0); 94 | transform: translate3d(0, 0, 0); 95 | } 96 | 97 | 10%, 30%, 50%, 70%, 90% { 98 | -webkit-transform: translate3d(-10px, 0, 0); 99 | transform: translate3d(-10px, 0, 0); 100 | } 101 | 102 | 20%, 40%, 60%, 80% { 103 | -webkit-transform: translate3d(10px, 0, 0); 104 | transform: translate3d(10px, 0, 0); 105 | } 106 | } 107 | 108 | .shake { 109 | -webkit-animation-name: shake; 110 | animation-name: shake; 111 | } 112 | 113 | 114 | 115 | @-webkit-keyframes fadeInDown { 116 | from { 117 | opacity: 0; 118 | -webkit-transform: translate3d(0, -100%, 0); 119 | transform: translate3d(0, -100%, 0); 120 | } 121 | 122 | to { 123 | opacity: 1; 124 | -webkit-transform: none; 125 | transform: none; 126 | } 127 | } 128 | 129 | @keyframes fadeInDown { 130 | from { 131 | opacity: 0; 132 | -webkit-transform: translate3d(0, -100%, 0); 133 | transform: translate3d(0, -100%, 0); 134 | } 135 | 136 | to { 137 | opacity: 1; 138 | -webkit-transform: none; 139 | transform: none; 140 | } 141 | } 142 | 143 | .fadeInDown { 144 | -webkit-animation-name: fadeInDown; 145 | animation-name: fadeInDown; 146 | } 147 | 148 | 149 | @-webkit-keyframes fadeOut { 150 | from { 151 | opacity: 1; 152 | } 153 | 154 | to { 155 | opacity: 0; 156 | } 157 | } 158 | 159 | @keyframes fadeOut { 160 | from { 161 | opacity: 1; 162 | } 163 | 164 | to { 165 | opacity: 0; 166 | } 167 | } 168 | 169 | .fadeOut { 170 | -webkit-animation-name: fadeOut; 171 | animation-name: fadeOut; 172 | } 173 | 174 | @-webkit-keyframes fadeOutDown { 175 | from { 176 | opacity: 1; 177 | } 178 | 179 | to { 180 | opacity: 0; 181 | -webkit-transform: translate3d(0, 100%, 0); 182 | transform: translate3d(0, 100%, 0); 183 | } 184 | } 185 | 186 | @keyframes fadeOutDown { 187 | from { 188 | opacity: 1; 189 | } 190 | 191 | to { 192 | opacity: 0; 193 | -webkit-transform: translate3d(0, 100%, 0); 194 | transform: translate3d(0, 100%, 0); 195 | } 196 | } 197 | 198 | .fadeOutDown { 199 | -webkit-animation-name: fadeOutDown; 200 | animation-name: fadeOutDown; 201 | } 202 | 203 | @-webkit-keyframes fadeOutUp { 204 | from { 205 | opacity: 1; 206 | } 207 | 208 | to { 209 | opacity: 0; 210 | -webkit-transform: translate3d(0, -100%, 0); 211 | transform: translate3d(0, -100%, 0); 212 | } 213 | } 214 | 215 | @keyframes fadeOutUp { 216 | from { 217 | opacity: 1; 218 | } 219 | 220 | to { 221 | opacity: 0; 222 | -webkit-transform: translate3d(0, -100%, 0); 223 | transform: translate3d(0, -100%, 0); 224 | } 225 | } 226 | 227 | .fadeOutUp { 228 | -webkit-animation-name: fadeOutUp; 229 | animation-name: fadeOutUp; 230 | } 231 | -------------------------------------------------------------------------------- /src/assets/scss/core/variables/_body.scss: -------------------------------------------------------------------------------- 1 | // Body 2 | // 3 | // Settings for the `` element. 4 | 5 | $body-bg: #fafafa !default; 6 | //$body-color: $gray-dark !default; 7 | -------------------------------------------------------------------------------- /src/assets/scss/core/variables/_bootstrap-material-design-base.scss: -------------------------------------------------------------------------------- 1 | $gray-lighter: rgba($black, 0.12) !default; 2 | $gray-light: #999 !default; 3 | $gray-alpha: .54 !default; 4 | $gray: #555 !default; // spec color 5 | $gray-dark: rgba($black, 0.87) !default; // used for text color - others use grey-600 which is considerably lighter 6 | 7 | $bmd-font-weight-base: 400; 8 | 9 | // wondering if any of these could still be refactored out, but are definitely in use. 10 | $bmd-inverse: rgba($white, 1) !default; 11 | $bmd-inverse-light: rgba($white, 0.84) !default; 12 | $bmd-inverse-lighter: rgba($white, 0.54) !default; 13 | 14 | $bmd-label-color: $gray-color !default; 15 | $bmd-label-color-inner-focus: $gray !default; // e.g. radio label or text-muted not a control-label which is primary 16 | 17 | $border-radius-base: 3px !default; 18 | $border-radius-small: 2px !default; 19 | $border-radius-large: 6px !default; 20 | $border-radius-huge: 10px !default; 21 | $border-radius-label: 12px !default; 22 | $border-radius-extreme: 30px !default; 23 | 24 | // Typography elements 25 | $mdb-font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !default; 26 | $mdb-text-color-light: $white !default; 27 | $mdb-text-color-light-hex: $white !default; // for contrast function in inverse 28 | $mdb-text-color-primary: unquote("rgba(#{$rgb-black}, 0.87)") !default; 29 | $mdb-text-color-primary-hex: $black !default; // for contrast function in inverse 30 | $icon-color: rgba(0,0,0,0.5) !default; 31 | 32 | $mdb-label-color: unquote("rgba(#{$rgb-black}, 0.26)") !default; 33 | $mdb-label-color-toggle-focus: unquote("rgba(#{$rgb-black}, .54)") !default; 34 | -------------------------------------------------------------------------------- /src/assets/scss/core/variables/_brand.scss: -------------------------------------------------------------------------------- 1 | // Bootstrap brand color customization 2 | 3 | 4 | /* brand Colors */ 5 | 6 | $brand-primary: $purple-500 !default; 7 | $brand-info: $cyan-500 !default; 8 | $brand-success: $green-500 !default; 9 | $brand-warning: $orange-500 !default; 10 | $brand-danger: $red-500 !default; 11 | $brand-rose: $pink-500 !default; 12 | $brand-inverse: $black-color !default; 13 | -------------------------------------------------------------------------------- /src/assets/scss/core/variables/_buttons.scss: -------------------------------------------------------------------------------- 1 | // Buttons: 2 | $bmd-btn-font-size: .875rem !default; // 14px 3 | $bmd-btn-font-size-lg: 1.25rem !default; 4 | $bmd-btn-font-size-sm: .6875rem !default; // 11px 5 | $bmd-btn-margin-bottom: .3125rem !default; // 5px 6 | 7 | // default btn with no specific type designation 8 | $bmd-btn-color: $gray-dark !default; 9 | $bmd-btn-bg: transparent !default; //$body-bg !default; // #fff 10 | $bmd-btn-border: #ccc !default; 11 | 12 | $bmd-btn-focus-bg: rgba(#999, .20) !default; // spec: bg Hover: 20% #999999 13 | $bmd-btn-active-bg: rgba(#999, .40) !default; // spec: bg Pressed: 40% #999999 14 | $bmd-btn-disabled: rgba($black, .26) !default; // spec: light theme: Disabled text: 26% $black 15 | 16 | $bmd-inverse-btn-focus-bg: rgba(#ccc, .15) !default; // spec: dark bg Hover: 15% #CCCCCC 17 | $bmd-inverse-btn-active-bg: rgba(#ccc, .25) !default; // spec: dark Pressed: 25% #CCCCCC 18 | $bmd-inverse-btn-disabled: rgba($white, .30) !default; // spec: dark theme: Disabled text: 30% $white 19 | 20 | $bmd-btn-fab-size: 3.5rem !default; // 56px 21 | $bmd-btn-fab-size-sm: 2.5rem !default; // 40px 22 | $bmd-btn-fab-font-size: 1.5rem !default; // 24px 23 | 24 | // icons 25 | $bmd-btn-icon-size: 2rem !default; // 32px 26 | $bmd-btn-icon-size-sm: (.75 * $bmd-btn-icon-size) !default; // ~24px 27 | $bmd-btn-icon-font-size-sm: (.75 * $bmd-btn-fab-font-size) !default; 28 | 29 | // Buttons 30 | // 31 | // For each of Bootstrap's buttons, define text, background and border color. 32 | $input-btn-padding-x: 1rem !default; // 1rem 33 | $input-btn-padding-y: .46875rem !default; // .5rem achieve a 36dp height 34 | //$input-btn-line-height: 1 !default; //1.25 35 | $btn-font-weight: 400 !default; // normal 36 | $btn-box-shadow: none !default; 37 | $btn-active-box-shadow: none !default; // inset 0 3px 5px rgba(0,0,0,.125) 38 | 39 | // 40 | $btn-primary-color: #fff !default; 41 | $btn-primary-bg: $brand-primary !default; 42 | $btn-primary-border-color: $btn-primary-bg !default; 43 | // 44 | $btn-secondary-color: $gray-dark !default; 45 | $btn-secondary-bg: $body-bg !default; // #fff 46 | $btn-secondary-border-color: #ccc !default; 47 | // 48 | $btn-info-color: #fff !default; 49 | $btn-info-bg: $brand-info !default; 50 | $btn-info-border-color: $btn-info-bg !default; 51 | // 52 | $btn-success-color: #fff !default; 53 | $btn-success-bg: $brand-success !default; 54 | $btn-success-border-color: $btn-success-bg !default; 55 | // 56 | $btn-warning-color: #fff !default; 57 | $btn-warning-bg: $brand-warning !default; 58 | $btn-warning-border-color: $btn-warning-bg !default; 59 | // 60 | $btn-danger-color: #fff !default; 61 | $btn-danger-bg: $brand-danger !default; 62 | $btn-danger-border-color: $btn-danger-bg !default; 63 | 64 | $btn-rose-color: #fff !default; 65 | $btn-rose-bg: $brand-rose !default; 66 | $btn-rose-border-color: $btn-rose-bg !default; 67 | 68 | $btn-default-color: #fff !default; 69 | $btn-default-bg: $gray-color !default; 70 | $btn-default-border-color: $btn-default-bg !default; 71 | // 72 | $btn-link-disabled-color: $gray-light !default; 73 | // 74 | $input-btn-padding-x-sm: 1.25rem !default; 75 | $input-btn-padding-y-sm: .40625rem !default; // achieve a 32dp height was .25rem 76 | 77 | $input-btn-padding-y-lg: 1.125rem !default; 78 | $input-btn-padding-x-lg: 2.25rem !default; 79 | 80 | // 81 | //$input-btn-padding-x-lg: 1.5rem !default; 82 | //$input-btn-padding-y-lg: .75rem !default; 83 | // 84 | //// Allows for customizing button radius independently from global border radius 85 | //$btn-border-radius: $border-radius !default; 86 | //$btn-border-radius-lg: $border-radius-lg !default; 87 | $btn-border-radius-sm: .1875rem !default; 88 | $border-radius-extreme: 2rem !default; 89 | -------------------------------------------------------------------------------- /src/assets/scss/core/variables/_card.scss: -------------------------------------------------------------------------------- 1 | // Cards 2 | //$card-spacer-x: 1.25rem !default; 3 | //$card-spacer-y: .75rem !default; 4 | //$card-border-width: 1px !default; 5 | //$card-border-radius: $border-radius !default; 6 | $card-border-color: $gray-lighter !default; // #e5e5e5 7 | //$card-border-radius-inner: $card-border-radius !default; 8 | $card-bg: #fff !default; 9 | $card-cap-bg: $card-bg !default; // #f5f5f5 10 | // 11 | //$card-link-hover-color: #fff !default; 12 | // 13 | //$card-deck-margin: .625rem !default; 14 | // Card 15 | $mdb-card-body-text: $mdb-text-color-primary !default; 16 | $mdb-card-body-background: #fff !default; 17 | $mdb-card-image-headline: #fff !default; 18 | 19 | $text-disabled: #a8a8a8 !default; 20 | $background-disabled: #eaeaea !default; 21 | -------------------------------------------------------------------------------- /src/assets/scss/core/variables/_code.scss: -------------------------------------------------------------------------------- 1 | // Code 2 | 3 | $code-bg: $grey-200 !default; // #f7f7f9 !default; 4 | -------------------------------------------------------------------------------- /src/assets/scss/core/variables/_custom-forms.scss: -------------------------------------------------------------------------------- 1 | $custom-file-bg: transparent !default; 2 | $custom-file-border-width: 0 !default; 3 | $custom-file-box-shadow: none !default; 4 | $custom-file-border-radius: 0 !default; 5 | $custom-file-line-height: 1.3 !default; 6 | -------------------------------------------------------------------------------- /src/assets/scss/core/variables/_drawer.scss: -------------------------------------------------------------------------------- 1 | // Drawer 2 | 3 | // Sizing 4 | $bmd-drawer-x-size: 240px !default; 5 | $bmd-drawer-y-size: 100px !default; 6 | -------------------------------------------------------------------------------- /src/assets/scss/core/variables/_dropdown.scss: -------------------------------------------------------------------------------- 1 | // Dropdowns 2 | // 3 | // Dropdown menu container and contents. 4 | 5 | //$dropdown-bg: #fff !default; 6 | //$dropdown-border-color: rgba(0,0,0,.15) !default; 7 | //$dropdown-border-width: $border-width !default; 8 | //$dropdown-divider-bg: #e5e5e5 !default; 9 | $dropdown-box-shadow: $bmd-shadow-2dp !default; //0 6px 12px rgba(0,0,0,.175) !default; 10 | // 11 | //$dropdown-link-color: $gray-dark !default; 12 | //$dropdown-link-hover-color: darken($gray-dark, 5%) !default; 13 | //$dropdown-link-hover-bg: #f5f5f5 !default; 14 | // 15 | //$dropdown-link-active-color: $component-active-color !default; 16 | //$dropdown-link-active-bg: $component-active-bg !default; 17 | // 18 | //$dropdown-link-disabled-color: $gray-light !default; 19 | // 20 | //$dropdown-header-color: $gray-light !default; 21 | -------------------------------------------------------------------------------- /src/assets/scss/core/variables/_forms.scss: -------------------------------------------------------------------------------- 1 | // Forms 2 | 3 | // 4 | $input-bg: rgba($black, 0) !default; // #fff !default; 5 | $input-bg-disabled: rgba($black, 0) !default; // $gray-lighter !default; 6 | // 7 | //$input-color: $gray !default; 8 | $input-border-color: #d2d2d2 !default; // #ccc !default; 9 | $input-border-color-white: #FFFFFF !default; 10 | 11 | //$input-btn-border-width: $border-width !default; // For form controls and buttons 12 | $input-box-shadow: none !default; //inset 0 1px 1px rgba(0,0,0,.075) !default; 13 | // 14 | $input-border-radius: 0 !default; // $border-radius !default; 15 | $input-box-shadow-focus: none !default; // rgba(102,175,233,.6) !default; 16 | // 17 | $input-color-placeholder: $bmd-label-color !default; // #999 !default; 18 | 19 | $input-padding-x: 0 !default; // .75rem !default; 20 | $input-padding-y: .4375rem !default; // spec 8px // .375rem !default; 21 | 22 | $input-padding-x-sm: 0 !default; // .75rem !default; 23 | $input-padding-y-sm: .25rem !default; // spec 4px //.275rem !default; 24 | 25 | $input-padding-x-lg: 0 !default; // 1.25rem !default; 26 | $input-padding-y-lg: .5625rem !default; // no-spec 9px // .75rem !default; 27 | 28 | // 29 | $input-group-addon-bg: transparent !default; //$gray-lighter !default; 30 | $input-group-addon-border-color: transparent !default; //$input-border-color !default; 31 | // 32 | //$cursor-disabled: not-allowed !default; 33 | // 34 | //// Form validation icons 35 | $form-icon-success: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjNWNiODVjIiBkPSJNMjMzLjggNjEwYy0xMy4zIDAtMjYtNi0zNC0xNi44TDkwLjUgNDQ4LjhDNzYuMyA0MzAgODAgNDAzLjMgOTguOCAzODljMTguOC0xNC4yIDQ1LjUtMTAuNCA1OS44IDguNGw3MiA5NUw0NTEuMyAyNDJjMTIuNS0yMCAzOC44LTI2LjIgNTguOC0xMy43IDIwIDEyLjQgMjYgMzguNyAxMy43IDU4LjhMMjcwIDU5MGMtNy40IDEyLTIwLjIgMTkuNC0zNC4zIDIwaC0yeiIvPjwvc3ZnPg=="; 36 | $form-icon-warning: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjZjBhZDRlIiBkPSJNNjAzIDY0MC4ybC0yNzguNS01MDljLTMuOC02LjYtMTAuOC0xMC42LTE4LjUtMTAuNnMtMTQuNyA0LTE4LjUgMTAuNkw5IDY0MC4yYy0zLjcgNi41LTMuNiAxNC40LjIgMjAuOCAzLjggNi41IDEwLjggMTAuNCAxOC4zIDEwLjRoNTU3YzcuNiAwIDE0LjYtNCAxOC40LTEwLjQgMy41LTYuNCAzLjYtMTQuNCAwLTIwLjh6bS0yNjYuNC0zMGgtNjEuMlY1NDloNjEuMnY2MS4yem0wLTEwN2gtNjEuMlYzMDRoNjEuMnYxOTl6Ii8+PC9zdmc+"; 37 | $form-icon-danger: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjZDk1MzRmIiBkPSJNNDQ3IDU0NC40Yy0xNC40IDE0LjQtMzcuNiAxNC40LTUyIDBsLTg5LTkyLjctODkgOTIuN2MtMTQuNSAxNC40LTM3LjcgMTQuNC01MiAwLTE0LjQtMTQuNC0xNC40LTM3LjYgMC01Mmw5Mi40LTk2LjMtOTIuNC05Ni4zYy0xNC40LTE0LjQtMTQuNC0zNy42IDAtNTJzMzcuNi0xNC4zIDUyIDBsODkgOTIuOCA4OS4yLTkyLjdjMTQuNC0xNC40IDM3LjYtMTQuNCA1MiAwIDE0LjMgMTQuNCAxNC4zIDM3LjYgMCA1MkwzNTQuNiAzOTZsOTIuNCA5Ni40YzE0LjQgMTQuNCAxNC40IDM3LjYgMCA1MnoiLz48L3N2Zz4="; 38 | -------------------------------------------------------------------------------- /src/assets/scss/core/variables/_layout.scss: -------------------------------------------------------------------------------- 1 | // Layout variables - evidently nothing to see here...remove now? 2 | -------------------------------------------------------------------------------- /src/assets/scss/core/variables/_list-group.scss: -------------------------------------------------------------------------------- 1 | // List group 2 | 3 | $list-group-bg: inherit !default; // #fff 4 | //$list-group-border-color: #ddd !default; 5 | $list-group-border-width: 0 !default; // $border-width 6 | $list-group-border-radius: 0 !default; // $border-radius 7 | // 8 | //$list-group-hover-bg: #f5f5f5 !default; 9 | //$list-group-active-color: $component-active-color !default; 10 | //$list-group-active-bg: $component-active-bg !default; 11 | //$list-group-active-border: $list-group-active-bg !default; 12 | //$list-group-active-text-color: lighten($list-group-active-bg, 40%) !default; 13 | // 14 | //$list-group-disabled-color: $gray-light !default; 15 | //$list-group-disabled-bg: $gray-lighter !default; 16 | //$list-group-disabled-text-color: $list-group-disabled-color !default; 17 | // 18 | //$list-group-link-color: #555 !default; 19 | //$list-group-link-hover-color: $list-group-link-color !default; 20 | //$list-group-link-heading-color: #333 !default; 21 | -------------------------------------------------------------------------------- /src/assets/scss/core/variables/_menu.scss: -------------------------------------------------------------------------------- 1 | $bmd-menu-line-height: 1 !default; // makes it easier to use sizes to match spec 2 | 3 | $bmd-menu-item-min-width: 7rem !default; // Minimum width on mobile = 2 * 56dp = 112dp 4 | $bmd-menu-item-max-width: 17.5rem !default; // Maximum width on mobile (in both portrait and landscape) = 5 * 56dp = 280dp 5 | $bmd-menu-item-min-height: 3rem !default; // 48px 6 | 7 | $bmd-menu-item-padding-right: 1rem !default; 8 | $bmd-menu-item-padding-bottom: .8rem !default; 9 | $bmd-menu-item-padding-left: 1rem !default; 10 | $bmd-menu-item-padding-top: .8rem !default; 11 | 12 | // md and up 13 | $bmd-menu-item-padding-right-md: 1.5rem !default; 14 | $bmd-menu-item-padding-left-md: 1.5rem !default; 15 | 16 | // Menu 17 | $bmd-menu-expand-duration: 0.3s !default; 18 | $bmd-menu-fade-duration: 0.2s !default; 19 | -------------------------------------------------------------------------------- /src/assets/scss/core/variables/_modals.scss: -------------------------------------------------------------------------------- 1 | // Modals 2 | $modal-content-xs-box-shadow: $bmd-shadow-24dp !default; 3 | 4 | // Padding applied to the modal body 5 | //$modal-inner-padding: 15px !default; 6 | // 7 | //$modal-title-padding: 15px !default; 8 | //$modal-title-line-height: $line-height-base !default; 9 | // 10 | //$modal-content-bg: #fff !default; 11 | //$modal-content-border-color: rgba(0,0,0,.2) !default; 12 | // 13 | //$modal-backdrop-bg: #000 !default; 14 | $modal-backdrop-opacity: .26 !default; // .5 15 | //$modal-header-border-color: #e5e5e5 !default; 16 | //$modal-footer-border-color: $modal-header-border-color !default; 17 | // 18 | //$modal-lg: 900px !default; 19 | //$modal-md: 600px !default; 20 | //$modal-sm: 300px !default; 21 | 22 | $transition-ease-in: ease-in !default; 23 | $transition-ease-out: ease-out !default; 24 | $ultra-fast-transition-time: 60ms !default; 25 | $navbar-padding-a: 10px 15px; 26 | $padding-zero: 0px !default; 27 | $sidebar-width: calc(100% - 260px) !default; 28 | $sidebar-mini-width: calc(100% - 80px) !default; 29 | $topbar-back: topbar-back !default; 30 | $bottombar-back: bottombar-back !default; 31 | $topbar-x: topbar-x !default; 32 | $bottombar-x: bottombar-x !default; 33 | $margin-bottom: 0 0 10px 0 !default; 34 | $margin-base-vertical: 15px !default; 35 | -------------------------------------------------------------------------------- /src/assets/scss/core/variables/_nav.scss: -------------------------------------------------------------------------------- 1 | // Navs https://www.google.com/design/spec/components/tabs.html#tabs-specs 2 | 3 | $nav-disabled-link-color: $gray-light !default; 4 | $nav-disabled-link-hover-color: $gray-light !default; 5 | 6 | $bmd-navbar-link-font-weight: $bmd-font-weight-base !default; // 7 | $bmd-navbar-link-font-size: .875rem !default; // 14 8 | $bmd-navbar-link-padding: .5321rem; // 7 9 | 10 | // tabs & pills 11 | $bmd-nav-tabs-pills-font-weight: 500 !default; // 12 | $bmd-nav-tabs-pills-font-size: .875rem !default; // 14 13 | $bmd-nav-tabs-pills-link-padding: 1.4286em .8575em !default; // spec // was .5em 1em // relative em based on 14 14 | 15 | // tabs only 16 | $bmd-nav-tabs-border-size: .214rem !default; // 3px 17 | 18 | $bmd-nav-tabs-color: $gray !default; 19 | $bmd-nav-tabs-active-color: $gray-dark !default; 20 | $bmd-nav-tabs-active-border-color: $brand-primary !default; 21 | $bmd-nav-tabs-disabled-link-color: $nav-disabled-link-color !default; 22 | $bmd-nav-tabs-disabled-link-color-hover: $nav-disabled-link-hover-color !default; 23 | 24 | $bmd-nav-tabs-primary-color: $bmd-inverse !default; 25 | $bmd-nav-tabs-primary-active-color: #fff !default; 26 | $bmd-nav-tabs-primary-active-border-color: #fff !default; 27 | $bmd-nav-tabs-primary-disabled-link-color: $bmd-inverse-light !default; 28 | $bmd-nav-tabs-primary-disabled-link-color-hover: $bmd-inverse-light !default; 29 | 30 | $bmd-nav-tabs-inverse-color: $bmd-inverse !default; 31 | $bmd-nav-tabs-inverse-active-color: #fff !default; 32 | $bmd-nav-tabs-inverse-active-border-color: #fff !default; 33 | $bmd-nav-tabs-inverse-disabled-link-color: $bmd-inverse-light !default; 34 | $bmd-nav-tabs-inverse-disabled-link-color-hover: $bmd-inverse-light !default; 35 | 36 | //$nav-item-margin: .2rem !default; 37 | 38 | //$bmd-nav-link-line-height: 1 !default; // makes it easier to line up with the spec 39 | //$nav-link-padding: .5em 1em !default; // changing this for tabs alters generic navbars, so do it elsewhere with higher specificity 40 | //$nav-link-hover-bg: $gray-lighter !default; 41 | 42 | // 43 | //$nav-tabs-border-color: #ddd !default; 44 | // 45 | //$nav-tabs-link-border-width: $border-width !default; 46 | //$nav-tabs-link-hover-border-color: $gray-lighter !default; 47 | // 48 | $nav-tabs-active-link-hover-bg: transparent !default; // $body-bg 49 | //$nav-tabs-active-link-hover-color: $gray !default; 50 | //$nav-tabs-active-link-hover-border-color: #ddd !default; 51 | // 52 | //$nav-tabs-justified-link-border-color: #ddd !default; 53 | //$nav-tabs-justified-active-link-border-color: $body-bg !default; 54 | // 55 | //$nav-pills-border-radius: $border-radius !default; 56 | //$nav-pills-active-link-hover-bg: $component-active-bg !default; 57 | //$nav-pills-active-link-hover-color: $component-active-color !default; 58 | -------------------------------------------------------------------------------- /src/assets/scss/core/variables/_pagination.scss: -------------------------------------------------------------------------------- 1 | $pagination-border-width: 0; 2 | $pagination-bg: transparent; 3 | $pagination-disabled-bg: transparent; 4 | 5 | $pagination-padding-x-lg: 0; 6 | $pagination-padding-x-sm: 0; 7 | -------------------------------------------------------------------------------- /src/assets/scss/core/variables/_shadow.scss: -------------------------------------------------------------------------------- 1 | // Shadows (originally from mdl http://www.getmdl.io/) 2 | $bmd-shadow-umbra-opacity: 0.2 !default; 3 | $bmd-shadow-penumbra-opacity: 0.14 !default; 4 | $bmd-shadow-ambient-opacity: 0.12 !default; 5 | 6 | // Declare the following for reuse with both mixins and the bootstrap variables 7 | $bmd-shadow-focus: 0 0 8px rgba($black, .18), 0 8px 16px rgba($black, .36); 8 | 9 | $bmd-shadow-2dp: 0 2px 2px 0 rgba($black, $bmd-shadow-penumbra-opacity), 10 | 0 3px 1px -2px rgba($black, $bmd-shadow-umbra-opacity), 11 | 0 1px 5px 0 rgba($black, $bmd-shadow-ambient-opacity); 12 | 13 | $bmd-shadow-3dp: 0 3px 4px 0 rgba($black, $bmd-shadow-penumbra-opacity), 14 | 0 3px 3px -2px rgba($black, $bmd-shadow-umbra-opacity), 15 | 0 1px 8px 0 rgba($black, $bmd-shadow-ambient-opacity); 16 | 17 | $bmd-shadow-4dp: 0 4px 5px 0 rgba($black, $bmd-shadow-penumbra-opacity), 18 | 0 1px 10px 0 rgba($black, $bmd-shadow-ambient-opacity), 19 | 0 2px 4px -1px rgba($black, $bmd-shadow-umbra-opacity); 20 | 21 | $bmd-shadow-6dp: 0 6px 10px 0 rgba($black, $bmd-shadow-penumbra-opacity), 22 | 0 1px 18px 0 rgba($black, $bmd-shadow-ambient-opacity), 23 | 0 3px 5px -1px rgba($black, $bmd-shadow-umbra-opacity); 24 | 25 | $bmd-shadow-8dp: 0 8px 10px 1px rgba($black, $bmd-shadow-penumbra-opacity), 26 | 0 3px 14px 2px rgba($black, $bmd-shadow-ambient-opacity), 27 | 0 5px 5px -3px rgba($black, $bmd-shadow-umbra-opacity); 28 | 29 | $bmd-shadow-16dp: 0 16px 24px 2px rgba($black, $bmd-shadow-penumbra-opacity), 30 | 0 6px 30px 5px rgba($black, $bmd-shadow-ambient-opacity), 31 | 0 8px 10px -5px rgba($black, $bmd-shadow-umbra-opacity); 32 | 33 | $bmd-shadow-24dp: 0 9px 46px 8px rgba($black, $bmd-shadow-penumbra-opacity), 34 | 0 11px 15px -7px rgba($black, $bmd-shadow-ambient-opacity), 35 | 0 24px 38px 3px rgba($black, $bmd-shadow-umbra-opacity); 36 | -------------------------------------------------------------------------------- /src/assets/scss/core/variables/_snackbar.scss: -------------------------------------------------------------------------------- 1 | $bmd-snackbar-bg: #323232 !default; 2 | $bmd-snackbar-color: #fff !default; 3 | $bmd-snackbar-min-width: 280px !default; 4 | $bmd-snackbar-padding: .8rem 1.5rem !default; 5 | 6 | $bmd-snackbar-min-width-sm: 100% !default; 7 | -------------------------------------------------------------------------------- /src/assets/scss/core/variables/_spacing.scss: -------------------------------------------------------------------------------- 1 | // Spacing 2 | // 3 | // Control the default styling of most Bootstrap elements by modifying these 4 | // variables. Mostly focused on spacing. 5 | 6 | $spacer: 1rem !default; // $form-group-margin-bottom uses $spacer-y. Decided to try this globally and see how it works out. 7 | //$spacer-x: $spacer !default; 8 | //$spacer-y: $spacer !default; 9 | //$spacers: ( 10 | // 0: ( 11 | // x: 0, 12 | // y: 0 13 | // ), 14 | // 1: ( 15 | // x: $spacer-x, 16 | // y: $spacer-y 17 | // ), 18 | // 2: ( 19 | // x: ($spacer-x * 1.5), 20 | // y: ($spacer-y * 1.5) 21 | // ), 22 | // 3: ( 23 | // x: ($spacer-x * 3), 24 | // y: ($spacer-y * 3) 25 | // ) 26 | //) !default; 27 | -------------------------------------------------------------------------------- /src/assets/scss/core/variables/_state.scss: -------------------------------------------------------------------------------- 1 | // Form states and alerts 2 | // 3 | // Define colors for form feedback states and, by default, alerts. 4 | $state-success-text: $bmd-inverse !default; 5 | $state-success-bg: $brand-success !default; 6 | 7 | $state-info-text: $bmd-inverse !default; 8 | $state-info-bg: $brand-info !default; 9 | 10 | $state-warning-text: $bmd-inverse !default; 11 | $state-warning-bg: $brand-warning !default; 12 | 13 | $state-danger-text: $bmd-inverse !default; 14 | $state-danger-bg: $brand-danger !default; 15 | 16 | $state-rose-bg: $brand-rose !default; 17 | -------------------------------------------------------------------------------- /src/assets/scss/core/variables/_tables.scss: -------------------------------------------------------------------------------- 1 | $table-bg-accent: rgba(#000, .03); 2 | $table-border-color: rgba(#000, .06); 3 | $table-bg-hover: rgba(#000, .02); // Grey 100 (on white background) 4 | 5 | $bmd-table-header-font-size: .95rem; 6 | $bmd-table-border-color-inverse: rgba(#fff, .06); 7 | -------------------------------------------------------------------------------- /src/assets/scss/core/variables/_tooltip.scss: -------------------------------------------------------------------------------- 1 | $tooltip-bg: rgba($grey-700, .9); 2 | -------------------------------------------------------------------------------- /src/assets/scss/core/variables/_type.scss: -------------------------------------------------------------------------------- 1 | @use "sass:math"; 2 | 3 | // Typography 4 | // 5 | // Font, line-height, and color for body text, headings, and more. 6 | 7 | // https://www.google.com/design/spec/style/typography.html#typography-styles 8 | // http://www.getmdl.io/styles/index.html 9 | 10 | $font-family-sans-serif: 'Roboto', 'Helvetica', 'Arial', sans-serif !default; 11 | $font-family-serif: 'Roboto Slab', 'Times New Roman', serif !default; 12 | //$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default; 13 | //$font-family-base: $font-family-sans-serif !default; 14 | 15 | // Pixel value used to responsively scale all typography. Applied to the `` element. 16 | //$font-size-root: 16px !default; 17 | // 18 | $font-size-base: 1rem !default; 19 | //$font-size-lg: 1.25rem !default; 20 | //$font-size-sm: .875rem !default; 21 | //$font-size-xs: .75rem !default; 22 | // 23 | 24 | $font-size-h1: 3.3125rem; 25 | $font-size-h2: 2.25rem !default; 26 | $font-size-h3: 1.5625rem; 27 | $font-size-h4: 1.125rem !default; 28 | $font-size-h5: 1.0625rem !default; 29 | $font-size-h6: 0.75rem !default; 30 | $font-paragraph: 14px !default; 31 | $font-size-navbar: 16px !default; 32 | $font-size-small: 12px !default; 33 | 34 | 35 | // 36 | $display1-size: 7rem !default; // md display-4 112px was 6rem; 37 | $display2-size: 3.5rem !default; // md display-3 56px was 5.5rem 38 | $display3-size: 2.8125rem !default; // md display-2 45px was 4.5rem 39 | $display4-size: 2.125rem !default; // md display-1 34px was 3.5rem 40 | // 41 | //$display1-weight: 300 !default; 42 | //$display2-weight: 300 !default; 43 | //$display3-weight: 300 !default; 44 | //$display4-weight: 300 !default; 45 | // 46 | //$line-height-base: 1.5 !default; 47 | // 48 | $headings-margin-bottom: math.div($spacer, 2) !default; 49 | //$headings-font-family: inherit !default; 50 | $headings-font-weight: 400 !default; // was 500 51 | 52 | $font-weight-light: 300 !default; 53 | $font-weight-default: 400 !default; 54 | $font-weight-bold: 500 !default; 55 | $font-weight-extra-bold: 700 !default; 56 | 57 | $font-size-large: 1em !default; 58 | $font-size-large-navbar: 20px !default; 59 | 60 | //$headings-line-height: 1.1 !default; 61 | //$headings-color: inherit !default; 62 | // 63 | //$lead-font-size: 1.25rem !default; 64 | //$lead-font-weight: 300 !default; 65 | // 66 | //$text-muted: $gray-light !default; 67 | // 68 | //$abbr-border-color: $gray-light !default; 69 | // 70 | //$blockquote-small-color: $gray-light !default; 71 | //$blockquote-font-size: ($font-size-base * 1.25) !default; 72 | //$blockquote-border-color: $gray-lighter !default; 73 | // 74 | //$hr-border-color: rgba(0,0,0,.1) !default; 75 | //$hr-border-width: $border-width !default; 76 | // 77 | //$list-inline-padding: 5px !default; 78 | // 79 | //$dt-font-weight: bold !default; 80 | // 81 | //$nested-kbd-font-weight: bold !default; 82 | 83 | $padding-input-vertical: 11px !default; 84 | $padding-input-horizontal: 19px !default; 85 | 86 | $padding-btn-vertical: 11px !default; 87 | $padding-btn-horizontal: 22px !default; 88 | 89 | $padding-base-vertical: .5rem !default; 90 | $padding-base-horizontal: .7rem !default; 91 | 92 | $padding-round-horizontal: 23px !default; 93 | 94 | $padding-simple-vertical: 10px !default; 95 | $padding-simple-horizontal: 17px !default; 96 | 97 | $padding-large-vertical: 15px !default; 98 | $padding-large-horizontal: 48px !default; 99 | 100 | $padding-small-vertical: 5px !default; 101 | $padding-small-horizontal: 15px !default; 102 | 103 | $padding-label-vertical: 2px !default; 104 | $padding-label-horizontal: 12px !default; 105 | 106 | $margin-large-vertical: 30px !default; 107 | $margin-base-vertical: 15px !default; 108 | 109 | $margin-base-horizontal: 15px !default; 110 | -------------------------------------------------------------------------------- /src/assets/scss/material-dashboard.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Material Dashboard Angular - v2.6.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/material-dashboard-angular2 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/material-dashboard-angular2/blob/master/LICENSE.md) 10 | 11 | * Coded by Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | @import "~@angular/material/prebuilt-themes/indigo-pink.css"; 19 | 20 | @import "core/variables"; 21 | @import "core/mixins"; 22 | @import "~bootstrap/scss/bootstrap"; 23 | 24 | 25 | // Core Components 26 | @import "core/buttons"; 27 | @import "core/checkboxes"; 28 | @import "core/radios"; 29 | @import "core/forms"; 30 | @import "core/input-group"; 31 | @import "core/images"; 32 | @import "core/navbar"; 33 | @import "core/alerts"; 34 | @import "core/type"; 35 | @import "core/tabs"; 36 | @import "core/tooltip"; 37 | @import "core/popover"; 38 | @import "core/dropdown"; 39 | @import "core/togglebutton"; 40 | @import "core/ripples"; 41 | @import "core/footers"; 42 | @import "core/sidebar-and-main-panel"; 43 | @import "core/fixed-plugin"; 44 | @import "core/tables"; 45 | @import "core/misc"; 46 | 47 | @import "core/cards"; 48 | @import "core/cards/card-stats"; 49 | @import "core/cards/card-profile"; 50 | @import "core/cards/card-plain"; 51 | 52 | //plugin scss 53 | @import "core/plugins/animate"; 54 | @import "core/plugins/chartist"; 55 | @import "core/plugins/perfect-scrollbar"; 56 | 57 | @import "core/responsive"; 58 | 59 | @import "core/angular-modal.scss"; 60 | -------------------------------------------------------------------------------- /src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // The file contents for the current environment will overwrite these during build. 2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do 3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead. 4 | // The list of which env maps to which file can be found in `.angular-cli.json`. 5 | 6 | export const environment = { 7 | production: false 8 | }; 9 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ashutosh102/Angular_Dashboard_example/ee0f8433f4f59cd3eea14ea1cc947e1d898621d8/src/favicon.ico -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | Material Dashboard Angular by Creative Tim 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 |
41 | 42 | 43 | 44 |
45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Material Dashboard Angular - v2.6.0 5 | ========================================================= 6 | 7 | * Product Page: https://www.creative-tim.com/product/material-dashboard-angular2 8 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/material-dashboard-angular2/blob/master/LICENSE.md) 10 | 11 | * Coded by Creative Tim 12 | 13 | ========================================================= 14 | 15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 16 | 17 | */ 18 | import { enableProdMode } from '@angular/core'; 19 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 20 | 21 | import { AppModule } from './app/app.module'; 22 | import { environment } from './environments/environment'; 23 | import 'hammerjs'; 24 | 25 | if (environment.production) { 26 | enableProdMode(); 27 | } 28 | 29 | platformBrowserDynamic().bootstrapModule(AppModule); 30 | -------------------------------------------------------------------------------- /src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), 12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/ 22 | import 'core-js/es/symbol'; 23 | import 'core-js/es/object'; 24 | import 'core-js/es/function'; 25 | import 'core-js/es/parse-int'; 26 | import 'core-js/es/parse-float'; 27 | import 'core-js/es/number'; 28 | import 'core-js/es/math'; 29 | import 'core-js/es/string'; 30 | import 'core-js/es/date'; 31 | import 'core-js/es/array'; 32 | import 'core-js/es/regexp'; 33 | import 'core-js/es/map'; 34 | import 'core-js/es/set'; 35 | 36 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */ 37 | import 'classlist.js'; // Run `npm install --save classlist.js`. 38 | 39 | /** IE10 and IE11 requires the following to support `@angular/animation`. */ 40 | import 'web-animations-js'; // Run `npm install --save webå-animations-js`. 41 | 42 | 43 | /** Evergreen browsers require these. **/ 44 | import 'core-js/es/reflect'; 45 | // import 'core-js/es7/reflect'; 46 | 47 | 48 | /** ALL Firefox browsers require the following to support `@angular/animation`. **/ 49 | import 'web-animations-js'; // Run `npm install --save web-animations-js`. 50 | 51 | 52 | 53 | /*************************************************************************************************** 54 | * Zone JS is required by Angular itself. 55 | */ 56 | import 'zone.js/dist/zone'; // Included with Angular CLI. 57 | 58 | 59 | 60 | /*************************************************************************************************** 61 | * APPLICATION IMPORTS 62 | */ 63 | 64 | /** 65 | * Date, currency, decimal and percent pipes. 66 | * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 67 | */ 68 | // import 'intl'; // Run `npm install --save intl`. 69 | -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/long-stack-trace-zone'; 4 | import 'zone.js/dist/proxy.js'; 5 | import 'zone.js/dist/sync-test'; 6 | import 'zone.js/dist/jasmine-patch'; 7 | import 'zone.js/dist/async-test'; 8 | import 'zone.js/dist/fake-async-test'; 9 | import { getTestBed } from '@angular/core/testing'; 10 | import { 11 | BrowserDynamicTestingModule, 12 | platformBrowserDynamicTesting 13 | } from '@angular/platform-browser-dynamic/testing'; 14 | 15 | // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any. 16 | declare var __karma__: any; 17 | declare var require: any; 18 | 19 | // Prevent Karma from running prematurely. 20 | __karma__.loaded = function () {}; 21 | 22 | // First, initialize the Angular testing environment. 23 | getTestBed().initTestEnvironment( 24 | BrowserDynamicTestingModule, 25 | platformBrowserDynamicTesting() 26 | ); 27 | // Then we find all the tests. 28 | const context = require.context('./', true, /\.spec\.ts$/); 29 | // And load the modules. 30 | context.keys().map(context); 31 | // Finally, start Karma to run the tests. 32 | __karma__.start(); 33 | -------------------------------------------------------------------------------- /src/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "module": "es2020", 6 | "baseUrl": "", 7 | "types": [] 8 | }, 9 | "exclude": [ 10 | "test.ts", 11 | "**/*.spec.ts" 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /src/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/spec", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "baseUrl": "", 8 | "types": [ 9 | "jasmine", 10 | "node" 11 | ] 12 | }, 13 | "files": [ 14 | "test.ts", 15 | "polyfills.ts" 16 | ], 17 | "include": [ 18 | "**/*.spec.ts", 19 | "**/*.d.ts" 20 | ] 21 | } 22 | -------------------------------------------------------------------------------- /src/typings.d.ts: -------------------------------------------------------------------------------- 1 | /* SystemJS module definition */ 2 | declare var module: NodeModule; 3 | interface NodeModule { 4 | id: string; 5 | } 6 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "outDir": "./dist/out-tsc", 5 | "baseUrl": "src", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "module": "es2020", 9 | "moduleResolution": "node", 10 | "emitDecoratorMetadata": true, 11 | "experimentalDecorators": true, 12 | "target": "es5", 13 | "typeRoots": [ 14 | "node_modules/@types" 15 | ], 16 | "lib": [ 17 | "es2017", 18 | "dom" 19 | ] 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rulesDirectory": [ 3 | "node_modules/codelyzer" 4 | ], 5 | "rules": { 6 | "callable-types": true, 7 | "class-name": true, 8 | "comment-format": [ 9 | true, 10 | "check-space" 11 | ], 12 | "curly": true, 13 | "eofline": true, 14 | "forin": true, 15 | "import-blacklist": [true], 16 | "import-spacing": true, 17 | "indent": [ 18 | true, 19 | "spaces" 20 | ], 21 | "interface-over-type-literal": true, 22 | "label-position": true, 23 | "max-line-length": [ 24 | true, 25 | 140 26 | ], 27 | "member-access": false, 28 | "member-ordering": [ 29 | true, 30 | "static-before-instance", 31 | "variables-before-functions" 32 | ], 33 | "no-arg": true, 34 | "no-bitwise": true, 35 | "no-console": [ 36 | true, 37 | "debug", 38 | "info", 39 | "time", 40 | "timeEnd", 41 | "trace" 42 | ], 43 | "no-construct": true, 44 | "no-debugger": true, 45 | "no-duplicate-variable": true, 46 | "no-empty": false, 47 | "no-empty-interface": true, 48 | "no-eval": true, 49 | "no-inferrable-types": [true, "ignore-params"], 50 | "no-shadowed-variable": true, 51 | "no-string-literal": false, 52 | "no-string-throw": true, 53 | "no-switch-case-fall-through": true, 54 | "no-trailing-whitespace": true, 55 | "no-unused-expression": true, 56 | "no-use-before-declare": true, 57 | "no-var-keyword": true, 58 | "object-literal-sort-keys": false, 59 | "one-line": [ 60 | true, 61 | "check-open-brace", 62 | "check-catch", 63 | "check-else", 64 | "check-whitespace" 65 | ], 66 | "prefer-const": true, 67 | "quotemark": [ 68 | true, 69 | "single" 70 | ], 71 | "radix": true, 72 | "semicolon": [ 73 | "always" 74 | ], 75 | "triple-equals": [ 76 | true, 77 | "allow-null-check" 78 | ], 79 | "typedef-whitespace": [ 80 | true, 81 | { 82 | "call-signature": "nospace", 83 | "index-signature": "nospace", 84 | "parameter": "nospace", 85 | "property-declaration": "nospace", 86 | "variable-declaration": "nospace" 87 | } 88 | ], 89 | "typeof-compare": true, 90 | "unified-signatures": true, 91 | "variable-name": false, 92 | "whitespace": [ 93 | true, 94 | "check-branch", 95 | "check-decl", 96 | "check-operator", 97 | "check-separator", 98 | "check-type" 99 | ], 100 | 101 | "directive-selector": [true, "attribute", "app", "camelCase"], 102 | "component-selector": [true, "element", "app", "kebab-case"], 103 | "use-input-property-decorator": true, 104 | "use-output-property-decorator": true, 105 | "use-host-property-decorator": true, 106 | "no-input-rename": true, 107 | "no-output-rename": true, 108 | "use-life-cycle-interface": true, 109 | "use-pipe-transform-interface": true, 110 | "component-class-suffix": true, 111 | "directive-class-suffix": true, 112 | "no-access-missing-member": true, 113 | "templates-use-public": true, 114 | "invoke-injectable": true 115 | } 116 | } 117 | --------------------------------------------------------------------------------