├── css ├── application.css ├── free │ └── data │ │ └── _mixins.css ├── template.css └── style.css ├── cv.pdf ├── favicon ├── logo.png ├── favicon.ico ├── apple-icon.png ├── favicon-16x16.png ├── favicon-32x32.png ├── favicon-96x96.png ├── ms-icon-144x144.png ├── ms-icon-150x150.png ├── ms-icon-310x310.png ├── ms-icon-70x70.png ├── apple-icon-57x57.png ├── apple-icon-60x60.png ├── apple-icon-72x72.png ├── apple-icon-76x76.png ├── android-icon-144x144.png ├── android-icon-192x192.png ├── android-icon-36x36.png ├── android-icon-48x48.png ├── android-icon-72x72.png ├── android-icon-96x96.png ├── apple-icon-114x114.png ├── apple-icon-120x120.png ├── apple-icon-144x144.png ├── apple-icon-152x152.png ├── apple-icon-180x180.png ├── apple-icon-precomposed.png ├── browserconfig.xml └── manifest.json ├── images └── theater.jpg ├── img ├── overlays │ ├── 01.png │ ├── 02.png │ ├── 03.png │ ├── 04.png │ ├── 05.png │ ├── 06.png │ ├── 07.png │ ├── 08.png │ └── 09.png ├── lightbox │ ├── preloader.gif │ ├── default-skin.png │ └── default-skin.svg └── svg │ ├── arrow_left.svg │ └── arrow_right.svg ├── .vscode └── settings.json ├── font └── roboto │ ├── Roboto-Bold.eot │ ├── Roboto-Bold.ttf │ ├── Roboto-Thin.eot │ ├── Roboto-Thin.ttf │ ├── Roboto-Bold.woff │ ├── Roboto-Bold.woff2 │ ├── Roboto-Light.eot │ ├── Roboto-Light.ttf │ ├── Roboto-Light.woff │ ├── Roboto-Medium.eot │ ├── Roboto-Medium.ttf │ ├── Roboto-Thin.woff │ ├── Roboto-Thin.woff2 │ ├── Roboto-Light.woff2 │ ├── Roboto-Medium.woff │ ├── Roboto-Medium.woff2 │ ├── Roboto-Regular.eot │ ├── Roboto-Regular.ttf │ ├── Roboto-Regular.woff │ └── Roboto-Regular.woff2 ├── fonts └── roboto │ ├── Roboto-Bold.woff │ ├── Roboto-Thin.woff │ ├── Roboto-Bold.woff2 │ ├── Roboto-Light.woff │ ├── Roboto-Light.woff2 │ ├── Roboto-Medium.woff │ ├── Roboto-Medium.woff2 │ ├── Roboto-Regular.woff │ ├── Roboto-Thin.woff2 │ └── Roboto-Regular.woff2 ├── README.md ├── sass ├── README.txt ├── free │ ├── _cards-basic.scss │ ├── _footer.scss │ ├── _carousels-basic.scss │ ├── data │ │ ├── _mixins.scss │ │ ├── _variables.scss │ │ └── _prefixer.scss │ ├── _roboto.scss │ ├── _waves.scss │ ├── _helpers.scss │ ├── _navbars.scss │ ├── _typography.scss │ ├── _forms-basic.scss │ ├── _hover-effects.scss │ ├── _global.scss │ └── _buttons.scss ├── mdb.scss ├── mdb │ └── free │ │ ├── _footer.scss │ │ ├── _cards-basic.scss │ │ ├── data │ │ ├── _mixins.scss │ │ ├── _variables.scss │ │ └── _prefixer.scss │ │ ├── _carousels-basic.scss │ │ ├── _roboto.scss │ │ ├── _navbars.scss │ │ ├── _waves.scss │ │ ├── _typography.scss │ │ ├── _helpers.scss │ │ ├── _forms-basic.scss │ │ ├── _hover-effects.scss │ │ ├── _global.scss │ │ └── _buttons.scss └── style.scss ├── js └── script.js ├── materialize ├── LICENSE └── README.md └── index.html /css/application.css: -------------------------------------------------------------------------------- 1 | .parallax-container{ 2 | height: 1000px; 3 | } -------------------------------------------------------------------------------- /cv.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/cv.pdf -------------------------------------------------------------------------------- /css/free/data/_mixins.css: -------------------------------------------------------------------------------- 1 | /********************* 2 | Mixins 3 | **********************/ 4 | -------------------------------------------------------------------------------- /favicon/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/favicon/logo.png -------------------------------------------------------------------------------- /favicon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/favicon/favicon.ico -------------------------------------------------------------------------------- /images/theater.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/images/theater.jpg -------------------------------------------------------------------------------- /img/overlays/01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/img/overlays/01.png -------------------------------------------------------------------------------- /img/overlays/02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/img/overlays/02.png -------------------------------------------------------------------------------- /img/overlays/03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/img/overlays/03.png -------------------------------------------------------------------------------- /img/overlays/04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/img/overlays/04.png -------------------------------------------------------------------------------- /img/overlays/05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/img/overlays/05.png -------------------------------------------------------------------------------- /img/overlays/06.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/img/overlays/06.png -------------------------------------------------------------------------------- /img/overlays/07.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/img/overlays/07.png -------------------------------------------------------------------------------- /img/overlays/08.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/img/overlays/08.png -------------------------------------------------------------------------------- /img/overlays/09.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/img/overlays/09.png -------------------------------------------------------------------------------- /favicon/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/favicon/apple-icon.png -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | // Place your settings in this file to overwrite default and user settings. 2 | { 3 | } -------------------------------------------------------------------------------- /favicon/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/favicon/favicon-16x16.png -------------------------------------------------------------------------------- /favicon/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/favicon/favicon-32x32.png -------------------------------------------------------------------------------- /favicon/favicon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/favicon/favicon-96x96.png -------------------------------------------------------------------------------- /favicon/ms-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/favicon/ms-icon-144x144.png -------------------------------------------------------------------------------- /favicon/ms-icon-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/favicon/ms-icon-150x150.png -------------------------------------------------------------------------------- /favicon/ms-icon-310x310.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/favicon/ms-icon-310x310.png -------------------------------------------------------------------------------- /favicon/ms-icon-70x70.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/favicon/ms-icon-70x70.png -------------------------------------------------------------------------------- /font/roboto/Roboto-Bold.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/font/roboto/Roboto-Bold.eot -------------------------------------------------------------------------------- /font/roboto/Roboto-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/font/roboto/Roboto-Bold.ttf -------------------------------------------------------------------------------- /font/roboto/Roboto-Thin.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/font/roboto/Roboto-Thin.eot -------------------------------------------------------------------------------- /font/roboto/Roboto-Thin.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/font/roboto/Roboto-Thin.ttf -------------------------------------------------------------------------------- /img/lightbox/preloader.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/img/lightbox/preloader.gif -------------------------------------------------------------------------------- /favicon/apple-icon-57x57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/favicon/apple-icon-57x57.png -------------------------------------------------------------------------------- /favicon/apple-icon-60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/favicon/apple-icon-60x60.png -------------------------------------------------------------------------------- /favicon/apple-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/favicon/apple-icon-72x72.png -------------------------------------------------------------------------------- /favicon/apple-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/favicon/apple-icon-76x76.png -------------------------------------------------------------------------------- /font/roboto/Roboto-Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/font/roboto/Roboto-Bold.woff -------------------------------------------------------------------------------- /font/roboto/Roboto-Bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/font/roboto/Roboto-Bold.woff2 -------------------------------------------------------------------------------- /font/roboto/Roboto-Light.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/font/roboto/Roboto-Light.eot -------------------------------------------------------------------------------- /font/roboto/Roboto-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/font/roboto/Roboto-Light.ttf -------------------------------------------------------------------------------- /font/roboto/Roboto-Light.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/font/roboto/Roboto-Light.woff -------------------------------------------------------------------------------- /font/roboto/Roboto-Medium.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/font/roboto/Roboto-Medium.eot -------------------------------------------------------------------------------- /font/roboto/Roboto-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/font/roboto/Roboto-Medium.ttf -------------------------------------------------------------------------------- /font/roboto/Roboto-Thin.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/font/roboto/Roboto-Thin.woff -------------------------------------------------------------------------------- /font/roboto/Roboto-Thin.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/font/roboto/Roboto-Thin.woff2 -------------------------------------------------------------------------------- /fonts/roboto/Roboto-Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/fonts/roboto/Roboto-Bold.woff -------------------------------------------------------------------------------- /fonts/roboto/Roboto-Thin.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/fonts/roboto/Roboto-Thin.woff -------------------------------------------------------------------------------- /img/lightbox/default-skin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/img/lightbox/default-skin.png -------------------------------------------------------------------------------- /favicon/android-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/favicon/android-icon-144x144.png -------------------------------------------------------------------------------- /favicon/android-icon-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/favicon/android-icon-192x192.png -------------------------------------------------------------------------------- /favicon/android-icon-36x36.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/favicon/android-icon-36x36.png -------------------------------------------------------------------------------- /favicon/android-icon-48x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/favicon/android-icon-48x48.png -------------------------------------------------------------------------------- /favicon/android-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/favicon/android-icon-72x72.png -------------------------------------------------------------------------------- /favicon/android-icon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/favicon/android-icon-96x96.png -------------------------------------------------------------------------------- /favicon/apple-icon-114x114.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/favicon/apple-icon-114x114.png -------------------------------------------------------------------------------- /favicon/apple-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/favicon/apple-icon-120x120.png -------------------------------------------------------------------------------- /favicon/apple-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/favicon/apple-icon-144x144.png -------------------------------------------------------------------------------- /favicon/apple-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/favicon/apple-icon-152x152.png -------------------------------------------------------------------------------- /favicon/apple-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/favicon/apple-icon-180x180.png -------------------------------------------------------------------------------- /font/roboto/Roboto-Light.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/font/roboto/Roboto-Light.woff2 -------------------------------------------------------------------------------- /font/roboto/Roboto-Medium.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/font/roboto/Roboto-Medium.woff -------------------------------------------------------------------------------- /font/roboto/Roboto-Medium.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/font/roboto/Roboto-Medium.woff2 -------------------------------------------------------------------------------- /font/roboto/Roboto-Regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/font/roboto/Roboto-Regular.eot -------------------------------------------------------------------------------- /font/roboto/Roboto-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/font/roboto/Roboto-Regular.ttf -------------------------------------------------------------------------------- /font/roboto/Roboto-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/font/roboto/Roboto-Regular.woff -------------------------------------------------------------------------------- /font/roboto/Roboto-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/font/roboto/Roboto-Regular.woff2 -------------------------------------------------------------------------------- /fonts/roboto/Roboto-Bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/fonts/roboto/Roboto-Bold.woff2 -------------------------------------------------------------------------------- /fonts/roboto/Roboto-Light.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/fonts/roboto/Roboto-Light.woff -------------------------------------------------------------------------------- /fonts/roboto/Roboto-Light.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/fonts/roboto/Roboto-Light.woff2 -------------------------------------------------------------------------------- /fonts/roboto/Roboto-Medium.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/fonts/roboto/Roboto-Medium.woff -------------------------------------------------------------------------------- /fonts/roboto/Roboto-Medium.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/fonts/roboto/Roboto-Medium.woff2 -------------------------------------------------------------------------------- /fonts/roboto/Roboto-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/fonts/roboto/Roboto-Regular.woff -------------------------------------------------------------------------------- /fonts/roboto/Roboto-Thin.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/fonts/roboto/Roboto-Thin.woff2 -------------------------------------------------------------------------------- /favicon/apple-icon-precomposed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/favicon/apple-icon-precomposed.png -------------------------------------------------------------------------------- /fonts/roboto/Roboto-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NansD/nansd.github.io/master/fonts/roboto/Roboto-Regular.woff2 -------------------------------------------------------------------------------- /img/svg/arrow_left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /img/svg/arrow_right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /favicon/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | #ffffff -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # nansd.github.io : https://nansd.github.io/ 2 | 3 | Design idea : 4 | https://mdbootstrap.com/download/templates/bootstrap/free/full-background-image/index.html 5 | 6 | With a button that would do a transition animation to a dashboard page which would look like : 7 | https://mdbootstrap.com/live/_MDB/templates/Admin/home.html 8 | -------------------------------------------------------------------------------- /sass/README.txt: -------------------------------------------------------------------------------- 1 | Warning! 2 | 3 | SASS files are optional! They are not required to start working with MDB. 4 | 5 | You don't need to include them in your project. 6 | 7 | SASS are inteded for developers who are willing to modify MDB CSS code via SASS files. 8 | All other users should include either mdb.css or mdb.min.css and skip SASS files. -------------------------------------------------------------------------------- /favicon/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "App", 3 | "icons": [ 4 | { 5 | "src": "\/android-icon-36x36.png", 6 | "sizes": "36x36", 7 | "type": "image\/png", 8 | "density": "0.75" 9 | }, 10 | { 11 | "src": "\/android-icon-48x48.png", 12 | "sizes": "48x48", 13 | "type": "image\/png", 14 | "density": "1.0" 15 | }, 16 | { 17 | "src": "\/android-icon-72x72.png", 18 | "sizes": "72x72", 19 | "type": "image\/png", 20 | "density": "1.5" 21 | }, 22 | { 23 | "src": "\/android-icon-96x96.png", 24 | "sizes": "96x96", 25 | "type": "image\/png", 26 | "density": "2.0" 27 | }, 28 | { 29 | "src": "\/android-icon-144x144.png", 30 | "sizes": "144x144", 31 | "type": "image\/png", 32 | "density": "3.0" 33 | }, 34 | { 35 | "src": "\/android-icon-192x192.png", 36 | "sizes": "192x192", 37 | "type": "image\/png", 38 | "density": "4.0" 39 | } 40 | ] 41 | } -------------------------------------------------------------------------------- /sass/free/_cards-basic.scss: -------------------------------------------------------------------------------- 1 | // CARDS BASIC 2 | .card { 3 | border: 0; 4 | .card-title a { 5 | color: #424242; 6 | @include transition (0.4s); 7 | &:hover { 8 | color: #616161; 9 | @include transition (0.4s); 10 | } 11 | } 12 | img { 13 | border-bottom-left-radius: 0; 14 | border-bottom-right-radius: 0; 15 | @extend .img-fluid; 16 | } 17 | .card-footer { 18 | padding-bottom: 0; 19 | } 20 | } 21 | 22 | // Jumbtotron 23 | .jumbotron { 24 | background-color: #fff; 25 | padding: 2rem; 26 | &.m-1, 27 | &.m-2, 28 | &.m-3 { 29 | z-index: 50; 30 | position: relative; 31 | margin-left: 3%; 32 | margin-right: 3%; 33 | } 34 | &.m-1 { 35 | margin-top: -20px; 36 | } 37 | &.m-2 { 38 | margin-top: -30px; 39 | } 40 | &.m-3 { 41 | margin-top: -40px; 42 | } 43 | } -------------------------------------------------------------------------------- /sass/free/_footer.scss: -------------------------------------------------------------------------------- 1 | // FOOTER 2 | footer.page-footer { 3 | margin-top: 20px; 4 | padding-top: 20px; 5 | background-color: $stylish-color-dark; 6 | color: #fff; 7 | .footer-copyright { 8 | overflow: hidden; 9 | height: 50px; 10 | line-height: 50px; 11 | color: rgba(255, 255, 255, .8); 12 | background-color: rgba(0, 0, 0, 0.2); 13 | text-align: center; 14 | } 15 | a { 16 | color: #fff; 17 | } 18 | .title { 19 | text-transform: uppercase; 20 | } 21 | .call-to-action { 22 | text-align: center; 23 | padding-top: 1.3rem; 24 | padding-bottom: 0.5rem; 25 | ul li { 26 | display: inline-block; 27 | padding-right: 10px; 28 | } 29 | } 30 | .social-section { 31 | text-align: center; 32 | ul li { 33 | display: inline-block; 34 | 35 | 36 | } 37 | } 38 | } -------------------------------------------------------------------------------- /js/script.js: -------------------------------------------------------------------------------- 1 | $(function(){ 2 | Chart.defaults.global.defaultFontSize = 20 3 | 4 | 5 | $(".contact").on("click", function(){ 6 | $('html,body').animate({ 7 | scrollTop: $(".contact-form").offset().top 8 | }); 9 | }); 10 | $('.dashboard-link').on("click", function(){ 11 | $('html,body').animate({ 12 | scrollTop: $("#dashboard").offset().top 13 | }); 14 | }); 15 | 16 | $('.send-mail').on('click', function(){ 17 | var subject = $('#form32').val(); 18 | var body = $('#form7').val(); 19 | window.open('mailto:dumortier.nans@gmail.com?subject=' + subject + '&body=' +body); 20 | }); 21 | 22 | var ctx = document.getElementById("myChart"); 23 | var myRadarChart = new Chart(ctx, { 24 | type: 'radar', 25 | data: { 26 | labels: ['Running', 'Swimming', 'Eating', 'Cycling', 'Drinking', 'Sleeping', 'Hiking'], 27 | datasets: [{ 28 | data: [20, 10, 4, 2, 15, 13, 19] 29 | }], 30 | options: { 31 | labels: { 32 | fontSize: 20 33 | } 34 | } 35 | } 36 | }); 37 | }); 38 | -------------------------------------------------------------------------------- /materialize/LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014-2017 Materialize 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 | -------------------------------------------------------------------------------- /sass/mdb.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * Material Design for Bootstrap 4 3 | * Version: MDB FREE 4.3.0 4 | * 5 | * 6 | * Copyright: Material Design for Bootstrap 7 | * http://mdbootstrap.com/ 8 | * 9 | * Read the license: http://mdbootstrap.com/license/ 10 | * 11 | * Atribution: Animate CSS, Twitter Bootstrap, Materialize CSS, Normalize CSS, Waves JS, WOW JS, Toastr, Chart.js , Hammer.js 12 | * 13 | */ 14 | 15 | @charset "UTF-8"; 16 | 17 | // MDB Framework // 18 | 19 | // Mixins 20 | @import "mdb/free/data/prefixer"; 21 | @import "mdb/free/data/mixins"; 22 | 23 | // Variables 24 | @import "mdb/free/data/colors"; 25 | @import "mdb/free/data/variables-b4"; 26 | @import "mdb/free/data/variables"; 27 | 28 | //Global 29 | @import "mdb/free/global"; 30 | 31 | // MDB Free 32 | @import "mdb/free/roboto"; 33 | @import "mdb/free/typography"; 34 | @import "mdb/free/animations"; 35 | @import "mdb/free/waves"; 36 | @import "mdb/free/helpers"; 37 | @import "mdb/free/buttons"; 38 | @import "mdb/free/forms-basic"; 39 | @import "mdb/free/cards-basic"; 40 | @import "mdb/free/navbars"; 41 | @import "mdb/free/hover-effects"; 42 | @import "mdb/free/footer"; 43 | @import "mdb/free/carousels-basic"; -------------------------------------------------------------------------------- /sass/mdb/free/_footer.scss: -------------------------------------------------------------------------------- 1 | // FOOTER 2 | footer.page-footer { 3 | margin-top: 20px; 4 | padding-top: 20px; 5 | background-color: $stylish-color-dark; 6 | color: #fff; 7 | .footer-copyright { 8 | overflow: hidden; 9 | height: 50px; 10 | line-height: 50px; 11 | color: rgba(255, 255, 255, .8); 12 | background-color: rgba(0, 0, 0, 0.2); 13 | text-align: center; 14 | } 15 | a { 16 | color: #fff; 17 | } 18 | .title { 19 | text-transform: uppercase; 20 | } 21 | .call-to-action { 22 | text-align: center; 23 | padding-top: 1.3rem; 24 | padding-bottom: 0.5rem; 25 | ul li { 26 | display: inline-block; 27 | padding-right: 10px; 28 | } 29 | } 30 | .social-section { 31 | text-align: center; 32 | ul li { 33 | display: inline-block; 34 | 35 | 36 | } 37 | } 38 | } 39 | 40 | /* Instagram photos */ 41 | ul.instagram-photos { 42 | li { 43 | display: inline-block; 44 | max-width: 100px; 45 | margin: 4px; 46 | img { 47 | margin: 0; 48 | @extend .z-depth-1-half; 49 | } 50 | } 51 | } -------------------------------------------------------------------------------- /css/template.css: -------------------------------------------------------------------------------- 1 | /* TEMPLATE STYLES */ 2 | 3 | html, 4 | body, 5 | .view { 6 | height: 100%; 7 | } 8 | /* Navigation*/ 9 | 10 | .navbar { 11 | background-color: transparent; 12 | } 13 | 14 | .scrolling-navbar { 15 | -webkit-transition: background .5s ease-in-out, padding .5s ease-in-out; 16 | -moz-transition: background .5s ease-in-out, padding .5s ease-in-out; 17 | transition: background .5s ease-in-out, padding .5s ease-in-out; 18 | } 19 | 20 | .top-nav-collapse { 21 | background-color: #1C2331; 22 | } 23 | 24 | footer.page-footer { 25 | background-color: #1C2331; 26 | margin-top: -1px; 27 | } 28 | 29 | @media only screen and (max-width: 768px) { 30 | .navbar { 31 | background-color: #1C2331; 32 | } 33 | } 34 | /*Call to action*/ 35 | 36 | .flex-center { 37 | color: #fff; 38 | } 39 | 40 | .view { 41 | background: url("../images/theater.jpg")no-repeat center center fixed; 42 | -webkit-background-size: cover; 43 | -moz-background-size: cover; 44 | -o-background-size: cover; 45 | background-size: cover; 46 | } -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | .hm-black-strong .full-bg-img, .hm-black-strong .mask{ 2 | background-color: transparent; 3 | } 4 | 5 | /* Custom scrollbar */ 6 | ::-webkit-scrollbar { 7 | width: 5px; 8 | background: #000; 9 | } 10 | /* Track */ 11 | 12 | ::-webkit-scrollbar-track { 13 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 14 | -webkit-border-radius: 10px; 15 | border-radius: 10px; 16 | } 17 | /* Handle */ 18 | 19 | ::-webkit-scrollbar-thumb { 20 | -webkit-border-radius: 10px; 21 | border-radius: 10px; 22 | background: #3E4551; 23 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); 24 | } 25 | 26 | ::-webkit-scrollbar-thumb:window-inactive { 27 | background: #3E4551; 28 | } 29 | 30 | .btn-lg{ 31 | background-color: transparent; 32 | border: 2px solid white; 33 | border-radius: 10px; 34 | } 35 | .btn-lg:hover{ 36 | background: transparent !important; 37 | border: 2px solid rgba(255, 255, 255, 0.6); 38 | } 39 | 40 | .contact-form textarea{ 41 | color: #FFFFFF; 42 | } 43 | .contact-form input[type=text]{ 44 | color: #FFFFFF; 45 | } 46 | .send-shadow{ 47 | text-shadow: 2px 3px 1px rgba(0,0,0,0.3); 48 | } 49 | .contact-info{ 50 | width: 227px; 51 | margin: 0 auto; 52 | text-align: left; 53 | } 54 | 55 | #dashboard{ 56 | background-color: #FFFFFF; 57 | } 58 | 59 | #dashboard h1 { 60 | color: #000000 61 | } 62 | 63 | #dashboard #myChart{ 64 | width: 500px !important; 65 | height: 500px !important; 66 | } -------------------------------------------------------------------------------- /img/lightbox/default-skin.svg: -------------------------------------------------------------------------------- 1 | default-skin 2 -------------------------------------------------------------------------------- /sass/free/_carousels-basic.scss: -------------------------------------------------------------------------------- 1 | // CAROUSELS BASIC 2 | .carousel-control:hover { 3 | @include transition-duration($duration: 400ms); 4 | } 5 | 6 | .carousel-fade .carousel-inner { 7 | .carousel-item { 8 | opacity: 0; 9 | transition-property: opacity; 10 | } 11 | .active { 12 | opacity: 1; 13 | } 14 | .active.left, 15 | .active.right { 16 | left: 0; 17 | opacity: 0; 18 | z-index: 1; 19 | } 20 | .next.left, 21 | .prev.right { 22 | opacity: 1; 23 | } 24 | } 25 | 26 | .carousel-fade .carousel-control { 27 | z-index: 2; 28 | } 29 | 30 | @media all and (transform-3d), 31 | (-webkit-transform-3d) { 32 | .carousel-fade .carousel-inner > .carousel-item.next, 33 | .carousel-fade .carousel-inner > .carousel-item.active.right { 34 | opacity: 0; 35 | -webkit-transform: translate3d(0, 0, 0); 36 | transform: translate3d(0, 0, 0); 37 | } 38 | .carousel-fade .carousel-inner > .carousel-item.prev, 39 | .carousel-fade .carousel-inner > .carousel-item.active.left { 40 | opacity: 0; 41 | -webkit-transform: translate3d(0, 0, 0); 42 | transform: translate3d(0, 0, 0); 43 | } 44 | .carousel-fade .carousel-inner > .carousel-item.next.left, 45 | .carousel-fade .carousel-inner > .carousel-item.prev.right, 46 | .carousel-fade .carousel-inner > .carousel-item.active { 47 | opacity: 1; 48 | -webkit-transform: translate3d(0, 0, 0); 49 | transform: translate3d(0, 0, 0); 50 | } 51 | } -------------------------------------------------------------------------------- /sass/free/data/_mixins.scss: -------------------------------------------------------------------------------- 1 | /********************* 2 | Mixins 3 | **********************/ 4 | 5 | @mixin hover { 6 | @if $enable-hover-media-query { 7 | // See Media Queries Level 4: http://drafts.csswg.org/mediaqueries/#hover 8 | // Currently shimmed by https://github.com/twbs/mq4-hover-shim 9 | @media (hover: hover) { 10 | &:hover { 11 | @content 12 | } 13 | } 14 | } 15 | @else { 16 | &:hover { 17 | @content 18 | } 19 | } 20 | } 21 | 22 | @mixin hover-focus { 23 | @if $enable-hover-media-query { 24 | &:focus { 25 | @content 26 | } 27 | @include hover { 28 | @content 29 | } 30 | } 31 | @else { 32 | &:focus, 33 | &:hover { 34 | @content 35 | } 36 | } 37 | } 38 | 39 | @mixin plain-hover-focus { 40 | @if $enable-hover-media-query { 41 | &, 42 | &:focus { 43 | @content 44 | } 45 | @include hover { 46 | @content 47 | } 48 | } 49 | @else { 50 | &, 51 | &:focus, 52 | &:hover { 53 | @content 54 | } 55 | } 56 | } 57 | 58 | @mixin hover-focus-active { 59 | @if $enable-hover-media-query { 60 | &:focus, 61 | &:active { 62 | @content 63 | } 64 | @include hover { 65 | @content 66 | } 67 | } 68 | @else { 69 | &:focus, 70 | &:active, 71 | &:hover { 72 | @content 73 | } 74 | } 75 | } 76 | 77 | @mixin border-radius($args) { 78 | -webkit-border-radius: $args; 79 | -moz-border-radius: $args; 80 | -ms-border-radius: $args; 81 | -o-border-radius: $args; 82 | border-radius: $args; 83 | } -------------------------------------------------------------------------------- /sass/mdb/free/_cards-basic.scss: -------------------------------------------------------------------------------- 1 | // CARDS BASIC 2 | .card { 3 | border: 0; 4 | .card-title a { 5 | color: #424242; 6 | @include transition (0.4s); 7 | &:hover { 8 | color: #616161; 9 | @include transition (0.4s); 10 | } 11 | } 12 | img { 13 | border-bottom-left-radius: 0; 14 | border-bottom-right-radius: 0; 15 | @extend .img-fluid; 16 | } 17 | .card-block { 18 | position:relative; 19 | } 20 | .card-footer { 21 | padding-bottom: 0; 22 | font-size:1.2rem; 23 | &:after { 24 | display:block; 25 | content: ""; 26 | clear:both; 27 | } 28 | .card-link { 29 | color: inherit; 30 | } 31 | } 32 | } 33 | 34 | // Jumbtotron 35 | .jumbotron { 36 | background-color: #fff; 37 | padding: 2rem; 38 | &.m-1, 39 | &.m-2, 40 | &.m-3 { 41 | z-index: 50; 42 | position: relative; 43 | margin-left: 3%; 44 | margin-right: 3%; 45 | } 46 | &.m-1 { 47 | margin-top: -20px; 48 | } 49 | &.m-2 { 50 | margin-top: -30px; 51 | } 52 | &.m-3 { 53 | margin-top: -40px; 54 | } 55 | } 56 | 57 | // .list-group fix 58 | .list-group-item { 59 | width:100%; 60 | } 61 | 62 | // edge header 63 | .edge-header { 64 | display:block; 65 | height:278px; 66 | background-color:#ccc; 67 | } 68 | 69 | .free-bird { 70 | margin-top:-100px; 71 | } 72 | 73 | // Form sets 74 | 75 | .card .form-header { 76 | color: #fff; 77 | text-align: center; 78 | margin-top: -50px; 79 | margin-bottom: 3rem; 80 | padding: 1rem; 81 | @extend .z-depth-1-half; 82 | @include border-radius(2px); 83 | h3 { 84 | margin: 0; 85 | padding: 0.7rem; 86 | } 87 | } 88 | .call .fa { 89 | margin-right: 5px; 90 | } -------------------------------------------------------------------------------- /sass/style.scss: -------------------------------------------------------------------------------- 1 | /* Carousel and pictures */ 2 | 3 | .view:not(.hm-zoom) { 4 | overflow:visible; 5 | } 6 | 7 | /* Margin from the top */ 8 | 9 | .container { 10 | .row { 11 | margin-top: 2.5rem; 12 | } 13 | } 14 | 15 | /* Simple blog listing */ 16 | 17 | .simple-blog-listing { 18 | .single-post { 19 | margin-bottom: 5rem; 20 | &.simple-post-text { 21 | margin-bottom: 0; 22 | border-bottom: 1px solid #e0e0e0; 23 | .post-pictures { 24 | img { 25 | margin-bottom: 1.5rem; 26 | } 27 | } 28 | } 29 | h5 { 30 | text-align: center; 31 | margin-bottom: 1.5rem; 32 | } 33 | h2 { 34 | text-align: center; 35 | margin-top: 2rem; 36 | margin-bottom: 1.2rem; 37 | } 38 | .post-data { 39 | h5 { 40 | margin-bottom: 2rem; 41 | font-weight: 400; 42 | i { 43 | padding-left: 1rem; 44 | } 45 | } 46 | } 47 | } 48 | } 49 | 50 | /* Archive */ 51 | 52 | .archive { 53 | ul { 54 | li { 55 | padding-top: 0.8rem; 56 | border-top: 1px solid #eceeef; 57 | &:first-of-type { 58 | border-top: none; 59 | } 60 | padding-bottom: 0.3rem; 61 | } 62 | } 63 | } 64 | 65 | /* Author widget */ 66 | 67 | .simple-author-widget { 68 | .author-photo { 69 | margin-bottom: 1.8rem; 70 | } 71 | .about-author { 72 | h4 { 73 | text-align: center; 74 | margin-bottom: 1.5rem; 75 | } 76 | p { 77 | text-align: justify; 78 | } 79 | } 80 | } 81 | 82 | /* Simple author page */ 83 | 84 | .simple-author-page { 85 | h1 { 86 | margin-bottom: 2rem; 87 | } 88 | p { 89 | text-align: center; 90 | } 91 | .view { 92 | img { 93 | margin-top: 2rem; 94 | } 95 | } 96 | } -------------------------------------------------------------------------------- /sass/mdb/free/data/_mixins.scss: -------------------------------------------------------------------------------- 1 | /********************* 2 | Mixins 3 | **********************/ 4 | 5 | @mixin hover { 6 | @if $enable-hover-media-query { 7 | // See Media Queries Level 4: http://drafts.csswg.org/mediaqueries/#hover 8 | // Currently shimmed by https://github.com/twbs/mq4-hover-shim 9 | @media (hover: hover) { 10 | &:hover { 11 | @content 12 | } 13 | } 14 | } 15 | @else { 16 | &:hover { 17 | @content 18 | } 19 | } 20 | } 21 | 22 | @mixin hover-focus { 23 | @if $enable-hover-media-query { 24 | &:focus { 25 | @content 26 | } 27 | @include hover { 28 | @content 29 | } 30 | } 31 | @else { 32 | &:focus, 33 | &:hover { 34 | @content 35 | } 36 | } 37 | } 38 | 39 | @mixin plain-hover-focus { 40 | @if $enable-hover-media-query { 41 | &, 42 | &:focus { 43 | @content 44 | } 45 | @include hover { 46 | @content 47 | } 48 | } 49 | @else { 50 | &, 51 | &:focus, 52 | &:hover { 53 | @content 54 | } 55 | } 56 | } 57 | 58 | @mixin hover-focus-active { 59 | @if $enable-hover-media-query { 60 | &:focus, 61 | &:active { 62 | @content 63 | } 64 | @include hover { 65 | @content 66 | } 67 | } 68 | @else { 69 | &:focus, 70 | &:active, 71 | &:hover { 72 | @content 73 | } 74 | } 75 | } 76 | 77 | @mixin border-radius($args) { 78 | -webkit-border-radius: $args; 79 | -moz-border-radius: $args; 80 | -ms-border-radius: $args; 81 | -o-border-radius: $args; 82 | border-radius: $args; 83 | } 84 | 85 | @mixin placeholder { 86 | &::-webkit-input-placeholder { 87 | @content 88 | } 89 | &:-moz-placeholder { 90 | @content 91 | } 92 | &::-moz-placeholder { 93 | @content 94 | } 95 | &::-ms-placeholder { 96 | @content 97 | } 98 | &::placeholder { 99 | @content 100 | } 101 | } 102 | -------------------------------------------------------------------------------- /sass/mdb/free/_carousels-basic.scss: -------------------------------------------------------------------------------- 1 | // CAROUSELS BASIC 2 | .carousel-control:hover { 3 | @include transition-duration($duration: 400ms); 4 | } 5 | 6 | .carousel-fade .carousel-inner { 7 | .carousel-item { 8 | opacity: 0; 9 | transition-property: opacity; 10 | } 11 | .active { 12 | opacity: 1; 13 | } 14 | .active.left, 15 | .active.right { 16 | left: 0; 17 | opacity: 0; 18 | z-index: 1; 19 | } 20 | .next.left, 21 | .prev.right { 22 | opacity: 1; 23 | } 24 | } 25 | 26 | .carousel-fade .carousel-control { 27 | z-index: 2; 28 | } 29 | 30 | @media all and (transform-3d), 31 | (-webkit-transform-3d) { 32 | .carousel-fade .carousel-inner > .carousel-item.next, 33 | .carousel-fade .carousel-inner > .carousel-item.active.right { 34 | opacity: 0; 35 | -webkit-transform: translate3d(0, 0, 0); 36 | transform: translate3d(0, 0, 0); 37 | } 38 | .carousel-fade .carousel-inner > .carousel-item.prev, 39 | .carousel-fade .carousel-inner > .carousel-item.active.left { 40 | opacity: 0; 41 | -webkit-transform: translate3d(0, 0, 0); 42 | transform: translate3d(0, 0, 0); 43 | } 44 | .carousel-fade .carousel-inner > .carousel-item.next.left, 45 | .carousel-fade .carousel-inner > .carousel-item.prev.right, 46 | .carousel-fade .carousel-inner > .carousel-item.active { 47 | opacity: 1; 48 | -webkit-transform: translate3d(0, 0, 0); 49 | transform: translate3d(0, 0, 0); 50 | } 51 | } 52 | 53 | .carousel { 54 | .carousel-control-prev-icon, 55 | .carousel-control-next-icon { 56 | width: 36px; 57 | height: 36px; 58 | } 59 | .carousel-control-prev-icon { 60 | background-image: url(../img/svg/arrow_left.svg); 61 | } 62 | .carousel-control-next-icon { 63 | background-image: url(../img/svg/arrow_right.svg); 64 | } 65 | .carousel-indicators { 66 | li { 67 | max-width: 10px; 68 | height: 10px; 69 | border-radius: 50%; 70 | } 71 | } 72 | .video-fluid { 73 | height: 100%; 74 | } 75 | &.no-flex { 76 | .carousel-item.active, 77 | .carousel-item-next, 78 | .carousel-item-prev { 79 | display: block; 80 | } 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /sass/free/_roboto.scss: -------------------------------------------------------------------------------- 1 | // ROBOTO FONT 2 | 3 | @font-face { 4 | font-family: "Roboto"; 5 | src: local(Roboto Thin), url('#{$roboto-font-path}Roboto-Thin.eot'); 6 | src: url("#{$roboto-font-path}Roboto-Thin.eot?#iefix") format('embedded-opentype'), 7 | url("#{$roboto-font-path}Roboto-Thin.woff2") format("woff2"), 8 | url("#{$roboto-font-path}Roboto-Thin.woff") format("woff"), 9 | url("#{$roboto-font-path}Roboto-Thin.ttf") format("truetype"); 10 | 11 | font-weight: 200; 12 | } 13 | @font-face { 14 | font-family: "Roboto"; 15 | src: local(Roboto Light), url('#{$roboto-font-path}Roboto-Light.eot'); 16 | src: url("#{$roboto-font-path}Roboto-Light.eot?#iefix") format('embedded-opentype'), 17 | url("#{$roboto-font-path}Roboto-Light.woff2") format("woff2"), 18 | url("#{$roboto-font-path}Roboto-Light.woff") format("woff"), 19 | url("#{$roboto-font-path}Roboto-Light.ttf") format("truetype"); 20 | font-weight: 300; 21 | } 22 | 23 | @font-face { 24 | font-family: "Roboto"; 25 | src: local(Roboto Regular), url('#{$roboto-font-path}Roboto-Regular.eot'); 26 | src: url("#{$roboto-font-path}Roboto-Regular.eot?#iefix") format('embedded-opentype'), 27 | url("#{$roboto-font-path}Roboto-Regular.woff2") format("woff2"), 28 | url("#{$roboto-font-path}Roboto-Regular.woff") format("woff"), 29 | url("#{$roboto-font-path}Roboto-Regular.ttf") format("truetype"); 30 | font-weight: 400; 31 | } 32 | 33 | @font-face { 34 | font-family: "Roboto"; 35 | src: url('#{$roboto-font-path}Roboto-Medium.eot'); 36 | src: url("#{$roboto-font-path}Roboto-Medium.eot?#iefix") format('embedded-opentype'), 37 | url("#{$roboto-font-path}Roboto-Medium.woff2") format("woff2"), 38 | url("#{$roboto-font-path}Roboto-Medium.woff") format("woff"), 39 | url("#{$roboto-font-path}Roboto-Medium.ttf") format("truetype"); 40 | font-weight: 500; 41 | } 42 | 43 | @font-face { 44 | font-family: "Roboto"; 45 | src: url('#{$roboto-font-path}Roboto-Bold.eot'); 46 | src: url("#{$roboto-font-path}Roboto-Bold.eot?#iefix") format('embedded-opentype'), 47 | url("#{$roboto-font-path}Roboto-Bold.woff2") format("woff2"), 48 | url("#{$roboto-font-path}Roboto-Bold.woff") format("woff"), 49 | url("#{$roboto-font-path}Roboto-Bold.ttf") format("truetype"); 50 | font-weight: 700; 51 | } 52 | -------------------------------------------------------------------------------- /sass/mdb/free/_roboto.scss: -------------------------------------------------------------------------------- 1 | // ROBOTO FONT 2 | 3 | @font-face { 4 | font-family: "Roboto"; 5 | src: local(Roboto Thin), url('#{$roboto-font-path}Roboto-Thin.eot'); 6 | src: url("#{$roboto-font-path}Roboto-Thin.eot?#iefix") format('embedded-opentype'), 7 | url("#{$roboto-font-path}Roboto-Thin.woff2") format("woff2"), 8 | url("#{$roboto-font-path}Roboto-Thin.woff") format("woff"), 9 | url("#{$roboto-font-path}Roboto-Thin.ttf") format("truetype"); 10 | 11 | font-weight: 200; 12 | } 13 | @font-face { 14 | font-family: "Roboto"; 15 | src: local(Roboto Light), url('#{$roboto-font-path}Roboto-Light.eot'); 16 | src: url("#{$roboto-font-path}Roboto-Light.eot?#iefix") format('embedded-opentype'), 17 | url("#{$roboto-font-path}Roboto-Light.woff2") format("woff2"), 18 | url("#{$roboto-font-path}Roboto-Light.woff") format("woff"), 19 | url("#{$roboto-font-path}Roboto-Light.ttf") format("truetype"); 20 | font-weight: 300; 21 | } 22 | 23 | @font-face { 24 | font-family: "Roboto"; 25 | src: local(Roboto Regular), url('#{$roboto-font-path}Roboto-Regular.eot'); 26 | src: url("#{$roboto-font-path}Roboto-Regular.eot?#iefix") format('embedded-opentype'), 27 | url("#{$roboto-font-path}Roboto-Regular.woff2") format("woff2"), 28 | url("#{$roboto-font-path}Roboto-Regular.woff") format("woff"), 29 | url("#{$roboto-font-path}Roboto-Regular.ttf") format("truetype"); 30 | font-weight: 400; 31 | } 32 | 33 | @font-face { 34 | font-family: "Roboto"; 35 | src: url('#{$roboto-font-path}Roboto-Medium.eot'); 36 | src: url("#{$roboto-font-path}Roboto-Medium.eot?#iefix") format('embedded-opentype'), 37 | url("#{$roboto-font-path}Roboto-Medium.woff2") format("woff2"), 38 | url("#{$roboto-font-path}Roboto-Medium.woff") format("woff"), 39 | url("#{$roboto-font-path}Roboto-Medium.ttf") format("truetype"); 40 | font-weight: 500; 41 | } 42 | 43 | @font-face { 44 | font-family: "Roboto"; 45 | src: url('#{$roboto-font-path}Roboto-Bold.eot'); 46 | src: url("#{$roboto-font-path}Roboto-Bold.eot?#iefix") format('embedded-opentype'), 47 | url("#{$roboto-font-path}Roboto-Bold.woff2") format("woff2"), 48 | url("#{$roboto-font-path}Roboto-Bold.woff") format("woff"), 49 | url("#{$roboto-font-path}Roboto-Bold.ttf") format("truetype"); 50 | font-weight: 700; 51 | } 52 | -------------------------------------------------------------------------------- /materialize/README.md: -------------------------------------------------------------------------------- 1 | ![Materialize logo](https://raw.github.com/dogfalo/materialize/master/images/materialize.gif) 2 | =========== 3 | 4 | [![Travis CI badge](https://travis-ci.org/Dogfalo/materialize.svg?branch=master)](https://travis-ci.org/Dogfalo/materialize) 5 | [![npm version badge](https://badge.fury.io/js/materialize-css.svg)](https://badge.fury.io/js/materialize-css) 6 | [![dependencies Status badge](https://david-dm.org/Dogfalo/materialize/status.svg)](https://david-dm.org/Dogfalo/materialize) 7 | [![devDependency Status badge](https://david-dm.org/Dogfalo/materialize/dev-status.svg)](https://david-dm.org/Dogfalo/materialize#info=devDependencies) 8 | [![Gitter badge](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/Dogfalo/materialize?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) 9 | 10 | [Materialize](http://materializecss.com/), a CSS Framework based on material design 11 | 12 | ### Current Version : v0.99.0 13 | 14 | ## Sass Requirements: 15 | - Ruby Sass 3.3+, LibSass 0.6+ 16 | 17 | ## Supported Browsers: 18 | Chrome 35+, Firefox 31+, Safari 7+, IE 10+ 19 | 20 | ## Quickstart: 21 | Read the [Getting started page](http://materializecss.com/getting-started.html) for more information about the framework, templates and how to use materialize can be found on the [materializecss website](http://materializecss.com) 22 | 23 | - [Download the latest release](https://github.com/Dogfalo/materialize/releases/latest) directly from GitHub 24 | - Clone the repo: `git clone https://github.com/Dogfalo/materialize.git` 25 | - Include the files via [cdnjs](https://cdnjs.com/libraries/materialize). More [here](http://materializecss.com/getting-started.html) 26 | - Install with [npm](https://www.npmjs.com): `npm install materialize-css` 27 | - Install with [Bower](https://bower.io): `bower install materialize` 28 | 29 | ## Compiling Files 30 | - `npm install` 31 | - `grunt monitor`, this will compile .scss, .js., .jade files. 32 | 33 | ## Changelog 34 | For changelogs, check out [the Releases section of materialize](https://github.com/Dogfalo/materialize/releases) or the [CHANGELOG.md](CHANGELOG.md) 35 | 36 | ## Testing 37 | We use Jasmine as our testing framework and we're trying to write a robust test suite for our components. If you want to help, [here's a starting guide on how to write tests in Jasmine](https://docs.google.com/document/d/1dVM6qGt_b_y9RRhr9X7oZfFydaJIEqB9CT7yekv-4XE/edit?usp=sharing) 38 | 39 | ## Contributing 40 | [Please read CONTRIBUTING.md for more information](CONTRIBUTING.md) 41 | 42 | ## Translation 43 | If you want to help us translate the documentation into other languages, please send us an email at materializeframework@gmail.com telling us which language team you want to join. We use [Transifex](https://www.transifex.com) as our localization platform and we will send you an invite there. 44 | -------------------------------------------------------------------------------- /sass/free/data/_variables.scss: -------------------------------------------------------------------------------- 1 | // VARIABLES 2 | 3 | /*** Colors ***/ 4 | $primary-color: color("mdb-color", "lighten-2") !default; 5 | $primary-color-light: lighten($primary-color, 15%) !default; 6 | $primary-color-dark: darken($primary-color, 15%) !default; 7 | 8 | $secondary-color: color("teal", "lighten-1") !default; 9 | $success-color: color("green", "base") !default; 10 | 11 | $link-color: color("light-blue", "darken-1") !default; 12 | 13 | /*** Fonts ***/ 14 | $roboto-font-path: "../font/roboto/" !default; 15 | 16 | /*** Typography ***/ 17 | $off-black: rgba(0, 0, 0, 0.87) !default; 18 | 19 | /*** Cards ***/ 20 | $card-padding: 20px !default; 21 | $card-bg-color: #fff !default; 22 | $card-link-color: color("orange", "accent-2") !default; 23 | $card-link-color-light: lighten($card-link-color, 20%) !default; 24 | 25 | /*** Global ***/ 26 | // Media Query Ranges 27 | $small-screen-up: 601px !default; 28 | $medium-screen-up: 993px !default; 29 | $large-screen-up: 1201px !default; 30 | $small-screen: 600px !default; 31 | $medium-screen: 992px !default; 32 | $large-screen: 1200px !default; 33 | 34 | $medium-and-up: "only screen and (min-width : #{$small-screen-up})" !default; 35 | $large-and-up: "only screen and (min-width : #{$medium-screen-up})" !default; 36 | $small-and-down: "only screen and (max-width : #{$small-screen})" !default; 37 | $medium-and-down: "only screen and (max-width : #{$medium-screen})" !default; 38 | $medium-only: "only screen and (min-width : #{$small-screen-up}) and (max-width : #{$medium-screen})" !default; 39 | 40 | // Text fluid 41 | $range : $large-screen - $small-screen !default; 42 | $intervals: 20 !default; 43 | $interval-size: $range / $intervals !default; 44 | 45 | /*** Forms ***/ 46 | // Text Inputs + Textarea 47 | $input-border-color: color("grey", "darken-4") !default; 48 | $input-bg-color: #fff !default; 49 | $input-error-color: $error-color !default; 50 | $input-success-color: $success-color !default; 51 | $input-focus-color: $primary-color !default; 52 | $label-font-size: .8rem !default; 53 | $input-disabled-color: rgba(0,0,0, .46) !default; 54 | $input-disabled-solid-color: #BDBDBD !default; 55 | 56 | // Radio Buttons 57 | $radio-fill-color: $primary-color !default; 58 | $radio-empty-color: #5a5a5a !default; 59 | 60 | // Switches 61 | $switch-bg-color: $secondary-color !default; 62 | $switch-checked-lever-bg: desaturate(lighten($secondary-color, 25%), 25%) !default; 63 | $switch-unchecked-bg: #F1F1F1 !default; 64 | $switch-unchecked-lever-bg: #818181 !default; 65 | 66 | /*** Buttons ***/ 67 | $button-bg-color-disabled: #DFDFDF !default; 68 | $button-color: $secondary-color !default; 69 | $button-color-disabled: #9F9F9F !default; 70 | $button-color-flat: #343434 !default; 71 | $button-color-raised: #fff !default; 72 | $button-floating-size: 37px !default; 73 | $button-height: 36px !default; 74 | $button-font-size-shared: 1.3rem !default; 75 | $button-large-icon-font-size: 1.6rem !default; 76 | $button-line-height: 36px !default; 77 | 78 | // Grid Variables 79 | $num-cols: 12 !default; 80 | $gutter-width: 1.5rem !default; 81 | $element-top-margin: $gutter-width/3 !default; 82 | $element-bottom-margin: ($gutter-width*2)/3 !default; 83 | 84 | /*** Dropdown ***/ 85 | $dropdown-bg-color: #fff !default; 86 | $dropdown-hover-bg-color: #eee !default; 87 | $dropdown-color: $primary-color !default; 88 | $dropdown-item-height: 50px !default; 89 | 90 | /*** Tabs ***/ 91 | $tabs-underline-color: $primary-color-light !default; 92 | $tabs-text-color: $primary-color !default; 93 | $tabs-bg-color: #fff !default; 94 | 95 | // Date Picker 96 | $datepicker-weekday-bg: darken($primary-color, 7%) !default; 97 | $datepicker-date-bg: $primary-color !default; 98 | $datepicker-year: rgba(255, 255, 255, .4) !default; 99 | $datepicker-focus: rgba(0,0,0, .05) !default; 100 | $datepicker-selected: $primary-color !default; 101 | $datepicker-selected-outfocus: desaturate(lighten($primary-color, 35%), 15%) !default; -------------------------------------------------------------------------------- /sass/mdb/free/data/_variables.scss: -------------------------------------------------------------------------------- 1 | // VARIABLES 2 | 3 | /*** Colors ***/ 4 | $primary-color: color("mdb-color", "lighten-2") !default; 5 | $primary-color-light: lighten($primary-color, 15%) !default; 6 | $primary-color-dark: darken($primary-color, 15%) !default; 7 | 8 | $secondary-color: color("teal", "lighten-1") !default; 9 | $success-color: color("green", "base") !default; 10 | 11 | $link-color: color("light-blue", "darken-1") !default; 12 | 13 | /*** Fonts ***/ 14 | $roboto-font-path: "../font/roboto/" !default; 15 | 16 | /*** Typography ***/ 17 | $off-black: rgba(0, 0, 0, 0.87) !default; 18 | 19 | /*** Cards ***/ 20 | $card-padding: 20px !default; 21 | $card-bg-color: #fff !default; 22 | $card-link-color: color("orange", "accent-2") !default; 23 | $card-link-color-light: lighten($card-link-color, 20%) !default; 24 | 25 | /*** Global ***/ 26 | // Media Query Ranges 27 | $small-screen-up: 601px !default; 28 | $medium-screen-up: 993px !default; 29 | $large-screen-up: 1201px !default; 30 | $small-screen: 600px !default; 31 | $medium-screen: 992px !default; 32 | $large-screen: 1200px !default; 33 | $sidenav-breakpoint: 1440px !default; 34 | 35 | $medium-and-up: "only screen and (min-width : #{$small-screen-up})" !default; 36 | $large-and-up: "only screen and (min-width : #{$medium-screen-up})" !default; 37 | $small-and-down: "only screen and (max-width : #{$small-screen})" !default; 38 | $medium-and-down: "only screen and (max-width : #{$medium-screen})" !default; 39 | $medium-only: "only screen and (min-width : #{$small-screen-up}) and (max-width : #{$medium-screen})" !default; 40 | $hide-sidenav: "only screen and (max-width : #{$sidenav-breakpoint})" !default; 41 | 42 | // Text fluid 43 | $range : $large-screen - $small-screen !default; 44 | $intervals: 20 !default; 45 | $interval-size: $range / $intervals !default; 46 | 47 | /*** Forms ***/ 48 | // Text Inputs + Textarea 49 | $input-border-color: color("grey", "darken-4") !default; 50 | $input-bg-color: #fff !default; 51 | $input-error-color: $error-color !default; 52 | $input-success-color: $success-color !default; 53 | $input-focus-color: $primary-color !default; 54 | $label-font-size: .8rem !default; 55 | $input-disabled-color: rgba(0,0,0, .46) !default; 56 | $input-disabled-solid-color: #BDBDBD !default; 57 | 58 | // Radio Buttons 59 | $radio-fill-color: $primary-color !default; 60 | $radio-empty-color: #5a5a5a !default; 61 | 62 | // Switches 63 | $switch-bg-color: $secondary-color !default; 64 | $switch-checked-lever-bg: desaturate(lighten($secondary-color, 25%), 25%) !default; 65 | $switch-unchecked-bg: #F1F1F1 !default; 66 | $switch-unchecked-lever-bg: #818181 !default; 67 | 68 | /*** Buttons ***/ 69 | $button-bg-color-disabled: #DFDFDF !default; 70 | $button-color: $secondary-color !default; 71 | $button-color-disabled: #9F9F9F !default; 72 | $button-color-flat: #343434 !default; 73 | $button-color-raised: #fff !default; 74 | $button-floating-size: 37px !default; 75 | $button-height: 36px !default; 76 | $button-font-size-shared: 1.3rem !default; 77 | $button-large-icon-font-size: 1.6rem !default; 78 | $button-line-height: 36px !default; 79 | 80 | // Grid Variables 81 | $num-cols: 12 !default; 82 | $gutter-width: 1.5rem !default; 83 | $element-top-margin: $gutter-width/3 !default; 84 | $element-bottom-margin: ($gutter-width*2)/3 !default; 85 | 86 | /*** Dropdown ***/ 87 | $dropdown-bg-color: #fff !default; 88 | $dropdown-hover-bg-color: #eee !default; 89 | $dropdown-color: $primary-color !default; 90 | $dropdown-item-height: 50px !default; 91 | 92 | /*** Tabs ***/ 93 | $tabs-underline-color: $primary-color-light !default; 94 | $tabs-text-color: $primary-color !default; 95 | $tabs-bg-color: #fff !default; 96 | 97 | // Date Picker 98 | $datepicker-weekday-bg: darken($primary-color, 7%) !default; 99 | $datepicker-date-bg: $primary-color !default; 100 | $datepicker-year: rgba(255, 255, 255, .4) !default; 101 | $datepicker-focus: rgba(0,0,0, .05) !default; 102 | $datepicker-selected: $primary-color !default; 103 | $datepicker-selected-outfocus: desaturate(lighten($primary-color, 35%), 15%) !default; -------------------------------------------------------------------------------- /sass/mdb/free/_navbars.scss: -------------------------------------------------------------------------------- 1 | .navbar { 2 | font-weight: 300; 3 | form { 4 | input { 5 | margin: 0; 6 | height: 1rem; 7 | margin-right: 5px; 8 | margin-left: 8px; 9 | margin-bottom: 1px; 10 | } 11 | } 12 | .navbar-brand { 13 | align-self: flex-start; 14 | overflow: visible; 15 | } 16 | .breadcrumb { 17 | margin: 0; 18 | background-color: inherit; 19 | font-weight: 300; 20 | } 21 | &.navbar-dark { 22 | .navbar-brand { 23 | color: #fff; 24 | &:hover { 25 | color: #fff; 26 | } 27 | } 28 | .navbar-toggler-icon { 29 | background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); 30 | cursor: pointer; 31 | } 32 | .breadcrumb, 33 | .navbar-nav .nav-item { 34 | a { 35 | color: #fff; 36 | transition: .35s; 37 | &:hover { 38 | color: rgba(255, 255, 255, .75); 39 | } 40 | } 41 | &.active { 42 | background-color: rgba(255, 255, 255, 0.1); 43 | } 44 | .dropdown-menu a { 45 | color: #212121; 46 | &:hover, 47 | &:focus, 48 | &:active { 49 | color: #212121; 50 | } 51 | } 52 | } 53 | .nav-link { 54 | color: #fff; 55 | } 56 | .navbar-toggler { 57 | color: #fff; 58 | } 59 | } 60 | &.navbar-light { 61 | .navbar-toggler-icon { 62 | background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); 63 | } 64 | .breadcrumb, 65 | .nav-item { 66 | a { 67 | color: #212121; 68 | transition: .35s; 69 | &:hover { 70 | transition: .35s; 71 | color: #212121; 72 | } 73 | } 74 | &.active { 75 | background-color: rgba(158, 158, 158, 0.2); 76 | } 77 | .dropdown-menu a { 78 | color: #000; 79 | padding: 1rem; 80 | } 81 | } 82 | .navbar-toggler { 83 | color: #000; 84 | } 85 | } 86 | .dropdown-menu { 87 | a { 88 | font-size: 0.9375rem; 89 | font-weight: 300; 90 | padding: 10px; 91 | } 92 | } 93 | .navbar-toggler { 94 | border-width: 0; 95 | } 96 | .nav-flex-icons { 97 | flex-direction: row; 98 | } 99 | .container { 100 | @media (max-width: 991px) { 101 | width: 100%; 102 | .navbar-toggler-right { 103 | right: 0; 104 | } 105 | } 106 | } 107 | .dropdown-menu { 108 | position: absolute !important; 109 | } 110 | &.double-nav { 111 | flex-direction: row; 112 | } 113 | } 114 | 115 | // Input line color 116 | .navbar-dark form { 117 | input[type=text] { 118 | border-bottom: 1px solid #fff; 119 | } 120 | .form-control { 121 | color: #fff; 122 | @include placeholder { 123 | color: rgba(255, 255, 255, .65) !important; 124 | font-weight: 300; 125 | } 126 | } 127 | } 128 | 129 | .navbar-light form { 130 | // Style Placeholders 131 | input[type=text] { 132 | border-bottom: 1px solid #1C2331; 133 | } 134 | .form-control { 135 | color: #1C2331; 136 | @include placeholder { 137 | color: #1C2331!important; 138 | font-weight: 300; 139 | } 140 | } 141 | } 142 | -------------------------------------------------------------------------------- /sass/free/_waves.scss: -------------------------------------------------------------------------------- 1 | 2 | /*! 3 | * Waves v0.7.5 4 | * http://fian.my.id/Waves 5 | * 6 | * Copyright 2014-2016 Alfiana E. Sibuea and other contributors 7 | * Released under the MIT license 8 | * https://github.com/fians/Waves/blob/master/LICENSE 9 | */ 10 | 11 | @mixin waves-transition($transition){ 12 | -webkit-transition: $transition; 13 | -moz-transition: $transition; 14 | -o-transition: $transition; 15 | transition: $transition; 16 | } 17 | 18 | @mixin waves-transform($string){ 19 | -webkit-transform: $string; 20 | -moz-transform: $string; 21 | -ms-transform: $string; 22 | -o-transform: $string; 23 | transform: $string; 24 | } 25 | 26 | @mixin waves-box-shadow($shadow){ 27 | -webkit-box-shadow: $shadow; 28 | box-shadow: $shadow; 29 | } 30 | 31 | .waves-effect { 32 | position: relative; 33 | cursor: pointer; 34 | overflow: hidden; 35 | -webkit-user-select: none; 36 | -moz-user-select: none; 37 | -ms-user-select: none; 38 | user-select: none; 39 | -webkit-tap-highlight-color: transparent; 40 | z-index: 1; 41 | 42 | .waves-ripple { 43 | position: absolute; 44 | border-radius: 50%; 45 | width: 100px; 46 | height: 100px; 47 | margin-top:-50px; 48 | margin-left:-50px; 49 | opacity: 0; 50 | background: rgba(0,0,0,0.2); 51 | $gradient: rgba(0,0,0,0.2) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.5) 60%,rgba(255,255,255,0) 70%; 52 | background: -webkit-radial-gradient($gradient); 53 | background: -o-radial-gradient($gradient); 54 | background: -moz-radial-gradient($gradient); 55 | background: radial-gradient($gradient); 56 | @include waves-transition(all 0.5s ease-out); 57 | -webkit-transition-property: -webkit-transform, opacity; 58 | -moz-transition-property: -moz-transform, opacity; 59 | -o-transition-property: -o-transform, opacity; 60 | transition-property: transform, opacity; 61 | @include waves-transform(scale(0) translate(0,0)); 62 | pointer-events: none; 63 | } 64 | 65 | &.waves-light .waves-ripple { 66 | background: rgba(255,255,255,0.4); 67 | $gradient: rgba(255,255,255,0.2) 0,rgba(255,255,255,.3) 40%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0) 70%; 68 | background: -webkit-radial-gradient($gradient); 69 | background: -o-radial-gradient($gradient); 70 | background: -moz-radial-gradient($gradient); 71 | background: radial-gradient($gradient); 72 | } 73 | 74 | &.waves-classic .waves-ripple { 75 | background: rgba(0,0,0,0.2); 76 | } 77 | 78 | &.waves-classic.waves-light .waves-ripple { 79 | background: rgba(255,255,255,0.4); 80 | } 81 | } 82 | 83 | .waves-notransition { 84 | @include waves-transition(none #{"!important"}); 85 | } 86 | 87 | .waves-button, 88 | .waves-circle { 89 | @include waves-transform(translateZ(0)); 90 | -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); 91 | } 92 | 93 | .waves-button, 94 | .waves-button:hover, 95 | .waves-button:visited, 96 | .waves-button-input { 97 | white-space: nowrap; 98 | vertical-align: middle; 99 | cursor: pointer; 100 | border: none; 101 | outline: none; 102 | color: inherit; 103 | background-color: rgba(0, 0, 0, 0); 104 | font-size: 1em; 105 | line-height:1em; 106 | text-align: center; 107 | text-decoration: none; 108 | z-index: 1; 109 | } 110 | 111 | .waves-button { 112 | padding: 0.85em 1.1em; 113 | border-radius: 0.2em; 114 | } 115 | 116 | .waves-button-input { 117 | margin: 0; 118 | padding: 0.85em 1.1em; 119 | } 120 | 121 | .waves-input-wrapper { 122 | border-radius: 0.2em; 123 | vertical-align: bottom; 124 | 125 | &.waves-button { 126 | padding: 0; 127 | } 128 | 129 | .waves-button-input { 130 | position: relative; 131 | top: 0; 132 | left: 0; 133 | z-index: 1; 134 | } 135 | } 136 | 137 | .waves-circle { 138 | text-align: center; 139 | width: 2.5em; 140 | height: 2.5em; 141 | line-height: 2.5em; 142 | border-radius: 50%; 143 | } 144 | 145 | .waves-float { 146 | -webkit-mask-image: none; 147 | @include waves-box-shadow(0px 1px 1.5px 1px rgba(0, 0, 0, 0.12)); 148 | @include waves-transition(all 300ms); 149 | 150 | &:active { 151 | @include waves-box-shadow(0px 8px 20px 1px rgba(0, 0, 0, 0.30)); 152 | } 153 | } 154 | 155 | .waves-block { 156 | display: block; 157 | } -------------------------------------------------------------------------------- /sass/mdb/free/_waves.scss: -------------------------------------------------------------------------------- 1 | 2 | /*! 3 | * Waves v0.7.5 4 | * http://fian.my.id/Waves 5 | * 6 | * Copyright 2014-2016 Alfiana E. Sibuea and other contributors 7 | * Released under the MIT license 8 | * https://github.com/fians/Waves/blob/master/LICENSE 9 | */ 10 | 11 | @mixin waves-transition($transition){ 12 | -webkit-transition: $transition; 13 | -moz-transition: $transition; 14 | -o-transition: $transition; 15 | transition: $transition; 16 | } 17 | 18 | @mixin waves-transform($string){ 19 | -webkit-transform: $string; 20 | -moz-transform: $string; 21 | -ms-transform: $string; 22 | -o-transform: $string; 23 | transform: $string; 24 | } 25 | 26 | @mixin waves-box-shadow($shadow){ 27 | -webkit-box-shadow: $shadow; 28 | box-shadow: $shadow; 29 | } 30 | 31 | .waves-effect { 32 | position: relative; 33 | cursor: pointer; 34 | overflow: hidden; 35 | -webkit-user-select: none; 36 | -moz-user-select: none; 37 | -ms-user-select: none; 38 | user-select: none; 39 | -webkit-tap-highlight-color: transparent; 40 | z-index: 1; 41 | 42 | .waves-ripple { 43 | position: absolute; 44 | border-radius: 50%; 45 | width: 100px; 46 | height: 100px; 47 | margin-top:-50px; 48 | margin-left:-50px; 49 | opacity: 0; 50 | background: rgba(0,0,0,0.2); 51 | $gradient: rgba(0,0,0,0.2) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.5) 60%,rgba(255,255,255,0) 70%; 52 | background: -webkit-radial-gradient($gradient); 53 | background: -o-radial-gradient($gradient); 54 | background: -moz-radial-gradient($gradient); 55 | background: radial-gradient($gradient); 56 | @include waves-transition(all 0.5s ease-out); 57 | -webkit-transition-property: -webkit-transform, opacity; 58 | -moz-transition-property: -moz-transform, opacity; 59 | -o-transition-property: -o-transform, opacity; 60 | transition-property: transform, opacity; 61 | @include waves-transform(scale(0) translate(0,0)); 62 | pointer-events: none; 63 | } 64 | 65 | &.waves-light .waves-ripple { 66 | background: rgba(255,255,255,0.4); 67 | $gradient: rgba(255,255,255,0.2) 0,rgba(255,255,255,.3) 40%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0) 70%; 68 | background: -webkit-radial-gradient($gradient); 69 | background: -o-radial-gradient($gradient); 70 | background: -moz-radial-gradient($gradient); 71 | background: radial-gradient($gradient); 72 | } 73 | 74 | &.waves-classic .waves-ripple { 75 | background: rgba(0,0,0,0.2); 76 | } 77 | 78 | &.waves-classic.waves-light .waves-ripple { 79 | background: rgba(255,255,255,0.4); 80 | } 81 | } 82 | 83 | .waves-notransition { 84 | @include waves-transition(none #{"!important"}); 85 | } 86 | 87 | .waves-button, 88 | .waves-circle { 89 | @include waves-transform(translateZ(0)); 90 | -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); 91 | } 92 | 93 | .waves-button, 94 | .waves-button:hover, 95 | .waves-button:visited, 96 | .waves-button-input { 97 | white-space: nowrap; 98 | vertical-align: middle; 99 | cursor: pointer; 100 | border: none; 101 | outline: none; 102 | color: inherit; 103 | background-color: rgba(0, 0, 0, 0); 104 | font-size: 1em; 105 | line-height:1em; 106 | text-align: center; 107 | text-decoration: none; 108 | z-index: 1; 109 | } 110 | 111 | .waves-button { 112 | padding: 0.85em 1.1em; 113 | border-radius: 0.2em; 114 | } 115 | 116 | .waves-button-input { 117 | margin: 0; 118 | padding: 0.85em 1.1em; 119 | } 120 | 121 | .waves-input-wrapper { 122 | border-radius: 0.2em; 123 | vertical-align: bottom; 124 | 125 | &.waves-button { 126 | padding: 0; 127 | } 128 | 129 | .waves-button-input { 130 | position: relative; 131 | top: 0; 132 | left: 0; 133 | z-index: 1; 134 | } 135 | } 136 | 137 | .waves-circle { 138 | text-align: center; 139 | width: 2.5em; 140 | height: 2.5em; 141 | line-height: 2.5em; 142 | border-radius: 50%; 143 | } 144 | 145 | .waves-float { 146 | -webkit-mask-image: none; 147 | @include waves-box-shadow(0px 1px 1.5px 1px rgba(0, 0, 0, 0.12)); 148 | @include waves-transition(all 300ms); 149 | 150 | &:active { 151 | @include waves-box-shadow(0px 8px 20px 1px rgba(0, 0, 0, 0.30)); 152 | } 153 | } 154 | 155 | .waves-block { 156 | display: block; 157 | } -------------------------------------------------------------------------------- /sass/free/_helpers.scss: -------------------------------------------------------------------------------- 1 | // HELPERS 2 | // Center text on mobile 3 | .center-on-small-only { 4 | @media #{$medium-and-down} { 5 | text-align: center; 6 | .img-fluid { 7 | display: inline; 8 | } 9 | } 10 | } 11 | 12 | .flex-center { 13 | display: flex; 14 | justify-content: center; 15 | align-items: center; 16 | height: 100%; 17 | p { 18 | margin: 0; 19 | } 20 | ul { 21 | text-align: center; 22 | li { 23 | margin-bottom: 1rem; 24 | } 25 | } 26 | } 27 | 28 | .vertical-center { 29 | position: relative; 30 | top: 50%; 31 | -webkit-transform: translateY(-50%); 32 | -o-transform: translateY(-50%); 33 | transform: translateY(-50%); 34 | } 35 | 36 | .img-fluid { 37 | display: block; 38 | max-width: 100%; 39 | height: auto; 40 | } 41 | 42 | .inline-ul> li { 43 | display: inline; 44 | } 45 | 46 | .list-inline-div> div { 47 | display: inline-block; 48 | } 49 | 50 | // Divider 51 | .hr-light { 52 | background-color: #fff; 53 | height: 0.5px; 54 | } 55 | 56 | .hr-dark { 57 | background-color: #666; 58 | height: 0.5px; 59 | } 60 | 61 | .divider-new { 62 | display: flex; 63 | flex-direction: row; 64 | justify-content: center; 65 | align-items: center; 66 | font-weight: 300; 67 | margin-top: 45px; 68 | margin-bottom: 45px; 69 | h2 { 70 | margin-top: 5px; 71 | } 72 | } 73 | 74 | .divider-new::before { 75 | content: ''; 76 | height: 1.5px; 77 | background: #666; 78 | flex: 1; 79 | margin: 0 .45em 0 0; 80 | } 81 | 82 | .divider-new::after { 83 | content: ''; 84 | height: 1.5px; 85 | background: #666; 86 | flex: 1; 87 | margin: 0 0 0 .45em; 88 | } 89 | 90 | // Section title 91 | .section-title { 92 | text-transform: uppercase; 93 | margin-top: 0; 94 | margin-bottom: 3rem; 95 | padding: 0.7rem; 96 | small { 97 | text-transform: none; 98 | padding-left: 7px; 99 | margin-left: 10px; 100 | } 101 | } 102 | 103 | .st-indigo { 104 | border-left: 4px solid blue; 105 | small { 106 | border-left: 2px solid blue; 107 | } 108 | } 109 | 110 | .st-red { 111 | border-left: 4px solid red; 112 | small { 113 | border-left: 2px solid red; 114 | } 115 | } 116 | 117 | .st-teal { 118 | border-left: 4px solid #009688; 119 | small { 120 | border-left: 2px solid #009688; 121 | } 122 | } 123 | 124 | .st-orange { 125 | border-left: 4px solid #ff6f00; 126 | small { 127 | border-left: 2px solid #ff6f00; 128 | } 129 | } 130 | 131 | .st-blue { 132 | border-left: 4px solid #2196f3; 133 | small { 134 | border-left: 2px solid #2196f3; 135 | } 136 | } 137 | 138 | .st-mdb { 139 | border-left: 4px solid $mdb-color; 140 | small { 141 | border-left: 2px solid $mdb-color; 142 | } 143 | } 144 | 145 | .divider-short { 146 | max-width: 50px; 147 | border-color: $primary-color; 148 | border-width: 3px; 149 | } 150 | 151 | // Blockquote contextual 152 | .blockquote { 153 | .bq-title { 154 | font-weight: 400; 155 | font-size: 1.5rem; 156 | margin-bottom: 0; 157 | } 158 | p { 159 | font-size: 1.1rem; 160 | } 161 | } 162 | 163 | .bq-primary { 164 | border-left: 3px solid $primary-color; 165 | .bq-title { 166 | color: $primary-color; 167 | } 168 | } 169 | 170 | .bq-warning { 171 | border-left: 3px solid $warning-color; 172 | .bq-title { 173 | color: $warning-color; 174 | } 175 | } 176 | 177 | .bq-danger { 178 | border-left: 3px solid $danger-color; 179 | .bq-title { 180 | color: $danger-color; 181 | } 182 | } 183 | 184 | .bq-success { 185 | border-left: 3px solid $success-color; 186 | .bq-title { 187 | color: $success-color; 188 | } 189 | } 190 | 191 | .p-t-4 { 192 | padding-top: 4rem !important; 193 | } 194 | 195 | .p-t-5 { 196 | padding-top: 5rem !important; 197 | } 198 | 199 | .p-t-6 { 200 | padding-top: 6rem !important; 201 | } 202 | 203 | .p-b-4 { 204 | padding-bottom: 4rem !important; 205 | } 206 | 207 | .p-b-5 { 208 | padding-bottom: 5rem !important; 209 | } 210 | 211 | .p-b-6 { 212 | padding-bottom: 6rem !important; 213 | } 214 | 215 | .m-t-4 { 216 | margin-top: 4rem !important; 217 | } 218 | 219 | .m-t-5 { 220 | margin-top: 5rem !important; 221 | } 222 | 223 | .m-t-6 { 224 | margin-top: 6rem !important; 225 | } 226 | 227 | .m-b-4 { 228 | margin-bottom: 4rem !important; 229 | } 230 | 231 | .m-b-5 { 232 | margin-bottom: 5rem !important; 233 | } 234 | 235 | .m-b-6 { 236 | margin-bottom: 6rem !important; 237 | } 238 | 239 | .m-b-r { 240 | @media (max-width: 992px) { 241 | margin-bottom: 2rem!important; 242 | } 243 | @media (min-width: 992px) { 244 | margin-bottom: 3rem!important; 245 | } 246 | } -------------------------------------------------------------------------------- /sass/free/_navbars.scss: -------------------------------------------------------------------------------- 1 | // NAVBARS 2 | .navbar { 3 | form { 4 | float: right; 5 | input { 6 | margin: 0; 7 | height: 1rem; 8 | margin-right: 5px; 9 | margin-left: 8px; 10 | margin-bottom: 1px; 11 | } 12 | } 13 | .navbar-nav .nav-item { 14 | margin-left: 0; 15 | a { 16 | padding-right: 8px; 17 | padding-left: 8px; 18 | } 19 | } 20 | .navbar-toggler { 21 | float: right; 22 | &:focus { 23 | background-color: inherit; 24 | } 25 | } 26 | .breadcrumb { 27 | margin: 0; 28 | background-color: inherit; 29 | } 30 | .nav-flex-icons { 31 | float: right; 32 | display: flex; 33 | } 34 | @media only screen and (max-width: 992px) { 35 | // Non-fixed Navbar on smaller devices 36 | &.mobile-nofixed { 37 | position: relative; 38 | } 39 | } 40 | &.navbar-dark { 41 | .breadcrumb, 42 | .navbar-nav .nav-item { 43 | a { 44 | color: #fff; 45 | transition: .35s; 46 | &:hover { 47 | transition: .35s; 48 | color: rgba(255, 255, 255, .75); 49 | } 50 | } 51 | &.active { 52 | background-color: rgba(255, 255, 255, 0.1); 53 | } 54 | .dropdown-menu a { 55 | color: #212121; 56 | padding: 10px; 57 | } 58 | } 59 | .navbar-toggler { 60 | color: #fff; 61 | } 62 | .nav-link { 63 | color: #fff; 64 | } 65 | } 66 | &.navbar-light { 67 | .breadcrumb, 68 | .nav-item { 69 | a { 70 | color: #212121; 71 | transition: .35s; 72 | &:hover { 73 | transition: .35s; 74 | color: #212121; 75 | } 76 | } 77 | &.active { 78 | background-color: rgba(158, 158, 158, 0.2); 79 | } 80 | .dropdown-menu a { 81 | color: #000; 82 | padding: 10px; 83 | } 84 | } 85 | .navbar-toggler { 86 | color: #000; 87 | } 88 | } 89 | @media (max-width: 544px) { 90 | .navbar-toggleable-xs { 91 | .navbar-brand { 92 | float: none; 93 | margin-left: 8px; 94 | } 95 | ul { 96 | float: none; 97 | } 98 | ul li { 99 | float: none; 100 | } 101 | form { 102 | float: left; 103 | } 104 | .nav-item { 105 | margin-left: 0; 106 | } 107 | } 108 | } 109 | @media (max-width: 768px) { 110 | .navbar-toggleable-sm { 111 | .navbar-brand { 112 | float: none; 113 | } 114 | ul { 115 | float: none; 116 | } 117 | ul li { 118 | float: none; 119 | } 120 | form { 121 | float: left; 122 | padding-left: 4px; 123 | } 124 | .nav-item { 125 | margin-left: 0; 126 | } 127 | } 128 | } 129 | } 130 | 131 | // Input line color 132 | .navbar-dark form { 133 | // Style Placeholders 134 | ::-webkit-input-placeholder { 135 | color: #fff!important; 136 | font-weight: 300; 137 | } 138 | :-moz-placeholder { 139 | /* Firefox 18- */ 140 | color: #fff!important; 141 | font-weight: 300; 142 | } 143 | ::-moz-placeholder { 144 | /* Firefox 19+ */ 145 | color: #fff!important; 146 | font-weight: 300; 147 | } 148 | :-ms-input-placeholder { 149 | color: #fff!important; 150 | font-weight: 300; 151 | } 152 | input[type=text] { 153 | border-bottom: 1px solid #fff; 154 | } 155 | .form-control { 156 | color: #fff; 157 | } 158 | } 159 | 160 | .navbar-light form { 161 | // Style Placeholders 162 | ::-webkit-input-placeholder { 163 | color: #1C2331!important; 164 | font-weight: 300; 165 | } 166 | :-moz-placeholder { 167 | /* Firefox 18- */ 168 | color: #1C2331!important; 169 | font-weight: 300; 170 | } 171 | ::-moz-placeholder { 172 | /* Firefox 19+ */ 173 | color: #1C2331!important; 174 | font-weight: 300; 175 | } 176 | :-ms-input-placeholder { 177 | color: #1C2331!important; 178 | font-weight: 300; 179 | } 180 | input[type=text] { 181 | border-bottom: 1px solid #1C2331; 182 | } 183 | .form-control { 184 | color: #1C2331; 185 | } 186 | } -------------------------------------------------------------------------------- /sass/free/_typography.scss: -------------------------------------------------------------------------------- 1 | // TYPOGRAPHY 2 | body { 3 | font-family: "Roboto", sans-serif; 4 | } 5 | 6 | h1, 7 | h2, 8 | h3, 9 | h4, 10 | h5, 11 | h6 { 12 | font-weight: 300; 13 | } 14 | 15 | html { 16 | @media only screen and (min-width: 0) { 17 | font-size: 15px; 18 | } 19 | @media only screen and (min-width: $medium-screen) { 20 | font-size: 15.5px; 21 | } 22 | @media only screen and (min-width: $large-screen) { 23 | font-size: 16px; 24 | } 25 | } 26 | 27 | .text-fluid { 28 | font-weight: 300; 29 | $i: 0; 30 | @while $i <=$intervals { 31 | @media only screen and (min-width: 360+ ($i * $interval-size)) { 32 | font-size: 1.2rem * (1+ (.02 * $i)); 33 | } 34 | $i: $i+ 1; 35 | } 36 | // Handle below 360px screen 37 | @media only screen and (max-width: 360px) { 38 | font-size: 1.2rem; 39 | } 40 | } 41 | 42 | p { 43 | &.lead { 44 | font-weight: 400; 45 | } 46 | } 47 | /* Responsive Headings */ 48 | /* Extra Small Devices, Phones */ 49 | 50 | @media only screen and (max-width: 768px) { 51 | .h1-responsive { 52 | font-size: 150%; 53 | font-weight: 500; 54 | } 55 | .h2-responsive { 56 | font-size: 145%; 57 | } 58 | .h3-responsive { 59 | font-size: 135%; 60 | } 61 | .h4-responsive { 62 | font-size: 135%; 63 | } 64 | .h5-responsive { 65 | font-size: 135%; 66 | } 67 | } 68 | /* Small Devices, Tablets */ 69 | 70 | @media only screen and (min-width: 768px) { 71 | .h1-responsive { 72 | font-size: 170%; 73 | } 74 | .h2-responsive { 75 | font-size: 140%; 76 | } 77 | .h3-responsive { 78 | font-size: 125%; 79 | } 80 | .h4-responsive { 81 | font-size: 125%; 82 | } 83 | .h5-responsive { 84 | font-size: 125%; 85 | } 86 | } 87 | /* Medium Devices, Desktops */ 88 | 89 | @media only screen and (min-width: 992px) { 90 | .h1-responsive { 91 | font-size: 200%; 92 | } 93 | .h2-responsive { 94 | font-size: 170%; 95 | } 96 | .h3-responsive { 97 | font-size: 140%; 98 | } 99 | .h4-responsive { 100 | font-size: 125%; 101 | } 102 | .h5-responsive { 103 | font-size: 125%; 104 | } 105 | } 106 | /* Large Devices, Wide Screens */ 107 | 108 | @media only screen and (min-width: 1200px) { 109 | .h1-responsive { 110 | font-size: 250%; 111 | } 112 | .h2-responsive { 113 | font-size: 200%; 114 | } 115 | .h3-responsive { 116 | font-size: 170%; 117 | } 118 | .h4-responsive { 119 | font-size: 140%; 120 | } 121 | .h5-responsive { 122 | font-size: 125%; 123 | } 124 | } 125 | 126 | .section { 127 | margin-bottom: 2rem; 128 | .section-heading { 129 | @extend .h1-responsive; 130 | margin-top: 2rem; 131 | margin-bottom: 4rem; 132 | } 133 | .section-description { 134 | color: #757575; 135 | margin-bottom: 4rem; 136 | margin-left: 15%; 137 | margin-right: 15%; 138 | text-align: center; 139 | @media (max-width: 992px) { 140 | margin-left: 5%; 141 | margin-right: 5%; 142 | } 143 | } 144 | img, .view { 145 | @extend .img-fluid; 146 | @extend .z-depth-2; 147 | } 148 | &.extra-margins { 149 | h5, 150 | h4, 151 | a { 152 | margin-bottom: 1rem; 153 | } 154 | } 155 | h4 { 156 | font-weight: 400; 157 | } 158 | h5 .fa { 159 | margin-right: 8px; 160 | } 161 | hr { 162 | margin-top: 1rem; 163 | margin-bottom: 3rem; 164 | } 165 | @media (min-width: 992px) { 166 | hr { 167 | display: none; 168 | } 169 | } 170 | .map-container { 171 | img { 172 | @extend .z-depth-0; 173 | } 174 | } 175 | .contact-icons { 176 | text-align: center; 177 | li { 178 | margin-bottom: 2.2rem; 179 | } 180 | .fa { 181 | font-size: 2.2rem; 182 | margin-bottom: 0.6rem; 183 | color: #424242; 184 | } 185 | } 186 | } 187 | 188 | .between-sections { 189 | margin-bottom: 4rem; 190 | } -------------------------------------------------------------------------------- /sass/mdb/free/_typography.scss: -------------------------------------------------------------------------------- 1 | // TYPOGRAPHY 2 | body { 3 | font-family: "Roboto", sans-serif; 4 | } 5 | 6 | h1, 7 | h2, 8 | h3, 9 | h4, 10 | h5, 11 | h6 { 12 | font-weight: 300; 13 | } 14 | 15 | html { 16 | @media only screen and (min-width: 0) { 17 | font-size: 15px; 18 | } 19 | @media only screen and (min-width: $medium-screen) { 20 | font-size: 15.5px; 21 | } 22 | @media only screen and (min-width: $large-screen) { 23 | font-size: 16px; 24 | } 25 | } 26 | 27 | .text-fluid { 28 | font-weight: 300; 29 | $i: 0; 30 | @while $i <=$intervals { 31 | @media only screen and (min-width: 360+ ($i * $interval-size)) { 32 | font-size: 1.2rem * (1+ (.02 * $i)); 33 | } 34 | $i: $i+1; 35 | } 36 | // Handle below 360px screen 37 | @media only screen and (max-width: 360px) { 38 | font-size: 1.2rem; 39 | } 40 | } 41 | 42 | p { 43 | &.lead { 44 | font-weight: 400; 45 | } 46 | } 47 | 48 | blockquote p { 49 | font-size: 0.9rem; 50 | padding-left: 2rem; 51 | padding-top: 1rem; 52 | padding-bottom: 1rem; 53 | } 54 | /* Responsive Headings */ 55 | /* Extra Small Devices, Phones */ 56 | 57 | @media only screen and (max-width: 768px) { 58 | .h1-responsive { 59 | font-size: 150%; 60 | font-weight: 500; 61 | } 62 | .h2-responsive { 63 | font-size: 145%; 64 | } 65 | .h3-responsive { 66 | font-size: 135%; 67 | } 68 | .h4-responsive { 69 | font-size: 135%; 70 | } 71 | .h5-responsive { 72 | font-size: 135%; 73 | } 74 | } 75 | /* Small Devices, Tablets */ 76 | 77 | @media only screen and (min-width: 768px) { 78 | .h1-responsive { 79 | font-size: 170%; 80 | } 81 | .h2-responsive { 82 | font-size: 140%; 83 | } 84 | .h3-responsive { 85 | font-size: 125%; 86 | } 87 | .h4-responsive { 88 | font-size: 125%; 89 | } 90 | .h5-responsive { 91 | font-size: 125%; 92 | } 93 | } 94 | /* Medium Devices, Desktops */ 95 | 96 | @media only screen and (min-width: 992px) { 97 | .h1-responsive { 98 | font-size: 200%; 99 | } 100 | .h2-responsive { 101 | font-size: 170%; 102 | } 103 | .h3-responsive { 104 | font-size: 140%; 105 | } 106 | .h4-responsive { 107 | font-size: 125%; 108 | } 109 | .h5-responsive { 110 | font-size: 125%; 111 | } 112 | } 113 | /* Large Devices, Wide Screens */ 114 | 115 | @media only screen and (min-width: 1200px) { 116 | .h1-responsive { 117 | font-size: 250%; 118 | } 119 | .h2-responsive { 120 | font-size: 200%; 121 | } 122 | .h3-responsive { 123 | font-size: 170%; 124 | } 125 | .h4-responsive { 126 | font-size: 140%; 127 | } 128 | .h5-responsive { 129 | font-size: 125%; 130 | } 131 | } 132 | 133 | .section { 134 | margin-bottom: 2rem; 135 | .section-heading { 136 | @extend .h1-responsive; 137 | margin-top: 2rem; 138 | margin-bottom: 4rem; 139 | } 140 | .section-description { 141 | color: #757575; 142 | margin-bottom: 4rem; 143 | margin-left: 15%; 144 | margin-right: 15%; 145 | text-align: center; 146 | @media (max-width: 992px) { 147 | margin-left: 5%; 148 | margin-right: 5%; 149 | } 150 | } 151 | img, 152 | .view { 153 | @extend .img-fluid; 154 | @extend .z-depth-1-half; 155 | } 156 | .jumbotron { 157 | @extend .z-depth-2; 158 | } 159 | h4 { 160 | font-weight: 400; 161 | } 162 | h5 .fa { 163 | margin-right: 8px; 164 | } 165 | hr { 166 | margin-top: 1rem; 167 | margin-bottom: 3rem; 168 | } 169 | @media (min-width: 992px) { 170 | hr { 171 | display: none; 172 | } 173 | } 174 | .map-container { 175 | img { 176 | @extend .z-depth-0; 177 | } 178 | } 179 | .contact-icons { 180 | text-align: center; 181 | li { 182 | margin-bottom: 2.2rem; 183 | } 184 | .fa { 185 | font-size: 2.2rem; 186 | margin-bottom: 0.6rem; 187 | color: #424242; 188 | } 189 | } 190 | } 191 | 192 | .between-sections { 193 | margin-bottom: 4rem; 194 | } -------------------------------------------------------------------------------- /sass/mdb/free/_helpers.scss: -------------------------------------------------------------------------------- 1 | // HELPERS 2 | // Center text on mobile 3 | .center-on-small-only { 4 | @media #{$medium-and-down} { 5 | text-align: center; 6 | .img-fluid { 7 | display: inline; 8 | } 9 | } 10 | } 11 | 12 | .flex-center { 13 | display: flex; 14 | justify-content: center; 15 | align-items: center; 16 | height: 100%; 17 | p { 18 | margin: 0; 19 | } 20 | ul { 21 | text-align: center; 22 | li { 23 | margin-bottom: 1rem; 24 | } 25 | } 26 | } 27 | 28 | .vertical-center { 29 | position: relative; 30 | top: 50%; 31 | -webkit-transform: translateY(-50%); 32 | -o-transform: translateY(-50%); 33 | transform: translateY(-50%); 34 | } 35 | 36 | .img-fluid { 37 | display: block; 38 | max-width: 100%; 39 | height: auto; 40 | } 41 | 42 | .inline-ul> li { 43 | display: inline; 44 | } 45 | 46 | .list-inline-div> div { 47 | display: inline-block; 48 | } 49 | 50 | // Divider 51 | .hr-light { 52 | background-color: #fff; 53 | height: 0.5px; 54 | } 55 | 56 | .hr-dark { 57 | background-color: #666; 58 | height: 0.5px; 59 | } 60 | 61 | .divider-new { 62 | display: flex; 63 | flex-direction: row; 64 | justify-content: center; 65 | align-items: center; 66 | font-weight: 300; 67 | margin-top: 45px; 68 | margin-bottom: 45px; 69 | h2 { 70 | margin-top: 5px; 71 | } 72 | } 73 | 74 | .divider-new::before { 75 | content: ''; 76 | height: 1.5px; 77 | background: #666; 78 | flex: 1; 79 | margin: 0 .45em 0 0; 80 | } 81 | 82 | .divider-new::after { 83 | content: ''; 84 | height: 1.5px; 85 | background: #666; 86 | flex: 1; 87 | margin: 0 0 0 .45em; 88 | } 89 | 90 | // Section title 91 | .section-title { 92 | text-transform: uppercase; 93 | margin-top: 0; 94 | margin-bottom: 3rem; 95 | padding: 0.7rem; 96 | small { 97 | text-transform: none; 98 | padding-left: 7px; 99 | margin-left: 10px; 100 | } 101 | } 102 | 103 | .st-indigo { 104 | border-left: 4px solid blue; 105 | small { 106 | border-left: 2px solid blue; 107 | } 108 | } 109 | 110 | .st-red { 111 | border-left: 4px solid red; 112 | small { 113 | border-left: 2px solid red; 114 | } 115 | } 116 | 117 | .st-teal { 118 | border-left: 4px solid #009688; 119 | small { 120 | border-left: 2px solid #009688; 121 | } 122 | } 123 | 124 | .st-orange { 125 | border-left: 4px solid #ff6f00; 126 | small { 127 | border-left: 2px solid #ff6f00; 128 | } 129 | } 130 | 131 | .st-blue { 132 | border-left: 4px solid #2196f3; 133 | small { 134 | border-left: 2px solid #2196f3; 135 | } 136 | } 137 | 138 | .st-mdb { 139 | border-left: 4px solid $mdb-color; 140 | small { 141 | border-left: 2px solid $mdb-color; 142 | } 143 | } 144 | 145 | .divider-short { 146 | max-width: 50px; 147 | border-color: $primary-color; 148 | border-width: 3px; 149 | } 150 | 151 | // Blockquote contextual 152 | .blockquote { 153 | .bq-title { 154 | font-weight: 400; 155 | font-size: 1.5rem; 156 | margin-bottom: 0; 157 | } 158 | p { 159 | font-size: 1.1rem; 160 | } 161 | } 162 | 163 | .bq-primary { 164 | border-left: 3px solid $primary-color; 165 | .bq-title { 166 | color: $primary-color; 167 | } 168 | } 169 | 170 | .bq-warning { 171 | border-left: 3px solid $warning-color; 172 | .bq-title { 173 | color: $warning-color; 174 | } 175 | } 176 | 177 | .bq-danger { 178 | border-left: 3px solid $danger-color; 179 | .bq-title { 180 | color: $danger-color; 181 | } 182 | } 183 | 184 | .bq-success { 185 | border-left: 3px solid $success-color; 186 | .bq-title { 187 | color: $success-color; 188 | } 189 | } 190 | 191 | .pt-1 { 192 | padding-top: 1rem !important; 193 | } 194 | 195 | .pt-2 { 196 | padding-top: 2rem !important; 197 | } 198 | 199 | .pt-3 { 200 | padding-top: 3rem !important; 201 | } 202 | 203 | .pt-4 { 204 | padding-top: 4rem !important; 205 | } 206 | 207 | .pt-5 { 208 | padding-top: 5rem !important; 209 | } 210 | 211 | .pt-6 { 212 | padding-top: 6rem !important; 213 | } 214 | 215 | .pb-1 { 216 | padding-top: 1rem !important; 217 | } 218 | 219 | .pb-2 { 220 | padding-top: 2rem !important; 221 | } 222 | 223 | .pb-3 { 224 | padding-top: 3rem !important; 225 | } 226 | 227 | .pb-4 { 228 | padding-bottom: 4rem !important; 229 | } 230 | 231 | .pb-5 { 232 | padding-bottom: 5rem !important; 233 | } 234 | 235 | .pb-6 { 236 | padding-bottom: 6rem !important; 237 | } 238 | 239 | .mt-1 { 240 | margin-top: 1rem !important; 241 | } 242 | 243 | .mt-2 { 244 | margin-top: 2rem !important; 245 | } 246 | 247 | .mt-3 { 248 | margin-top: 3rem !important; 249 | } 250 | 251 | .mt-4 { 252 | margin-top: 4rem !important; 253 | } 254 | 255 | .mt-5 { 256 | margin-top: 5rem !important; 257 | } 258 | 259 | .mt-6 { 260 | margin-top: 6rem !important; 261 | } 262 | 263 | .mb-1 { 264 | margin-bottom: 1rem !important; 265 | } 266 | 267 | .mb-2 { 268 | margin-bottom: 2rem !important; 269 | } 270 | 271 | .mb-3 { 272 | margin-bottom: 3rem !important; 273 | } 274 | 275 | .mb-4 { 276 | margin-bottom: 4rem !important; 277 | } 278 | 279 | .mb-5 { 280 | margin-bottom: 5rem !important; 281 | } 282 | 283 | .mb-6 { 284 | margin-bottom: 6rem !important; 285 | } 286 | 287 | .mb-r { 288 | @media (max-width: 992px) { 289 | margin-bottom: 2rem!important; 290 | } 291 | @media (min-width: 992px) { 292 | margin-bottom: 3rem!important; 293 | } 294 | } 295 | 296 | .mb-m { 297 | margin-bottom:1rem; 298 | @media (min-width: 62em) { 299 | margin-bottom:0; 300 | } 301 | } 302 | 303 | .no-height { 304 | height:0; 305 | } 306 | 307 | .sharp-corners { 308 | border-radius: 0; 309 | } 310 | -------------------------------------------------------------------------------- /sass/mdb/free/_forms-basic.scss: -------------------------------------------------------------------------------- 1 | // FORMS BASIC 2 | // Text inputs 3 | input[type=text], 4 | input[type=password], 5 | input[type=email], 6 | input[type=url], 7 | input[type=time], 8 | input[type=date], 9 | input[type=datetime-local], 10 | input[type=tel], 11 | input[type=number], 12 | input[type=search-md], 13 | input[type=search], 14 | textarea.md-textarea { 15 | // General Styles 16 | background-color: transparent; 17 | border: none; 18 | border-bottom: 1px solid $input-border-color; 19 | border-radius: 0; 20 | outline: none; 21 | height: 2.1rem; 22 | width: 100%; 23 | font-size: 1rem; 24 | box-shadow: none; 25 | @include box-sizing(content-box); 26 | transition: all .3s; 27 | // Disabled input style 28 | &:disabled, 29 | &:disabled, 30 | &[readonly="readonly"] { 31 | color: $input-disabled-color; 32 | border-bottom: 1px dotted $input-disabled-color; 33 | background-color: transparent; 34 | } 35 | // Disabled label style 36 | &:disabled+label, 37 | &[readonly="readonly"]+label { 38 | color: $input-disabled-color; 39 | background-color: transparent; 40 | } 41 | // Focused input style 42 | &:focus:not([readonly]) { 43 | border-bottom: 1px solid $input-focus-color; 44 | box-shadow: 0 1px 0 0 $input-focus-color; 45 | } 46 | // Focused label style 47 | &:focus:not([readonly])+label { 48 | color: $input-focus-color; 49 | } 50 | // Valid Input Style 51 | &.valid, 52 | &:focus.valid { 53 | border-bottom: 1px solid $input-success-color; 54 | box-shadow: 0 1px 0 0 $input-success-color; 55 | } 56 | // Custom Success Message 57 | &.valid + label:after, 58 | &:focus.valid + label:after { 59 | content: attr(data-success); 60 | color: $input-success-color; 61 | opacity: 1; 62 | } 63 | // Invalid Input Style 64 | &.invalid, 65 | &:focus.invalid { 66 | border-bottom: 1px solid $input-error-color; 67 | box-shadow: 0 1px 0 0 $input-error-color; 68 | } 69 | // Custom Error message 70 | &.invalid + label:after, 71 | &:focus.invalid + label:after { 72 | content: attr(data-error); 73 | color: $input-error-color; 74 | opacity: 1; 75 | } 76 | // Form Message Shared Styles 77 | & + label:after { 78 | display: block; 79 | content: ""; 80 | position: absolute; 81 | top: 65px; 82 | opacity: 0; 83 | transition: .2s opacity ease-out, .2s color ease-out; 84 | } 85 | &.input-alternate { 86 | padding: 0 15px; 87 | box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12); 88 | font-size: 0.875rem; 89 | border-bottom: 0; 90 | transition:none !important; 91 | &:hover, 92 | &:focus { 93 | box-shadow: 0 3px 8px 0 rgba(0,0,0,.2), 94 | 0 0 0 1px rgba(0,0,0,.08) !important; 95 | border-bottom:0; 96 | } 97 | } 98 | } 99 | 100 | label { 101 | font-size: $label-font-size; 102 | color: darken ($input-border-color, 90%); 103 | } 104 | 105 | .form-control { 106 | padding: 0; 107 | padding-bottom: 0.6rem; 108 | padding-top: 0.5rem; 109 | font-size: 1rem; 110 | line-height: 1.5; 111 | background-color: transparent; 112 | background-image: none; 113 | border-radius: 0; 114 | margin-top: 0.2rem; 115 | margin-bottom: 1rem; 116 | &:focus { 117 | background: transparent; 118 | } 119 | } 120 | 121 | .form-control:disabled, 122 | .form-control[readonly] { 123 | background-color: transparent; 124 | border-bottom: 1px solid #e0e0e0; 125 | } 126 | 127 | // Styling for input field wrapper 128 | .md-form { 129 | position: relative; 130 | margin-bottom: 1.5rem; 131 | .btn { 132 | margin-bottom: 1.5rem; 133 | } 134 | label { 135 | color: #757575; 136 | position: absolute; 137 | top: 0.8rem; 138 | left: 0; 139 | font-size: 1rem; 140 | cursor: text; 141 | @include transition(.2s ease-out); 142 | } 143 | label.active { 144 | font-size: $label-font-size; 145 | @include transform(translateY(-140%)); 146 | } 147 | // Prefix Icons 148 | .prefix { 149 | position: absolute; 150 | width: 3rem; 151 | font-size: 2rem; 152 | @include transition(color .2s); 153 | &.active { 154 | color: $input-focus-color; 155 | } 156 | } 157 | .prefix ~ input, 158 | .prefix ~ textarea { 159 | margin-left: 3rem; 160 | width: 92%; 161 | width: calc(100% - 3rem); 162 | } 163 | .prefix ~ textarea { 164 | padding-top: .8rem; 165 | } 166 | .prefix ~ label { 167 | margin-left: 3rem; 168 | } 169 | @media #{$medium-and-down} { 170 | .prefix ~ input { 171 | width: 86%; 172 | width: calc(100% - 3rem); 173 | } 174 | } 175 | @media #{$small-and-down} { 176 | .prefix ~ input { 177 | width: 80%; 178 | width: calc(100% - 3rem); 179 | } 180 | } 181 | &.input-group { 182 | .form-control { 183 | margin: 0; 184 | padding-left:1rem; 185 | @include placeholder { 186 | color: #999; 187 | padding-top: 2px; 188 | } 189 | } 190 | } 191 | } 192 | 193 | .form-inline { 194 | fieldset { 195 | margin-right: 1.5rem; 196 | } 197 | } 198 | 199 | // Default textarea 200 | textarea { 201 | width: 100%; 202 | height: 3rem; 203 | background-color: transparent; 204 | &.md-textarea { 205 | overflow-y: hidden; 206 | /* prevents scroll bar flash */ 207 | padding: 1.6rem 0; 208 | /* prevents text jump on Enter keypress */ 209 | resize: none; 210 | min-height: 3rem; 211 | } 212 | } 213 | 214 | // For textarea autoresize 215 | .hiddendiv { 216 | display: none; 217 | white-space: pre-wrap; 218 | word-wrap: break-word; 219 | overflow-wrap: break-word; 220 | /* future version of deprecated 'word-wrap' */ 221 | padding-top: 1.2rem; 222 | /* prevents text jump on Enter keypress */ 223 | } 224 | 225 | //Input color 226 | .input-dark-bg { 227 | // Style Placeholders 228 | @include placeholder { 229 | color: #fff!important; 230 | font-weight: 300; 231 | } 232 | input[type=text] { 233 | border-bottom: 1px solid #fff; 234 | } 235 | .form-control { 236 | color: #fff; 237 | } 238 | } 239 | 240 | .input-light-bg { 241 | // Style Placeholders 242 | @include placeholder { 243 | color: #1C2331!important; 244 | font-weight: 300; 245 | } 246 | input[type=text] { 247 | border-bottom: 1px solid #1C2331; 248 | } 249 | .form-control { 250 | color: #1C2331; 251 | } 252 | } 253 | 254 | .form-inline .form-group { 255 | margin-right: 2rem; 256 | } 257 | 258 | i { 259 | &.btn-primary { 260 | background: $primary-color!important; 261 | } 262 | &.btn-default { 263 | background: $default-color!important; 264 | } 265 | &.btn-success { 266 | background: $success-color!important; 267 | } 268 | &.btn-info { 269 | background: $info-color!important; 270 | } 271 | &.btn-warning { 272 | background: $warning-color-dark!important; 273 | } 274 | &.btn-danger { 275 | background: $danger-color-dark!important; 276 | } 277 | } 278 | -------------------------------------------------------------------------------- /sass/free/_forms-basic.scss: -------------------------------------------------------------------------------- 1 | // FORMS BASIC 2 | // Text inputs 3 | input[type=text], 4 | input[type=password], 5 | input[type=email], 6 | input[type=url], 7 | input[type=time], 8 | input[type=date], 9 | input[type=datetime-local], 10 | input[type=tel], 11 | input[type=number], 12 | input[type=search-md], 13 | input[type=search], 14 | textarea.md-textarea { 15 | // General Styles 16 | background-color: transparent; 17 | border: none; 18 | border-bottom: 1px solid $input-border-color; 19 | border-radius: 0; 20 | outline: none; 21 | height: 2.1rem; 22 | width: 100%; 23 | font-size: 1rem; 24 | box-shadow: none; 25 | @include box-sizing(content-box); 26 | transition: all .3s; 27 | // Disabled input style 28 | &:disabled, 29 | &:disabled, 30 | &[readonly="readonly"] { 31 | color: $input-disabled-color; 32 | border-bottom: 1px dotted $input-disabled-color; 33 | background-color: transparent; 34 | } 35 | // Disabled label style 36 | &:disabled+label, 37 | &[readonly="readonly"]+label { 38 | color: $input-disabled-color; 39 | background-color: transparent; 40 | } 41 | // Focused input style 42 | &:focus:not([readonly]) { 43 | border-bottom: 1px solid $input-focus-color; 44 | box-shadow: 0 1px 0 0 $input-focus-color; 45 | } 46 | // Focused label style 47 | &:focus:not([readonly])+label { 48 | color: $input-focus-color; 49 | } 50 | // Valid Input Style 51 | &.valid, 52 | &:focus.valid { 53 | border-bottom: 1px solid $input-success-color; 54 | box-shadow: 0 1px 0 0 $input-success-color; 55 | } 56 | // Custom Success Message 57 | &.valid + label:after, 58 | &:focus.valid + label:after { 59 | content: attr(data-success); 60 | color: $input-success-color; 61 | opacity: 1; 62 | } 63 | // Invalid Input Style 64 | &.invalid, 65 | &:focus.invalid { 66 | border-bottom: 1px solid $input-error-color; 67 | box-shadow: 0 1px 0 0 $input-error-color; 68 | } 69 | // Custom Error message 70 | &.invalid + label:after, 71 | &:focus.invalid + label:after { 72 | content: attr(data-error); 73 | color: $input-error-color; 74 | opacity: 1; 75 | } 76 | // Form Message Shared Styles 77 | & + label:after { 78 | display: block; 79 | content: ""; 80 | position: absolute; 81 | top: 65px; 82 | opacity: 0; 83 | transition: .2s opacity ease-out, .2s color ease-out; 84 | } 85 | } 86 | 87 | label { 88 | font-size: $label-font-size; 89 | color: darken ($input-border-color, 90%); 90 | } 91 | 92 | .form-control { 93 | padding: 0; 94 | padding-bottom: 0.6rem; 95 | padding-top: 0.5rem; 96 | font-size: 1rem; 97 | line-height: 1.5; 98 | background-color: transparent; 99 | background-image: none; 100 | border-radius: 0; 101 | margin-top: 0.2rem; 102 | margin-bottom: 1rem; 103 | &:focus { 104 | background: transparent; 105 | } 106 | } 107 | 108 | .form-control:disabled, 109 | .form-control[readonly] { 110 | background-color: transparent; 111 | border-bottom: 1px solid #e0e0e0; 112 | } 113 | 114 | // Styling for input field wrapper 115 | .md-form { 116 | position: relative; 117 | margin-bottom: 1.5rem; 118 | .btn { 119 | margin-bottom: 1.5rem; 120 | } 121 | label { 122 | color: #757575; 123 | position: absolute; 124 | top: 0.8rem; 125 | left: 0; 126 | font-size: 1rem; 127 | cursor: text; 128 | @include transition(.2s ease-out); 129 | } 130 | label.active { 131 | font-size: $label-font-size; 132 | @include transform(translateY(-140%)); 133 | } 134 | // Prefix Icons 135 | .prefix { 136 | position: absolute; 137 | width: 3rem; 138 | font-size: 2rem; 139 | @include transition(color .2s); 140 | &.active { 141 | color: $input-focus-color; 142 | } 143 | } 144 | .prefix ~ input, 145 | .prefix ~ textarea { 146 | margin-left: 3rem; 147 | width: 92%; 148 | width: calc(100% - 3rem); 149 | } 150 | .prefix ~ textarea { 151 | padding-top: .8rem; 152 | } 153 | .prefix ~ label { 154 | margin-left: 3rem; 155 | } 156 | @media #{$medium-and-down} { 157 | .prefix ~ input { 158 | width: 86%; 159 | width: calc(100% - 3rem); 160 | } 161 | } 162 | @media #{$small-and-down} { 163 | .prefix ~ input { 164 | width: 80%; 165 | width: calc(100% - 3rem); 166 | } 167 | } 168 | .input-group { 169 | border: 1px solid #eee; 170 | .form-control { 171 | margin: 0; 172 | } 173 | ::-webkit-input-placeholder { 174 | padding-left: 7px; 175 | padding-top: 2px; 176 | } 177 | :-moz-placeholder { 178 | /* Firefox 18- */ 179 | padding-left: 7px; 180 | padding-top: 2px; 181 | } 182 | ::-moz-placeholder { 183 | /* Firefox 19+ */ 184 | padding-left: 7px; 185 | padding-top: 2px; 186 | } 187 | :-ms-input-placeholder { 188 | padding-left: 7px; 189 | padding-top: 2px; 190 | } 191 | } 192 | } 193 | 194 | .form-inline { 195 | fieldset { 196 | margin-right: 1.5rem; 197 | } 198 | } 199 | 200 | // Default textarea 201 | textarea { 202 | width: 100%; 203 | height: 3rem; 204 | background-color: transparent; 205 | &.md-textarea { 206 | overflow-y: hidden; 207 | /* prevents scroll bar flash */ 208 | padding: 1.6rem 0; 209 | /* prevents text jump on Enter keypress */ 210 | resize: none; 211 | min-height: 3rem; 212 | } 213 | } 214 | 215 | // For textarea autoresize 216 | .hiddendiv { 217 | display: none; 218 | white-space: pre-wrap; 219 | word-wrap: break-word; 220 | overflow-wrap: break-word; 221 | /* future version of deprecated 'word-wrap' */ 222 | padding-top: 1.2rem; 223 | /* prevents text jump on Enter keypress */ 224 | } 225 | 226 | //Input color 227 | .input-dark-bg { 228 | // Style Placeholders 229 | ::-webkit-input-placeholder { 230 | color: #fff!important; 231 | font-weight: 300; 232 | } 233 | :-moz-placeholder { 234 | /* Firefox 18- */ 235 | color: #fff!important; 236 | font-weight: 300; 237 | } 238 | ::-moz-placeholder { 239 | /* Firefox 19+ */ 240 | color: #fff!important; 241 | font-weight: 300; 242 | } 243 | :-ms-input-placeholder { 244 | color: #fff!important; 245 | font-weight: 300; 246 | } 247 | input[type=text] { 248 | border-bottom: 1px solid #fff; 249 | } 250 | .form-control { 251 | color: #fff; 252 | } 253 | } 254 | 255 | .input-light-bg { 256 | // Style Placeholders 257 | ::-webkit-input-placeholder { 258 | color: #1C2331!important; 259 | font-weight: 300; 260 | } 261 | :-moz-placeholder { 262 | /* Firefox 18- */ 263 | color: #1C2331!important; 264 | font-weight: 300; 265 | } 266 | ::-moz-placeholder { 267 | /* Firefox 19+ */ 268 | color: #1C2331!important; 269 | font-weight: 300; 270 | } 271 | :-ms-input-placeholder { 272 | color: #1C2331!important; 273 | font-weight: 300; 274 | } 275 | input[type=text] { 276 | border-bottom: 1px solid #1C2331; 277 | } 278 | .form-control { 279 | color: #1C2331; 280 | } 281 | } 282 | 283 | .form-inline .form-group { 284 | margin-right: 2rem; 285 | } 286 | 287 | i { 288 | &.btn-primary { 289 | background: $primary-color!important; 290 | } 291 | &.btn-default { 292 | background: $default-color!important; 293 | } 294 | &.btn-success { 295 | background: $success-color!important; 296 | } 297 | &.btn-info { 298 | background: $info-color!important; 299 | } 300 | &.btn-warning { 301 | background: $warning-color-dark!important; 302 | } 303 | &.btn-danger { 304 | background: $danger-color-dark!important; 305 | } 306 | } -------------------------------------------------------------------------------- /sass/free/_hover-effects.scss: -------------------------------------------------------------------------------- 1 | /* MDB HOVER EFFECTS */ 2 | 3 | // MDB Hover effects 4 | .view { 5 | overflow: hidden; 6 | position: relative; 7 | cursor: default; 8 | .mask, 9 | .content { 10 | width: 100%; 11 | height: 100%; 12 | position: absolute; 13 | overflow: hidden; 14 | top: 0; 15 | left: 0 16 | } 17 | img, video { 18 | display: block; 19 | position: relative 20 | } 21 | } 22 | 23 | .full-bg-img { 24 | height: 100%; 25 | width: 100%; 26 | position: absolute; 27 | overflow: hidden; 28 | top: 0; 29 | left: 0; 30 | } 31 | 32 | // Overlays 33 | .overlay { 34 | &:hover .mask { 35 | opacity: 1; 36 | } 37 | img, video { 38 | transition: all 0.2s linear; 39 | } 40 | .mask { 41 | opacity: 0; 42 | transition: all 0.4s ease-in-out; 43 | } 44 | } 45 | 46 | //Overlay patterns 47 | .pattern-1 { 48 | background: url(../img/overlays/01.png); 49 | } 50 | 51 | .pattern-2 { 52 | background: url(../img/overlays/02.png); 53 | } 54 | 55 | .pattern-3 { 56 | background: url(../img/overlays/03.png); 57 | } 58 | 59 | .pattern-4 { 60 | background: url(../img/overlays/04.png); 61 | } 62 | 63 | .pattern-5 { 64 | background: url(../img/overlays/05.png); 65 | } 66 | 67 | .pattern-6 { 68 | background: url(../img/overlays/06.png); 69 | } 70 | 71 | .pattern-7 { 72 | background: url(../img/overlays/07.png); 73 | } 74 | 75 | .pattern-8 { 76 | background: url(../img/overlays/08.png); 77 | } 78 | 79 | .pattern-9 { 80 | background: url(../img/overlays/09.png); 81 | } 82 | 83 | // Overlay masks 84 | // Light overlays 85 | .hm-blue-light .mask, 86 | .hm-blue-light .full-bg-img { 87 | background-color: rgba(3, 169, 244, 0.3); 88 | } 89 | 90 | .hm-red-light .mask, 91 | .hm-red-light .full-bg-img { 92 | background-color: rgba(244, 67, 54, 0.3); 93 | } 94 | 95 | .hm-pink-light .mask, 96 | .hm-pink-light .full-bg-img { 97 | background-color: rgba(233, 30, 99, 0.3); 98 | } 99 | 100 | .hm-purple-light .mask, 101 | .hm-purple-light .full-bg-img { 102 | background-color: rgba(156, 39, 176, 0.3); 103 | } 104 | 105 | .hm-indigo-light .mask, 106 | .hm-indigo-light .full-bg-img { 107 | background-color: rgba(63, 81, 181, 0.3); 108 | } 109 | 110 | .hm-cyan-light .mask, 111 | .hm-cyan-light .full-bg-img { 112 | background-color: rgba(0, 188, 212, 0.3); 113 | } 114 | 115 | .hm-teal-light .mask, 116 | .hm-teal-light .full-bg-img { 117 | background-color: rgba(0, 150, 136, 0.3); 118 | } 119 | 120 | .hm-green-light .mask, 121 | .hm-green-light .full-bg-img { 122 | background-color: rgba(76, 175, 80, 0.3); 123 | } 124 | 125 | .hm-lime-light .mask, 126 | .hm-lime-light .full-bg-img { 127 | background-color: rgba(205, 220, 57, 0.3); 128 | } 129 | 130 | .hm-yellow-light .mask, 131 | .hm-yellow-light .full-bg-img { 132 | background-color: rgba(255, 235, 59, 0.3); 133 | } 134 | 135 | .hm-orange-light .mask, 136 | .hm-orange-light .full-bg-img { 137 | background-color: rgba(255, 152, 0, 0.3); 138 | } 139 | 140 | .hm-brown-light .mask, 141 | .hm-brown-light .full-bg-img { 142 | background-color: rgba(121, 85, 72, 0.3); 143 | } 144 | 145 | .hm-grey-light .mask, 146 | .hm-grey-light .full-bg-img { 147 | background-color: rgba(158, 158, 158, 0.3); 148 | } 149 | 150 | .hm-bluegrey-light .mask, 151 | .hm-bluegrey-light .full-bg-img { 152 | background-color: rgba(96, 125, 139, 0.3); 153 | } 154 | 155 | .hm-black-light .mask, 156 | .hm-black-light .full-bg-img { 157 | background-color: rgba(0, 0, 0, 0.3); 158 | } 159 | 160 | .hm-stylish-light .mask, 161 | .hm-stylish-light .full-bg-img { 162 | background-color: rgba(62, 69, 81, 0.3); 163 | } 164 | 165 | .hm-white-light .mask, 166 | .hm-white-light .full-bg-img { 167 | background-color: rgba(255, 255, 255, 0.3); 168 | } 169 | 170 | // Strong overlays 171 | .hm-blue-strong .mask, 172 | .hm-blue-strong .full-bg-img { 173 | background-color: rgba(3, 169, 244, 0.7); 174 | } 175 | 176 | .hm-red-strong .mask, 177 | .hm-red-strong .full-bg-img { 178 | background-color: rgba(244, 67, 54, 0.7); 179 | } 180 | 181 | .hm-pink-strong .mask, 182 | .hm-pink-strong .full-bg-img { 183 | background-color: rgba(233, 30, 99, 0.7); 184 | } 185 | 186 | .hm-purple-strong .mask, 187 | .hm-purple-strong .full-bg-img { 188 | background-color: rgba(156, 39, 176, 0.7); 189 | } 190 | 191 | .hm-indigo-strong .mask, 192 | .hm-indigo-strong .full-bg-img { 193 | background-color: rgba(63, 81, 181, 0.7); 194 | } 195 | 196 | .hm-cyan-strong .mask, 197 | .hm-cyan-strong .full-bg-img { 198 | background-color: rgba(0, 188, 212, 0.7); 199 | } 200 | 201 | .hm-teal-strong .mask, 202 | .hm-teal-strong .full-bg-img { 203 | background-color: rgba(0, 150, 136, 0.7); 204 | } 205 | 206 | .hm-green-strong .mask, 207 | .hm-green-strong .full-bg-img { 208 | background-color: rgba(76, 175, 80, 0.7); 209 | } 210 | 211 | .hm-lime-strong .mask, 212 | .hm-lime-strong .full-bg-img { 213 | background-color: rgba(205, 220, 57, 0.7); 214 | } 215 | 216 | .hm-yellow-strong .mask, 217 | .hm-yellow-strong .full-bg-img { 218 | background-color: rgba(255, 235, 59, 0.7); 219 | } 220 | 221 | .hm-orange-strong .mask, 222 | .hm-orange-strong .full-bg-img { 223 | background-color: rgba(255, 152, 0, 0.7); 224 | } 225 | 226 | .hm-brown-strong .mask, 227 | .hm-brown-strong .full-bg-img { 228 | background-color: rgba(121, 85, 72, 0.7); 229 | } 230 | 231 | .hm-grey-strong .mask, 232 | .hm-grey-strong .full-bg-img { 233 | background-color: rgba(158, 158, 158, 0.7); 234 | } 235 | 236 | .hm-bluegrey-strong .mask, 237 | .hm-bluegrey-strong .full-bg-img { 238 | background-color: rgba(96, 125, 139, 0.7); 239 | } 240 | 241 | .hm-black-strong .mask, 242 | .hm-black-strong .full-bg-img { 243 | background-color: rgba(0, 0, 0, 0.7); 244 | } 245 | 246 | .hm-stylish-strong .mask, 247 | .hm-stylish-strong .full-bg-img { 248 | background-color: rgba(62, 69, 81, 0.7); 249 | } 250 | 251 | .hm-white-strong .mask, 252 | .hm-white-strong .full-bg-img { 253 | background-color: rgba(255, 255, 255, 0.7); 254 | } 255 | 256 | // Light overlays 257 | .hm-blue-slight .mask, 258 | .hm-blue-slight .full-bg-img { 259 | background-color: rgba(3, 169, 244, 0.1); 260 | } 261 | 262 | .hm-red-slight .mask, 263 | .hm-red-slight .full-bg-img { 264 | background-color: rgba(244, 67, 54, 0.1); 265 | } 266 | 267 | .hm-pink-slight .mask, 268 | .hm-pink-slight .full-bg-img { 269 | background-color: rgba(233, 30, 99, 0.1); 270 | } 271 | 272 | .hm-purple-slight .mask, 273 | .hm-purple-slight .full-bg-img { 274 | background-color: rgba(156, 39, 176, 0.1); 275 | } 276 | 277 | .hm-indigo-slight .mask, 278 | .hm-indigo-slight .full-bg-img { 279 | background-color: rgba(63, 81, 181, 0.1); 280 | } 281 | 282 | .hm-cyan-slight .mask, 283 | .hm-cyan-slight .full-bg-img { 284 | background-color: rgba(0, 188, 212, 0.1); 285 | } 286 | 287 | .hm-teal-slight .mask, 288 | .hm-teal-slight .full-bg-img { 289 | background-color: rgba(0, 150, 136, 0.1); 290 | } 291 | 292 | .hm-green-slight .mask, 293 | .hm-green-slight .full-bg-img { 294 | background-color: rgba(76, 175, 80, 0.1); 295 | } 296 | 297 | .hm-lime-slight .mask, 298 | .hm-lime-slight .full-bg-img { 299 | background-color: rgba(205, 220, 57, 0.1); 300 | } 301 | 302 | .hm-yellow-slight .mask, 303 | .hm-yellow-slight .full-bg-img { 304 | background-color: rgba(255, 235, 59, 0.1); 305 | } 306 | 307 | .hm-orange-slight .mask, 308 | .hm-orange-slight .full-bg-img { 309 | background-color: rgba(255, 152, 0, 0.1); 310 | } 311 | 312 | .hm-brown-slight .mask, 313 | .hm-brown-slight .full-bg-img { 314 | background-color: rgba(121, 85, 72, 0.1); 315 | } 316 | 317 | .hm-grey-slight .mask, 318 | .hm-grey-slight .full-bg-img { 319 | background-color: rgba(158, 158, 158, 0.1); 320 | } 321 | 322 | .hm-bluegrey-slight .mask, 323 | .hm-bluegrey-slight .full-bg-img { 324 | background-color: rgba(96, 125, 139, 0.1); 325 | } 326 | 327 | .hm-black-slight .mask, 328 | .hm-black-slight .full-bg-img { 329 | background-color: rgba(0, 0, 0, 0.1); 330 | } 331 | 332 | .hm-stylish-slight .mask, 333 | .hm-stylish-slight .full-bg-img { 334 | background-color: rgba(62, 69, 81, 0.1); 335 | } 336 | 337 | .hm-white-slight .mask, 338 | .hm-white-slight .full-bg-img { 339 | background-color: rgba(255, 255, 255, 0.1); 340 | } 341 | 342 | // Zoom 343 | .hm-zoom img { 344 | transition: all 0.2s linear; 345 | } 346 | 347 | .hm-zoom:hover img { 348 | transform: scale(1.1); 349 | } 350 | 351 | .hm-zoom:hover .mask { 352 | opacity: 1; 353 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Nans Dumortier 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 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 |
85 |
86 | 97 |
98 |
99 | 100 | 101 |
102 |
103 |

Here is my Dashboard !

104 | 105 |
106 |
107 | 108 | 109 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | -------------------------------------------------------------------------------- /sass/free/_global.scss: -------------------------------------------------------------------------------- 1 | // GLOBAL STYLES 2 | // Z-levels 3 | .z-depth-0 { 4 | box-shadow: none !important; 5 | } 6 | 7 | .z-depth-1 { 8 | box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); 9 | } 10 | 11 | .z-depth-1-half { 12 | box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15); 13 | } 14 | 15 | .z-depth-2 { 16 | box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 17 | } 18 | 19 | .z-depth-3 { 20 | box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19); 21 | } 22 | 23 | .z-depth-4 { 24 | box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21); 25 | } 26 | 27 | .z-depth-5 { 28 | box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22); 29 | } 30 | 31 | .hoverable { 32 | transition: box-shadow .55s; 33 | box-shadow: 0; 34 | } 35 | 36 | .hoverable:hover { 37 | transition: box-shadow .45s; 38 | box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 39 | } 40 | 41 | // Normalize 42 | a { 43 | color: $link-color; 44 | text-decoration: none; 45 | cursor: pointer; 46 | // Gets rid of tap active state 47 | -webkit-tap-highlight-color: transparent; 48 | &:hover, 49 | &:focus { 50 | text-decoration: none; 51 | } 52 | } 53 | 54 | ul { 55 | padding: 0; 56 | list-style-type: none; 57 | li { 58 | list-style-type: none; 59 | } 60 | } 61 | 62 | .jumbotron, 63 | .card, 64 | .tag, 65 | .alert, 66 | .nav .nav-link, 67 | .navbar-toggler, 68 | .navbar, 69 | .breadcrumb, 70 | .page-item:last-child .page-link, 71 | .page-item:first-child .page-link, 72 | .pagination-lg .page-item:last-child .page-link, 73 | .pagination-lg .page-item:first-child .page-link, 74 | .pagination-sm .page-item:first-child .page-link, 75 | .pagination-sm .page-item:last-child .page-link, 76 | .list-group .list-group-item, 77 | .modal-content, 78 | .tooltip-inner, 79 | .popover, 80 | .dropdown-menu, 81 | .input-group-addon, 82 | .file-custom, 83 | .card .card-header, 84 | .nav-tabs, 85 | img { 86 | @include border-radius(2px); 87 | } 88 | 89 | .jumbotron, 90 | .card, 91 | .list-group, 92 | .popover, 93 | .navbar, 94 | .dropdown-menu, 95 | .tag, 96 | .chip { 97 | @extend .z-depth-1; 98 | } 99 | 100 | .popover, 101 | .input-group-addon, 102 | .dropdown-menu, 103 | .pagination .page-item .page-link { 104 | border: 0; 105 | } 106 | 107 | // Circle pagination 108 | .pagination .active .page-link { 109 | border-radius: 2px; 110 | transition: all 0.2s linear; 111 | @extend.z-depth-1; 112 | } 113 | 114 | .pagination .page-link { 115 | transition: all 0.3s linear; 116 | &:hover { 117 | transition: all 0.3s linear; 118 | } 119 | &:focus { 120 | background-color: transparent; 121 | } 122 | } 123 | 124 | .pagination { 125 | &.pg-blue { 126 | .active .page-link { 127 | background-color: $primary-color; 128 | } 129 | } 130 | &.pg-red { 131 | .active .page-link { 132 | background-color: $danger-color; 133 | } 134 | } 135 | &.pg-teal { 136 | .active .page-link { 137 | background-color: $default-color; 138 | } 139 | } 140 | &.pg-darkgrey { 141 | .active .page-link { 142 | background-color: $special-color; 143 | } 144 | } 145 | &.pg-dark { 146 | .active .page-link { 147 | background-color: $elegant-color; 148 | } 149 | } 150 | &.pg-bluegrey { 151 | .active .page-link { 152 | background-color: #3F729B; 153 | } 154 | } 155 | &.pg-amber { 156 | .active .page-link { 157 | background-color: #ff6f00; 158 | } 159 | } 160 | &.pg-purple { 161 | .active .page-link { 162 | background-color: #5e35b1; 163 | } 164 | } 165 | } 166 | 167 | .pager { 168 | a, 169 | .disabled>a { 170 | color: #fff; 171 | } 172 | &.pg-blue { 173 | li a { 174 | background-color: $primary-color; 175 | &:focus { 176 | background-color: $primary-color; 177 | color: #fff; 178 | } 179 | &:hover { 180 | background-color: $primary-color; 181 | color: #fff; 182 | } 183 | } 184 | } 185 | &.pg-red { 186 | li a { 187 | background-color: $danger-color; 188 | &:focus { 189 | background-color: $danger-color; 190 | color: #fff; 191 | } 192 | &:hover { 193 | background-color: $danger-color; 194 | color: #fff; 195 | } 196 | } 197 | } 198 | &.pg-teal { 199 | li a { 200 | background-color: $default-color; 201 | &:focus { 202 | background-color: $default-color; 203 | color: #fff; 204 | } 205 | &:hover { 206 | background-color: $default-color; 207 | color: #fff; 208 | } 209 | } 210 | } 211 | &.pg-darkgrey { 212 | li a { 213 | background-color: $special-color; 214 | &:focus { 215 | background-color: $special-color; 216 | color: #fff; 217 | } 218 | &:hover { 219 | background-color: $special-color; 220 | color: #fff; 221 | } 222 | } 223 | } 224 | &.pg-dark { 225 | li a { 226 | background-color: $elegant-color; 227 | &:focus { 228 | background-color: $elegant-color; 229 | color: #fff; 230 | } 231 | &:hover { 232 | background-color: $elegant-color; 233 | color: #fff; 234 | } 235 | } 236 | } 237 | &.pg-bluegrey { 238 | li a { 239 | background-color: #3F729B; 240 | &:focus { 241 | background-color: #3F729B; 242 | color: #fff; 243 | } 244 | &:hover { 245 | background-color: #3F729B; 246 | color: #fff; 247 | } 248 | } 249 | } 250 | &.pg-amber { 251 | li a { 252 | background-color: #ff6f00; 253 | &:focus { 254 | background-color: #ff6f00; 255 | color: #fff; 256 | } 257 | &:hover { 258 | background-color: #ff6f00; 259 | color: #fff; 260 | } 261 | } 262 | } 263 | &.pg-purple { 264 | li a { 265 | background-color: #5e35b1; 266 | &:focus { 267 | background-color: #5e35b1; 268 | color: #fff; 269 | } 270 | &:hover { 271 | background-color: #5e35b1; 272 | color: #fff; 273 | } 274 | } 275 | } 276 | } 277 | 278 | .pager .disabled>a, 279 | .pager .disabled>a:focus, 280 | .pager .disabled>a:hover { 281 | background-color: inerhit!important; 282 | } 283 | 284 | // Modal footer buttons fix 285 | .modal-footer .btn+ .btn { 286 | margin-bottom: 6px; 287 | } 288 | 289 | // Shifting bacground fix 290 | body.modal-open { 291 | overflow: inherit; 292 | padding-right: 0 !important; 293 | } 294 | 295 | body { 296 | overflow: auto !important; 297 | } 298 | 299 | // Card columns fix - cut edges of the cards 300 | .card-columns .card { 301 | margin: 2px; 302 | } 303 | 304 | // Parallax 305 | .parallax { 306 | background-repeat: no-repeat; 307 | background-size: cover; 308 | background-attachment: fixed; 309 | position: relative; 310 | padding-top: 3em; 311 | padding-bottom: 3em; 312 | } 313 | 314 | // Scrollspy free 315 | .nav-pills { 316 | &.horizontal-spy { 317 | .nav-item { 318 | .active { 319 | border-bottom: 2px solid $mdb-color; 320 | border-left: none; 321 | } 322 | &:hover { 323 | background-color: transparent; 324 | color: $mdb-color; 325 | font-weight: 500; 326 | border-left: none; 327 | } 328 | } 329 | } 330 | } 331 | 332 | //Nav normalize 333 | .nav-pills .nav-item.open .nav-link, 334 | .nav-pills .nav-item.open .nav-link:focus, 335 | .nav-pills .nav-item.open .nav-link:hover, 336 | .nav-pills .nav-link.active, 337 | .nav-pills .nav-link.active:focus, 338 | .nav-pills .nav-link.active:hover { 339 | background-color: transparent; 340 | color: #000; 341 | } 342 | 343 | //Disabled cursor 344 | .disabled { 345 | cursor: not-allowed!important; 346 | } 347 | 348 | //Video responsive 349 | .video-fluid { 350 | height: auto; 351 | width: 100%; 352 | } 353 | 354 | .video-full { 355 | position: fixed; 356 | top: 50%; 357 | left: 50%; 358 | min-width: 100%; 359 | min-height: 100%; 360 | width: auto; 361 | height: auto; 362 | z-index: -100; 363 | -ms-transform: translateX(-50%) translateY(-50%); 364 | -moz-transform: translateX(-50%) translateY(-50%); 365 | -webkit-transform: translateX(-50%) translateY(-50%); 366 | transform: translateX(-50%) translateY(-50%); 367 | background-size: cover; 368 | } 369 | 370 | //Media improvement 371 | .media { 372 | img { 373 | @extend .z-depth-1-half; 374 | } 375 | } 376 | 377 | .card-block { 378 | h5 { 379 | margin-bottom: 1rem; 380 | font-size: 1rem; 381 | font-weight: 400; 382 | } 383 | h3 { 384 | margin-bottom: 1rem; 385 | font-weight: 400; 386 | } 387 | p { 388 | margin-bottom: 1rem; 389 | } 390 | } 391 | 392 | .tooltip { 393 | .tooltip-inner { 394 | padding: 0.4rem 0.8rem; 395 | @extend .z-depth-1-half; 396 | } 397 | } -------------------------------------------------------------------------------- /sass/mdb/free/_hover-effects.scss: -------------------------------------------------------------------------------- 1 | /* MDB HOVER EFFECTS */ 2 | 3 | // MDB Hover effects 4 | .view { 5 | overflow: hidden; 6 | position: relative; 7 | cursor: default; 8 | .mask, 9 | .content { 10 | width: 100%; 11 | height: 100%; 12 | position: absolute; 13 | overflow: hidden; 14 | top: 0; 15 | left: 0 16 | } 17 | img, video { 18 | display: block; 19 | position: relative 20 | } 21 | } 22 | .view .mask { 23 | background-attachment: fixed; 24 | } 25 | 26 | .full-bg-img { 27 | height: 100%; 28 | width: 100%; 29 | position: absolute; 30 | overflow: hidden; 31 | top: 0; 32 | left: 0; 33 | } 34 | 35 | // Overlays 36 | .overlay { 37 | &:hover .mask { 38 | opacity: 1; 39 | } 40 | img, video { 41 | transition: all 0.2s linear; 42 | } 43 | .mask { 44 | opacity: 0; 45 | transition: all 0.4s ease-in-out; 46 | } 47 | } 48 | 49 | //Overlay patterns 50 | .pattern-1 { 51 | background: url(../img/overlays/01.png); 52 | } 53 | 54 | .pattern-2 { 55 | background: url(../img/overlays/02.png); 56 | } 57 | 58 | .pattern-3 { 59 | background: url(../img/overlays/03.png); 60 | } 61 | 62 | .pattern-4 { 63 | background: url(../img/overlays/04.png); 64 | } 65 | 66 | .pattern-5 { 67 | background: url(../img/overlays/05.png); 68 | } 69 | 70 | .pattern-6 { 71 | background: url(../img/overlays/06.png); 72 | } 73 | 74 | .pattern-7 { 75 | background: url(../img/overlays/07.png); 76 | } 77 | 78 | .pattern-8 { 79 | background: url(../img/overlays/08.png); 80 | } 81 | 82 | .pattern-9 { 83 | background: url(../img/overlays/09.png); 84 | } 85 | 86 | // Overlay masks 87 | // Light overlays 88 | .hm-blue-light .mask, 89 | .hm-blue-light .full-bg-img { 90 | background-color: rgba(3, 169, 244, 0.3); 91 | } 92 | 93 | .hm-red-light .mask, 94 | .hm-red-light .full-bg-img { 95 | background-color: rgba(244, 67, 54, 0.3); 96 | } 97 | 98 | .hm-pink-light .mask, 99 | .hm-pink-light .full-bg-img { 100 | background-color: rgba(233, 30, 99, 0.3); 101 | } 102 | 103 | .hm-purple-light .mask, 104 | .hm-purple-light .full-bg-img { 105 | background-color: rgba(156, 39, 176, 0.3); 106 | } 107 | 108 | .hm-indigo-light .mask, 109 | .hm-indigo-light .full-bg-img { 110 | background-color: rgba(63, 81, 181, 0.3); 111 | } 112 | 113 | .hm-cyan-light .mask, 114 | .hm-cyan-light .full-bg-img { 115 | background-color: rgba(0, 188, 212, 0.3); 116 | } 117 | 118 | .hm-teal-light .mask, 119 | .hm-teal-light .full-bg-img { 120 | background-color: rgba(0, 150, 136, 0.3); 121 | } 122 | 123 | .hm-green-light .mask, 124 | .hm-green-light .full-bg-img { 125 | background-color: rgba(76, 175, 80, 0.3); 126 | } 127 | 128 | .hm-lime-light .mask, 129 | .hm-lime-light .full-bg-img { 130 | background-color: rgba(205, 220, 57, 0.3); 131 | } 132 | 133 | .hm-yellow-light .mask, 134 | .hm-yellow-light .full-bg-img { 135 | background-color: rgba(255, 235, 59, 0.3); 136 | } 137 | 138 | .hm-orange-light .mask, 139 | .hm-orange-light .full-bg-img { 140 | background-color: rgba(255, 152, 0, 0.3); 141 | } 142 | 143 | .hm-brown-light .mask, 144 | .hm-brown-light .full-bg-img { 145 | background-color: rgba(121, 85, 72, 0.3); 146 | } 147 | 148 | .hm-grey-light .mask, 149 | .hm-grey-light .full-bg-img { 150 | background-color: rgba(158, 158, 158, 0.3); 151 | } 152 | 153 | .hm-bluegrey-light .mask, 154 | .hm-bluegrey-light .full-bg-img { 155 | background-color: rgba(96, 125, 139, 0.3); 156 | } 157 | 158 | .hm-black-light .mask, 159 | .hm-black-light .full-bg-img { 160 | background-color: rgba(0, 0, 0, 0.3); 161 | } 162 | 163 | .hm-stylish-light .mask, 164 | .hm-stylish-light .full-bg-img { 165 | background-color: rgba(62, 69, 81, 0.3); 166 | } 167 | 168 | .hm-white-light .mask, 169 | .hm-white-light .full-bg-img { 170 | background-color: rgba(255, 255, 255, 0.3); 171 | } 172 | 173 | // Strong overlays 174 | .hm-blue-strong .mask, 175 | .hm-blue-strong .full-bg-img { 176 | background-color: rgba(3, 169, 244, 0.7); 177 | } 178 | 179 | .hm-red-strong .mask, 180 | .hm-red-strong .full-bg-img { 181 | background-color: rgba(244, 67, 54, 0.7); 182 | } 183 | 184 | .hm-pink-strong .mask, 185 | .hm-pink-strong .full-bg-img { 186 | background-color: rgba(233, 30, 99, 0.7); 187 | } 188 | 189 | .hm-purple-strong .mask, 190 | .hm-purple-strong .full-bg-img { 191 | background-color: rgba(156, 39, 176, 0.7); 192 | } 193 | 194 | .hm-indigo-strong .mask, 195 | .hm-indigo-strong .full-bg-img { 196 | background-color: rgba(63, 81, 181, 0.7); 197 | } 198 | 199 | .hm-cyan-strong .mask, 200 | .hm-cyan-strong .full-bg-img { 201 | background-color: rgba(0, 188, 212, 0.7); 202 | } 203 | 204 | .hm-teal-strong .mask, 205 | .hm-teal-strong .full-bg-img { 206 | background-color: rgba(0, 150, 136, 0.7); 207 | } 208 | 209 | .hm-green-strong .mask, 210 | .hm-green-strong .full-bg-img { 211 | background-color: rgba(76, 175, 80, 0.7); 212 | } 213 | 214 | .hm-lime-strong .mask, 215 | .hm-lime-strong .full-bg-img { 216 | background-color: rgba(205, 220, 57, 0.7); 217 | } 218 | 219 | .hm-yellow-strong .mask, 220 | .hm-yellow-strong .full-bg-img { 221 | background-color: rgba(255, 235, 59, 0.7); 222 | } 223 | 224 | .hm-orange-strong .mask, 225 | .hm-orange-strong .full-bg-img { 226 | background-color: rgba(255, 152, 0, 0.7); 227 | } 228 | 229 | .hm-brown-strong .mask, 230 | .hm-brown-strong .full-bg-img { 231 | background-color: rgba(121, 85, 72, 0.7); 232 | } 233 | 234 | .hm-grey-strong .mask, 235 | .hm-grey-strong .full-bg-img { 236 | background-color: rgba(158, 158, 158, 0.7); 237 | } 238 | 239 | .hm-bluegrey-strong .mask, 240 | .hm-bluegrey-strong .full-bg-img { 241 | background-color: rgba(96, 125, 139, 0.7); 242 | } 243 | 244 | .hm-black-strong .mask, 245 | .hm-black-strong .full-bg-img { 246 | background-color: rgba(0, 0, 0, 0.7); 247 | } 248 | 249 | .hm-stylish-strong .mask, 250 | .hm-stylish-strong .full-bg-img { 251 | background-color: rgba(62, 69, 81, 0.7); 252 | } 253 | 254 | .hm-white-strong .mask, 255 | .hm-white-strong .full-bg-img { 256 | background-color: rgba(255, 255, 255, 0.7); 257 | } 258 | 259 | // Light overlays 260 | .hm-blue-slight .mask, 261 | .hm-blue-slight .full-bg-img { 262 | background-color: rgba(3, 169, 244, 0.1); 263 | } 264 | 265 | .hm-red-slight .mask, 266 | .hm-red-slight .full-bg-img { 267 | background-color: rgba(244, 67, 54, 0.1); 268 | } 269 | 270 | .hm-pink-slight .mask, 271 | .hm-pink-slight .full-bg-img { 272 | background-color: rgba(233, 30, 99, 0.1); 273 | } 274 | 275 | .hm-purple-slight .mask, 276 | .hm-purple-slight .full-bg-img { 277 | background-color: rgba(156, 39, 176, 0.1); 278 | } 279 | 280 | .hm-indigo-slight .mask, 281 | .hm-indigo-slight .full-bg-img { 282 | background-color: rgba(63, 81, 181, 0.1); 283 | } 284 | 285 | .hm-cyan-slight .mask, 286 | .hm-cyan-slight .full-bg-img { 287 | background-color: rgba(0, 188, 212, 0.1); 288 | } 289 | 290 | .hm-teal-slight .mask, 291 | .hm-teal-slight .full-bg-img { 292 | background-color: rgba(0, 150, 136, 0.1); 293 | } 294 | 295 | .hm-green-slight .mask, 296 | .hm-green-slight .full-bg-img { 297 | background-color: rgba(76, 175, 80, 0.1); 298 | } 299 | 300 | .hm-lime-slight .mask, 301 | .hm-lime-slight .full-bg-img { 302 | background-color: rgba(205, 220, 57, 0.1); 303 | } 304 | 305 | .hm-yellow-slight .mask, 306 | .hm-yellow-slight .full-bg-img { 307 | background-color: rgba(255, 235, 59, 0.1); 308 | } 309 | 310 | .hm-orange-slight .mask, 311 | .hm-orange-slight .full-bg-img { 312 | background-color: rgba(255, 152, 0, 0.1); 313 | } 314 | 315 | .hm-brown-slight .mask, 316 | .hm-brown-slight .full-bg-img { 317 | background-color: rgba(121, 85, 72, 0.1); 318 | } 319 | 320 | .hm-grey-slight .mask, 321 | .hm-grey-slight .full-bg-img { 322 | background-color: rgba(158, 158, 158, 0.1); 323 | } 324 | 325 | .hm-bluegrey-slight .mask, 326 | .hm-bluegrey-slight .full-bg-img { 327 | background-color: rgba(96, 125, 139, 0.1); 328 | } 329 | 330 | .hm-black-slight .mask, 331 | .hm-black-slight .full-bg-img { 332 | background-color: rgba(0, 0, 0, 0.1); 333 | } 334 | 335 | .hm-stylish-slight .mask, 336 | .hm-stylish-slight .full-bg-img { 337 | background-color: rgba(62, 69, 81, 0.1); 338 | } 339 | 340 | .hm-white-slight .mask, 341 | .hm-white-slight .full-bg-img { 342 | background-color: rgba(255, 255, 255, 0.1); 343 | } 344 | 345 | // Zoom 346 | .hm-zoom img { 347 | transition: all 0.2s linear; 348 | } 349 | 350 | .hm-zoom:hover img { 351 | transform: scale(1.1); 352 | } 353 | 354 | .hm-zoom:hover .mask { 355 | opacity: 1; 356 | } 357 | 358 | .img-overlay { 359 | position:relative; 360 | &:after { 361 | content: ''; 362 | display:block; 363 | position:absolute; 364 | height:100%; 365 | width:100%; 366 | top:0; 367 | left:0; 368 | bottom:0; 369 | right:0; 370 | background:rgba(0,0,0,.17); 371 | transition: background 0.4s; 372 | } 373 | &:hover { 374 | &:after { 375 | background:rgba(0,0,0,.35); 376 | } 377 | } 378 | &.light { 379 | &:after { 380 | background:rgba(255,255,255,.17); 381 | } 382 | &:hover { 383 | &:after { 384 | background:rgba(255,255,255,.35); 385 | } 386 | } 387 | } 388 | &.blue { 389 | &:after { 390 | background:rgba(0,145,234,.17); 391 | } 392 | &:hover { 393 | &:after { 394 | background:rgba(0,145,234,.35); 395 | } 396 | } 397 | } 398 | &.green { 399 | &:after { 400 | background:rgba(76,175,80,.17); 401 | } 402 | &:hover { 403 | &:after { 404 | background:rgba(76,175,80,.35); 405 | } 406 | } 407 | } 408 | &.red { 409 | &:after { 410 | background:rgba(213,0,0,.17); 411 | } 412 | &:hover { 413 | &:after { 414 | background:rgba(213,0,0,.35); 415 | } 416 | } 417 | } 418 | } -------------------------------------------------------------------------------- /sass/mdb/free/_global.scss: -------------------------------------------------------------------------------- 1 | // GLOBAL STYLES 2 | // Z-levels 3 | .z-depth-0 { 4 | box-shadow: none !important; 5 | } 6 | 7 | .z-depth-1 { 8 | box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); 9 | } 10 | 11 | .z-depth-1-half { 12 | box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15); 13 | } 14 | 15 | .z-depth-2 { 16 | box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 17 | } 18 | 19 | .z-depth-3 { 20 | box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19); 21 | } 22 | 23 | .z-depth-4 { 24 | box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21); 25 | } 26 | 27 | .z-depth-5 { 28 | box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22); 29 | } 30 | 31 | .hoverable { 32 | transition: box-shadow .55s; 33 | box-shadow: 0; 34 | } 35 | 36 | .hoverable:hover { 37 | transition: box-shadow .45s; 38 | box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 39 | } 40 | 41 | // Normalize 42 | a { 43 | color: $link-color; 44 | text-decoration: none; 45 | cursor: pointer; 46 | // Gets rid of tap active state 47 | -webkit-tap-highlight-color: transparent; 48 | &:hover, 49 | &:focus { 50 | text-decoration: none; 51 | } 52 | } 53 | 54 | ul { 55 | padding: 0; 56 | list-style-type: none; 57 | li { 58 | list-style-type: none; 59 | } 60 | } 61 | 62 | .jumbotron, 63 | .card, 64 | .badge, 65 | .alert, 66 | .nav .nav-link, 67 | .navbar-toggler, 68 | .navbar, 69 | .breadcrumb, 70 | .page-item:last-child .page-link, 71 | .page-item:first-child .page-link, 72 | .pagination-lg .page-item:last-child .page-link, 73 | .pagination-lg .page-item:first-child .page-link, 74 | .pagination-sm .page-item:first-child .page-link, 75 | .pagination-sm .page-item:last-child .page-link, 76 | .list-group .list-group-item, 77 | .modal-content, 78 | .tooltip-inner, 79 | .popover, 80 | .dropdown-menu, 81 | .input-group-addon, 82 | .file-custom, 83 | .card .card-header, 84 | .nav-tabs, 85 | img { 86 | @include border-radius(2px); 87 | } 88 | 89 | .jumbotron, 90 | .card, 91 | .list-group, 92 | .popover, 93 | .navbar, 94 | .dropdown-menu, 95 | .badge, 96 | .chip { 97 | @extend .z-depth-1; 98 | } 99 | 100 | .popover, 101 | .input-group-addon, 102 | .dropdown-menu, 103 | .pagination .page-item .page-link { 104 | border: 0; 105 | } 106 | 107 | // Circle pagination 108 | .pagination .active .page-link { 109 | border-radius: 2px; 110 | transition: all 0.2s linear; 111 | @extend.z-depth-1; 112 | } 113 | 114 | .pagination .page-link { 115 | transition: all 0.3s linear; 116 | &:hover { 117 | transition: all 0.3s linear; 118 | } 119 | &:focus { 120 | background-color: transparent; 121 | } 122 | } 123 | 124 | .pagination { 125 | &.pg-blue { 126 | .active .page-link { 127 | background-color: $primary-color; 128 | } 129 | } 130 | &.pg-red { 131 | .active .page-link { 132 | background-color: $danger-color; 133 | } 134 | } 135 | &.pg-teal { 136 | .active .page-link { 137 | background-color: $default-color; 138 | } 139 | } 140 | &.pg-darkgrey { 141 | .active .page-link { 142 | background-color: $special-color; 143 | } 144 | } 145 | &.pg-dark { 146 | .active .page-link { 147 | background-color: $elegant-color; 148 | } 149 | } 150 | &.pg-bluegrey { 151 | .active .page-link { 152 | background-color: #3F729B; 153 | } 154 | } 155 | &.pg-amber { 156 | .active .page-link { 157 | background-color: #ff6f00; 158 | } 159 | } 160 | &.pg-purple { 161 | .active .page-link { 162 | background-color: #5e35b1; 163 | } 164 | } 165 | } 166 | 167 | .pager { 168 | a, 169 | .disabled>a { 170 | color: #fff; 171 | } 172 | &.pg-blue { 173 | li a { 174 | background-color: $primary-color; 175 | &:focus { 176 | background-color: $primary-color; 177 | color: #fff; 178 | } 179 | &:hover { 180 | background-color: $primary-color; 181 | color: #fff; 182 | } 183 | } 184 | } 185 | &.pg-red { 186 | li a { 187 | background-color: $danger-color; 188 | &:focus { 189 | background-color: $danger-color; 190 | color: #fff; 191 | } 192 | &:hover { 193 | background-color: $danger-color; 194 | color: #fff; 195 | } 196 | } 197 | } 198 | &.pg-teal { 199 | li a { 200 | background-color: $default-color; 201 | &:focus { 202 | background-color: $default-color; 203 | color: #fff; 204 | } 205 | &:hover { 206 | background-color: $default-color; 207 | color: #fff; 208 | } 209 | } 210 | } 211 | &.pg-darkgrey { 212 | li a { 213 | background-color: $special-color; 214 | &:focus { 215 | background-color: $special-color; 216 | color: #fff; 217 | } 218 | &:hover { 219 | background-color: $special-color; 220 | color: #fff; 221 | } 222 | } 223 | } 224 | &.pg-dark { 225 | li a { 226 | background-color: $elegant-color; 227 | &:focus { 228 | background-color: $elegant-color; 229 | color: #fff; 230 | } 231 | &:hover { 232 | background-color: $elegant-color; 233 | color: #fff; 234 | } 235 | } 236 | } 237 | &.pg-bluegrey { 238 | li a { 239 | background-color: #3F729B; 240 | &:focus { 241 | background-color: #3F729B; 242 | color: #fff; 243 | } 244 | &:hover { 245 | background-color: #3F729B; 246 | color: #fff; 247 | } 248 | } 249 | } 250 | &.pg-amber { 251 | li a { 252 | background-color: #ff6f00; 253 | &:focus { 254 | background-color: #ff6f00; 255 | color: #fff; 256 | } 257 | &:hover { 258 | background-color: #ff6f00; 259 | color: #fff; 260 | } 261 | } 262 | } 263 | &.pg-purple { 264 | li a { 265 | background-color: #5e35b1; 266 | &:focus { 267 | background-color: #5e35b1; 268 | color: #fff; 269 | } 270 | &:hover { 271 | background-color: #5e35b1; 272 | color: #fff; 273 | } 274 | } 275 | } 276 | } 277 | 278 | .pager .disabled>a, 279 | .pager .disabled>a:focus, 280 | .pager .disabled>a:hover { 281 | background-color: inerhit!important; 282 | } 283 | 284 | // Modal footer buttons fix 285 | .modal-footer .btn+ .btn { 286 | margin-bottom: 6px; 287 | } 288 | 289 | // Shifting bacground fix 290 | body.modal-open { 291 | overflow: inherit; 292 | padding-right: 0 !important; 293 | } 294 | 295 | body { 296 | overflow: auto !important; 297 | } 298 | 299 | // Card columns fix - cut edges of the cards 300 | .card-columns .card { 301 | margin: 2px; 302 | } 303 | 304 | // Parallax 305 | .parallax { 306 | background-repeat: no-repeat; 307 | background-size: cover; 308 | background-attachment: fixed; 309 | position: relative; 310 | padding-top: 3em; 311 | padding-bottom: 3em; 312 | } 313 | 314 | // Scrollspy free 315 | .nav-pills { 316 | &.horizontal-spy { 317 | .nav-item { 318 | .active { 319 | border-bottom: 2px solid $mdb-color; 320 | border-left: none; 321 | } 322 | &:hover { 323 | background-color: transparent; 324 | color: $mdb-color; 325 | font-weight: 500; 326 | border-left: none; 327 | } 328 | } 329 | } 330 | } 331 | 332 | //Nav normalize 333 | .nav-pills .nav-item.open .nav-link, 334 | .nav-pills .nav-item.open .nav-link:focus, 335 | .nav-pills .nav-item.open .nav-link:hover, 336 | .nav-pills .nav-link.active, 337 | .nav-pills .nav-link.active:focus, 338 | .nav-pills .nav-link.active:hover { 339 | background-color: transparent; 340 | color: #000; 341 | } 342 | 343 | //Disabled cursor 344 | .disabled { 345 | cursor: not-allowed!important; 346 | } 347 | 348 | //Video responsive 349 | .video-fluid { 350 | height: auto; 351 | width: 100%; 352 | } 353 | 354 | .video-full { 355 | position: fixed; 356 | top: 50%; 357 | left: 50%; 358 | min-width: 100%; 359 | min-height: 100%; 360 | width: auto; 361 | height: auto; 362 | z-index: -100; 363 | -ms-transform: translateX(-50%) translateY(-50%); 364 | -moz-transform: translateX(-50%) translateY(-50%); 365 | -webkit-transform: translateX(-50%) translateY(-50%); 366 | transform: translateX(-50%) translateY(-50%); 367 | background-size: cover; 368 | } 369 | 370 | //Media improvement 371 | .media { 372 | .media-left { 373 | padding:0 10px 10px 0; 374 | img { 375 | @extend .z-depth-1-half; 376 | } 377 | } 378 | } 379 | 380 | .card-block { 381 | h5 { 382 | margin-bottom: 1rem; 383 | font-size: 1rem; 384 | font-weight: 400; 385 | } 386 | h3 { 387 | margin-bottom: 1rem; 388 | font-weight: 400; 389 | } 390 | p { 391 | margin-bottom: 1rem; 392 | } 393 | } 394 | 395 | .tooltip { 396 | .tooltip-inner { 397 | padding: 0.4rem 0.8rem; 398 | @extend .z-depth-1-half; 399 | } 400 | } 401 | 402 | // Make sections full width 403 | section { 404 | flex: 0 0 100%; 405 | } 406 | 407 | .breadcrumb .breadcrumb-item.active { 408 | color: #818a91; 409 | } 410 | 411 | .dropdown-menu .dropdown-item:active { 412 | background:#f7f7f9; 413 | } 414 | 415 | .dropdown-menu { 416 | transition: all 0.2s cubic-bezier(0.72, 1.2, 0.71, 0.72); 417 | 418 | } -------------------------------------------------------------------------------- /sass/free/_buttons.scss: -------------------------------------------------------------------------------- 1 | // BUTTONS 2 | button:focus { 3 | outline: none!important; 4 | } 5 | 6 | .btn { 7 | border-radius: 2px; 8 | border: 0; 9 | @extend .z-depth-1; 10 | transition: .2s ease-out; 11 | color: #fff!important; 12 | margin: 6px; 13 | white-space: normal !important; 14 | word-wrap: break-word; 15 | &:hover { 16 | @extend .z-depth-1-half; 17 | color: #fff; 18 | } 19 | &:active, 20 | &:focus, 21 | &.active { 22 | outline: 0; 23 | color: #fff; 24 | } 25 | .fa { 26 | margin-top: 3px; 27 | &.right { 28 | margin-left: 3px; 29 | } 30 | &.left { 31 | margin-right: 3px; 32 | } 33 | } 34 | } 35 | 36 | .btn-group { 37 | .btn { 38 | margin: 0; 39 | } 40 | } 41 | 42 | .btn-block { 43 | margin: inherit; 44 | } 45 | 46 | // Alert buttons 47 | .btn-secondary { 48 | background-color: $secondary-color; 49 | &:hover, 50 | &:focus { 51 | background-color: lighten( $secondary-color, 5%)!important; 52 | color: #fff; 53 | } 54 | &.active { 55 | background-color: darken( $secondary-color, 20%)!important; 56 | @extend .z-depth-1-half; 57 | &:hover { 58 | color: #fff; 59 | } 60 | &:focus { 61 | color: #fff; 62 | } 63 | } 64 | &.dropdown-toggle { 65 | color: #fff!important; 66 | background-color: $secondary-color!important; 67 | @extend .z-depth-1-half; 68 | &:hover { 69 | color: #fff; 70 | background-color: lighten( $secondary-color, 5%)!important; 71 | } 72 | &:focus { 73 | color: #fff; 74 | background-color: $secondary-color; 75 | } 76 | } 77 | } 78 | 79 | .btn-secondary:active:hover { 80 | background-color: lighten( $secondary-color, 5%)!important; 81 | } 82 | 83 | .btn-primary { 84 | background: $primary-color; 85 | color: #fff!important; 86 | &:hover, 87 | &:focus { 88 | background-color: lighten( $primary-color, 5%)!important; 89 | } 90 | &.active { 91 | background-color: darken( $primary-color, 20%)!important; 92 | @extend .z-depth-1-half; 93 | } 94 | } 95 | 96 | .btn-default { 97 | background: $default-color; 98 | &:hover, 99 | &:focus { 100 | background-color: lighten( $default-color, 5%)!important; 101 | } 102 | &.active { 103 | background-color: darken( $default-color, 20%)!important; 104 | @extend .z-depth-1-half; 105 | } 106 | } 107 | 108 | .btn-success { 109 | background: $success-color; 110 | &:hover, 111 | &:focus { 112 | background-color: lighten( $success-color, 2%)!important; 113 | } 114 | &.active { 115 | background-color: darken( $success-color, 20%)!important; 116 | @extend .z-depth-1-half; 117 | } 118 | } 119 | 120 | .btn-info { 121 | background: $info-color; 122 | &:hover, 123 | &:focus { 124 | background-color: lighten( $info-color, 5%)!important; 125 | } 126 | &.active { 127 | background-color: darken( $info-color, 20%)!important; 128 | @extend .z-depth-1-half; 129 | } 130 | } 131 | 132 | .btn-warning { 133 | background: $warning-color-dark; 134 | &:hover, 135 | &:focus { 136 | background-color: lighten( $warning-color-dark, 6%)!important; 137 | } 138 | &.active { 139 | background-color: darken( $warning-color, 20%)!important; 140 | @extend .z-depth-1-half; 141 | } 142 | } 143 | 144 | .btn-danger { 145 | background: $danger-color-dark; 146 | &:hover, 147 | &:focus { 148 | background-color: lighten( $danger-color-dark, 3%)!important; 149 | } 150 | &.active { 151 | background-color: darken( $danger-color-dark, 15%)!important; 152 | @extend .z-depth-1-half; 153 | } 154 | } 155 | 156 | .btn-link { 157 | background-color: transparent; 158 | color: #000!important; 159 | &:hover, 160 | &:focus { 161 | background-color: transparent; 162 | color: #000; 163 | } 164 | } 165 | 166 | // Additional button styles 167 | .btn-primary-outline { 168 | border: 2px solid $primary-color; 169 | color: $primary-color-dark!important; 170 | background-color: transparent; 171 | &:hover, 172 | &:focus { 173 | color: $primary-color; 174 | } 175 | } 176 | 177 | .btn-secondary-outline { 178 | border: 2px solid $secondary-color; 179 | color: $secondary-color-dark!important; 180 | background-color: transparent; 181 | &:hover, 182 | &:focus { 183 | color: $secondary-color; 184 | border: 2px solid $secondary-color; 185 | } 186 | } 187 | 188 | .btn-default-outline { 189 | background-color: transparent; 190 | border: 2px solid $default-color; 191 | color: $default-color-dark!important; 192 | background-color: transparent; 193 | &:hover, 194 | &:focus { 195 | color: $default-color; 196 | } 197 | } 198 | 199 | .btn-success-outline { 200 | border: 2px solid $success-color; 201 | color: $success-color-dark!important; 202 | background-color: transparent; 203 | &:hover, 204 | &:focus { 205 | color: $success-color; 206 | } 207 | } 208 | 209 | .btn-info-outline { 210 | border: 2px solid $info-color; 211 | color: $info-color-dark!important; 212 | background-color: transparent; 213 | &:hover, 214 | &:focus { 215 | color: $info-color; 216 | } 217 | } 218 | 219 | .btn-warning-outline { 220 | border: 2px solid $warning-color; 221 | color: $warning-color-dark!important; 222 | background-color: transparent; 223 | &:hover, 224 | &:focus { 225 | color: $warning-color; 226 | } 227 | } 228 | 229 | .btn-danger-outline { 230 | border: 2px solid $danger-color; 231 | color: $danger-color-dark!important; 232 | background-color: transparent; 233 | &:hover, 234 | &:focus { 235 | color: $danger-color; 236 | } 237 | } 238 | 239 | .btn-white-outline { 240 | border: 2px solid #fff; 241 | color: #fff!important; 242 | background-color: transparent; 243 | &:hover, 244 | &:focus { 245 | color: darken( #fff, 10%) 246 | } 247 | } 248 | 249 | .btn-black-outline { 250 | border: 2px solid #000; 251 | color: #000!important; 252 | background-color: transparent; 253 | background-color: transparent; 254 | &:hover, 255 | &:focus { 256 | color: #000; 257 | } 258 | } 259 | 260 | // Pagination 261 | .pager li a { 262 | border: 0; 263 | @extend .z-depth-1; 264 | transition: .2s ease-out; 265 | &:hover { 266 | @extend .z-depth-1-half; 267 | } 268 | } 269 | 270 | // Additional buttons colors 271 | .btn-elegant { 272 | background: $elegant-color; 273 | &:hover, 274 | &:focus { 275 | background-color: lighten( $elegant-color, 5%)!important; 276 | } 277 | &.active { 278 | background-color: darken( $elegant-color, 20%)!important; 279 | @extend .z-depth-1-half; 280 | } 281 | } 282 | 283 | .btn-unique { 284 | background: $unique-color-dark; 285 | &:hover, 286 | &:focus { 287 | background-color: lighten( $unique-color-dark, 5%)!important; 288 | } 289 | &.active { 290 | background-color: darken( $unique-color-dark, 20%)!important; 291 | @extend .z-depth-1-half; 292 | } 293 | } 294 | 295 | .btn-pink { 296 | background: #e91e63; 297 | &:hover, 298 | &:focus { 299 | background-color: lighten(#e91e63, 5%)!important; 300 | } 301 | &.active { 302 | background-color: darken(#e91e63, 20%)!important; 303 | @extend .z-depth-1-half; 304 | } 305 | } 306 | 307 | .btn-purple { 308 | background: #4a148c; 309 | &:hover, 310 | &:focus { 311 | background-color: lighten(#4a148c, 5%)!important; 312 | } 313 | &.active { 314 | background-color: darken(#4a148c, 20%)!important; 315 | @extend .z-depth-1-half; 316 | } 317 | } 318 | 319 | .btn-deep-purple { 320 | background: #311b92; 321 | &:hover, 322 | &:focus { 323 | background-color: lighten(#311b92, 5%)!important; 324 | } 325 | &.active { 326 | background-color: darken(#311b92, 20%)!important; 327 | @extend .z-depth-1-half; 328 | } 329 | } 330 | 331 | .btn-indigo { 332 | background: #1a237e; 333 | &:hover, 334 | &:focus { 335 | background-color: lighten(#1a237e, 5%)!important; 336 | } 337 | &.active { 338 | background-color: darken(#1a237e, 20%)!important; 339 | @extend .z-depth-1-half; 340 | } 341 | } 342 | 343 | .btn-cyan { 344 | background: #00acc1; 345 | &:hover, 346 | &:focus { 347 | background-color: lighten(#00acc1, 5%)!important; 348 | } 349 | &.active { 350 | background-color: darken(#00acc1, 20%)!important; 351 | @extend .z-depth-1-half; 352 | } 353 | } 354 | 355 | .btn-light-green { 356 | background: #7cb342; 357 | &:hover, 358 | &:focus { 359 | background-color: lighten(#7cb342, 5%)!important; 360 | } 361 | &.active { 362 | background-color: darken(#7cb342, 20%)!important; 363 | @extend .z-depth-1-half; 364 | } 365 | } 366 | 367 | .btn-dark-green { 368 | background: #007E33; 369 | &:hover, 370 | &:focus { 371 | background-color: lighten(#007E33, 5%)!important; 372 | } 373 | &.active { 374 | background-color: darken(#007E33, 20%)!important; 375 | @extend .z-depth-1-half; 376 | } 377 | } 378 | 379 | .btn-lime { 380 | background: #afb42b; 381 | &:hover, 382 | &:focus { 383 | background-color: lighten(#afb42b, 5%)!important; 384 | } 385 | &.active { 386 | background-color: darken(#afb42b, 20%)!important; 387 | @extend .z-depth-1-half; 388 | } 389 | } 390 | 391 | .btn-yellow { 392 | background: #fbc02d; 393 | &:hover, 394 | &:focus { 395 | background-color: lighten(#fbc02d, 5%)!important; 396 | } 397 | &.active { 398 | background-color: darken(#fbc02d, 20%)!important; 399 | @extend .z-depth-1-half; 400 | } 401 | } 402 | 403 | .btn-amber { 404 | background: #ff6f00; 405 | &:hover, 406 | &:focus { 407 | background-color: lighten(#ff6f00, 5%)!important; 408 | } 409 | &.active { 410 | background-color: darken(#ff6f00, 20%)!important; 411 | @extend .z-depth-1-half; 412 | } 413 | } 414 | 415 | .btn-orange { 416 | background: #e65100; 417 | &:hover, 418 | &:focus { 419 | background-color: lighten(#e65100, 5%)!important; 420 | } 421 | &.active { 422 | background-color: darken(#e65100, 20%)!important; 423 | @extend .z-depth-1-half; 424 | } 425 | } 426 | 427 | .btn-deep-orange { 428 | background: #bf360c; 429 | &:hover, 430 | &:focus { 431 | background-color: lighten(#bf360c, 5%)!important; 432 | } 433 | &.active { 434 | background-color: darken(#bf360c, 20%)!important; 435 | @extend .z-depth-1-half; 436 | } 437 | } 438 | 439 | .btn-brown { 440 | background: #6d4c41; 441 | &:hover, 442 | &:focus { 443 | background-color: lighten(#6d4c41, 5%)!important; 444 | } 445 | &.active { 446 | background-color: darken(#6d4c41, 20%)!important; 447 | @extend .z-depth-1-half; 448 | } 449 | } 450 | 451 | .btn-blue-grey { 452 | background: #607d8b; 453 | &:hover, 454 | &:focus { 455 | background-color: lighten(#607d8b, 5%)!important; 456 | } 457 | &.active { 458 | background-color: darken(#607d8b, 20%)!important; 459 | @extend .z-depth-1-half; 460 | } 461 | } 462 | 463 | .btn-mdb { 464 | background: #45526E; 465 | &:hover, 466 | &:focus { 467 | background-color: lighten(#45526E, 5%)!important; 468 | } 469 | &.active { 470 | background-color: darken(#45526E, 20%)!important; 471 | @extend .z-depth-1-half; 472 | } 473 | } -------------------------------------------------------------------------------- /sass/mdb/free/_buttons.scss: -------------------------------------------------------------------------------- 1 | // BUTTONS 2 | button:focus { 3 | outline: none!important; 4 | } 5 | 6 | .btn { 7 | font-size: 0.8rem; 8 | padding: 0.85rem 2.13rem; 9 | &.btn-lg { 10 | font-size: 0.9rem; 11 | padding: 1rem 2.4rem; 12 | } 13 | &.btn-md { 14 | font-size: 0.7rem; 15 | padding: 0.7rem 1.6rem; 16 | } 17 | &.btn-sm { 18 | font-size: 0.6rem; 19 | padding: 0.5rem 1.6rem; 20 | &.btn-table { 21 | padding: 0.5rem 0.9rem; 22 | } 23 | } 24 | } 25 | 26 | .btn { 27 | border-radius: 2px; 28 | border: 0; 29 | @extend .z-depth-1; 30 | transition: .2s ease-out; 31 | color: #fff!important; 32 | margin: 6px; 33 | white-space: normal !important; 34 | word-wrap: break-word; 35 | text-transform: uppercase; 36 | &:hover { 37 | @extend .z-depth-1-half; 38 | color: #fff; 39 | } 40 | &:active, 41 | &:focus, 42 | &.active { 43 | outline: 0; 44 | color: #fff; 45 | @extend .z-depth-1-half; 46 | } 47 | .fa { 48 | font-size: 1.1rem; 49 | position: relative; 50 | vertical-align: middle; 51 | margin-top: -2px; 52 | &.right { 53 | margin-left: 3px; 54 | } 55 | &.left { 56 | margin-right: 3px; 57 | } 58 | } 59 | } 60 | 61 | .btn-group { 62 | .btn { 63 | margin: 0; 64 | } 65 | } 66 | 67 | .btn-block { 68 | margin: inherit; 69 | } 70 | 71 | // Alert buttons 72 | .btn-secondary { 73 | background-color: $secondary-color; 74 | &:hover, 75 | &:focus, 76 | &:active { 77 | background-color: lighten( $secondary-color, 5%)!important; 78 | color: #fff; 79 | } 80 | &.active { 81 | background-color: darken( $secondary-color, 20%)!important; 82 | @extend .z-depth-1-half; 83 | &:hover { 84 | color: #fff; 85 | } 86 | &:focus { 87 | color: #fff; 88 | } 89 | } 90 | &.dropdown-toggle { 91 | color: #fff!important; 92 | background-color: $secondary-color!important; 93 | @extend .z-depth-1-half; 94 | &:hover { 95 | color: #fff; 96 | background-color: lighten( $secondary-color, 5%)!important; 97 | } 98 | &:focus { 99 | color: #fff; 100 | background-color: $secondary-color; 101 | } 102 | } 103 | } 104 | 105 | .btn-secondary:active:hover { 106 | background-color: lighten( $secondary-color, 5%)!important; 107 | } 108 | 109 | .btn-primary { 110 | background: $primary-color; 111 | &:hover, 112 | &:focus, 113 | &:active { 114 | background-color: lighten( $primary-color, 5%)!important; 115 | } 116 | &.active { 117 | background-color: darken( $primary-color, 20%)!important; 118 | @extend .z-depth-1-half; 119 | } 120 | } 121 | 122 | .btn-default { 123 | background: $default-color; 124 | &:hover, 125 | &:focus, 126 | &:active { 127 | background-color: lighten( $default-color, 5%)!important; 128 | } 129 | &.active { 130 | background-color: darken( $default-color, 20%)!important; 131 | @extend .z-depth-1-half; 132 | } 133 | } 134 | 135 | .btn-success { 136 | background: $success-color; 137 | &:hover, 138 | &:focus, 139 | &:active { 140 | background-color: lighten( $success-color, 2%)!important; 141 | } 142 | &.active { 143 | background-color: darken( $success-color, 20%)!important; 144 | @extend .z-depth-1-half; 145 | } 146 | } 147 | 148 | .btn-info { 149 | background: $info-color; 150 | &:hover, 151 | &:focus { 152 | background-color: lighten( $info-color, 5%)!important; 153 | } 154 | &.active { 155 | background-color: darken( $info-color, 20%)!important; 156 | @extend .z-depth-1-half; 157 | } 158 | } 159 | 160 | .btn-warning { 161 | background: $warning-color-dark; 162 | &:hover, 163 | &:focus { 164 | background-color: lighten( $warning-color-dark, 6%)!important; 165 | } 166 | &.active { 167 | background-color: darken( $warning-color, 20%)!important; 168 | @extend .z-depth-1-half; 169 | } 170 | } 171 | 172 | .btn-danger { 173 | background: $danger-color-dark; 174 | &:hover, 175 | &:focus { 176 | background-color: lighten( $danger-color-dark, 3%)!important; 177 | } 178 | &.active { 179 | background-color: darken( $danger-color-dark, 15%)!important; 180 | @extend .z-depth-1-half; 181 | } 182 | } 183 | 184 | .btn-link { 185 | background-color: transparent; 186 | color: #000!important; 187 | &:hover, 188 | &:focus { 189 | background-color: transparent; 190 | color: #000; 191 | } 192 | } 193 | 194 | // Additional button styles 195 | .btn-outline-primary { 196 | border: 2px solid $primary-color; 197 | color: $primary-color-dark!important; 198 | background-color: transparent; 199 | &:hover, 200 | &:focus, 201 | &:active, 202 | &:active:focus { 203 | color: $primary-color; 204 | border-color: $primary-color; 205 | background-color: transparent; 206 | } 207 | } 208 | 209 | .btn-outline-secondary { 210 | border: 2px solid $secondary-color; 211 | color: $secondary-color-dark!important; 212 | background-color: transparent; 213 | &:hover, 214 | &:focus, 215 | &:active, 216 | &:active:focus { 217 | color: $secondary-color; 218 | border: 2px solid $secondary-color; 219 | background-color: transparent; 220 | } 221 | } 222 | 223 | .btn-outline-default { 224 | background-color: transparent; 225 | border: 2px solid $default-color; 226 | color: $default-color-dark!important; 227 | background-color: transparent; 228 | &:hover, 229 | &:focus, 230 | &:active, 231 | &:active:focus { 232 | color: $default-color; 233 | border-color: $default-color; 234 | background-color:transparent; 235 | } 236 | } 237 | 238 | .btn-outline-success { 239 | border: 2px solid $success-color; 240 | color: $success-color-dark!important; 241 | background-color: transparent; 242 | &:hover, 243 | &:focus, 244 | &:active, 245 | &:active:focus { 246 | color: $success-color; 247 | border-color: $success-color; 248 | background-color: transparent; 249 | } 250 | } 251 | 252 | .btn-outline-info { 253 | border: 2px solid $info-color; 254 | color: $info-color-dark!important; 255 | background-color: transparent; 256 | &:hover, 257 | &:focus, 258 | &:active, 259 | &:active:focus { 260 | color: $info-color; 261 | border-color: $info-color; 262 | background-color: transparent; 263 | 264 | } 265 | } 266 | 267 | .btn-outline-warning { 268 | border: 2px solid $warning-color; 269 | color: $warning-color-dark!important; 270 | background-color: transparent; 271 | &:hover, 272 | &:focus, 273 | &:active, 274 | &:active:focus { 275 | border-color: $warning-color; 276 | color: $warning-color; 277 | background-color: transparent; 278 | } 279 | } 280 | 281 | .btn-outline-danger { 282 | border: 2px solid $danger-color; 283 | color: $danger-color-dark!important; 284 | background-color: transparent; 285 | &:hover, 286 | &:focus, 287 | &:active, 288 | &:active:focus { 289 | color: $danger-color; 290 | border-color: $danger-color; 291 | background-color: transparent; 292 | } 293 | } 294 | 295 | .btn-outline-white { 296 | border: 2px solid #fff; 297 | color: #fff!important; 298 | background-color: transparent; 299 | &:hover, 300 | &:focus, 301 | &:active, 302 | &:active:focus { 303 | color: darken( #fff, 10%); 304 | border-color: #fff; 305 | background-color:transparent; 306 | } 307 | } 308 | 309 | .btn-outline-black { 310 | border: 2px solid #000; 311 | color: #000!important; 312 | background-color: transparent; 313 | &:hover, 314 | &:focus, 315 | &:active, 316 | &:active:focus { 317 | color: #000; 318 | border-color: #000; 319 | background-color: transparent; 320 | } 321 | } 322 | 323 | // Pagination 324 | .pager li a { 325 | border: 0; 326 | @extend .z-depth-1; 327 | transition: .2s ease-out; 328 | &:hover { 329 | @extend .z-depth-1-half; 330 | } 331 | } 332 | 333 | // Additional buttons colors 334 | .btn-elegant { 335 | background: $elegant-color; 336 | &:hover, 337 | &:focus { 338 | background-color: lighten( $elegant-color, 5%)!important; 339 | } 340 | &.active { 341 | background-color: darken( $elegant-color, 20%)!important; 342 | @extend .z-depth-1-half; 343 | } 344 | } 345 | 346 | .btn-unique { 347 | background: $unique-color-dark; 348 | &:hover, 349 | &:focus { 350 | background-color: lighten( $unique-color-dark, 5%)!important; 351 | } 352 | &.active { 353 | background-color: darken( $unique-color-dark, 20%)!important; 354 | @extend .z-depth-1-half; 355 | } 356 | } 357 | 358 | .btn-pink { 359 | background: #e91e63; 360 | &:hover, 361 | &:focus { 362 | background-color: lighten(#e91e63, 5%)!important; 363 | } 364 | &.active { 365 | background-color: darken(#e91e63, 20%)!important; 366 | @extend .z-depth-1-half; 367 | } 368 | } 369 | 370 | .btn-purple { 371 | background: #4a148c; 372 | &:hover, 373 | &:focus { 374 | background-color: lighten(#4a148c, 5%)!important; 375 | } 376 | &.active { 377 | background-color: darken(#4a148c, 20%)!important; 378 | @extend .z-depth-1-half; 379 | } 380 | } 381 | 382 | .btn-deep-purple { 383 | background: #311b92; 384 | &:hover, 385 | &:focus { 386 | background-color: lighten(#311b92, 5%)!important; 387 | } 388 | &.active { 389 | background-color: darken(#311b92, 20%)!important; 390 | @extend .z-depth-1-half; 391 | } 392 | } 393 | 394 | .btn-indigo { 395 | background: #1a237e; 396 | &:hover, 397 | &:focus { 398 | background-color: lighten(#1a237e, 5%)!important; 399 | } 400 | &.active { 401 | background-color: darken(#1a237e, 20%)!important; 402 | @extend .z-depth-1-half; 403 | } 404 | } 405 | 406 | .btn-cyan { 407 | background: #00acc1; 408 | &:hover, 409 | &:focus { 410 | background-color: lighten(#00acc1, 5%)!important; 411 | } 412 | &.active { 413 | background-color: darken(#00acc1, 20%)!important; 414 | @extend .z-depth-1-half; 415 | } 416 | } 417 | 418 | .btn-light-green { 419 | background: #7cb342; 420 | &:hover, 421 | &:focus { 422 | background-color: lighten(#7cb342, 5%)!important; 423 | } 424 | &.active { 425 | background-color: darken(#7cb342, 20%)!important; 426 | @extend .z-depth-1-half; 427 | } 428 | } 429 | 430 | .btn-dark-green { 431 | background: #007E33; 432 | &:hover, 433 | &:focus { 434 | background-color: lighten(#007E33, 5%)!important; 435 | } 436 | &.active { 437 | background-color: darken(#007E33, 20%)!important; 438 | @extend .z-depth-1-half; 439 | } 440 | } 441 | 442 | .btn-lime { 443 | background: #afb42b; 444 | &:hover, 445 | &:focus { 446 | background-color: lighten(#afb42b, 5%)!important; 447 | } 448 | &.active { 449 | background-color: darken(#afb42b, 20%)!important; 450 | @extend .z-depth-1-half; 451 | } 452 | } 453 | 454 | .btn-yellow { 455 | background: #fbc02d; 456 | &:hover, 457 | &:focus { 458 | background-color: lighten(#fbc02d, 5%)!important; 459 | } 460 | &.active { 461 | background-color: darken(#fbc02d, 20%)!important; 462 | @extend .z-depth-1-half; 463 | } 464 | } 465 | 466 | .btn-amber { 467 | background: #ff6f00; 468 | &:hover, 469 | &:focus { 470 | background-color: lighten(#ff6f00, 5%)!important; 471 | } 472 | &.active { 473 | background-color: darken(#ff6f00, 20%)!important; 474 | @extend .z-depth-1-half; 475 | } 476 | } 477 | 478 | .btn-orange { 479 | background: #e65100; 480 | &:hover, 481 | &:focus { 482 | background-color: lighten(#e65100, 5%)!important; 483 | } 484 | &.active { 485 | background-color: darken(#e65100, 20%)!important; 486 | @extend .z-depth-1-half; 487 | } 488 | } 489 | 490 | .btn-deep-orange { 491 | background: #bf360c; 492 | &:hover, 493 | &:focus { 494 | background-color: lighten(#bf360c, 5%)!important; 495 | } 496 | &.active { 497 | background-color: darken(#bf360c, 20%)!important; 498 | @extend .z-depth-1-half; 499 | } 500 | } 501 | 502 | .btn-brown { 503 | background: #6d4c41; 504 | &:hover, 505 | &:focus { 506 | background-color: lighten(#6d4c41, 5%)!important; 507 | } 508 | &.active { 509 | background-color: darken(#6d4c41, 20%)!important; 510 | @extend .z-depth-1-half; 511 | } 512 | } 513 | 514 | .btn-blue-grey { 515 | background: #607d8b; 516 | &:hover, 517 | &:focus { 518 | background-color: lighten(#607d8b, 5%)!important; 519 | } 520 | &.active { 521 | background-color: darken(#607d8b, 20%)!important; 522 | @extend .z-depth-1-half; 523 | } 524 | } 525 | 526 | .btn-mdb { 527 | background: #45526E; 528 | &:hover, 529 | &:focus { 530 | background-color: lighten(#45526E, 5%)!important; 531 | } 532 | &.active { 533 | background-color: darken(#45526E, 20%)!important; 534 | @extend .z-depth-1-half; 535 | } 536 | } 537 | 538 | .btn-secondary { 539 | &.disabled, 540 | &:disabled { 541 | background-color: #aa66cc; 542 | cursor: not-allowed; 543 | pointer-events: auto !important; 544 | } 545 | } 546 | 547 | .btn-split { 548 | padding-left: 0.85rem; 549 | padding-right: 1.25rem; 550 | } -------------------------------------------------------------------------------- /sass/free/data/_prefixer.scss: -------------------------------------------------------------------------------- 1 | //--------------------------------------------------- 2 | // Sass Prefixer 3 | // ------------------------------------------------- 4 | // TABLE OF CONTENTS 5 | // (*) denotes a syntax-sugar helper 6 | // ------------------------------------------------- 7 | // 8 | // animation($args) 9 | // animation-delay($delay) 10 | // animation-direction($direction) 11 | // animation-duration($duration) 12 | // animation-fill-mode($mode) 13 | // animation-iteration-count($count) 14 | // animation-name($name) 15 | // animation-play-state($state) 16 | // animation-timing-function($function) 17 | // background-size($args) 18 | // inner-shadow($args) * 19 | // box-sizing($args) 20 | // border-box() * 21 | // content-box() * 22 | // columns($args) 23 | // column-count($count) 24 | // column-gap($gap) 25 | // column-rule($args) 26 | // column-width($width) 27 | // flexbox() 28 | // flex($args) 29 | // order($args) 30 | // align($args) 31 | // justify-content($args) 32 | // gradient($default,$start,$stop) * 33 | // linear-gradient-top($default,$color1,$stop1,$color2,$stop2,[$color3,$stop3,$color4,$stop4])* 34 | // linear-gradient-left($default,$color1,$stop1,$color2,$stop2,[$color3,$stop3,$color4,$stop4])* 35 | // transform($args) 36 | // transform-origin($args) 37 | // transform-style($style) 38 | // rotate($deg) 39 | // scale($factor) 40 | // translate($x,$y) 41 | // translate3d($x,$y,$z) 42 | // translateHardware($x,$y) * 43 | // text-shadow($args) 44 | // transition($args) 45 | // transition-delay($delay) 46 | // transition-duration($duration) 47 | // transition-property($property) 48 | // transition-timing-function($function) 49 | 50 | 51 | // Animation 52 | 53 | @mixin animation($args) { 54 | -webkit-animation: $args; 55 | -moz-animation: $args; 56 | -ms-animation: $args; 57 | -o-animation: $args; 58 | animation: $args; 59 | } 60 | @mixin animation-delay($delay) { 61 | -webkit-animation-delay: $delay; 62 | -moz-animation-delay: $delay; 63 | -ms-animation-delay: $delay; 64 | -o-animation-delay: $delay; 65 | animation-delay: $delay; 66 | } 67 | @mixin animation-direction($direction) { 68 | -webkit-animation-direction: $direction; 69 | -moz-animation-direction: $direction; 70 | -ms-animation-direction: $direction; 71 | -o-animation-direction: $direction; 72 | } 73 | @mixin animation-duration($duration) { 74 | -webkit-animation-duration: $duration; 75 | -moz-animation-duration: $duration; 76 | -ms-animation-duration: $duration; 77 | -o-animation-duration: $duration; 78 | } 79 | @mixin animation-fill-mode($mode) { 80 | -webkit-animation-fill-mode: $mode; 81 | -moz-animation-fill-mode: $mode; 82 | -ms-animation-fill-mode: $mode; 83 | -o-animation-fill-mode: $mode; 84 | animation-fill-mode: $mode; 85 | } 86 | @mixin animation-iteration-count($count) { 87 | -webkit-animation-iteration-count: $count; 88 | -moz-animation-iteration-count: $count; 89 | -ms-animation-iteration-count: $count; 90 | -o-animation-iteration-count: $count; 91 | animation-iteration-count: $count; 92 | } 93 | @mixin animation-name($name) { 94 | -webkit-animation-name: $name; 95 | -moz-animation-name: $name; 96 | -ms-animation-name: $name; 97 | -o-animation-name: $name; 98 | animation-name: $name; 99 | } 100 | @mixin animation-play-state($state) { 101 | -webkit-animation-play-state: $state; 102 | -moz-animation-play-state: $state; 103 | -ms-animation-play-state: $state; 104 | -o-animation-play-state: $state; 105 | animation-play-state: $state; 106 | } 107 | @mixin animation-timing-function($function) { 108 | -webkit-animation-timing-function: $function; 109 | -moz-animation-timing-function: $function; 110 | -ms-animation-timing-function: $function; 111 | -o-animation-timing-function: $function; 112 | animation-timing-function: $function; 113 | } 114 | 115 | // Keyframes 116 | @mixin keyframes($animation-name) { 117 | @-webkit-keyframes #{$animation-name} { 118 | @content; 119 | } 120 | @-moz-keyframes #{$animation-name} { 121 | @content; 122 | } 123 | @keyframes #{$animation-name} { 124 | @content; 125 | } 126 | } 127 | 128 | // Backface-visibility 129 | 130 | @mixin backface-visibility($args) { 131 | -webkit-backface-visibility: $args; 132 | -moz-backface-visibility: $args; 133 | -ms-backface-visibility: $args; 134 | backface-visibility: $args; 135 | } 136 | 137 | 138 | // Background Size 139 | 140 | @mixin background-size($args) { 141 | -webkit-background-size: $args; 142 | background-size: $args; 143 | } 144 | 145 | // Box Sizing 146 | 147 | @mixin box-sizing($args) { 148 | -webkit-box-sizing: $args; 149 | -moz-box-sizing: $args; 150 | box-sizing: $args; 151 | } 152 | @mixin border-box(){ 153 | @include box-sizing(border-box); 154 | } 155 | @mixin content-box(){ 156 | @include box-sizing(content-box); 157 | } 158 | 159 | 160 | // Columns 161 | 162 | @mixin columns($args) { 163 | -webkit-columns: $args; 164 | -moz-columns: $args; 165 | columns: $args; 166 | } 167 | @mixin column-count($count) { 168 | -webkit-column-count: $count; 169 | -moz-column-count: $count; 170 | column-count: $count; 171 | } 172 | @mixin column-gap($gap) { 173 | -webkit-column-gap: $gap; 174 | -moz-column-gap: $gap; 175 | column-gap: $gap; 176 | } 177 | @mixin column-width($width) { 178 | -webkit-column-width: $width; 179 | -moz-column-width: $width; 180 | column-width: $width; 181 | } 182 | @mixin column-rule($args) { 183 | -webkit-column-rule: $args; 184 | -moz-column-rule: $args; 185 | column-rule: $args; 186 | } 187 | 188 | // Filter 189 | @mixin filter($args) { 190 | -webkit-filter: $args; 191 | -moz-filter: $args; 192 | -o-filter: $args; 193 | -ms-filter: $args; 194 | } 195 | 196 | // Flexbox 197 | @mixin flexbox() { 198 | display: -webkit-box; 199 | display: -moz-box; 200 | display: -ms-flexbox; 201 | display: -webkit-flex; 202 | display: flex; 203 | } 204 | @mixin flex($values) { 205 | -webkit-box-flex: $values; 206 | -moz-box-flex: $values; 207 | -webkit-flex: $values; 208 | -ms-flex: $values; 209 | flex: $values; 210 | } 211 | @mixin order($val) { 212 | -webkit-box-ordinal-group: $val; 213 | -moz-box-ordinal-group: $val; 214 | -ms-flex-order: $val; 215 | -webkit-order: $val; 216 | order: $val; 217 | } 218 | @mixin align($align) { 219 | -webkit-flex-align: $align; 220 | -ms-flex-align: $align; 221 | -webkit-align-items: $align; 222 | align-items: $align; 223 | } 224 | @mixin justify-content($val) { 225 | -webkit-justify-content: $val; 226 | justify-content: $val; 227 | } 228 | // Gradients 229 | 230 | @mixin gradient($default: #F5F5F5, $start: #EEE, $stop: #FFF) { 231 | @include linear-gradient-top($default,$start,0%,$stop,100%); 232 | } 233 | @mixin linear-gradient-top($default,$color1,$stop1,$color2,$stop2) { 234 | background-color: $default; 235 | background-image: -webkit-gradient(linear, left top, left bottom, color-stop($stop1, $color1), color-stop($stop2 $color2)); 236 | background-image: -webkit-linear-gradient(top, $color1 $stop1, $color2 $stop2); 237 | background-image: -moz-linear-gradient(top, $color1 $stop1, $color2 $stop2); 238 | background-image: -ms-linear-gradient(top, $color1 $stop1, $color2 $stop2); 239 | background-image: -o-linear-gradient(top, $color1 $stop1, $color2 $stop2); 240 | background-image: linear-gradient(top, $color1 $stop1, $color2 $stop2); 241 | } 242 | @mixin linear-gradient-top2($default,$color1,$stop1,$color2,$stop2,$color3,$stop3) { 243 | background-color: $default; 244 | background-image: -webkit-gradient(linear, left top, left bottom, color-stop($stop1, $color1), color-stop($stop2 $color2), color-stop($stop3 $color3)); 245 | background-image: -webkit-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3); 246 | background-image: -moz-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3); 247 | background-image: -ms-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3); 248 | background-image: -o-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3); 249 | background-image: linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3); 250 | } 251 | @mixin linear-gradient-top3($default,$color1,$stop1,$color2,$stop2,$color3,$stop3,$color4,$stop4) { 252 | background-color: $default; 253 | background-image: -webkit-gradient(linear, left top, left bottom, color-stop($stop1, $color1), color-stop($stop2 $color2), color-stop($stop3 $color3), color-stop($stop4 $color4)); 254 | background-image: -webkit-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4); 255 | background-image: -moz-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4); 256 | background-image: -ms-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4); 257 | background-image: -o-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4); 258 | background-image: linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4); 259 | } 260 | @mixin linear-gradient-left($default,$color1,$stop1,$color2,$stop2) { 261 | background-color: $default; 262 | background-image: -webkit-gradient(linear, left top, left top, color-stop($stop1, $color1), color-stop($stop2 $color2)); 263 | background-image: -webkit-linear-gradient(left, $color1 $stop1, $color2 $stop2); 264 | background-image: -moz-linear-gradient(left, $color1 $stop1, $color2 $stop2); 265 | background-image: -ms-linear-gradient(left, $color1 $stop1, $color2 $stop2); 266 | background-image: -o-linear-gradient(left, $color1 $stop1, $color2 $stop2); 267 | background-image: linear-gradient(left, $color1 $stop1, $color2 $stop2); 268 | } 269 | @mixin linear-gradient-left2($default,$color1,$stop1,$color2,$stop2,$color3,$stop3) { 270 | background-color: $default; 271 | background-image: -webkit-gradient(linear, left top, left top, color-stop($stop1, $color1), color-stop($stop2 $color2), color-stop($stop3 $color3)); 272 | background-image: -webkit-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3); 273 | background-image: -moz-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3); 274 | background-image: -ms-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3); 275 | background-image: -o-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3); 276 | background-image: linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3); 277 | } 278 | @mixin linear-gradient-left3($default,$color1,$stop1,$color2,$stop2,$color3,$stop3,$color4,$stop4) { 279 | background-color: $default; 280 | background-image: -webkit-gradient(linear, left top, left top, color-stop($stop1, $color1), color-stop($stop2 $color2), color-stop($stop3 $color3), color-stop($stop4 $color4)); 281 | background-image: -webkit-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4); 282 | background-image: -moz-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4); 283 | background-image: -ms-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4); 284 | background-image: -o-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4); 285 | background-image: linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4); 286 | } 287 | 288 | // Text Shadow 289 | 290 | @mixin text-shadow($args) { 291 | text-shadow: $args; 292 | } 293 | 294 | 295 | // Transforms 296 | 297 | @mixin transform($args) { 298 | -webkit-transform: $args; 299 | -moz-transform: $args; 300 | -ms-transform: $args; 301 | -o-transform: $args; 302 | transform: $args; 303 | } 304 | @mixin transform-origin($args) { 305 | -webkit-transform-origin: $args; 306 | -moz-transform-origin: $args; 307 | -ms-transform-origin: $args; 308 | -o-transform-origin: $args; 309 | transform-origin: $args; 310 | } 311 | @mixin transform-style($style) { 312 | -webkit-transform-style: $style; 313 | -moz-transform-style: $style; 314 | -ms-transform-style: $style; 315 | -o-transform-style: $style; 316 | transform-style: $style; 317 | } 318 | @mixin rotate($deg:45deg){ 319 | @include transform(rotate($deg)); 320 | } 321 | @mixin scale($factor:.5){ 322 | @include transform(scale($factor)); 323 | } 324 | @mixin translate($x,$y){ 325 | @include transform(translate($x,$y)); 326 | } 327 | @mixin translate3d($x,$y,$z) { 328 | @include transform(translate3d($x,$y,$z)); 329 | } 330 | @mixin translateHardware($x,$y) { 331 | @include translate($x,$y); 332 | -webkit-transform: translate3d($x,$y,0); 333 | -moz-transform: translate3d($x,$y,0); 334 | -o-transform: translate3d($x,$y,0); 335 | -ms-transform: translate3d($x,$y,0); 336 | transform: translate3d($x,$y,0); 337 | } 338 | 339 | 340 | // Transitions 341 | 342 | @mixin transition($args:200ms) { 343 | -webkit-transition: $args; 344 | -moz-transition: $args; 345 | -o-transition: $args; 346 | -ms-transition: $args; 347 | transition: $args; 348 | } 349 | @mixin transition-delay($delay:0) { 350 | -webkit-transition-delay: $delay; 351 | -moz-transition-delay: $delay; 352 | -o-transition-delay: $delay; 353 | -ms-transition-delay: $delay; 354 | transition-delay: $delay; 355 | } 356 | @mixin transition-duration($duration:200ms) { 357 | -webkit-transition-duration: $duration; 358 | -moz-transition-duration: $duration; 359 | -o-transition-duration: $duration; 360 | -ms-transition-duration: $duration; 361 | transition-duration: $duration; 362 | } 363 | @mixin transition-property($property:all) { 364 | -webkit-transition-property: $property; 365 | -moz-transition-property: $property; 366 | -o-transition-property: $property; 367 | -ms-transition-property: $property; 368 | transition-property: $property; 369 | } 370 | @mixin transition-timing-function($function:ease) { 371 | -webkit-transition-timing-function: $function; 372 | -moz-transition-timing-function: $function; 373 | -o-transition-timing-function: $function; 374 | -ms-transition-timing-function: $function; 375 | transition-timing-function: $function; 376 | } 377 | -------------------------------------------------------------------------------- /sass/mdb/free/data/_prefixer.scss: -------------------------------------------------------------------------------- 1 | //--------------------------------------------------- 2 | // Sass Prefixer 3 | // ------------------------------------------------- 4 | // TABLE OF CONTENTS 5 | // (*) denotes a syntax-sugar helper 6 | // ------------------------------------------------- 7 | // 8 | // animation($args) 9 | // animation-delay($delay) 10 | // animation-direction($direction) 11 | // animation-duration($duration) 12 | // animation-fill-mode($mode) 13 | // animation-iteration-count($count) 14 | // animation-name($name) 15 | // animation-play-state($state) 16 | // animation-timing-function($function) 17 | // background-size($args) 18 | // inner-shadow($args) * 19 | // box-sizing($args) 20 | // border-box() * 21 | // content-box() * 22 | // columns($args) 23 | // column-count($count) 24 | // column-gap($gap) 25 | // column-rule($args) 26 | // column-width($width) 27 | // flexbox() 28 | // flex($args) 29 | // order($args) 30 | // align($args) 31 | // justify-content($args) 32 | // gradient($default,$start,$stop) * 33 | // linear-gradient-top($default,$color1,$stop1,$color2,$stop2,[$color3,$stop3,$color4,$stop4])* 34 | // linear-gradient-left($default,$color1,$stop1,$color2,$stop2,[$color3,$stop3,$color4,$stop4])* 35 | // transform($args) 36 | // transform-origin($args) 37 | // transform-style($style) 38 | // rotate($deg) 39 | // scale($factor) 40 | // translate($x,$y) 41 | // translate3d($x,$y,$z) 42 | // translateHardware($x,$y) * 43 | // text-shadow($args) 44 | // transition($args) 45 | // transition-delay($delay) 46 | // transition-duration($duration) 47 | // transition-property($property) 48 | // transition-timing-function($function) 49 | 50 | 51 | // Animation 52 | 53 | @mixin animation($args) { 54 | -webkit-animation: $args; 55 | -moz-animation: $args; 56 | -ms-animation: $args; 57 | -o-animation: $args; 58 | animation: $args; 59 | } 60 | @mixin animation-delay($delay) { 61 | -webkit-animation-delay: $delay; 62 | -moz-animation-delay: $delay; 63 | -ms-animation-delay: $delay; 64 | -o-animation-delay: $delay; 65 | animation-delay: $delay; 66 | } 67 | @mixin animation-direction($direction) { 68 | -webkit-animation-direction: $direction; 69 | -moz-animation-direction: $direction; 70 | -ms-animation-direction: $direction; 71 | -o-animation-direction: $direction; 72 | } 73 | @mixin animation-duration($duration) { 74 | -webkit-animation-duration: $duration; 75 | -moz-animation-duration: $duration; 76 | -ms-animation-duration: $duration; 77 | -o-animation-duration: $duration; 78 | } 79 | @mixin animation-fill-mode($mode) { 80 | -webkit-animation-fill-mode: $mode; 81 | -moz-animation-fill-mode: $mode; 82 | -ms-animation-fill-mode: $mode; 83 | -o-animation-fill-mode: $mode; 84 | animation-fill-mode: $mode; 85 | } 86 | @mixin animation-iteration-count($count) { 87 | -webkit-animation-iteration-count: $count; 88 | -moz-animation-iteration-count: $count; 89 | -ms-animation-iteration-count: $count; 90 | -o-animation-iteration-count: $count; 91 | animation-iteration-count: $count; 92 | } 93 | @mixin animation-name($name) { 94 | -webkit-animation-name: $name; 95 | -moz-animation-name: $name; 96 | -ms-animation-name: $name; 97 | -o-animation-name: $name; 98 | animation-name: $name; 99 | } 100 | @mixin animation-play-state($state) { 101 | -webkit-animation-play-state: $state; 102 | -moz-animation-play-state: $state; 103 | -ms-animation-play-state: $state; 104 | -o-animation-play-state: $state; 105 | animation-play-state: $state; 106 | } 107 | @mixin animation-timing-function($function) { 108 | -webkit-animation-timing-function: $function; 109 | -moz-animation-timing-function: $function; 110 | -ms-animation-timing-function: $function; 111 | -o-animation-timing-function: $function; 112 | animation-timing-function: $function; 113 | } 114 | 115 | // Keyframes 116 | @mixin keyframes($animation-name) { 117 | @-webkit-keyframes #{$animation-name} { 118 | @content; 119 | } 120 | @-moz-keyframes #{$animation-name} { 121 | @content; 122 | } 123 | @keyframes #{$animation-name} { 124 | @content; 125 | } 126 | } 127 | 128 | // Backface-visibility 129 | 130 | @mixin backface-visibility($args) { 131 | -webkit-backface-visibility: $args; 132 | -moz-backface-visibility: $args; 133 | -ms-backface-visibility: $args; 134 | backface-visibility: $args; 135 | } 136 | 137 | 138 | // Background Size 139 | 140 | @mixin background-size($args) { 141 | -webkit-background-size: $args; 142 | background-size: $args; 143 | } 144 | 145 | // Box Sizing 146 | 147 | @mixin box-sizing($args) { 148 | -webkit-box-sizing: $args; 149 | -moz-box-sizing: $args; 150 | box-sizing: $args; 151 | } 152 | @mixin border-box(){ 153 | @include box-sizing(border-box); 154 | } 155 | @mixin content-box(){ 156 | @include box-sizing(content-box); 157 | } 158 | 159 | 160 | // Columns 161 | 162 | @mixin columns($args) { 163 | -webkit-columns: $args; 164 | -moz-columns: $args; 165 | columns: $args; 166 | } 167 | @mixin column-count($count) { 168 | -webkit-column-count: $count; 169 | -moz-column-count: $count; 170 | column-count: $count; 171 | } 172 | @mixin column-gap($gap) { 173 | -webkit-column-gap: $gap; 174 | -moz-column-gap: $gap; 175 | column-gap: $gap; 176 | } 177 | @mixin column-width($width) { 178 | -webkit-column-width: $width; 179 | -moz-column-width: $width; 180 | column-width: $width; 181 | } 182 | @mixin column-rule($args) { 183 | -webkit-column-rule: $args; 184 | -moz-column-rule: $args; 185 | column-rule: $args; 186 | } 187 | 188 | // Filter 189 | @mixin filter($args) { 190 | -webkit-filter: $args; 191 | -moz-filter: $args; 192 | -o-filter: $args; 193 | -ms-filter: $args; 194 | } 195 | 196 | // Flexbox 197 | @mixin flexbox() { 198 | display: -webkit-box; 199 | display: -moz-box; 200 | display: -ms-flexbox; 201 | display: -webkit-flex; 202 | display: flex; 203 | } 204 | @mixin flex($values) { 205 | -webkit-box-flex: $values; 206 | -moz-box-flex: $values; 207 | -webkit-flex: $values; 208 | -ms-flex: $values; 209 | flex: $values; 210 | } 211 | @mixin order($val) { 212 | -webkit-box-ordinal-group: $val; 213 | -moz-box-ordinal-group: $val; 214 | -ms-flex-order: $val; 215 | -webkit-order: $val; 216 | order: $val; 217 | } 218 | @mixin align($align) { 219 | -webkit-flex-align: $align; 220 | -ms-flex-align: $align; 221 | -webkit-align-items: $align; 222 | align-items: $align; 223 | } 224 | @mixin justify-content($val) { 225 | -webkit-justify-content: $val; 226 | justify-content: $val; 227 | } 228 | // Gradients 229 | 230 | @mixin gradient($default: #F5F5F5, $start: #EEE, $stop: #FFF) { 231 | @include linear-gradient-top($default,$start,0%,$stop,100%); 232 | } 233 | @mixin linear-gradient-top($default,$color1,$stop1,$color2,$stop2) { 234 | background-color: $default; 235 | background-image: -webkit-gradient(linear, left top, left bottom, color-stop($stop1, $color1), color-stop($stop2 $color2)); 236 | background-image: -webkit-linear-gradient(top, $color1 $stop1, $color2 $stop2); 237 | background-image: -moz-linear-gradient(top, $color1 $stop1, $color2 $stop2); 238 | background-image: -ms-linear-gradient(top, $color1 $stop1, $color2 $stop2); 239 | background-image: -o-linear-gradient(top, $color1 $stop1, $color2 $stop2); 240 | background-image: linear-gradient(top, $color1 $stop1, $color2 $stop2); 241 | } 242 | @mixin linear-gradient-top2($default,$color1,$stop1,$color2,$stop2,$color3,$stop3) { 243 | background-color: $default; 244 | background-image: -webkit-gradient(linear, left top, left bottom, color-stop($stop1, $color1), color-stop($stop2 $color2), color-stop($stop3 $color3)); 245 | background-image: -webkit-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3); 246 | background-image: -moz-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3); 247 | background-image: -ms-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3); 248 | background-image: -o-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3); 249 | background-image: linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3); 250 | } 251 | @mixin linear-gradient-top3($default,$color1,$stop1,$color2,$stop2,$color3,$stop3,$color4,$stop4) { 252 | background-color: $default; 253 | background-image: -webkit-gradient(linear, left top, left bottom, color-stop($stop1, $color1), color-stop($stop2 $color2), color-stop($stop3 $color3), color-stop($stop4 $color4)); 254 | background-image: -webkit-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4); 255 | background-image: -moz-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4); 256 | background-image: -ms-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4); 257 | background-image: -o-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4); 258 | background-image: linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4); 259 | } 260 | @mixin linear-gradient-left($default,$color1,$stop1,$color2,$stop2) { 261 | background-color: $default; 262 | background-image: -webkit-gradient(linear, left top, left top, color-stop($stop1, $color1), color-stop($stop2 $color2)); 263 | background-image: -webkit-linear-gradient(left, $color1 $stop1, $color2 $stop2); 264 | background-image: -moz-linear-gradient(left, $color1 $stop1, $color2 $stop2); 265 | background-image: -ms-linear-gradient(left, $color1 $stop1, $color2 $stop2); 266 | background-image: -o-linear-gradient(left, $color1 $stop1, $color2 $stop2); 267 | background-image: linear-gradient(left, $color1 $stop1, $color2 $stop2); 268 | } 269 | @mixin linear-gradient-left2($default,$color1,$stop1,$color2,$stop2,$color3,$stop3) { 270 | background-color: $default; 271 | background-image: -webkit-gradient(linear, left top, left top, color-stop($stop1, $color1), color-stop($stop2 $color2), color-stop($stop3 $color3)); 272 | background-image: -webkit-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3); 273 | background-image: -moz-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3); 274 | background-image: -ms-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3); 275 | background-image: -o-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3); 276 | background-image: linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3); 277 | } 278 | @mixin linear-gradient-left3($default,$color1,$stop1,$color2,$stop2,$color3,$stop3,$color4,$stop4) { 279 | background-color: $default; 280 | background-image: -webkit-gradient(linear, left top, left top, color-stop($stop1, $color1), color-stop($stop2 $color2), color-stop($stop3 $color3), color-stop($stop4 $color4)); 281 | background-image: -webkit-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4); 282 | background-image: -moz-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4); 283 | background-image: -ms-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4); 284 | background-image: -o-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4); 285 | background-image: linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4); 286 | } 287 | 288 | // Text Shadow 289 | 290 | @mixin text-shadow($args) { 291 | text-shadow: $args; 292 | } 293 | 294 | 295 | // Transforms 296 | 297 | @mixin transform($args) { 298 | -webkit-transform: $args; 299 | -moz-transform: $args; 300 | -ms-transform: $args; 301 | -o-transform: $args; 302 | transform: $args; 303 | } 304 | @mixin transform-origin($args) { 305 | -webkit-transform-origin: $args; 306 | -moz-transform-origin: $args; 307 | -ms-transform-origin: $args; 308 | -o-transform-origin: $args; 309 | transform-origin: $args; 310 | } 311 | @mixin transform-style($style) { 312 | -webkit-transform-style: $style; 313 | -moz-transform-style: $style; 314 | -ms-transform-style: $style; 315 | -o-transform-style: $style; 316 | transform-style: $style; 317 | } 318 | @mixin rotate($deg:45deg){ 319 | @include transform(rotate($deg)); 320 | } 321 | @mixin scale($factor:.5){ 322 | @include transform(scale($factor)); 323 | } 324 | @mixin translate($x,$y){ 325 | @include transform(translate($x,$y)); 326 | } 327 | @mixin translate3d($x,$y,$z) { 328 | @include transform(translate3d($x,$y,$z)); 329 | } 330 | @mixin translateHardware($x,$y) { 331 | @include translate($x,$y); 332 | -webkit-transform: translate3d($x,$y,0); 333 | -moz-transform: translate3d($x,$y,0); 334 | -o-transform: translate3d($x,$y,0); 335 | -ms-transform: translate3d($x,$y,0); 336 | transform: translate3d($x,$y,0); 337 | } 338 | 339 | 340 | // Transitions 341 | 342 | @mixin transition($args:200ms) { 343 | -webkit-transition: $args; 344 | -moz-transition: $args; 345 | -o-transition: $args; 346 | -ms-transition: $args; 347 | transition: $args; 348 | } 349 | @mixin transition-delay($delay:0) { 350 | -webkit-transition-delay: $delay; 351 | -moz-transition-delay: $delay; 352 | -o-transition-delay: $delay; 353 | -ms-transition-delay: $delay; 354 | transition-delay: $delay; 355 | } 356 | @mixin transition-duration($duration:200ms) { 357 | -webkit-transition-duration: $duration; 358 | -moz-transition-duration: $duration; 359 | -o-transition-duration: $duration; 360 | -ms-transition-duration: $duration; 361 | transition-duration: $duration; 362 | } 363 | @mixin transition-property($property:all) { 364 | -webkit-transition-property: $property; 365 | -moz-transition-property: $property; 366 | -o-transition-property: $property; 367 | -ms-transition-property: $property; 368 | transition-property: $property; 369 | } 370 | @mixin transition-timing-function($function:ease) { 371 | -webkit-transition-timing-function: $function; 372 | -moz-transition-timing-function: $function; 373 | -o-transition-timing-function: $function; 374 | -ms-transition-timing-function: $function; 375 | transition-timing-function: $function; 376 | } 377 | --------------------------------------------------------------------------------