├── .babelrc ├── .circleci └── config.yml ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .firebaserc ├── .gitignore ├── .postcssrc.js ├── .travis.yml ├── CHANGELOG.md ├── LICENSE ├── README.md ├── build ├── build.js ├── check-versions.js ├── dev-client.js ├── dev-server.js ├── utils.js ├── vue-loader.conf.js ├── webpack.base.conf.js ├── webpack.dev.conf.js ├── webpack.prod.conf.js └── webpack.test.conf.js ├── config ├── dev.env.js ├── index.js ├── prod.env.js └── test.env.js ├── firebase.json ├── index.html ├── package.json ├── src ├── App.vue ├── assets │ ├── images │ │ ├── apple-icon.png │ │ ├── cover.jpeg │ │ ├── faces │ │ │ └── marc.jpg │ │ ├── favicon.png │ │ ├── mask.png │ │ ├── new_logo.png │ │ ├── sidebar-1.jpg │ │ ├── sidebar-2.jpg │ │ ├── sidebar-3.jpg │ │ ├── sidebar-4.jpg │ │ └── tim_80x80.png │ ├── logo.png │ └── sass │ │ ├── material-dashboard.scss │ │ └── md │ │ ├── _alerts.scss │ │ ├── _buttons.scss │ │ ├── _cards.scss │ │ ├── _chartist.scss │ │ ├── _checkboxes.scss │ │ ├── _colors.scss │ │ ├── _dialogs.scss │ │ ├── _dropdown.scss │ │ ├── _footers.scss │ │ ├── _forms.scss │ │ ├── _inputs-size.scss │ │ ├── _inputs.scss │ │ ├── _misc.scss │ │ ├── _mixins.scss │ │ ├── _navbars.scss │ │ ├── _pills.scss │ │ ├── _popups.scss │ │ ├── _radios.scss │ │ ├── _responsive.scss │ │ ├── _ripples.scss │ │ ├── _shadows.scss │ │ ├── _sidebar-and-main-panel.scss │ │ ├── _tables.scss │ │ ├── _tabs.scss │ │ ├── _togglebutton.scss │ │ ├── _typography.scss │ │ ├── _variables.scss │ │ ├── mixins │ │ ├── _chartist.scss │ │ ├── _transparency.scss │ │ └── _vendor-prefixes.scss │ │ └── plugins │ │ ├── _animate.scss │ │ └── _plugin-nouislider.scss ├── components │ ├── Dashboard │ │ └── index.vue │ ├── Footer │ │ └── index.vue │ ├── GeneralViews │ │ └── NotFound.vue │ ├── Icons │ │ └── index.vue │ ├── Maps │ │ └── index.vue │ ├── Navigation │ │ ├── index.vue │ │ ├── navbar-right.vue │ │ └── navbar-search.vue │ ├── Notifications │ │ └── index.vue │ ├── Sidebar │ │ ├── index.vue │ │ └── item.vue │ ├── TableList │ │ └── index.vue │ ├── Typography │ │ └── index.vue │ └── UserProfile │ │ └── index.vue ├── core │ └── components │ │ ├── index.js │ │ ├── mdBlockquote │ │ └── index.vue │ │ ├── mdButton │ │ └── index.vue │ │ ├── mdCard │ │ └── index.vue │ │ ├── mdChartWidget │ │ └── index.vue │ │ ├── mdFormGroupInput │ │ └── index.vue │ │ ├── mdNotification │ │ └── index.vue │ │ ├── mdNotifications │ │ ├── index.vue │ │ └── install.js │ │ ├── mdStatsWidget │ │ └── index.vue │ │ ├── mdTab │ │ ├── constants.js │ │ ├── index.vue │ │ ├── nav-tab.vue │ │ ├── nav-tabs.vue │ │ └── tab-content.vue │ │ └── mdTable │ │ └── index.vue ├── main.js └── router │ └── index.js ├── static ├── CNAME ├── js │ ├── jquery-3.1.0.min.js │ └── material.min.js └── vue-material-dashboard-1.png ├── test ├── e2e │ ├── custom-assertions │ │ └── elementCount.js │ ├── nightwatch.conf.js │ ├── runner.js │ └── specs │ │ └── test.js └── unit │ ├── .eslintrc │ ├── helpers │ └── mount.js │ ├── index.js │ ├── karma.conf.js │ └── specs │ └── Dashboard.spec.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-runtime"], 12 | "env": { 13 | "test": { 14 | "presets": ["env", "stage-2"], 15 | "plugins": ["istanbul"] 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | jobs: 3 | build: 4 | working_directory: ~/vue-material-dashboard 5 | 6 | docker: 7 | - image: circleci/node:7.10 8 | 9 | steps: 10 | - checkout 11 | # Download and cache dependencies 12 | - restore_cache: 13 | keys: 14 | - v1-dependencies-{{ checksum "package.json" }} 15 | # fallback to using the latest cache if no exact match is found 16 | - v1-dependencies- 17 | 18 | - run: yarn install 19 | 20 | - save_cache: 21 | paths: 22 | - ./node_modules 23 | key: v1-dependencies-{{ checksum "package.json" }} 24 | 25 | # run tests! 26 | - run: yarn test 27 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | build/*.js 2 | config/*.js 3 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | // http://eslint.org/docs/user-guide/configuring 2 | 3 | module.exports = { 4 | root: true, 5 | parser: 'babel-eslint', 6 | parserOptions: { 7 | sourceType: 'module' 8 | }, 9 | env: { 10 | browser: true, 11 | }, 12 | // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style 13 | extends: 'standard', 14 | // required to lint *.vue files 15 | plugins: [ 16 | 'html' 17 | ], 18 | // add your custom rules here 19 | 'rules': { 20 | // allow paren-less arrow functions 21 | 'arrow-parens': 0, 22 | // allow async-await 23 | 'generator-star-spacing': 0, 24 | // allow debugger during development 25 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, 26 | 'space-before-function-paren': 0, 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /.firebaserc: -------------------------------------------------------------------------------- 1 | { 2 | "projects": { 3 | "default": "vue-material-dashboard" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | .DS_Store 61 | node_modules/ 62 | dist/ 63 | npm-debug.log* 64 | yarn-debug.log* 65 | yarn-error.log* 66 | test/unit/coverage 67 | test/e2e/reports 68 | selenium-debug.log 69 | 70 | # Editor directories and files 71 | .idea 72 | *.suo 73 | *.ntvs* 74 | *.njsproj 75 | *.sln 76 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | // to edit target browsers: use "browserlist" field in package.json 6 | "autoprefixer": {} 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: required 2 | dist: trusty 3 | addons: 4 | apt: 5 | sources: 6 | - google-chrome 7 | packages: 8 | - google-chrome-stable 9 | cache: 10 | directories: 11 | - node_modules 12 | language: node_js 13 | node_js: 14 | - "7" 15 | before_install: 16 | - "node --version" 17 | - export DISPLAY=:99.0 18 | - sh -e /etc/init.d/xvfb start 19 | services: 20 | - mongodb 21 | env: 22 | - ENV_OPTS=0 23 | - PHANTOMJS_BIN=./node_modules/.bin/phantomjs 24 | group: deprecated-2017Q2 25 | os: linux 26 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Logs 2 | ## v1.0.0 - Jul 13, 2017 3 | Stable Release 4 | 5 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Duong Tuan Luc 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | Build Status 3 | Version 4 | License 5 |

6 | 7 | # vue-material-dashboard 8 | 9 | > Vue Material Dashboard - Inspired by Material Dashboard of Creative Tim. 10 | 11 | This project is using `Vue 2` and based on HTML version of [Material Dashboard](https://www.creative-tim.com/product/material-dashboard) which designed by [Creative Tim](https://www.creative-tim.com/) 12 | 13 | Check the [LIVE DEMO HERE](http://vue-material-dashboard.ltv.vn/) or [HEROKU HERE](https://vue-material-dashboard.herokuapp.com/) 14 | 15 |

16 | Screenshot 17 |

18 | 19 | ## Notes 20 | 21 | ## Build Setup 22 | 23 | ``` bash 24 | # install dependencies 25 | npm install 26 | 27 | # serve with hot reload at localhost:8080 28 | npm run dev 29 | 30 | # build for production with minification 31 | npm run build 32 | 33 | # build for production and view the bundle analyzer report 34 | npm run build --report 35 | 36 | # run unit tests 37 | npm run unit 38 | 39 | # run e2e tests 40 | npm run e2e 41 | 42 | # run all tests 43 | npm test 44 | ``` 45 | 46 | Feel free to use `yarn` instead of `npm`. 47 | 48 | For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). 49 | 50 | ## Notes 51 | The master branch is using `pug` engine. If you are looking for `html` version, please fetch the [HTML](https://github.com/lucduong/vue-material-dashboard/tree/html) branch. 52 | 53 | Special thanks to @[Nguyen San](https://github.com/sandangel) for this contribution. 54 | 55 | ## Contributors 56 | @[Nguyen San](https://github.com/sandangel) 57 | 58 | -------------------------------------------------------------------------------- /build/build.js: -------------------------------------------------------------------------------- 1 | require('./check-versions')() 2 | 3 | process.env.NODE_ENV = 'production' 4 | 5 | var ora = require('ora') 6 | var rm = require('rimraf') 7 | var path = require('path') 8 | var chalk = require('chalk') 9 | var webpack = require('webpack') 10 | var config = require('../config') 11 | var webpackConfig = require('./webpack.prod.conf') 12 | 13 | var spinner = ora('building for production...') 14 | spinner.start() 15 | 16 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { 17 | if (err) throw err 18 | webpack(webpackConfig, function (err, stats) { 19 | spinner.stop() 20 | if (err) throw err 21 | process.stdout.write(stats.toString({ 22 | colors: true, 23 | modules: false, 24 | children: false, 25 | chunks: false, 26 | chunkModules: false 27 | }) + '\n\n') 28 | 29 | console.log(chalk.cyan(' Build complete.\n')) 30 | console.log(chalk.yellow( 31 | ' Tip: built files are meant to be served over an HTTP server.\n' + 32 | ' Opening index.html over file:// won\'t work.\n' 33 | )) 34 | }) 35 | }) 36 | -------------------------------------------------------------------------------- /build/check-versions.js: -------------------------------------------------------------------------------- 1 | var chalk = require('chalk') 2 | var semver = require('semver') 3 | var packageConfig = require('../package.json') 4 | var shell = require('shelljs') 5 | function exec (cmd) { 6 | return require('child_process').execSync(cmd).toString().trim() 7 | } 8 | 9 | var versionRequirements = [ 10 | { 11 | name: 'node', 12 | currentVersion: semver.clean(process.version), 13 | versionRequirement: packageConfig.engines.node 14 | }, 15 | ] 16 | 17 | if (shell.which('npm')) { 18 | versionRequirements.push({ 19 | name: 'npm', 20 | currentVersion: exec('npm --version'), 21 | versionRequirement: packageConfig.engines.npm 22 | }) 23 | } 24 | 25 | module.exports = function () { 26 | var warnings = [] 27 | for (var i = 0; i < versionRequirements.length; i++) { 28 | var mod = versionRequirements[i] 29 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { 30 | warnings.push(mod.name + ': ' + 31 | chalk.red(mod.currentVersion) + ' should be ' + 32 | chalk.green(mod.versionRequirement) 33 | ) 34 | } 35 | } 36 | 37 | if (warnings.length) { 38 | console.log('') 39 | console.log(chalk.yellow('To use this template, you must update following to modules:')) 40 | console.log() 41 | for (var i = 0; i < warnings.length; i++) { 42 | var warning = warnings[i] 43 | console.log(' ' + warning) 44 | } 45 | console.log() 46 | process.exit(1) 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /build/dev-client.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | require('eventsource-polyfill') 3 | var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true') 4 | 5 | hotClient.subscribe(function (event) { 6 | if (event.action === 'reload') { 7 | window.location.reload() 8 | } 9 | }) 10 | -------------------------------------------------------------------------------- /build/dev-server.js: -------------------------------------------------------------------------------- 1 | require('./check-versions')() 2 | 3 | var config = require('../config') 4 | if (!process.env.NODE_ENV) { 5 | process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV) 6 | } 7 | 8 | var opn = require('opn') 9 | var path = require('path') 10 | var express = require('express') 11 | var webpack = require('webpack') 12 | var proxyMiddleware = require('http-proxy-middleware') 13 | var webpackConfig = process.env.NODE_ENV === 'testing' 14 | ? require('./webpack.prod.conf') 15 | : require('./webpack.dev.conf') 16 | 17 | // default port where dev server listens for incoming traffic 18 | var port = process.env.PORT || config.dev.port 19 | // automatically open browser, if not set will be false 20 | var autoOpenBrowser = !!config.dev.autoOpenBrowser 21 | // Define HTTP proxies to your custom API backend 22 | // https://github.com/chimurai/http-proxy-middleware 23 | var proxyTable = config.dev.proxyTable 24 | 25 | var app = express() 26 | var compiler = webpack(webpackConfig) 27 | 28 | var devMiddleware = require('webpack-dev-middleware')(compiler, { 29 | publicPath: webpackConfig.output.publicPath, 30 | quiet: true 31 | }) 32 | 33 | var hotMiddleware = require('webpack-hot-middleware')(compiler, { 34 | log: () => {} 35 | }) 36 | // force page reload when html-webpack-plugin template changes 37 | compiler.plugin('compilation', function (compilation) { 38 | compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) { 39 | hotMiddleware.publish({ action: 'reload' }) 40 | cb() 41 | }) 42 | }) 43 | 44 | // proxy api requests 45 | Object.keys(proxyTable).forEach(function (context) { 46 | var options = proxyTable[context] 47 | if (typeof options === 'string') { 48 | options = { target: options } 49 | } 50 | app.use(proxyMiddleware(options.filter || context, options)) 51 | }) 52 | 53 | // handle fallback for HTML5 history API 54 | app.use(require('connect-history-api-fallback')()) 55 | 56 | // serve webpack bundle output 57 | app.use(devMiddleware) 58 | 59 | // enable hot-reload and state-preserving 60 | // compilation error display 61 | app.use(hotMiddleware) 62 | 63 | // serve pure static assets 64 | var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory) 65 | app.use(staticPath, express.static('./static')) 66 | 67 | var uri = 'http://localhost:' + port 68 | 69 | var _resolve 70 | var readyPromise = new Promise(resolve => { 71 | _resolve = resolve 72 | }) 73 | 74 | console.log('> Starting dev server...') 75 | devMiddleware.waitUntilValid(() => { 76 | console.log('> Listening at ' + uri + '\n') 77 | // when env is testing, don't need open it 78 | if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') { 79 | opn(uri) 80 | } 81 | _resolve() 82 | }) 83 | 84 | var server = app.listen(port) 85 | 86 | module.exports = { 87 | ready: readyPromise, 88 | close: () => { 89 | server.close() 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /build/utils.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var config = require('../config') 3 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 4 | 5 | exports.assetsPath = function (_path) { 6 | var assetsSubDirectory = process.env.NODE_ENV === 'production' 7 | ? config.build.assetsSubDirectory 8 | : config.dev.assetsSubDirectory 9 | return path.posix.join(assetsSubDirectory, _path) 10 | } 11 | 12 | exports.cssLoaders = function (options) { 13 | options = options || {} 14 | 15 | var cssLoader = { 16 | loader: 'css-loader', 17 | options: { 18 | minimize: process.env.NODE_ENV === 'production', 19 | sourceMap: options.sourceMap 20 | } 21 | } 22 | 23 | // generate loader string to be used with extract text plugin 24 | function generateLoaders (loader, loaderOptions) { 25 | var loaders = [cssLoader] 26 | if (loader) { 27 | loaders.push({ 28 | loader: loader + '-loader', 29 | options: Object.assign({}, loaderOptions, { 30 | sourceMap: options.sourceMap 31 | }) 32 | }) 33 | } 34 | 35 | // Extract CSS when that option is specified 36 | // (which is the case during production build) 37 | if (options.extract) { 38 | return ExtractTextPlugin.extract({ 39 | use: loaders, 40 | fallback: 'vue-style-loader' 41 | }) 42 | } else { 43 | return ['vue-style-loader'].concat(loaders) 44 | } 45 | } 46 | 47 | // https://vue-loader.vuejs.org/en/configurations/extract-css.html 48 | return { 49 | css: generateLoaders(), 50 | postcss: generateLoaders(), 51 | less: generateLoaders('less'), 52 | sass: generateLoaders('sass', { indentedSyntax: true }), 53 | scss: generateLoaders('sass'), 54 | stylus: generateLoaders('stylus'), 55 | styl: generateLoaders('stylus') 56 | } 57 | } 58 | 59 | // Generate loaders for standalone style files (outside of .vue) 60 | exports.styleLoaders = function (options) { 61 | var output = [] 62 | var loaders = exports.cssLoaders(options) 63 | for (var extension in loaders) { 64 | var loader = loaders[extension] 65 | output.push({ 66 | test: new RegExp('\\.' + extension + '$'), 67 | use: loader 68 | }) 69 | } 70 | return output 71 | } 72 | -------------------------------------------------------------------------------- /build/vue-loader.conf.js: -------------------------------------------------------------------------------- 1 | var utils = require('./utils') 2 | var config = require('../config') 3 | var isProduction = process.env.NODE_ENV === 'production' 4 | 5 | module.exports = { 6 | loaders: { 7 | css: utils.cssLoaders({ 8 | sourceMap: isProduction 9 | ? config.build.productionSourceMap 10 | : config.dev.cssSourceMap, 11 | extract: isProduction 12 | }) 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var utils = require('./utils') 3 | var config = require('../config') 4 | var vueLoaderConfig = require('./vue-loader.conf') 5 | 6 | function resolve(dir) { 7 | return path.join(__dirname, '..', dir) 8 | } 9 | 10 | module.exports = { 11 | entry: { 12 | app: './src/main.js' 13 | }, 14 | output: { 15 | path: config.build.assetsRoot, 16 | filename: '[name].js', 17 | publicPath: process.env.NODE_ENV === 'production' 18 | ? config.build.assetsPublicPath 19 | : config.dev.assetsPublicPaths 20 | }, 21 | resolve: { 22 | extensions: ['.js', '.vue', '.json'], 23 | alias: { 24 | "images": path.resolve(__dirname, "..", "src", "assets", "images"), 25 | 'vue$': 'vue/dist/vue.esm.js', 26 | '@': resolve('src'), 27 | } 28 | }, 29 | module: { 30 | rules: [ 31 | { 32 | test: /\.(js|vue)$/, 33 | loader: 'eslint-loader', 34 | enforce: 'pre', 35 | include: [resolve('src'), resolve('test')], 36 | exclude: [resolve('src/assets/js'), resolve('node_modules')], 37 | options: { 38 | formatter: require('eslint-friendly-formatter') 39 | } 40 | }, 41 | { 42 | test: /\.vue$/, 43 | loader: 'vue-loader', 44 | options: vueLoaderConfig 45 | }, 46 | { 47 | test: /\.js$/, 48 | loader: 'babel-loader', 49 | include: [resolve('src'), resolve('test')] 50 | }, 51 | { 52 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 53 | loader: 'url-loader', 54 | options: { 55 | limit: 10000, 56 | name: utils.assetsPath('images/[name].[hash:7].[ext]') 57 | } 58 | }, 59 | { 60 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 61 | loader: 'url-loader', 62 | options: { 63 | limit: 10000, 64 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 65 | } 66 | } 67 | ] 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | var utils = require('./utils') 2 | var webpack = require('webpack') 3 | var config = require('../config') 4 | var merge = require('webpack-merge') 5 | var baseWebpackConfig = require('./webpack.base.conf') 6 | var HtmlWebpackPlugin = require('html-webpack-plugin') 7 | var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') 8 | 9 | // add hot-reload related code to entry chunks 10 | Object.keys(baseWebpackConfig.entry).forEach(function (name) { 11 | baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]) 12 | }) 13 | 14 | module.exports = merge(baseWebpackConfig, { 15 | module: { 16 | rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) 17 | }, 18 | // cheap-module-eval-source-map is faster for development 19 | devtool: '#cheap-module-eval-source-map', 20 | plugins: [ 21 | new webpack.DefinePlugin({ 22 | 'process.env': config.dev.env 23 | }), 24 | // https://github.com/glenjamin/webpack-hot-middleware#installation--usage 25 | new webpack.HotModuleReplacementPlugin(), 26 | new webpack.NoEmitOnErrorsPlugin(), 27 | // https://github.com/ampedandwired/html-webpack-plugin 28 | new HtmlWebpackPlugin({ 29 | filename: 'index.html', 30 | template: 'index.html', 31 | inject: true 32 | }), 33 | new FriendlyErrorsPlugin() 34 | ] 35 | }) 36 | -------------------------------------------------------------------------------- /build/webpack.prod.conf.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var utils = require('./utils') 3 | var webpack = require('webpack') 4 | var config = require('../config') 5 | var merge = require('webpack-merge') 6 | var baseWebpackConfig = require('./webpack.base.conf') 7 | var CopyWebpackPlugin = require('copy-webpack-plugin') 8 | var HtmlWebpackPlugin = require('html-webpack-plugin') 9 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 10 | var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') 11 | 12 | var env = process.env.NODE_ENV === 'testing' 13 | ? require('../config/test.env') 14 | : config.build.env 15 | 16 | var webpackConfig = merge(baseWebpackConfig, { 17 | module: { 18 | rules: utils.styleLoaders({ 19 | sourceMap: config.build.productionSourceMap, 20 | extract: true 21 | }) 22 | }, 23 | devtool: config.build.productionSourceMap ? '#source-map' : false, 24 | output: { 25 | path: config.build.assetsRoot, 26 | filename: utils.assetsPath('js/[name].[chunkhash].js'), 27 | chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') 28 | }, 29 | plugins: [ 30 | // http://vuejs.github.io/vue-loader/en/workflow/production.html 31 | new webpack.DefinePlugin({ 32 | 'process.env': env 33 | }), 34 | new webpack.optimize.UglifyJsPlugin({ 35 | compress: { 36 | warnings: false 37 | }, 38 | sourceMap: true 39 | }), 40 | // extract css into its own file 41 | new ExtractTextPlugin({ 42 | filename: utils.assetsPath('css/[name].[contenthash].css') 43 | }), 44 | // Compress extracted CSS. We are using this plugin so that possible 45 | // duplicated CSS from different components can be deduped. 46 | new OptimizeCSSPlugin({ 47 | cssProcessorOptions: { 48 | safe: true 49 | } 50 | }), 51 | // generate dist index.html with correct asset hash for caching. 52 | // you can customize output by editing /index.html 53 | // see https://github.com/ampedandwired/html-webpack-plugin 54 | new HtmlWebpackPlugin({ 55 | filename: process.env.NODE_ENV === 'testing' 56 | ? 'index.html' 57 | : config.build.index, 58 | template: 'index.html', 59 | inject: true, 60 | minify: { 61 | removeComments: true, 62 | collapseWhitespace: true, 63 | removeAttributeQuotes: true 64 | // more options: 65 | // https://github.com/kangax/html-minifier#options-quick-reference 66 | }, 67 | // necessary to consistently work with multiple chunks via CommonsChunkPlugin 68 | chunksSortMode: 'dependency' 69 | }), 70 | // split vendor js into its own file 71 | new webpack.optimize.CommonsChunkPlugin({ 72 | name: 'vendor', 73 | minChunks: function (module, count) { 74 | // any required modules inside node_modules are extracted to vendor 75 | return ( 76 | module.resource && 77 | /\.js$/.test(module.resource) && 78 | module.resource.indexOf( 79 | path.join(__dirname, '../node_modules') 80 | ) === 0 81 | ) 82 | } 83 | }), 84 | // extract webpack runtime and module manifest to its own file in order to 85 | // prevent vendor hash from being updated whenever app bundle is updated 86 | new webpack.optimize.CommonsChunkPlugin({ 87 | name: 'manifest', 88 | chunks: ['vendor'] 89 | }), 90 | // copy custom static assets 91 | new CopyWebpackPlugin([ 92 | { 93 | from: path.resolve(__dirname, '../static'), 94 | to: config.build.assetsSubDirectory, 95 | ignore: ['.*'] 96 | } 97 | ]) 98 | ] 99 | }) 100 | 101 | if (config.build.productionGzip) { 102 | var CompressionWebpackPlugin = require('compression-webpack-plugin') 103 | 104 | webpackConfig.plugins.push( 105 | new CompressionWebpackPlugin({ 106 | asset: '[path].gz[query]', 107 | algorithm: 'gzip', 108 | test: new RegExp( 109 | '\\.(' + 110 | config.build.productionGzipExtensions.join('|') + 111 | ')$' 112 | ), 113 | threshold: 10240, 114 | minRatio: 0.8 115 | }) 116 | ) 117 | } 118 | 119 | if (config.build.bundleAnalyzerReport) { 120 | var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin 121 | webpackConfig.plugins.push(new BundleAnalyzerPlugin()) 122 | } 123 | 124 | module.exports = webpackConfig 125 | -------------------------------------------------------------------------------- /build/webpack.test.conf.js: -------------------------------------------------------------------------------- 1 | // This is the webpack config used for unit tests. 2 | 3 | var utils = require('./utils') 4 | var webpack = require('webpack') 5 | var merge = require('webpack-merge') 6 | var baseConfig = require('./webpack.base.conf') 7 | 8 | var webpackConfig = merge(baseConfig, { 9 | // use inline sourcemap for karma-sourcemap-loader 10 | module: { 11 | rules: utils.styleLoaders() 12 | }, 13 | devtool: '#inline-source-map', 14 | resolveLoader: { 15 | alias: { 16 | // necessary to to make lang="scss" work in test when using vue-loader's ?inject option 17 | // see discussion at https://github.com/vuejs/vue-loader/issues/724 18 | 'scss-loader': 'sass-loader' 19 | } 20 | }, 21 | plugins: [ 22 | new webpack.DefinePlugin({ 23 | 'process.env': require('../config/test.env') 24 | }) 25 | ] 26 | }) 27 | 28 | // no need for app entry during tests 29 | delete webpackConfig.entry 30 | 31 | module.exports = webpackConfig 32 | -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var prodEnv = require('./prod.env') 3 | 4 | module.exports = merge(prodEnv, { 5 | NODE_ENV: '"development"' 6 | }) 7 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | // see http://vuejs-templates.github.io/webpack for documentation. 2 | var path = require('path') 3 | 4 | module.exports = { 5 | build: { 6 | env: require('./prod.env'), 7 | index: path.resolve(__dirname, '../dist/index.html'), 8 | assetsRoot: path.resolve(__dirname, '../dist'), 9 | assetsSubDirectory: 'static', 10 | assetsPublicPath: '/', 11 | productionSourceMap: true, 12 | // Gzip off by default as many popular static hosts such as 13 | // Surge or Netlify already gzip all static assets for you. 14 | // Before setting to `true`, make sure to: 15 | // npm install --save-dev compression-webpack-plugin 16 | productionGzip: false, 17 | productionGzipExtensions: ['js', 'css'], 18 | // Run the build command with an extra argument to 19 | // View the bundle analyzer report after build finishes: 20 | // `npm run build --report` 21 | // Set to `true` or `false` to always turn it on or off 22 | bundleAnalyzerReport: process.env.npm_config_report 23 | }, 24 | dev: { 25 | env: require('./dev.env'), 26 | port: 8080, 27 | autoOpenBrowser: true, 28 | assetsSubDirectory: 'static', 29 | assetsPublicPath: '/', 30 | proxyTable: {}, 31 | // CSS Sourcemaps off by default because relative paths are "buggy" 32 | // with this option, according to the CSS-Loader README 33 | // (https://github.com/webpack/css-loader#sourcemaps) 34 | // In our experience, they generally work as expected, 35 | // just be aware of this issue when enabling this option. 36 | cssSourceMap: false 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | NODE_ENV: '"production"' 3 | } 4 | -------------------------------------------------------------------------------- /config/test.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var devEnv = require('./dev.env') 3 | 4 | module.exports = merge(devEnv, { 5 | NODE_ENV: '"testing"' 6 | }) 7 | -------------------------------------------------------------------------------- /firebase.json: -------------------------------------------------------------------------------- 1 | { 2 | "hosting": { 3 | "public": "./dist", 4 | "rewrites": [ 5 | { 6 | "source": "**", 7 | "destination": "/index.html" 8 | } 9 | ] 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | vue-material-dashboard 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-material-dashboard", 3 | "version": "1.0.0", 4 | "description": "Vue Material Dashboard - Inspired by Material Dashboard of Creative Tim.", 5 | "author": "Luc ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "node build/dev-server.js", 9 | "start": "node build/dev-server.js", 10 | "build": "node build/build.js", 11 | "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run", 12 | "e2e": "node test/e2e/runner.js", 13 | "test": "yarn run unit && yarn run e2e", 14 | "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs" 15 | }, 16 | "dependencies": { 17 | "bootstrap": "^3.3.7", 18 | "chartist": "^0.11.0", 19 | "pug": "^2.0.0-rc.2", 20 | "v-click-outside": "^0.0.8", 21 | "vue": "^2.3.3", 22 | "vue-router": "^2.3.1" 23 | }, 24 | "devDependencies": { 25 | "autoprefixer": "^6.7.2", 26 | "babel-core": "^6.22.1", 27 | "babel-eslint": "^7.1.1", 28 | "babel-loader": "^6.2.10", 29 | "babel-plugin-istanbul": "^4.1.1", 30 | "babel-plugin-transform-runtime": "^6.22.0", 31 | "babel-preset-env": "^1.3.2", 32 | "babel-preset-stage-2": "^6.22.0", 33 | "babel-register": "^6.22.0", 34 | "chai": "^3.5.0", 35 | "chalk": "^2.0.1", 36 | "chromedriver": "^2.27.2", 37 | "connect-history-api-fallback": "^1.3.0", 38 | "copy-webpack-plugin": "^4.0.1", 39 | "cross-env": "^4.0.0", 40 | "cross-spawn": "^5.0.1", 41 | "css-loader": "^0.28.0", 42 | "eslint": "^3.19.0", 43 | "eslint-config-standard": "^6.2.1", 44 | "eslint-friendly-formatter": "^2.0.7", 45 | "eslint-loader": "^1.7.1", 46 | "eslint-plugin-html": "^2.0.0", 47 | "eslint-plugin-promise": "^3.4.0", 48 | "eslint-plugin-standard": "^2.0.1", 49 | "eventsource-polyfill": "^0.9.6", 50 | "express": "^4.14.1", 51 | "extract-text-webpack-plugin": "^2.0.0", 52 | "file-loader": "^0.11.1", 53 | "friendly-errors-webpack-plugin": "^1.1.3", 54 | "function-bind": "^1.1.0", 55 | "html-webpack-plugin": "^2.28.0", 56 | "http-proxy-middleware": "^0.17.3", 57 | "inject-loader": "^3.0.0", 58 | "karma": "^1.4.1", 59 | "karma-coverage": "^1.1.1", 60 | "karma-mocha": "^1.3.0", 61 | "karma-phantomjs-launcher": "^1.0.2", 62 | "karma-phantomjs-shim": "^1.4.0", 63 | "karma-sinon-chai": "^1.3.1", 64 | "karma-sourcemap-loader": "^0.3.7", 65 | "karma-spec-reporter": "0.0.30", 66 | "karma-webpack": "^2.0.2", 67 | "lolex": "^1.5.2", 68 | "mocha": "^3.2.0", 69 | "nightwatch": "^0.9.12", 70 | "node-sass": "^4.5.3", 71 | "opn": "^4.0.2", 72 | "optimize-css-assets-webpack-plugin": "^1.3.0", 73 | "ora": "^1.2.0", 74 | "phantomjs-prebuilt": "^2.1.14", 75 | "rimraf": "^2.6.0", 76 | "sass-loader": "^6.0.6", 77 | "selenium-server": "^3.0.1", 78 | "semver": "^5.3.0", 79 | "shelljs": "^0.7.6", 80 | "sinon": "^2.1.0", 81 | "sinon-chai": "^2.8.0", 82 | "url-loader": "^0.5.8", 83 | "vue-loader": "^12.1.0", 84 | "vue-style-loader": "^3.0.1", 85 | "vue-template-compiler": "^2.3.3", 86 | "webpack": "^2.6.1", 87 | "webpack-bundle-analyzer": "^2.2.1", 88 | "webpack-dev-middleware": "^1.10.0", 89 | "webpack-hot-middleware": "^2.18.0", 90 | "webpack-merge": "^4.1.0" 91 | }, 92 | "engines": { 93 | "node": ">= 6.9.0", 94 | "npm": ">= 3.0.0" 95 | }, 96 | "browserslist": [ 97 | "> 1%", 98 | "last 2 versions", 99 | "not ie <= 8" 100 | ] 101 | } 102 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 59 | 60 | 126 | 127 | -------------------------------------------------------------------------------- /src/assets/images/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucwj/vue-material-dashboard/c655b1ec14734a5f708b2099ed3e94ef991dfb78/src/assets/images/apple-icon.png -------------------------------------------------------------------------------- /src/assets/images/cover.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucwj/vue-material-dashboard/c655b1ec14734a5f708b2099ed3e94ef991dfb78/src/assets/images/cover.jpeg -------------------------------------------------------------------------------- /src/assets/images/faces/marc.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucwj/vue-material-dashboard/c655b1ec14734a5f708b2099ed3e94ef991dfb78/src/assets/images/faces/marc.jpg -------------------------------------------------------------------------------- /src/assets/images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucwj/vue-material-dashboard/c655b1ec14734a5f708b2099ed3e94ef991dfb78/src/assets/images/favicon.png -------------------------------------------------------------------------------- /src/assets/images/mask.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucwj/vue-material-dashboard/c655b1ec14734a5f708b2099ed3e94ef991dfb78/src/assets/images/mask.png -------------------------------------------------------------------------------- /src/assets/images/new_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucwj/vue-material-dashboard/c655b1ec14734a5f708b2099ed3e94ef991dfb78/src/assets/images/new_logo.png -------------------------------------------------------------------------------- /src/assets/images/sidebar-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucwj/vue-material-dashboard/c655b1ec14734a5f708b2099ed3e94ef991dfb78/src/assets/images/sidebar-1.jpg -------------------------------------------------------------------------------- /src/assets/images/sidebar-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucwj/vue-material-dashboard/c655b1ec14734a5f708b2099ed3e94ef991dfb78/src/assets/images/sidebar-2.jpg -------------------------------------------------------------------------------- /src/assets/images/sidebar-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucwj/vue-material-dashboard/c655b1ec14734a5f708b2099ed3e94ef991dfb78/src/assets/images/sidebar-3.jpg -------------------------------------------------------------------------------- /src/assets/images/sidebar-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucwj/vue-material-dashboard/c655b1ec14734a5f708b2099ed3e94ef991dfb78/src/assets/images/sidebar-4.jpg -------------------------------------------------------------------------------- /src/assets/images/tim_80x80.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucwj/vue-material-dashboard/c655b1ec14734a5f708b2099ed3e94ef991dfb78/src/assets/images/tim_80x80.png -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucwj/vue-material-dashboard/c655b1ec14734a5f708b2099ed3e94ef991dfb78/src/assets/logo.png -------------------------------------------------------------------------------- /src/assets/sass/material-dashboard.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Material Dashboard - v1.1.1.0 5 | ========================================================= 6 | 7 | * Product Page: http://www.creative-tim.com/product/material-dashboard 8 | * Copyright 2017 Creative Tim (http://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/material-dashboard/blob/master/LICENSE.md) 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | 15 | */ 16 | 17 | 18 | //variables and mixins 19 | @import "md/variables"; 20 | @import "md/mixins"; 21 | @import "md/shadows"; 22 | 23 | //plugin css 24 | @import "md/plugins/_plugin-nouislider"; 25 | @import "md/plugins/_animate"; 26 | 27 | // Core CSS 28 | @import "md/typography"; 29 | @import "md/sidebar-and-main-panel"; 30 | @import "md/buttons"; 31 | @import "md/misc"; 32 | @import "md/inputs"; 33 | @import "md/forms"; 34 | @import "md/alerts"; 35 | @import "md/tables"; 36 | @import "md/checkboxes"; 37 | @import "md/radios"; 38 | @import "md/togglebutton"; 39 | @import "md/ripples"; 40 | @import "md/pills"; 41 | @import "md/dialogs"; 42 | @import "md/navbars"; 43 | @import "md/popups"; 44 | @import "md/footers"; 45 | 46 | // Fancy Stuff 47 | @import "md/dropdown"; 48 | @import "md/cards"; 49 | @import "md/tabs"; 50 | @import "md/chartist"; 51 | @import "md/responsive"; 52 | -------------------------------------------------------------------------------- /src/assets/sass/md/_alerts.scss: -------------------------------------------------------------------------------- 1 | // This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten. 2 | 3 | .alert { 4 | border: 0; 5 | border-radius: 0; 6 | position: relative; 7 | padding: 20px 15px; 8 | line-height: 20px; 9 | 10 | b{ 11 | font-weight: $font-weight-bold; 12 | text-transform: uppercase; 13 | font-size: $font-size-small; 14 | } 15 | // SASS conversion note: please mirror any content change in _mixins-shared.scss alert-variations-content 16 | @include alert-variations(unquote(".alert"), unquote(""), $mdb-text-color-light); 17 | 18 | &-info, &-danger, &-warning, &-success { 19 | color: $mdb-text-color-light; 20 | } 21 | 22 | &-default { 23 | a, .alert-link { 24 | color: $mdb-text-color-primary; 25 | } 26 | } 27 | 28 | i[data-notify="icon"] { 29 | font-size: 30px; 30 | display: block; 31 | left: 15px; 32 | position: absolute; 33 | top: 50%; 34 | margin-top: -15px; 35 | } 36 | 37 | span{ 38 | display: block; 39 | max-width: 89%; 40 | } 41 | 42 | .alert-icon{ 43 | display: block; 44 | float: left; 45 | margin-right: $margin-base; 46 | 47 | i{ 48 | margin-top: -7px; 49 | top: 5px; 50 | position: relative; 51 | } 52 | } 53 | } 54 | 55 | .alert.alert-with-icon { 56 | padding-left: 65px; 57 | } 58 | -------------------------------------------------------------------------------- /src/assets/sass/md/_buttons.scss: -------------------------------------------------------------------------------- 1 | .btn, 2 | .navbar .navbar-nav > li > a.btn{ 3 | border: none; 4 | border-radius: $border-radius-base; 5 | position: relative; 6 | padding: 12px 30px; 7 | margin: 10px 1px; 8 | 9 | font-size: $mdb-btn-font-size-base; 10 | font-weight: 400; 11 | text-transform: uppercase; 12 | letter-spacing: 0; 13 | 14 | will-change: box-shadow, transform; 15 | transition: box-shadow 0.2s $mdb-animation-curve-fast-out-linear-in, 16 | background-color 0.2s $mdb-animation-curve-default; 17 | 18 | &::-moz-focus-inner { 19 | border: 0; 20 | } 21 | 22 | &, 23 | &.btn-default{ 24 | @include btn-styles($gray-light); 25 | } 26 | 27 | &.btn-primary{ 28 | @include btn-styles($brand-primary); 29 | } 30 | &.btn-info{ 31 | @include btn-styles($brand-info); 32 | } 33 | &.btn-success{ 34 | @include btn-styles($brand-success); 35 | } 36 | &.btn-warning{ 37 | @include btn-styles($brand-warning); 38 | } 39 | &.btn-danger{ 40 | @include btn-styles($brand-danger); 41 | } 42 | &.btn-white{ 43 | &, 44 | &:focus, 45 | &:hover{ 46 | background-color: $white-color; 47 | color: $gray-light; 48 | } 49 | &.btn-simple{ 50 | color: #FFFFFF; 51 | background: transparent; 52 | box-shadow: none; 53 | } 54 | } 55 | 56 | // social buttons 57 | &.btn-facebook { 58 | @include social-buttons-color($social-facebook); 59 | } 60 | &.btn-twitter { 61 | @include social-buttons-color($social-twitter); 62 | } 63 | &.btn-pinterest { 64 | @include social-buttons-color($social-pinterest); 65 | } 66 | &.btn-google { 67 | @include social-buttons-color($social-google); 68 | } 69 | &.btn-instagram { 70 | @include social-buttons-color($social-instagram); 71 | } 72 | 73 | &:focus, 74 | &:active, 75 | &:active:focus{ 76 | outline: 0; 77 | } 78 | 79 | &.btn-round{ 80 | border-radius: $border-radius-extreme; 81 | } 82 | 83 | &:not(.btn-just-icon):not(.btn-fab){ 84 | .fa{ 85 | font-size: 18px; 86 | margin-top: -2px; 87 | position: relative; 88 | top: 2px; 89 | } 90 | } 91 | 92 | 93 | &.btn-fab { 94 | // see above for color variations 95 | border-radius: 50%; 96 | font-size: $mdb-btn-fab-font-size; 97 | height: $mdb-btn-fab-size; 98 | margin: auto; 99 | min-width: $mdb-btn-fab-size; 100 | width: $mdb-btn-fab-size; 101 | padding: 0; 102 | overflow: hidden; 103 | position: relative; 104 | line-height: normal; 105 | 106 | .ripple-container { 107 | border-radius: 50%; 108 | } 109 | 110 | &.btn-fab-mini, 111 | .btn-group-sm & { 112 | height: $mdb-btn-fab-size-mini; 113 | min-width: $mdb-btn-fab-size-mini; 114 | width: $mdb-btn-fab-size-mini; 115 | 116 | &.material-icons { 117 | top: ($mdb-btn-icon-size-mini - $mdb-btn-fab-font-size) / 2; 118 | left: ($mdb-btn-icon-size-mini - $mdb-btn-fab-font-size) / 2; 119 | } 120 | 121 | .material-icons{ 122 | font-size: $mdb-btn-icon-size-mini; 123 | } 124 | } 125 | 126 | i.material-icons { 127 | position: absolute; 128 | top: 50%; 129 | left: 50%; 130 | transform: translate(-($mdb-btn-fab-font-size / 2), -($mdb-btn-fab-font-size / 2)); 131 | line-height: $mdb-btn-fab-font-size; 132 | width: $mdb-btn-fab-font-size; 133 | font-size: $mdb-btn-fab-font-size; 134 | } 135 | } 136 | 137 | // Size variations 138 | &.btn-lg, 139 | .btn-group-lg & { 140 | font-size: $mdb-btn-font-size-lg; 141 | padding: 18px 36px; 142 | } 143 | &.btn-sm, 144 | .btn-group-sm & { 145 | padding: 5px 20px; 146 | font-size: $mdb-btn-font-size-sm; 147 | } 148 | &.btn-xs, 149 | .btn-group-xs & { 150 | padding: 4px 15px; 151 | font-size: $mdb-btn-font-size-xs; 152 | } 153 | 154 | &.btn-just-icon{ 155 | font-size: 20px; 156 | padding: 12px 12px; 157 | line-height: 1em; 158 | 159 | i{ 160 | width: 20px; 161 | } 162 | &.btn-lg{ 163 | font-size: 22px; 164 | padding: 13px 18px; 165 | } 166 | } 167 | } 168 | 169 | .btn{ 170 | // Align icons inside buttons with text 171 | .material-icons{ 172 | vertical-align: middle; 173 | font-size: $mdb-btn-icon-size-mini; 174 | top: -1px; 175 | position: relative; 176 | } 177 | 178 | } 179 | 180 | .navbar .navbar-nav > li > { 181 | a.btn{ 182 | margin-top: 2px; 183 | margin-bottom: 2px; 184 | 185 | &.btn-fab{ 186 | margin: 5px 2px; 187 | } 188 | } 189 | a:not(.btn){ 190 | .material-icons{ 191 | margin-top: -3px; 192 | top: 0px; 193 | position: relative; 194 | margin-right: 3px; 195 | } 196 | } 197 | .profile-photo{ 198 | margin: 5px 2px; 199 | } 200 | } 201 | 202 | .navbar-default:not(.navbar-transparent) .navbar-nav > li > { 203 | a.btn{ 204 | &.btn-white.btn-simple{ 205 | color: $gray; 206 | } 207 | } 208 | } 209 | 210 | // btn-group variations 211 | .btn-group, 212 | .btn-group-vertical { 213 | 214 | position: relative; 215 | //border-radius: 2px; 216 | margin: 10px 1px; 217 | 218 | &.open { 219 | .dropdown-toggle { 220 | //box-shadow: none; 221 | } 222 | 223 | & > .dropdown-toggle.btn { 224 | @include variations(unquote(".btn"), unquote(""), background-color, $mdb-btn-background-color); 225 | } 226 | } 227 | 228 | .dropdown-menu { 229 | border-radius: 0 0 $border-radius-base $border-radius-base; 230 | } 231 | 232 | &.btn-group-raised { 233 | @include shadow-2dp(); 234 | } 235 | 236 | & .btn + .btn, 237 | .btn, 238 | .btn:active, 239 | .btn-group { 240 | margin: 0; 241 | } 242 | } 243 | 244 | .close{ 245 | font-size: inherit; 246 | color: $white-color; 247 | opacity: .9; 248 | text-shadow: none; 249 | 250 | &:hover, 251 | &:focus{ 252 | opacity: 1; 253 | color: $white-color; 254 | } 255 | 256 | i{ 257 | font-size: 20px; 258 | } 259 | } 260 | -------------------------------------------------------------------------------- /src/assets/sass/md/_cards.scss: -------------------------------------------------------------------------------- 1 | .card{ 2 | display: inline-block; 3 | position: relative; 4 | width: 100%; 5 | margin: 25px 0; 6 | 7 | box-shadow: 0 1px 4px 0 rgba(0,0,0,0.14); 8 | border-radius: $border-radius-base; 9 | color: $mdb-card-body-text; 10 | background: $mdb-card-body-background; 11 | 12 | .card-height-indicator { 13 | margin-top: 100%; 14 | } 15 | 16 | .title{ 17 | margin-top: 0; 18 | margin-bottom: 5px; 19 | } 20 | .card-image { 21 | height: 60%; 22 | position: relative; 23 | overflow: hidden; 24 | 25 | margin-left: 15px; 26 | margin-right: 15px; 27 | margin-top: -30px; 28 | border-radius: $border-radius-large; 29 | 30 | img { 31 | width: 100%; 32 | height: 100%; 33 | border-radius: $border-radius-large; 34 | pointer-events: none; 35 | } 36 | .card-title { 37 | position: absolute; 38 | bottom: 15px; 39 | left: 15px; 40 | color: $mdb-card-image-headline; 41 | font-size: $font-size-h4; 42 | text-shadow: 0 2px 5px rgba(33, 33, 33, 0.5); 43 | } 44 | } 45 | 46 | .category:not([class*="text-"]){ 47 | color: $gray-color; 48 | } 49 | .card-content{ 50 | padding: 15px 20px; 51 | 52 | .category{ 53 | margin-bottom: 0; 54 | } 55 | } 56 | 57 | .card-header{ 58 | @include shadow-big(); 59 | margin: -20px $margin-base 0; 60 | border-radius: $border-radius-base; 61 | padding: $padding-base; 62 | background-color: $gray-color; 63 | 64 | .title{ 65 | color: $white-color; 66 | } 67 | .category{ 68 | margin-bottom: 0; 69 | color: rgba($white-color, .62); 70 | } 71 | 72 | &.card-chart{ 73 | padding: 0; 74 | min-height: 160px; 75 | 76 | + .content{ 77 | h4{ 78 | margin-top: 0; 79 | } 80 | } 81 | } 82 | 83 | .ct-label{ 84 | color: rgba($white-color, .7); 85 | } 86 | .ct-grid{ 87 | stroke: rgba(255, 255, 255, 0.2); 88 | } 89 | .ct-series-a .ct-point, 90 | .ct-series-a .ct-line, 91 | .ct-series-a .ct-bar, 92 | .ct-series-a .ct-slice-donut{ 93 | stroke: rgba(255,255,255,.8); 94 | } 95 | .ct-series-a .ct-slice-pie, 96 | .ct-series-a .ct-area{ 97 | fill: rgba(255,255,255,.4); 98 | } 99 | 100 | } 101 | 102 | .chart-title{ 103 | position: absolute;; 104 | top: 25px; 105 | width: 100%; 106 | text-align: center; 107 | 108 | h3{ 109 | margin: 0; 110 | color: $white-color; 111 | } 112 | 113 | h6{ 114 | margin: 0; 115 | color: rgba(255,255,255, .4); 116 | } 117 | 118 | } 119 | 120 | .card-footer{ 121 | margin: 0 20px 10px; 122 | padding-top: 10px; 123 | border-top: 1px solid #eeeeee; 124 | 125 | .content{ 126 | display: block; 127 | } 128 | 129 | div{ 130 | display: inline-block; 131 | } 132 | .author{ 133 | color: $gray-color; 134 | } 135 | .stats{ 136 | line-height: 22px; 137 | color: $gray-color; 138 | font-size: $font-size-small; 139 | 140 | .material-icons{ 141 | position: relative; 142 | top: 4px; 143 | font-size: $font-paragraph; 144 | } 145 | } 146 | 147 | h6{ 148 | color: $gray-color; 149 | } 150 | 151 | } 152 | 153 | img{ 154 | width: 100%; 155 | height: auto; 156 | } 157 | 158 | .category{ 159 | .material-icons{ 160 | position: relative; 161 | top: 6px; 162 | line-height: 0; 163 | } 164 | } 165 | 166 | .category-social{ 167 | .fa{ 168 | font-size: 24px; 169 | position: relative; 170 | margin-top: -4px; 171 | top: 2px; 172 | margin-right: 5px; 173 | } 174 | } 175 | 176 | .author{ 177 | .avatar{ 178 | width: 30px; 179 | height: 30px; 180 | overflow: hidden; 181 | border-radius: 50%; 182 | margin-right: 5px; 183 | } 184 | 185 | a{ 186 | color: $black-color; 187 | text-decoration: none; 188 | 189 | .ripple-container{ 190 | display: none; 191 | } 192 | } 193 | } 194 | 195 | .table{ 196 | margin-bottom: 0; 197 | 198 | tr:first-child td{ 199 | border-top: none; 200 | } 201 | } 202 | 203 | [data-background-color="purple"]{ 204 | background: linear-gradient(60deg, $purple-400, $purple-600); 205 | @include shadow-big-color($brand-primary); 206 | } 207 | 208 | [data-background-color="blue"]{ 209 | background: linear-gradient(60deg, $cyan-400, $cyan-600); 210 | @include shadow-big-color($brand-info); 211 | } 212 | 213 | [data-background-color="green"]{ 214 | background: linear-gradient(60deg, $green-400, $green-600); 215 | @include shadow-big-color($brand-success); 216 | } 217 | 218 | [data-background-color="orange"]{ 219 | background: linear-gradient(60deg, $orange-400, $orange-600); 220 | @include shadow-big-color($brand-warning); 221 | } 222 | 223 | [data-background-color="red"]{ 224 | background: linear-gradient(60deg, $red-400, $red-600); 225 | @include shadow-big-color($brand-danger); 226 | } 227 | 228 | [data-background-color]{ 229 | color: $white-color; 230 | 231 | a{ 232 | color: $white-color; 233 | } 234 | } 235 | } 236 | 237 | .card-stats{ 238 | .title{ 239 | margin: 0; 240 | } 241 | .card-header{ 242 | float: left; 243 | text-align: center; 244 | 245 | i{ 246 | font-size: 36px; 247 | line-height: 56px; 248 | width: 56px; 249 | height: 56px; 250 | } 251 | } 252 | .card-content{ 253 | text-align: right; 254 | padding-top: 10px; 255 | } 256 | 257 | } 258 | 259 | .card-nav-tabs{ 260 | .header-raised{ 261 | margin-top: -$margin-base * 2; 262 | } 263 | .nav-tabs{ 264 | background: transparent; 265 | padding: 0; 266 | } 267 | .nav-tabs-title{ 268 | float: left; 269 | padding: 10px 10px 10px 0; 270 | line-height: 24px; 271 | } 272 | } 273 | 274 | .card-plain{ 275 | background: transparent; 276 | box-shadow: none; 277 | 278 | .card-header{ 279 | margin-left: 0; 280 | margin-right: 0; 281 | } 282 | .content{ 283 | padding-left: 5px; 284 | padding-right: 5px; 285 | } 286 | 287 | .card-image{ 288 | margin: 0; 289 | border-radius: $border-radius-base; 290 | 291 | img{ 292 | border-radius: $border-radius-base; 293 | } 294 | } 295 | } 296 | 297 | .iframe-container{ 298 | margin: 0 -20px 0; 299 | 300 | iframe{ 301 | width: 100%; 302 | height: 500px; 303 | border: 0; 304 | @include shadow-big(); 305 | } 306 | } 307 | 308 | .card-profile, 309 | .card-testimonial{ 310 | margin-top: 30px; 311 | text-align: center; 312 | 313 | .btn-just-icon.btn-raised{ 314 | margin-left: 6px; 315 | margin-right: 6px; 316 | } 317 | 318 | .card-avatar{ 319 | max-width: 130px; 320 | max-height: 130px; 321 | margin: -50px auto 0; 322 | border-radius: 50%; 323 | overflow: hidden; 324 | 325 | @include shadow-big(); 326 | 327 | & + .content{ 328 | margin-top: 15px; 329 | } 330 | } 331 | 332 | &.card-plain{ 333 | .card-avatar{ 334 | margin-top: 0; 335 | } 336 | } 337 | } 338 | -------------------------------------------------------------------------------- /src/assets/sass/md/_chartist.scss: -------------------------------------------------------------------------------- 1 | @mixin ct-responsive-svg-container($width: 100%, $ratio: $ct-container-ratio) { 2 | display: block; 3 | position: relative; 4 | width: $width; 5 | 6 | &:before { 7 | display: block; 8 | float: left; 9 | content: ""; 10 | width: 0; 11 | height: 0; 12 | padding-bottom: $ratio * 100%; 13 | } 14 | 15 | &:after { 16 | content: ""; 17 | display: table; 18 | clear: both; 19 | } 20 | 21 | > svg { 22 | display: block; 23 | position: absolute; 24 | top: 0; 25 | left: 0; 26 | } 27 | } 28 | 29 | @mixin ct-align-justify($ct-text-align: $ct-text-align, $ct-text-justify: $ct-text-justify) { 30 | -webkit-box-align: $ct-text-align; 31 | -webkit-align-items: $ct-text-align; 32 | -ms-flex-align: $ct-text-align; 33 | align-items: $ct-text-align; 34 | -webkit-box-pack: $ct-text-justify; 35 | -webkit-justify-content: $ct-text-justify; 36 | -ms-flex-pack: $ct-text-justify; 37 | justify-content: $ct-text-justify; 38 | // Fallback to text-align for non-flex browsers 39 | @if($ct-text-justify == 'flex-start') { 40 | text-align: left; 41 | } @else if ($ct-text-justify == 'flex-end') { 42 | text-align: right; 43 | } @else { 44 | text-align: center; 45 | } 46 | } 47 | 48 | @mixin ct-flex() { 49 | // Fallback to block 50 | display: block; 51 | display: -webkit-box; 52 | display: -moz-box; 53 | display: -ms-flexbox; 54 | display: -webkit-flex; 55 | display: flex; 56 | } 57 | 58 | 59 | 60 | @mixin ct-chart-label($ct-text-color: $ct-text-color, $ct-text-size: $ct-text-size, $ct-text-line-height: $ct-text-line-height) { 61 | fill: $ct-text-color; 62 | color: $ct-text-color; 63 | font-size: $ct-text-size; 64 | line-height: $ct-text-line-height; 65 | } 66 | 67 | @mixin ct-chart-grid($ct-grid-color: $ct-grid-color, $ct-grid-width: $ct-grid-width, $ct-grid-dasharray: $ct-grid-dasharray) { 68 | stroke: $ct-grid-color; 69 | stroke-width: $ct-grid-width; 70 | 71 | @if ($ct-grid-dasharray) { 72 | stroke-dasharray: $ct-grid-dasharray; 73 | } 74 | } 75 | 76 | @mixin ct-chart-point($ct-point-size: $ct-point-size, $ct-point-shape: $ct-point-shape) { 77 | stroke-width: $ct-point-size; 78 | stroke-linecap: $ct-point-shape; 79 | } 80 | 81 | @mixin ct-chart-line($ct-line-width: $ct-line-width, $ct-line-dasharray: $ct-line-dasharray) { 82 | fill: none; 83 | stroke-width: $ct-line-width; 84 | 85 | @if ($ct-line-dasharray) { 86 | stroke-dasharray: $ct-line-dasharray; 87 | } 88 | } 89 | 90 | @mixin ct-chart-area($ct-area-opacity: $ct-area-opacity) { 91 | stroke: none; 92 | fill-opacity: $ct-area-opacity; 93 | } 94 | 95 | @mixin ct-chart-bar($ct-bar-width: $ct-bar-width) { 96 | fill: none; 97 | stroke-width: $ct-bar-width; 98 | } 99 | 100 | @mixin ct-chart-donut($ct-donut-width: $ct-donut-width) { 101 | fill: none; 102 | stroke-width: $ct-donut-width; 103 | } 104 | 105 | @mixin ct-chart-series-color($color) { 106 | .#{$ct-class-point}, .#{$ct-class-line}, .#{$ct-class-bar}, .#{$ct-class-slice-donut} { 107 | stroke: $color; 108 | } 109 | 110 | .#{$ct-class-slice-pie}, .#{$ct-class-area} { 111 | fill: $color; 112 | } 113 | } 114 | 115 | @mixin ct-chart($ct-container-ratio: $ct-container-ratio, $ct-text-color: $ct-text-color, $ct-text-size: $ct-text-size, $ct-grid-color: $ct-grid-color, $ct-grid-width: $ct-grid-width, $ct-grid-dasharray: $ct-grid-dasharray, $ct-point-size: $ct-point-size, $ct-point-shape: $ct-point-shape, $ct-line-width: $ct-line-width, $ct-bar-width: $ct-bar-width, $ct-donut-width: $ct-donut-width, $ct-series-names: $ct-series-names, $ct-series-colors: $ct-series-colors) { 116 | 117 | .#{$ct-class-label} { 118 | @include ct-chart-label($ct-text-color, $ct-text-size); 119 | } 120 | 121 | .#{$ct-class-chart-line} .#{$ct-class-label}, 122 | .#{$ct-class-chart-bar} .#{$ct-class-label} { 123 | @include ct-flex(); 124 | } 125 | 126 | .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} { 127 | @include ct-align-justify(flex-end, flex-start); 128 | // Fallback for browsers that don't support foreignObjects 129 | text-anchor: start; 130 | } 131 | 132 | .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} { 133 | @include ct-align-justify(flex-start, flex-start); 134 | // Fallback for browsers that don't support foreignObjects 135 | text-anchor: start; 136 | } 137 | 138 | .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-start} { 139 | @include ct-align-justify(flex-end, flex-end); 140 | // Fallback for browsers that don't support foreignObjects 141 | text-anchor: end; 142 | } 143 | 144 | .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-end} { 145 | @include ct-align-justify(flex-end, flex-start); 146 | // Fallback for browsers that don't support foreignObjects 147 | text-anchor: start; 148 | } 149 | 150 | .#{$ct-class-chart-bar} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} { 151 | @include ct-align-justify(flex-end, center); 152 | // Fallback for browsers that don't support foreignObjects 153 | text-anchor: start; 154 | } 155 | 156 | .#{$ct-class-chart-bar} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} { 157 | @include ct-align-justify(flex-start, center); 158 | // Fallback for browsers that don't support foreignObjects 159 | text-anchor: start; 160 | } 161 | 162 | .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} { 163 | @include ct-align-justify(flex-end, flex-start); 164 | // Fallback for browsers that don't support foreignObjects 165 | text-anchor: start; 166 | } 167 | 168 | .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} { 169 | @include ct-align-justify(flex-start, flex-start); 170 | // Fallback for browsers that don't support foreignObjects 171 | text-anchor: start; 172 | } 173 | 174 | .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-start} { 175 | //@include ct-chart-label($ct-text-color, $ct-text-size, center, $ct-vertical-text-justify); 176 | @include ct-align-justify(center, flex-end); 177 | // Fallback for browsers that don't support foreignObjects 178 | text-anchor: end; 179 | } 180 | 181 | .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-end} { 182 | @include ct-align-justify(center, flex-start); 183 | // Fallback for browsers that don't support foreignObjects 184 | text-anchor: end; 185 | } 186 | 187 | .#{$ct-class-grid} { 188 | @include ct-chart-grid($ct-grid-color, $ct-grid-width, $ct-grid-dasharray); 189 | } 190 | 191 | .#{$ct-class-point} { 192 | @include ct-chart-point($ct-point-size, $ct-point-shape); 193 | } 194 | 195 | .#{$ct-class-line} { 196 | @include ct-chart-line($ct-line-width); 197 | } 198 | 199 | .#{$ct-class-area} { 200 | @include ct-chart-area(); 201 | } 202 | 203 | .#{$ct-class-bar} { 204 | @include ct-chart-bar($ct-bar-width); 205 | } 206 | 207 | .#{$ct-class-slice-donut} { 208 | @include ct-chart-donut($ct-donut-width); 209 | } 210 | 211 | @if $ct-include-colored-series { 212 | @for $i from 0 to length($ct-series-names) { 213 | .#{$ct-class-series}-#{nth($ct-series-names, $i + 1)} { 214 | $color: nth($ct-series-colors, $i + 1); 215 | 216 | @include ct-chart-series-color($color); 217 | } 218 | } 219 | } 220 | } 221 | 222 | @if $ct-include-classes { 223 | @include ct-chart(); 224 | 225 | @if $ct-include-alternative-responsive-containers { 226 | @for $i from 0 to length($ct-scales-names) { 227 | .#{nth($ct-scales-names, $i + 1)} { 228 | @include ct-responsive-svg-container($ratio: nth($ct-scales, $i + 1)); 229 | } 230 | } 231 | } 232 | } 233 | 234 | .ct-blue{ 235 | stroke: $brand-primary !important; 236 | } 237 | .ct-azure{ 238 | stroke: $brand-info !important; 239 | } 240 | .ct-green{ 241 | stroke: $brand-success !important; 242 | } 243 | .ct-orange{ 244 | stroke: $brand-warning !important; 245 | } 246 | .ct-red{ 247 | stroke: $brand-danger !important; 248 | } 249 | .ct-white{ 250 | stroke: $white-color !important; 251 | } 252 | .ct-rose{ 253 | stroke: $brand-rose !important; 254 | } 255 | -------------------------------------------------------------------------------- /src/assets/sass/md/_checkboxes.scss: -------------------------------------------------------------------------------- 1 | .form-group { 2 | } 3 | 4 | .checkbox { 5 | label { 6 | cursor: pointer; 7 | padding-left: 0; // Reset for Bootstrap rule 8 | color: $mdb-checkbox-label-color; 9 | @include mdb-label-color-toggle-focus(); 10 | } 11 | 12 | // Hide native checkbox 13 | input[type=checkbox] { 14 | opacity: 0; 15 | position: absolute; 16 | margin: 0; 17 | z-index: -1; 18 | width: 0; 19 | height: 0; 20 | overflow: hidden; 21 | left: 0; 22 | pointer-events: none; 23 | } 24 | 25 | .checkbox-material { 26 | vertical-align: middle; 27 | position: relative; 28 | top: 3px; 29 | padding-right: 5px; 30 | 31 | &:before { 32 | display: block; 33 | position: absolute; 34 | left: 0; 35 | content: ""; 36 | background-color: rgba(0,0,0,.84); 37 | height: $mdb-checkbox-size; 38 | width: $mdb-checkbox-size; 39 | border-radius: 100%; 40 | z-index: 1; 41 | opacity: 0; 42 | margin: 0; 43 | transform: scale3d(2.3, 2.3, 1); 44 | } 45 | 46 | .check { 47 | position: relative; 48 | display: inline-block; 49 | width: $mdb-checkbox-size; 50 | height: $mdb-checkbox-size; 51 | border: 1px solid $mdb-checkbox-border-color; 52 | overflow: hidden; 53 | z-index: 1; 54 | border-radius: $border-radius-base; 55 | } 56 | .check:before { 57 | position: absolute; 58 | content: ""; 59 | transform: rotate(45deg); 60 | display: block; 61 | margin-top: -3px; 62 | margin-left: 7px; 63 | width: 0; 64 | height: 0; 65 | background: red; 66 | box-shadow: 67 | 0 0 0 0, 68 | 0 0 0 0, 69 | 0 0 0 0, 70 | 0 0 0 0, 71 | 0 0 0 0, 72 | 0 0 0 0, 73 | 0 0 0 0 inset; 74 | animation: checkbox-off $mdb-checkbox-animation-check forwards; 75 | } 76 | } 77 | 78 | input[type=checkbox] { 79 | 80 | &:focus + .checkbox-material .check:after { 81 | opacity: 0.2; 82 | } 83 | 84 | &:checked { 85 | 86 | & + .checkbox-material .check { 87 | background: $mdb-checkbox-checked-color; 88 | } 89 | 90 | & + .checkbox-material .check:before { 91 | color: #FFFFFF; 92 | box-shadow: 0 0 0 10px, 93 | 10px -10px 0 10px, 94 | 32px 0 0 20px, 95 | 0px 32px 0 20px, 96 | -5px 5px 0 10px, 97 | 20px -12px 0 11px; 98 | animation: checkbox-on $mdb-checkbox-animation-check forwards; 99 | } 100 | 101 | & + .checkbox-material:before { 102 | animation: rippleOn $mdb-checkbox-animation-ripple; 103 | } 104 | 105 | & + .checkbox-material .check:after { 106 | //background-color: $brand-success; // FIXME: seems like tho wrong color, test and make sure it can be removed 107 | animation: rippleOn $mdb-checkbox-animation-ripple forwards; // Ripple effect on check 108 | } 109 | } 110 | 111 | &:not(:checked) { 112 | & + .checkbox-material:before { 113 | animation: rippleOff $mdb-checkbox-animation-ripple; 114 | } 115 | 116 | & + .checkbox-material .check:after { 117 | animation: rippleOff $mdb-checkbox-animation-ripple; // Ripple effect on uncheck 118 | 119 | } 120 | } 121 | } 122 | 123 | // Style for disabled inputs 124 | fieldset[disabled] &, 125 | fieldset[disabled] & input[type=checkbox], 126 | input[type=checkbox][disabled] ~ .checkbox-material .check, 127 | input[type=checkbox][disabled] + .circle { 128 | opacity: 0.5; 129 | } 130 | 131 | input[type=checkbox][disabled] ~ .checkbox-material .check{ 132 | border-color: #000000; 133 | opacity: .26; 134 | } 135 | 136 | input[type=checkbox][disabled] + .checkbox-material .check:after { 137 | background-color: $mdb-text-color-primary; 138 | transform: rotate(-45deg); 139 | } 140 | } 141 | 142 | @keyframes checkbox-on { 143 | 0% { 144 | box-shadow: 145 | 0 0 0 10px, 146 | 10px -10px 0 10px, 147 | 32px 0 0 20px, 148 | 0px 32px 0 20px, 149 | -5px 5px 0 10px, 150 | 15px 2px 0 11px; 151 | } 152 | 50% { 153 | box-shadow: 154 | 0 0 0 10px, 155 | 10px -10px 0 10px, 156 | 32px 0 0 20px, 157 | 0px 32px 0 20px, 158 | -5px 5px 0 10px, 159 | 20px 2px 0 11px; 160 | } 161 | 100% { 162 | box-shadow: 163 | 0 0 0 10px, 164 | 10px -10px 0 10px, 165 | 32px 0 0 20px, 166 | 0px 32px 0 20px, 167 | -5px 5px 0 10px, 168 | 20px -12px 0 11px; 169 | } 170 | } 171 | 172 | @keyframes rippleOn { 173 | 0% { 174 | opacity: 0; 175 | } 176 | 50% { 177 | opacity: 0.2; 178 | } 179 | 100% { 180 | opacity: 0; 181 | } 182 | } 183 | @keyframes rippleOff { 184 | 0% { 185 | opacity: 0; 186 | } 187 | 50% { 188 | opacity: 0.2; 189 | } 190 | 100% { 191 | opacity: 0; 192 | } 193 | } 194 | -------------------------------------------------------------------------------- /src/assets/sass/md/_colors.scss: -------------------------------------------------------------------------------- 1 | $red-50: #ffebee !default; 2 | $red-100: #ffcdd2 !default; 3 | $red-200: #ef9a9a !default; 4 | $red-300: #e57373 !default; 5 | $red-400: #ef5350 !default; 6 | $red-500: #f44336 !default; 7 | $red-600: #e53935 !default; 8 | $red-700: #d32f2f !default; 9 | $red-800: #c62828 !default; 10 | $red-900: #b71c1c !default; 11 | $red-A100: #ff8a80 !default; 12 | $red-A200: #ff5252 !default; 13 | $red-A400: #ff1744 !default; 14 | $red-A700: #d50000 !default; 15 | $red: $red-500 !default; 16 | 17 | 18 | $pink-50: #fce4ec !default; 19 | $pink-100: #f8bbd0 !default; 20 | $pink-200: #f48fb1 !default; 21 | $pink-300: #f06292 !default; 22 | $pink-400: #ec407a !default; 23 | $pink-500: #e91e63 !default; 24 | $pink-600: #d81b60 !default; 25 | $pink-700: #c2185b !default; 26 | $pink-800: #ad1457 !default; 27 | $pink-900: #880e4f !default; 28 | $pink-A100: #ff80ab !default; 29 | $pink-A200: #ff4081 !default; 30 | $pink-A400: #f50057 !default; 31 | $pink-A700: #c51162 !default; 32 | $pink: $pink-500 !default; 33 | 34 | 35 | $purple-50: #f3e5f5 !default; 36 | $purple-100: #e1bee7 !default; 37 | $purple-200: #ce93d8 !default; 38 | $purple-300: #ba68c8 !default; 39 | $purple-400: #ab47bc !default; 40 | $purple-500: #9c27b0 !default; 41 | $purple-600: #8e24aa !default; 42 | $purple-700: #7b1fa2 !default; 43 | $purple-800: #6a1b9a !default; 44 | $purple-900: #4a148c !default; 45 | $purple-A100: #ea80fc !default; 46 | $purple-A200: #e040fb !default; 47 | $purple-A400: #d500f9 !default; 48 | $purple-A700: #aa00ff !default; 49 | $purple: $purple-500 !default; 50 | 51 | 52 | $deep-purple-50: #ede7f6 !default; 53 | $deep-purple-100: #d1c4e9 !default; 54 | $deep-purple-200: #b39ddb !default; 55 | $deep-purple-300: #9575cd !default; 56 | $deep-purple-400: #7e57c2 !default; 57 | $deep-purple-500: #673ab7 !default; 58 | $deep-purple-600: #5e35b1 !default; 59 | $deep-purple-700: #512da8 !default; 60 | $deep-purple-800: #4527a0 !default; 61 | $deep-purple-900: #311b92 !default; 62 | $deep-purple-A100: #b388ff !default; 63 | $deep-purple-A200: #7c4dff !default; 64 | $deep-purple-A400: #651fff !default; 65 | $deep-purple-A700: #6200ea !default; 66 | $deep-purple: $deep-purple-500 !default; 67 | 68 | 69 | $indigo-50: #e8eaf6 !default; 70 | $indigo-100: #c5cae9 !default; 71 | $indigo-200: #9fa8da !default; 72 | $indigo-300: #7986cb !default; 73 | $indigo-400: #5c6bc0 !default; 74 | $indigo-500: #3f51b5 !default; 75 | $indigo-600: #3949ab !default; 76 | $indigo-700: #303f9f !default; 77 | $indigo-800: #283593 !default; 78 | $indigo-900: #1a237e !default; 79 | $indigo-A100: #8c9eff !default; 80 | $indigo-A200: #536dfe !default; 81 | $indigo-A400: #3d5afe !default; 82 | $indigo-A700: #304ffe !default; 83 | $indigo: $indigo-500 !default; 84 | 85 | 86 | $blue-50: #e3f2fd !default; 87 | $blue-100: #bbdefb !default; 88 | $blue-200: #90caf9 !default; 89 | $blue-300: #64b5f6 !default; 90 | $blue-400: #42a5f5 !default; 91 | $blue-500: #2196f3 !default; 92 | $blue-600: #1e88e5 !default; 93 | $blue-700: #1976d2 !default; 94 | $blue-800: #1565c0 !default; 95 | $blue-900: #0d47a1 !default; 96 | $blue-A100: #82b1ff !default; 97 | $blue-A200: #448aff !default; 98 | $blue-A400: #2979ff !default; 99 | $blue-A700: #2962ff !default; 100 | $blue: $blue-500 !default; 101 | 102 | 103 | $light-blue-50: #e1f5fe !default; 104 | $light-blue-100: #b3e5fc !default; 105 | $light-blue-200: #81d4fa !default; 106 | $light-blue-300: #4fc3f7 !default; 107 | $light-blue-400: #29b6f6 !default; 108 | $light-blue-500: #03a9f4 !default; 109 | $light-blue-600: #039be5 !default; 110 | $light-blue-700: #0288d1 !default; 111 | $light-blue-800: #0277bd !default; 112 | $light-blue-900: #01579b !default; 113 | $light-blue-A100: #80d8ff !default; 114 | $light-blue-A200: #40c4ff !default; 115 | $light-blue-A400: #00b0ff !default; 116 | $light-blue-A700: #0091ea !default; 117 | $light-blue: $light-blue-500 !default; 118 | 119 | 120 | $cyan-50: #e0f7fa !default; 121 | $cyan-100: #b2ebf2 !default; 122 | $cyan-200: #80deea !default; 123 | $cyan-300: #4dd0e1 !default; 124 | $cyan-400: #26c6da !default; 125 | $cyan-500: #00bcd4 !default; 126 | $cyan-600: #00acc1 !default; 127 | $cyan-700: #0097a7 !default; 128 | $cyan-800: #00838f !default; 129 | $cyan-900: #006064 !default; 130 | $cyan-A100: #84ffff !default; 131 | $cyan-A200: #18ffff !default; 132 | $cyan-A400: #00e5ff !default; 133 | $cyan-A700: #00b8d4 !default; 134 | $cyan: $cyan-500 !default; 135 | 136 | 137 | $teal-50: #e0f2f1 !default; 138 | $teal-100: #b2dfdb !default; 139 | $teal-200: #80cbc4 !default; 140 | $teal-300: #4db6ac !default; 141 | $teal-400: #26a69a !default; 142 | $teal-500: #009688 !default; 143 | $teal-600: #00897b !default; 144 | $teal-700: #00796b !default; 145 | $teal-800: #00695c !default; 146 | $teal-900: #004d40 !default; 147 | $teal-A100: #a7ffeb !default; 148 | $teal-A200: #64ffda !default; 149 | $teal-A400: #1de9b6 !default; 150 | $teal-A700: #00bfa5 !default; 151 | $teal: $teal-500 !default; 152 | 153 | 154 | $green-50: #e8f5e9 !default; 155 | $green-100: #c8e6c9 !default; 156 | $green-200: #a5d6a7 !default; 157 | $green-300: #81c784 !default; 158 | $green-400: #66bb6a !default; 159 | $green-500: #4caf50 !default; 160 | $green-600: #43a047 !default; 161 | $green-700: #388e3c !default; 162 | $green-800: #2e7d32 !default; 163 | $green-900: #1b5e20 !default; 164 | $green-A100: #b9f6ca !default; 165 | $green-A200: #69f0ae !default; 166 | $green-A400: #00e676 !default; 167 | $green-A700: #00c853 !default; 168 | $green: $green-500 !default; 169 | 170 | 171 | $light-green-50: #f1f8e9 !default; 172 | $light-green-100: #dcedc8 !default; 173 | $light-green-200: #c5e1a5 !default; 174 | $light-green-300: #aed581 !default; 175 | $light-green-400: #9ccc65 !default; 176 | $light-green-500: #8bc34a !default; 177 | $light-green-600: #7cb342 !default; 178 | $light-green-700: #689f38 !default; 179 | $light-green-800: #558b2f !default; 180 | $light-green-900: #33691e !default; 181 | $light-green-A100: #ccff90 !default; 182 | $light-green-A200: #b2ff59 !default; 183 | $light-green-A400: #76ff03 !default; 184 | $light-green-A700: #64dd17 !default; 185 | $light-green: $light-green-500 !default; 186 | 187 | 188 | $lime-50: #f9fbe7 !default; 189 | $lime-100: #f0f4c3 !default; 190 | $lime-200: #e6ee9c !default; 191 | $lime-300: #dce775 !default; 192 | $lime-400: #d4e157 !default; 193 | $lime-500: #cddc39 !default; 194 | $lime-600: #c0ca33 !default; 195 | $lime-700: #afb42b !default; 196 | $lime-800: #9e9d24 !default; 197 | $lime-900: #827717 !default; 198 | $lime-A100: #f4ff81 !default; 199 | $lime-A200: #eeff41 !default; 200 | $lime-A400: #c6ff00 !default; 201 | $lime-A700: #aeea00 !default; 202 | $lime: $lime-500 !default; 203 | 204 | 205 | $yellow-50: #fffde7 !default; 206 | $yellow-100: #fff9c4 !default; 207 | $yellow-200: #fff59d !default; 208 | $yellow-300: #fff176 !default; 209 | $yellow-400: #ffee58 !default; 210 | $yellow-500: #fec60a !default; 211 | $yellow-600: #fdd835 !default; 212 | $yellow-700: #fbc02d !default; 213 | $yellow-800: #f9a825 !default; 214 | $yellow-900: #f57f17 !default; 215 | $yellow-A100: #ffff8d !default; 216 | $yellow-A200: #ffff00 !default; 217 | $yellow-A400: #ffea00 !default; 218 | $yellow-A700: #ffd600 !default; 219 | $yellow: $yellow-700 !default; 220 | 221 | 222 | $amber-50: #fff8e1 !default; 223 | $amber-100: #ffecb3 !default; 224 | $amber-200: #ffe082 !default; 225 | $amber-300: #ffd54f !default; 226 | $amber-400: #ffca28 !default; 227 | $amber-500: #ffc107 !default; 228 | $amber-600: #ffb300 !default; 229 | $amber-700: #ffa000 !default; 230 | $amber-800: #ff8f00 !default; 231 | $amber-900: #ff6f00 !default; 232 | $amber-A100: #ffe57f !default; 233 | $amber-A200: #ffd740 !default; 234 | $amber-A400: #ffc400 !default; 235 | $amber-A700: #ffab00 !default; 236 | $amber: $amber-500 !default; 237 | 238 | 239 | $orange-50: #fff3e0 !default; 240 | $orange-100: #ffe0b2 !default; 241 | $orange-200: #ffcc80 !default; 242 | $orange-300: #ffb74d !default; 243 | $orange-400: #ffa726 !default; 244 | $orange-500: #ff9800 !default; 245 | $orange-600: #fb8c00 !default; 246 | $orange-700: #f57c00 !default; 247 | $orange-800: #ef6c00 !default; 248 | $orange-900: #e65100 !default; 249 | $orange-A100: #ffd180 !default; 250 | $orange-A200: #ffab40 !default; 251 | $orange-A400: #ff9100 !default; 252 | $orange-A700: #ff6d00 !default; 253 | $orange: $orange-500 !default; 254 | 255 | 256 | $deep-orange-50: #fbe9e7 !default; 257 | $deep-orange-100: #ffccbc !default; 258 | $deep-orange-200: #ffab91 !default; 259 | $deep-orange-300: #ff8a65 !default; 260 | $deep-orange-400: #ff7043 !default; 261 | $deep-orange-500: #ff5722 !default; 262 | $deep-orange-600: #f4511e !default; 263 | $deep-orange-700: #e64a19 !default; 264 | $deep-orange-800: #d84315 !default; 265 | $deep-orange-900: #bf360c !default; 266 | $deep-orange-A100: #ff9e80 !default; 267 | $deep-orange-A200: #ff6e40 !default; 268 | $deep-orange-A400: #ff3d00 !default; 269 | $deep-orange-A700: #dd2c00 !default; 270 | $deep-orange: $deep-orange-500 !default; 271 | 272 | 273 | $brown-50: #efebe9 !default; 274 | $brown-100: #d7ccc8 !default; 275 | $brown-200: #bcaaa4 !default; 276 | $brown-300: #a1887f !default; 277 | $brown-400: #8d6e63 !default; 278 | $brown-500: #795548 !default; 279 | $brown-600: #6d4c41 !default; 280 | $brown-700: #5d4037 !default; 281 | $brown-800: #4e342e !default; 282 | $brown-900: #3e2723 !default; 283 | $brown-A100: #d7ccc8 !default; 284 | $brown-A200: #bcaaa4 !default; 285 | $brown-A400: #8d6e63 !default; 286 | $brown-A700: #5d4037 !default; 287 | $brown: $brown-500 !default; 288 | 289 | 290 | $grey-50: #fafafa !default; 291 | $grey-100: #f5f5f5 !default; 292 | $grey-200: #eeeeee !default; 293 | $grey-300: #e0e0e0 !default; 294 | $grey-400: #bdbdbd !default; 295 | $grey-500: #9e9e9e; $rgb-grey-500: "158, 158, 158" !default; 296 | $grey-600: #757575 !default; 297 | $grey-700: #616161 !default; 298 | $grey-800: #424242 !default; 299 | $grey-900: #212121 !default; 300 | $grey-A100: #f5f5f5 !default; 301 | $grey-A200: #eeeeee !default; 302 | $grey-A400: #bdbdbd !default; 303 | $grey-A700: #616161 !default; 304 | $grey: $grey-500 !default; 305 | 306 | 307 | $blue-grey-50: #eceff1 !default; 308 | $blue-grey-100: #cfd8dc !default; 309 | $blue-grey-200: #b0bec5 !default; 310 | $blue-grey-300: #90a4ae !default; 311 | $blue-grey-400: #78909c !default; 312 | $blue-grey-500: #607d8b !default; 313 | $blue-grey-600: #546e7a !default; 314 | $blue-grey-700: #455a64 !default; 315 | $blue-grey-800: #37474f !default; 316 | $blue-grey-900: #263238 !default; 317 | $blue-grey-A100: #cfd8dc !default; 318 | $blue-grey-A200: #b0bec5 !default; 319 | $blue-grey-A400: #78909c !default; 320 | $blue-grey-A700: #455a64 !default; 321 | $blue-grey: $blue-grey-500 !default; 322 | 323 | 324 | $black: #000000; $rgb-black: "0,0,0" !default; 325 | $white: #ffffff; $rgb-white: "255,255,255" !default; 326 | -------------------------------------------------------------------------------- /src/assets/sass/md/_dialogs.scss: -------------------------------------------------------------------------------- 1 | // This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten. 2 | 3 | // 4 | // Modals 5 | // Material Design element Dialogs 6 | // -------------------------------------------------- 7 | .modal-content { 8 | @include shadow-z-5(); 9 | border-radius: $border-radius-large; 10 | border: none; 11 | // Modal header 12 | // Top section of the modal w/ title and dismiss 13 | .modal-header { 14 | border-bottom: none; 15 | padding-top: 24px; 16 | padding-right: 24px; 17 | padding-bottom: 0; 18 | padding-left: 24px; 19 | } 20 | // Modal body 21 | // Where all modal content resides (sibling of .modal-header and .modal-footer) 22 | .modal-body { 23 | padding-top: 24px; 24 | padding-right: 24px; 25 | padding-bottom: 16px; 26 | padding-left: 24px; 27 | } 28 | // Footer (for actions) 29 | .modal-footer { 30 | border-top: none; 31 | padding: 7px; 32 | 33 | &.text-center{ 34 | text-align: center; 35 | } 36 | 37 | button { 38 | margin: 0; 39 | padding-left: 16px; 40 | padding-right: 16px; 41 | width: auto; 42 | &.pull-left { 43 | padding-left: 5px; 44 | padding-right: 5px; 45 | position: relative; 46 | left: -5px; 47 | } 48 | } 49 | button+button { 50 | margin-bottom: 16px; 51 | } 52 | } 53 | .modal-body + .modal-footer { 54 | padding-top: 0; 55 | } 56 | } 57 | .modal-backdrop { 58 | background: rgba(0,0,0,0.3); 59 | } 60 | 61 | .modal{ 62 | .modal-dialog{ 63 | margin-top: 100px; 64 | } 65 | .modal-header .close{ 66 | color: $gray-light; 67 | 68 | &:hover, 69 | &:focus{ 70 | opacity: 1; 71 | } 72 | 73 | i{ 74 | font-size: 16px; 75 | } 76 | } 77 | } 78 | 79 | .modal-notice { 80 | .instruction{ 81 | margin-bottom: 25px; 82 | } 83 | .picture{ 84 | max-width: 150px; 85 | } 86 | 87 | .modal-content{ 88 | .btn-raised{ 89 | margin-bottom: 15px; 90 | } 91 | } 92 | } 93 | 94 | .modal-small{ 95 | width: 300px; 96 | .modal-body{ 97 | margin-top: 20px; 98 | } 99 | } -------------------------------------------------------------------------------- /src/assets/sass/md/_dropdown.scss: -------------------------------------------------------------------------------- 1 | .dropdown-menu { 2 | border: 0; 3 | box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); 4 | 5 | .divider { 6 | background-color: rgba(0, 0, 0, .12); 7 | } 8 | 9 | 10 | li > a{ 11 | font-size: $mdb-dropdown-font-size; 12 | padding: 10px 20px; 13 | margin: 0 5px; 14 | border-radius: $border-radius-small; 15 | @include transition($fast-transition-time, $transition-linear); 16 | 17 | &:hover, 18 | &:focus { 19 | @include shadow-8dp(); 20 | 21 | } 22 | } 23 | 24 | &.dropdown-with-icons{ 25 | li > a{ 26 | padding: 12px 20px 12px 12px; 27 | 28 | .material-icons{ 29 | vertical-align: middle; 30 | font-size: 24px; 31 | position: relative; 32 | margin-top: -4px; 33 | top: 1px; 34 | margin-right: 12px; 35 | opacity: .5; 36 | } 37 | } 38 | } 39 | 40 | li { 41 | position: relative; 42 | a:hover, 43 | a:focus, 44 | a:active { 45 | background-color: $brand-primary; 46 | color: #FFFFFF; 47 | } 48 | } 49 | 50 | .divider{ 51 | margin: 5px 0; 52 | } 53 | 54 | .navbar &, 55 | .navbar.navbar-default &{ 56 | li{ 57 | a:hover, 58 | a:focus, 59 | a:active { 60 | background-color: $brand-primary; 61 | color: #FFFFFF; 62 | @include shadow-big-color($brand-primary); 63 | } 64 | } 65 | } 66 | 67 | } 68 | -------------------------------------------------------------------------------- /src/assets/sass/md/_footers.scss: -------------------------------------------------------------------------------- 1 | footer{ 2 | padding: $padding-base 0; 3 | 4 | ul{ 5 | margin-bottom: 0; 6 | padding: 0; 7 | list-style: none; 8 | 9 | li{ 10 | display: inline-block; 11 | 12 | a{ 13 | color: inherit; 14 | padding: $padding-base; 15 | font-weight: $font-weight-bold; 16 | font-size: $mdb-btn-font-size-base; 17 | text-transform: uppercase; 18 | border-radius: $border-radius-base; 19 | text-decoration: none; 20 | position: relative; 21 | display: block; 22 | 23 | &:hover{ 24 | text-decoration: none; 25 | } 26 | } 27 | } 28 | } 29 | 30 | .copyright{ 31 | padding: 15px 0; 32 | margin: 0; 33 | .material-icons{ 34 | font-size: 18px; 35 | position: relative; 36 | top: 3px; 37 | } 38 | } 39 | 40 | .btn{ 41 | margin-top: 0; 42 | margin-bottom: 0; 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/assets/sass/md/_forms.scss: -------------------------------------------------------------------------------- 1 | // This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten. 2 | 3 | @mixin mdb-label-color-toggle-focus(){ 4 | // override bootstrap focus and keep all the standard color (could be multiple radios in the form group) 5 | .form-group.is-focused & { 6 | color: $mdb-label-color; 7 | 8 | // on focus just darken the specific labels, do not turn them to the brand-primary 9 | &:hover, 10 | &:focus { 11 | color: $mdb-label-color-toggle-focus; 12 | } 13 | 14 | // correct the above focus color for disabled items 15 | fieldset[disabled] & { 16 | color: $mdb-label-color; 17 | } 18 | } 19 | } 20 | 21 | .form-horizontal { 22 | 23 | // Consistent vertical alignment of radios and checkboxes 24 | .radio, 25 | .checkbox, 26 | .radio-inline, 27 | .checkbox-inline { 28 | padding-top: 0; 29 | } 30 | 31 | .radio { 32 | margin-bottom: 10px; 33 | } 34 | 35 | label { 36 | text-align: right; 37 | } 38 | 39 | label.control-label { 40 | margin: 0; 41 | } 42 | } 43 | 44 | .form-newsletter{ 45 | .input-group, 46 | .form-group{ 47 | float: left; 48 | width: 78%; 49 | margin-right: 2%; 50 | margin-top: 9px; 51 | } 52 | 53 | .btn{ 54 | float: left; 55 | width: 20%; 56 | margin: 9px 0 0; 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /src/assets/sass/md/_inputs-size.scss: -------------------------------------------------------------------------------- 1 | // This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten. 2 | 3 | // 4 | // Forms - sizing - material - mirrors bootstrap/forms.less with custom sizing 5 | // 6 | // LEAVE THIS IDENTICAL TO THE BOOTSTRAP FILE - DO NOT CUSTOMIZE HERE. 7 | // 8 | // NOTE: this is intentionally kept structurally _identical_ to the bootstrap/forms.less file to make it easier 9 | // to identify differences in sizing approaches to form inputs. 10 | // -------------------------------------------------- 11 | 12 | legend { 13 | margin-bottom: $mdb-input-line-height-computed; 14 | font-size: ($mdb-input-font-size-base * 1.5); 15 | } 16 | 17 | // Adjust output element 18 | output { 19 | padding-top: ($mdb-input-padding-base-vertical + 1); 20 | font-size: $mdb-input-font-size-base; 21 | line-height: $mdb-input-line-height-base; 22 | } 23 | 24 | .form-control { 25 | height: $mdb-input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border) 26 | padding: $mdb-input-padding-base-vertical $mdb-input-padding-base-horizontal; 27 | font-size: $mdb-input-font-size-base; 28 | line-height: $mdb-input-line-height-base; 29 | } 30 | 31 | // Special styles for iOS temporal inputs 32 | // 33 | // In Mobile Safari, setting `display: block` on temporal inputs causes the 34 | // text within the input to become vertically misaligned. As a workaround, we 35 | // set a pixel line-height that matches the given height of the input, but only 36 | // for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848 37 | // 38 | // Note that as of 8.3, iOS doesn't support `datetime` or `week`. 39 | 40 | @media screen and (-webkit-min-device-pixel-ratio: 0) { 41 | input[type="date"], 42 | input[type="time"], 43 | input[type="datetime-local"], 44 | input[type="month"] { 45 | &.form-control { 46 | line-height: $mdb-input-height-base; 47 | } 48 | 49 | &.input-sm, 50 | .input-group-sm & { 51 | line-height: $mdb-input-height-small; 52 | } 53 | 54 | &.input-lg, 55 | .input-group-lg & { 56 | line-height: $mdb-input-height-large; 57 | } 58 | } 59 | } 60 | 61 | .radio, 62 | .checkbox { 63 | 64 | label { 65 | min-height: $mdb-input-line-height-computed; // Ensure the input doesn't jump when there is no text 66 | } 67 | } 68 | 69 | 70 | // Static form control text 71 | // 72 | // Apply class to a `p` element to make any string of text align with labels in 73 | // a horizontal form layout. 74 | 75 | .form-control-static { 76 | // Size it appropriately next to real form controls 77 | padding-top: ($mdb-input-padding-base-vertical + 1); 78 | padding-bottom: ($mdb-input-padding-base-vertical + 1); 79 | min-height: ($mdb-input-line-height-computed + $mdb-input-font-size-base); 80 | } 81 | 82 | 83 | // Form control sizing 84 | // 85 | // Relative text size, padding, and border-radii changes for form controls. For 86 | // horizontal sizing, wrap controls in the predefined grid classes. `