├── .gitignore ├── example ├── index.js └── App.vue ├── themes ├── material │ ├── mixins │ │ ├── _shadows.scss │ │ └── _vendor-prefixes.scss │ ├── _colors.scss │ ├── _material-colors.scss │ └── _mixins.scss ├── transitions │ └── _transitions.scss ├── default.scss ├── material.scss ├── default.css ├── now-ui.scss ├── now-ui.css ├── material.css └── default │ └── _variables.scss ├── .editorconfig ├── LICENSE ├── package.json ├── src ├── Notifications.js ├── index.js └── Notification.js └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | npm-debug.log 4 | yarn.lock 5 | package-lock.json -------------------------------------------------------------------------------- /example/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import '../themes/now-ui.scss' 4 | 5 | new Vue({ 6 | el: '#app', 7 | render: h => h(App) 8 | }) 9 | -------------------------------------------------------------------------------- /themes/material/mixins/_shadows.scss: -------------------------------------------------------------------------------- 1 | @mixin shadow-big-color($color){ 2 | box-shadow: 0 12px 20px -10px rgba($color, $mdb-shadow-key-penumbra-opacity * 2), 3 | 0 4px 20px 0px rgba(0,0,0, $mdb-shadow-ambient-shadow-opacity), 4 | 0 7px 8px -5px rgba($color, $mdb-shadow-key-umbra-opacity); 5 | 6 | } -------------------------------------------------------------------------------- /themes/transitions/_transitions.scss: -------------------------------------------------------------------------------- 1 | .list-move { 2 | transition: transform 0.3s, opacity 0.4s; 3 | } 4 | .list-item { 5 | display: inline-block; 6 | margin-right: 10px; 7 | 8 | } 9 | .list-enter-active, .list-leave-active { 10 | transition: opacity 0.4s; 11 | } 12 | .list-enter, .list-leave-to /* .list-leave-active for <2.1.8 */ { 13 | opacity: 0; 14 | } 15 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | # The JSON files contain newlines inconsistently 13 | [*.json] 14 | insert_final_newline = ignore 15 | 16 | # Minified JavaScript files shouldn't be changed 17 | [**.min.js] 18 | indent_style = ignore 19 | insert_final_newline = ignore 20 | 21 | [*.md] 22 | trim_trailing_whitespace = false 23 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Cristi Jora 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 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-notifyjs", 3 | "version": "0.4.3", 4 | "description": "Simple notification component for Vue.js", 5 | "repository": { 6 | "url": "cristijora/vue-notifyjs", 7 | "type": "git" 8 | }, 9 | "main": "dist/vue-notifyjs.common.js", 10 | "unpkg": "dist/vue-notifyjs", 11 | "poi": { 12 | "entry": "example/index.js", 13 | "dist": "example/dist", 14 | "homepage": "/vue-notifyjs/" 15 | }, 16 | "files": [ 17 | "dist", 18 | "themes" 19 | ], 20 | "scripts": { 21 | "test": "echo 'no tests!' && npm run lint", 22 | "prepublish": "npm run build", 23 | "lint": "xo", 24 | "build": "bili --external=vue --format cjs --format umd --compress --banner --js babel && node-sass themes/ -o themes/", 25 | "build:example": "poi build", 26 | "dev": "poi --port 5000", 27 | "deploy": "npm run build:example && gh-pages -d example/dist" 28 | }, 29 | "author": "cristij ", 30 | "license": "MIT", 31 | "dependencies": {}, 32 | "peerDependencies": { 33 | "vue": "^2.2.0" 34 | }, 35 | "devDependencies": { 36 | "babel-preset-vue-app": "^2.0.0", 37 | "bili": "^0.16.0-rc.2", 38 | "bootstrap": "^3.3.7", 39 | "eslint-config-rem": "^3.0.0", 40 | "gh-pages": "^1.0.0", 41 | "node-sass": "^4.7.2", 42 | "poi": "^9.0.2", 43 | "rollup-plugin-babel": "^2.7.1", 44 | "sass-loader": "^6.0.6", 45 | "vue": "^2.3.4", 46 | "vue-github-badge": "^1.0.0", 47 | "xo": "^0.18.0" 48 | }, 49 | "xo": { 50 | "extends": "rem/prettier", 51 | "ignores": [ 52 | "example/**" 53 | ] 54 | }, 55 | "babel": { 56 | "presets": [ 57 | [ 58 | "vue-app", 59 | { 60 | "useBuiltIns": true 61 | } 62 | ] 63 | ] 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /themes/default.scss: -------------------------------------------------------------------------------- 1 | @import "./default/variables"; 2 | @import "./transitions/transitions"; 3 | .vue-notifyjs{ 4 | button.close { 5 | -webkit-appearance: none; 6 | padding: 0; 7 | cursor: pointer; 8 | background: transparent; 9 | border: 0; 10 | } 11 | .close { 12 | float: right; 13 | font-size: 21px; 14 | font-weight: bold; 15 | line-height: 1; 16 | color: #000; 17 | text-shadow: 0 1px 0 #fff; 18 | filter: alpha(opacity=20); 19 | opacity: .2; 20 | } 21 | 22 | .alert { 23 | border: 0; 24 | border-radius: 0; 25 | color: #FFFFFF; 26 | padding: 10px 15px; 27 | font-size: 14px; 28 | z-index: 100; 29 | display: inline-block; 30 | position: fixed !important; 31 | transition: all 0.5s ease-in-out; 32 | cursor: pointer; 33 | &.center { 34 | left: 0px; 35 | right: 0px; 36 | margin: 0 auto; 37 | } 38 | &.left { 39 | left: 20px; 40 | } 41 | &.right { 42 | right: 20px; 43 | } 44 | .container & { 45 | border-radius: 4px; 46 | } 47 | .navbar & { 48 | border-radius: 0; 49 | left: 0; 50 | position: absolute; 51 | right: 0; 52 | top: 85px; 53 | width: 100%; 54 | z-index: 3; 55 | } 56 | .navbar:not(.navbar-transparent) & { 57 | top: 70px; 58 | } 59 | .alert-icon { 60 | font-size: 30px; 61 | margin-right: 5px; 62 | } 63 | .close~span { 64 | display: block; 65 | max-width: 89%; 66 | } 67 | &[data-notify="container"] { 68 | width: 350px; 69 | padding: 10px 10px 10px 20px; 70 | border-radius: $border-radius-base; 71 | } 72 | &.alert-with-icon { 73 | padding-left: 65px; 74 | } 75 | } 76 | .alert-info { 77 | background-color: $bg-info; 78 | color: $info-states-color; 79 | } 80 | .alert-success { 81 | background-color: $bg-success; 82 | color: $success-states-color; 83 | } 84 | .alert-warning { 85 | background-color: $bg-warning; 86 | color: $warning-states-color; 87 | } 88 | .alert-danger { 89 | background-color: $bg-danger; 90 | color: $danger-states-color; 91 | } 92 | } -------------------------------------------------------------------------------- /src/Notifications.js: -------------------------------------------------------------------------------- 1 | import Notification from './Notification.js' 2 | export default { 3 | props: { 4 | transitionName: { 5 | type: String, 6 | default: 'list' 7 | }, 8 | transitionMode: { 9 | type: String, 10 | default: 'in-out' 11 | }, 12 | overlap: { 13 | type: Boolean, 14 | default: false 15 | } 16 | }, 17 | data () { 18 | return { 19 | notifications: this.$notifications.state 20 | } 21 | }, 22 | methods: { 23 | removeNotification (timestamp) { 24 | this.$notifications.removeNotification(timestamp) 25 | } 26 | }, 27 | created(){ 28 | this.$notifications.settings.overlap = this.overlap 29 | }, 30 | render(){ 31 | const renderedNotifications = this.$notifications.state.map((notification, index) => { 32 | return 46 | } 47 | ) 48 | return ( 49 |
50 | 51 | {renderedNotifications} 52 | 53 |
54 | ) 55 | }, 56 | watch: { 57 | overlap: function (newVal) { 58 | this.$notifications.settings.overlap = newVal 59 | } 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /themes/material/_colors.scss: -------------------------------------------------------------------------------- 1 | @import "material-colors"; 2 | $gray-base: #000 !default; 3 | $gray-darker: lighten($gray-base, 13.5%) !default; // #222 4 | $gray-dark: lighten($gray-base, 20%) !default; // #333 5 | $gray: lighten($gray-base, 33.5%) !default; // #555 6 | $gray-light: #999999 !default; // #999999 7 | $gray-lighter: lighten($gray-base, 93.5%) !default; // #eee 8 | 9 | /*$brand-primary: darken(#428bca, 6.5%) !default; // #337ab7 10 | $brand-success: #5cb85c !default; 11 | $brand-info: #5bc0de !default; 12 | $brand-warning: #f0ad4e !default; 13 | $brand-danger: #d9534f !default;*/ 14 | 15 | $black-color: #3C4858 !default; 16 | $black-input-color: #555555 !default; 17 | 18 | $black: #000000; $rgb-black: "0,0,0" !default; 19 | $white: #ffffff; $rgb-white: "255,255,255" !default; 20 | $white-color: $white; 21 | 22 | $font-size-base: 14px !default; 23 | $font-size-large: ceil(($font-size-base * 1.25)) !default; // ~18px 24 | $font-size-small: ceil(($font-size-base * 0.85)) !default; // ~12px 25 | $font-weight-bold: 500 !default; 26 | $border-radius-base: 4px !default; 27 | $margin-base: 15px !default; 28 | 29 | // Typography elements 30 | $mdb-font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !default; 31 | $mdb-text-color-light: $white !default; 32 | $mdb-text-color-light-hex: $white !default; // for contrast function in inverse 33 | $mdb-text-color-primary: unquote("rgba(#{$rgb-black}, 0.87)") !default; 34 | $mdb-text-color-primary-hex: $black !default; // for contrast function in inverse 35 | $icon-color: rgba(0,0,0,0.5) !default; 36 | /* SHADOWS */ 37 | $mdb-shadow-key-umbra-opacity: 0.2 !default; 38 | $mdb-shadow-key-penumbra-opacity: 0.14 !default; 39 | $mdb-shadow-ambient-shadow-opacity: 0.12 !default; 40 | 41 | 42 | // Converted bs variables 43 | 44 | // Bootstrap brand color customization 45 | $white-color: #FFFFFF !default; 46 | 47 | $white-transparent: rgba($white-color, .8); 48 | 49 | $gray-color: #999999 !default; 50 | 51 | $brand-primary: $purple !default; 52 | $brand-success: $green !default; 53 | $brand-danger: $red !default; 54 | $brand-warning: $orange !default; 55 | $brand-info: $cyan !default; 56 | $brand-rose: $pink !default; -------------------------------------------------------------------------------- /themes/material.scss: -------------------------------------------------------------------------------- 1 | @import "./material/mixins"; 2 | @import "./transitions/transitions"; 3 | .vue-notifyjs{ 4 | button.close { 5 | -webkit-appearance: none; 6 | padding: 0; 7 | cursor: pointer; 8 | background: 0 0; 9 | border: 0; 10 | } 11 | .close { 12 | font-size: inherit; 13 | color: #FFFFFF; 14 | opacity: .9; 15 | text-shadow: none; 16 | float: right; 17 | font-weight: bold; 18 | line-height: 1; 19 | filter: alpha(opacity=20); 20 | } 21 | .alert { 22 | border: 0; 23 | border-radius: 0; 24 | padding: 20px 15px; 25 | line-height: 20px; 26 | color: #FFFFFF; 27 | font-size: 14px; 28 | z-index: 100; 29 | display: inline-block; 30 | position: fixed !important; 31 | transition: all 0.5s ease-in-out; 32 | min-width:100px; 33 | cursor: pointer; 34 | &.center { 35 | left: 0px; 36 | right: 0px; 37 | margin: 0 auto; 38 | } 39 | &.left { 40 | left: 20px; 41 | } 42 | &.right { 43 | right: 20px; 44 | } 45 | b{ 46 | font-weight: $font-weight-bold; 47 | text-transform: uppercase; 48 | font-size: $font-size-small; 49 | } 50 | // SASS conversion note: please mirror any content change in _mixins-shared.scss alert-variations-content 51 | @include alert-variations(unquote(".alert"), unquote(""), $mdb-text-color-light); 52 | 53 | &-info, &-danger, &-warning, &-success { 54 | color: $mdb-text-color-light; 55 | } 56 | 57 | &-default { 58 | a, .alert-link { 59 | color: $mdb-text-color-primary; 60 | } 61 | } 62 | &[data-notify="container"] { 63 | width: 350px; 64 | padding: 10px 10px 10px 20px; 65 | border-radius: $border-radius-base; 66 | } 67 | i[data-notify="icon"] { 68 | font-size: 30px; 69 | display: block; 70 | left: 15px; 71 | position: absolute; 72 | top: 50%; 73 | margin-top: -15px; 74 | } 75 | span{ 76 | display: block; 77 | max-width: 89%; 78 | } 79 | 80 | .alert-icon{ 81 | display: block; 82 | float: left; 83 | margin-right: $margin-base; 84 | 85 | i{ 86 | margin-top: -7px; 87 | top: 5px; 88 | position: relative; 89 | } 90 | } 91 | } 92 | 93 | .alert.alert-with-icon { 94 | padding-left: 65px; 95 | } 96 | } -------------------------------------------------------------------------------- /themes/default.css: -------------------------------------------------------------------------------- 1 | /* light colors - used for select dropdown */ 2 | .list-move { 3 | transition: transform 0.3s, opacity 0.4s; } 4 | 5 | .list-item { 6 | display: inline-block; 7 | margin-right: 10px; } 8 | 9 | .list-enter-active, .list-leave-active { 10 | transition: opacity 0.4s; } 11 | 12 | .list-enter, .list-leave-to { 13 | opacity: 0; } 14 | 15 | .vue-notifyjs button.close { 16 | -webkit-appearance: none; 17 | padding: 0; 18 | cursor: pointer; 19 | background: transparent; 20 | border: 0; } 21 | 22 | .vue-notifyjs .close { 23 | float: right; 24 | font-size: 21px; 25 | font-weight: bold; 26 | line-height: 1; 27 | color: #000; 28 | text-shadow: 0 1px 0 #fff; 29 | filter: alpha(opacity=20); 30 | opacity: .2; } 31 | 32 | .vue-notifyjs .alert { 33 | border: 0; 34 | border-radius: 0; 35 | color: #FFFFFF; 36 | padding: 10px 15px; 37 | font-size: 14px; 38 | z-index: 100; 39 | display: inline-block; 40 | position: fixed !important; 41 | transition: all 0.5s ease-in-out; 42 | cursor: pointer; } 43 | .vue-notifyjs .alert.center { 44 | left: 0px; 45 | right: 0px; 46 | margin: 0 auto; } 47 | .vue-notifyjs .alert.left { 48 | left: 20px; } 49 | .vue-notifyjs .alert.right { 50 | right: 20px; } 51 | .container .vue-notifyjs .alert { 52 | border-radius: 4px; } 53 | .navbar .vue-notifyjs .alert { 54 | border-radius: 0; 55 | left: 0; 56 | position: absolute; 57 | right: 0; 58 | top: 85px; 59 | width: 100%; 60 | z-index: 3; } 61 | .navbar:not(.navbar-transparent) .vue-notifyjs .alert { 62 | top: 70px; } 63 | .vue-notifyjs .alert .alert-icon { 64 | font-size: 30px; 65 | margin-right: 5px; } 66 | .vue-notifyjs .alert .close ~ span { 67 | display: block; 68 | max-width: 89%; } 69 | .vue-notifyjs .alert[data-notify="container"] { 70 | width: 350px; 71 | padding: 10px 10px 10px 20px; 72 | border-radius: 4px; } 73 | .vue-notifyjs .alert.alert-with-icon { 74 | padding-left: 65px; } 75 | 76 | .vue-notifyjs .alert-info { 77 | background-color: #7CE4FE; 78 | color: #3091B2; } 79 | 80 | .vue-notifyjs .alert-success { 81 | background-color: #8EF3C5; 82 | color: #229863; } 83 | 84 | .vue-notifyjs .alert-warning { 85 | background-color: #FFE28C; 86 | color: #BB992F; } 87 | 88 | .vue-notifyjs .alert-danger { 89 | background-color: #FF8F5E; 90 | color: #B33C12; } 91 | -------------------------------------------------------------------------------- /themes/now-ui.scss: -------------------------------------------------------------------------------- 1 | @import "transitions/transitions"; 2 | $border-radius-base: 4px !default; 3 | .vue-notifyjs { 4 | button.close { 5 | -webkit-appearance: none; 6 | padding: 0; 7 | cursor: pointer; 8 | background: transparent; 9 | border: 0; 10 | } 11 | 12 | .close { 13 | float: right; 14 | font-size: 21px; 15 | font-weight: bold; 16 | line-height: 1; 17 | color: #000; 18 | text-shadow: 0 1px 0 #fff; 19 | filter: alpha(opacity=20); 20 | opacity: .2; 21 | } 22 | 23 | .alert { 24 | border: 0; 25 | border-radius: 0.1875rem; 26 | color: #FFFFFF; 27 | padding-top: .9rem; 28 | padding-bottom: .9rem; 29 | font-size: 14px; 30 | z-index: 100; 31 | display: inline-block; 32 | position: fixed !important; 33 | transition: all 0.5s ease-in-out; 34 | cursor: pointer; 35 | &.center { 36 | left: 0px; 37 | right: 0px; 38 | margin: 0 auto; 39 | } 40 | &.left { 41 | left: 20px; 42 | } 43 | &.right { 44 | right: 20px; 45 | } 46 | &[data-notify="container"] { 47 | width: 350px; 48 | padding: 10px 10px 10px 20px; 49 | border-radius: $border-radius-base; 50 | } 51 | } 52 | 53 | .alert.alert-success { 54 | background-color: #1be611; 55 | } 56 | 57 | .alert.alert-danger { 58 | background-color: #ff5050; 59 | } 60 | 61 | .alert.alert-warning { 62 | background-color: #ffbc50; 63 | } 64 | 65 | .alert.alert-info { 66 | background-color: #46b3ff; 67 | } 68 | 69 | .alert.alert-primary { 70 | background-color: #fa764b; 71 | } 72 | 73 | .alert i.fa, .alert i.now-ui-icons { 74 | font-size: 20px; 75 | } 76 | 77 | .alert .close { 78 | color: #FFFFFF; 79 | opacity: .9; 80 | text-shadow: none; 81 | line-height: 0; 82 | outline: 0; 83 | } 84 | 85 | .alert span[data-notify="icon"] { 86 | font-size: 22px; 87 | display: block; 88 | left: 19px; 89 | position: absolute; 90 | top: 50%; 91 | margin-top: -11px; 92 | } 93 | 94 | .alert button.close { 95 | position: absolute; 96 | right: 10px; 97 | top: 50%; 98 | margin-top: -13px; 99 | width: 25px; 100 | height: 25px; 101 | padding: 3px; 102 | } 103 | 104 | .alert .close ~ span { 105 | display: block; 106 | max-width: 89%; 107 | } 108 | 109 | .alert.alert-with-icon { 110 | padding-left: 65px; 111 | } 112 | 113 | 114 | } -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import Notifications from './Notifications.js' 2 | import Vue from 'vue'; 3 | 4 | const NotificationStore = { 5 | state: [], // here the notifications will be added 6 | settings: { 7 | overlap: false, 8 | verticalAlign: 'top', 9 | horizontalAlign: 'right', 10 | type: 'info', 11 | timeout: 5000, 12 | closeOnClick: true, 13 | showClose: true 14 | }, 15 | setOptions(options) { 16 | this.settings = {...this.settings, ...options} 17 | }, 18 | removeNotification(timestamp) { 19 | const indexToDelete = this.state.findIndex(n => n.timestamp === timestamp) 20 | if (indexToDelete !== -1) { 21 | this.state.splice(indexToDelete, 1) 22 | } 23 | }, 24 | addNotification(notification) { 25 | if (typeof notification === 'string' || notification instanceof String) { 26 | notification = {message: notification} 27 | } 28 | notification.timestamp = new Date() 29 | notification.timestamp.setMilliseconds(notification.timestamp.getMilliseconds() + this.state.length) 30 | notification = {...this.settings, ...notification} 31 | this.state.push(notification) 32 | }, 33 | notify(notification) { 34 | if (Array.isArray(notification)) { 35 | notification.forEach((notificationInstance) => { 36 | this.addNotification(notificationInstance) 37 | }) 38 | } else { 39 | this.addNotification(notification) 40 | } 41 | 42 | }, 43 | clear() { 44 | this.state = [] 45 | } 46 | }; 47 | 48 | function initStore(Vue){ 49 | return new Vue({ 50 | data(){ 51 | return { 52 | notificationStore: NotificationStore 53 | } 54 | }, 55 | methods: { 56 | notify(notification) { 57 | this.notificationStore.notify(notification); 58 | } 59 | } 60 | }); 61 | } 62 | 63 | export const Notification = new class { 64 | constructor(){ 65 | this.store = initStore(Vue); 66 | } 67 | 68 | notify(...params){ 69 | this.store.notify(params) 70 | } 71 | 72 | notifications(){ 73 | return this.store.notificationStore; 74 | } 75 | }; 76 | 77 | export default { 78 | install (Vue, options) { 79 | let store = initStore(Vue); 80 | Vue.prototype.$notify = store.notify; 81 | Vue.prototype.$notifications = store.notificationStore; 82 | Vue.component('Notifications', Notifications); 83 | if(options){ 84 | NotificationStore.setOptions(options) 85 | } 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /themes/now-ui.css: -------------------------------------------------------------------------------- 1 | .list-move { 2 | transition: transform 0.3s, opacity 0.4s; } 3 | 4 | .list-item { 5 | display: inline-block; 6 | margin-right: 10px; } 7 | 8 | .list-enter-active, .list-leave-active { 9 | transition: opacity 0.4s; } 10 | 11 | .list-enter, .list-leave-to { 12 | opacity: 0; } 13 | 14 | .vue-notifyjs button.close { 15 | -webkit-appearance: none; 16 | padding: 0; 17 | cursor: pointer; 18 | background: transparent; 19 | border: 0; } 20 | 21 | .vue-notifyjs .close { 22 | float: right; 23 | font-size: 21px; 24 | font-weight: bold; 25 | line-height: 1; 26 | color: #000; 27 | text-shadow: 0 1px 0 #fff; 28 | filter: alpha(opacity=20); 29 | opacity: .2; } 30 | 31 | .vue-notifyjs .alert { 32 | border: 0; 33 | border-radius: 0.1875rem; 34 | color: #FFFFFF; 35 | padding-top: .9rem; 36 | padding-bottom: .9rem; 37 | font-size: 14px; 38 | z-index: 100; 39 | display: inline-block; 40 | position: fixed !important; 41 | transition: all 0.5s ease-in-out; 42 | cursor: pointer; } 43 | .vue-notifyjs .alert.center { 44 | left: 0px; 45 | right: 0px; 46 | margin: 0 auto; } 47 | .vue-notifyjs .alert.left { 48 | left: 20px; } 49 | .vue-notifyjs .alert.right { 50 | right: 20px; } 51 | .vue-notifyjs .alert[data-notify="container"] { 52 | width: 350px; 53 | padding: 10px 10px 10px 20px; 54 | border-radius: 4px; } 55 | 56 | .vue-notifyjs .alert.alert-success { 57 | background-color: #1be611; } 58 | 59 | .vue-notifyjs .alert.alert-danger { 60 | background-color: #ff5050; } 61 | 62 | .vue-notifyjs .alert.alert-warning { 63 | background-color: #ffbc50; } 64 | 65 | .vue-notifyjs .alert.alert-info { 66 | background-color: #46b3ff; } 67 | 68 | .vue-notifyjs .alert.alert-primary { 69 | background-color: #fa764b; } 70 | 71 | .vue-notifyjs .alert i.fa, .vue-notifyjs .alert i.now-ui-icons { 72 | font-size: 20px; } 73 | 74 | .vue-notifyjs .alert .close { 75 | color: #FFFFFF; 76 | opacity: .9; 77 | text-shadow: none; 78 | line-height: 0; 79 | outline: 0; } 80 | 81 | .vue-notifyjs .alert span[data-notify="icon"] { 82 | font-size: 22px; 83 | display: block; 84 | left: 19px; 85 | position: absolute; 86 | top: 50%; 87 | margin-top: -11px; } 88 | 89 | .vue-notifyjs .alert button.close { 90 | position: absolute; 91 | right: 10px; 92 | top: 50%; 93 | margin-top: -13px; 94 | width: 25px; 95 | height: 25px; 96 | padding: 3px; } 97 | 98 | .vue-notifyjs .alert .close ~ span { 99 | display: block; 100 | max-width: 89%; } 101 | 102 | .vue-notifyjs .alert.alert-with-icon { 103 | padding-left: 65px; } 104 | -------------------------------------------------------------------------------- /src/Notification.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'notification', 3 | props: { 4 | message: String, 5 | title: String, 6 | icon: String, 7 | verticalAlign: { 8 | type: String, 9 | default: 'top', 10 | validator: (value) => { 11 | let acceptedValues = ['top', 'bottom'] 12 | return acceptedValues.indexOf(value) !== -1 13 | } 14 | }, 15 | horizontalAlign: { 16 | type: String, 17 | default: 'right', 18 | validator: (value) => { 19 | let acceptedValues = ['left', 'center', 'right'] 20 | return acceptedValues.indexOf(value) !== -1 21 | } 22 | }, 23 | type: { 24 | type: String, 25 | default: 'info', 26 | validator: (value) => { 27 | let acceptedValues = ['info', 'primary', 'danger', 'warning', 'success'] 28 | return acceptedValues.indexOf(value) !== -1 29 | } 30 | }, 31 | timeout: { 32 | type: Number, 33 | default: 5000, 34 | validator: (value) => { 35 | return value >= 0 36 | } 37 | }, 38 | timestamp: { 39 | type: Date, 40 | default: () => new Date() 41 | }, 42 | component: { 43 | type: [Object, Function] 44 | }, 45 | showClose: { 46 | type: Boolean, 47 | default: true 48 | }, 49 | closeOnClick: { 50 | type: Boolean, 51 | default: true 52 | }, 53 | clickHandler: Function, 54 | }, 55 | data () { 56 | return { 57 | elmHeight: 0 58 | } 59 | }, 60 | computed: { 61 | hasIcon () { 62 | return this.icon && this.icon.length > 0 63 | }, 64 | alertType () { 65 | return `alert-${this.type}` 66 | }, 67 | customPosition () { 68 | let initialMargin = 20 69 | let alertHeight = this.elmHeight + 10; 70 | let sameAlertsCount = this.$notifications.state.filter((alert) => { 71 | return alert.horizontalAlign === this.horizontalAlign && alert.verticalAlign === this.verticalAlign && alert.timestamp <= this.timestamp 72 | }).length 73 | if (this.$notifications.settings.overlap) { 74 | sameAlertsCount = 1 75 | } 76 | let pixels = (sameAlertsCount - 1) * alertHeight + initialMargin 77 | let styles = {} 78 | if (this.verticalAlign === 'top') { 79 | styles.top = `${pixels}px` 80 | } else { 81 | styles.bottom = `${pixels}px` 82 | } 83 | return styles 84 | } 85 | }, 86 | methods: { 87 | close () { 88 | this.$emit('close', this.timestamp) 89 | }, 90 | tryClose (evt) { 91 | if(this.clickHandler){ 92 | this.clickHandler(evt, this) 93 | } 94 | if (this.closeOnClick) { 95 | this.close() 96 | } 97 | } 98 | }, 99 | mounted () { 100 | this.elmHeight = this.$el.clientHeight 101 | if (this.timeout) { 102 | setTimeout(this.close, this.timeout) 103 | } 104 | }, 105 | render (h) { 106 | let componentName = this.component 107 | return ( 108 | 133 | ) 134 | } 135 | } 136 | -------------------------------------------------------------------------------- /example/App.vue: -------------------------------------------------------------------------------- 1 | 17 | 94 | 113 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-notifyjs 2 |

3 | 4 | 5 | 6 | 7 | 8 |

9 | Minimalist notification component for Vue 2.x 10 | 11 | Why use it? 12 | - Small: 1.5kb (minified & gzipped), 4kb (minified) 13 | - Simple `this.$notify({message:'My message'})` 14 | - Has multiple themes 15 | - The animations can be customized through Vue transitions 16 | - Can be used both through npm and as a script tag 17 | 18 | ### Demos: 19 | - [jsFiddle demo](https://jsfiddle.net/z11fe07p/2879/) 20 | - [Overlaping notifications](https://jsfiddle.net/z11fe07p/2878/) 21 | - [Custom html content via components](https://jsfiddle.net/z11fe07p/2880/) 22 | - [Custom animations](https://jsfiddle.net/z11fe07p/2882/) 23 | - [Clears all current notifications](https://jsfiddle.net/z11fe07p/2883/) 24 | 25 | ### 3 themes supported 26 | #### [Default theme](https://jsfiddle.net/z11fe07p/2879/) 27 | #### [Material design theme](https://jsfiddle.net/z11fe07p/2884/) 28 | #### [Now-ui theme](https://jsfiddle.net/z11fe07p/2886/) 29 | 30 | ## Install 31 | 32 | ```bash 33 | yarn add vue-notifyjs 34 | ``` 35 | 36 | ### CDN JS: 37 | * https://unpkg.com/vue-notifyjs/dist/vue-notifyjs.min.js 38 | * https://unpkg.com/vue-notifyjs/dist/vue-notifyjs.js 39 | 40 | ### CDN CSS: 41 | * https://unpkg.com/vue-notifyjs/themes/default.css 42 | * https://unpkg.com/vue-notifyjs/themes/material.css 43 | * https://unpkg.com/vue-notifyjs/themes/now-ui.css 44 | 45 | ## Usage 46 | 47 | ```vue 48 | 51 | 52 | 67 | 68 | 69 | 70 | ``` 71 | **Note:** `` can be declared only once anywhere in your app, 72 | preferably in your root component so the notification component is alive inside any other components. 73 | 74 | ## Notification options 75 | You can set notification options in 3 ways 76 | 77 | 1. Upon plugin initialization 78 | 79 | ```js 80 | import Notify from 'vue-notifyjs' 81 | Vue.use(Notify, {type: 'primary', timeout: 2000}) 82 | ``` 83 | 2. Dynamically via `setOptions` method 84 | 85 | ```js 86 | this.$notifications.setOptions({ 87 | type: 'primary', 88 | timeout: 2000, 89 | horizontalAlign: 'right', 90 | verticalAlign: 'top' 91 | }) 92 | ``` 93 | 94 | 3. When using `$notify` 95 | 96 | ```js 97 | this.$notify({ 98 | message: 'Welcome', 99 | type: 'success' 100 | }) 101 | ``` 102 | 103 | **Note:** Options sent through `this.$notify` will override default options and will have higher priority than default options. 104 | 105 | ## Props 106 | 107 | ## Notifications 108 | 109 | ```js 110 | transitionName: { 111 | type:String, 112 | default:'list' 113 | }, 114 | transitionMode: { 115 | type:String, 116 | default:'in-out' 117 | }, 118 | overlap: { 119 | type: Boolean, 120 | default: false 121 | } 122 | ``` 123 | 124 | ## Notification (passed through the object sent to $notify method) 125 | ```js 126 | props: { 127 | message: String, 128 | title: String, 129 | icon: String, 130 | verticalAlign: { 131 | type: String, 132 | default: 'top' // top | bottom 133 | }, 134 | horizontalAlign: { 135 | type: String, 136 | default: 'center' // right | center | left 137 | }, 138 | type: { 139 | type: String, 140 | default: 'info' // info | warning | danger | success | primary 141 | }, 142 | timeout: { 143 | type: Number, 144 | default: 5000 145 | }, 146 | timestamp: { 147 | type: Date, 148 | default: () => new Date() 149 | }, 150 | component: { //is rendered instead of notification message 151 | type: [Object, Function] 152 | }, 153 | showClose: { 154 | type: Boolean, 155 | default: true 156 | }, 157 | closeOnClick: { 158 | type: Boolean, 159 | default: true 160 | }, 161 | clickHandler: Function, 162 | }, 163 | ``` 164 | ## Methods 165 | 166 | clear() - Clears all current notifications 167 | ```js 168 | this.$notifications.clear(); 169 | ``` 170 | 171 | ## Contributing 172 | 173 | 1. Fork it! 174 | 2. Create your feature branch: `git checkout -b my-new-feature` 175 | 3. Commit your changes: `git commit -am 'Add some feature'` 176 | 4. Push to the branch: `git push origin my-new-feature` 177 | 5. Submit a pull request :D 178 | 179 | -------------------------------------------------------------------------------- /themes/material.css: -------------------------------------------------------------------------------- 1 | /*$brand-primary: darken(#428bca, 6.5%) !default; // #337ab7 2 | $brand-success: #5cb85c !default; 3 | $brand-info: #5bc0de !default; 4 | $brand-warning: #f0ad4e !default; 5 | $brand-danger: #d9534f !default;*/ 6 | /* SHADOWS */ 7 | .list-move { 8 | transition: transform 0.3s, opacity 0.4s; } 9 | 10 | .list-item { 11 | display: inline-block; 12 | margin-right: 10px; } 13 | 14 | .list-enter-active, .list-leave-active { 15 | transition: opacity 0.4s; } 16 | 17 | .list-enter, .list-leave-to { 18 | opacity: 0; } 19 | 20 | .vue-notifyjs button.close { 21 | -webkit-appearance: none; 22 | padding: 0; 23 | cursor: pointer; 24 | background: 0 0; 25 | border: 0; } 26 | 27 | .vue-notifyjs .close { 28 | font-size: inherit; 29 | color: #FFFFFF; 30 | opacity: .9; 31 | text-shadow: none; 32 | float: right; 33 | font-weight: bold; 34 | line-height: 1; 35 | filter: alpha(opacity=20); } 36 | 37 | .vue-notifyjs .alert { 38 | border: 0; 39 | border-radius: 0; 40 | padding: 20px 15px; 41 | line-height: 20px; 42 | color: #FFFFFF; 43 | font-size: 14px; 44 | z-index: 100; 45 | display: inline-block; 46 | position: fixed !important; 47 | transition: all 0.5s ease-in-out; 48 | min-width: 100px; 49 | cursor: pointer; } 50 | .vue-notifyjs .alert.center { 51 | left: 0px; 52 | right: 0px; 53 | margin: 0 auto; } 54 | .vue-notifyjs .alert.left { 55 | left: 20px; } 56 | .vue-notifyjs .alert.right { 57 | right: 20px; } 58 | .vue-notifyjs .alert b { 59 | font-weight: 500; 60 | text-transform: uppercase; 61 | font-size: 12px; } 62 | .vue-notifyjs .alert, .vue-notifyjs .alert.alert-default { 63 | background-color: white; 64 | color: #555555; 65 | border-radius: 4px; 66 | box-shadow: 0 12px 20px -10px rgba(255, 255, 255, 0.28), 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(255, 255, 255, 0.2); } 67 | .vue-notifyjs .alert a, .vue-notifyjs .alert .alert-link, .vue-notifyjs .alert.alert-default a, .vue-notifyjs .alert.alert-default .alert-link { 68 | color: #555555; } 69 | .vue-notifyjs .alert.alert-inverse { 70 | background-color: #2e2e2e; 71 | color: #fff; 72 | border-radius: 4px; 73 | box-shadow: 0 12px 20px -10px rgba(33, 33, 33, 0.28), 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(33, 33, 33, 0.2); } 74 | .vue-notifyjs .alert.alert-inverse a, .vue-notifyjs .alert.alert-inverse .alert-link { 75 | color: #fff; } 76 | .vue-notifyjs .alert.alert-primary { 77 | background-color: #af2cc5; 78 | color: #ffffff; 79 | border-radius: 4px; 80 | box-shadow: 0 12px 20px -10px rgba(156, 39, 176, 0.28), 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(156, 39, 176, 0.2); } 81 | .vue-notifyjs .alert.alert-primary a, .vue-notifyjs .alert.alert-primary .alert-link { 82 | color: #ffffff; } 83 | .vue-notifyjs .alert.alert-success { 84 | background-color: #5cb860; 85 | color: #ffffff; 86 | border-radius: 4px; 87 | box-shadow: 0 12px 20px -10px rgba(76, 175, 80, 0.28), 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(76, 175, 80, 0.2); } 88 | .vue-notifyjs .alert.alert-success a, .vue-notifyjs .alert.alert-success .alert-link { 89 | color: #ffffff; } 90 | .vue-notifyjs .alert.alert-info { 91 | background-color: #00d3ee; 92 | color: #ffffff; 93 | border-radius: 4px; 94 | box-shadow: 0 12px 20px -10px rgba(0, 188, 212, 0.28), 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(0, 188, 212, 0.2); } 95 | .vue-notifyjs .alert.alert-info a, .vue-notifyjs .alert.alert-info .alert-link { 96 | color: #ffffff; } 97 | .vue-notifyjs .alert.alert-warning { 98 | background-color: #ffa21a; 99 | color: #ffffff; 100 | border-radius: 4px; 101 | box-shadow: 0 12px 20px -10px rgba(255, 152, 0, 0.28), 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(255, 152, 0, 0.2); } 102 | .vue-notifyjs .alert.alert-warning a, .vue-notifyjs .alert.alert-warning .alert-link { 103 | color: #ffffff; } 104 | .vue-notifyjs .alert.alert-danger { 105 | background-color: #f55a4e; 106 | color: #ffffff; 107 | border-radius: 4px; 108 | box-shadow: 0 12px 20px -10px rgba(244, 67, 54, 0.28), 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(244, 67, 54, 0.2); } 109 | .vue-notifyjs .alert.alert-danger a, .vue-notifyjs .alert.alert-danger .alert-link { 110 | color: #ffffff; } 111 | .vue-notifyjs .alert.alert-rose { 112 | background-color: #eb3573; 113 | color: #ffffff; 114 | border-radius: 4px; 115 | box-shadow: 0 12px 20px -10px rgba(233, 30, 99, 0.28), 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(233, 30, 99, 0.2); } 116 | .vue-notifyjs .alert.alert-rose a, .vue-notifyjs .alert.alert-rose .alert-link { 117 | color: #ffffff; } 118 | .vue-notifyjs .alert-info, .vue-notifyjs .alert-danger, .vue-notifyjs .alert-warning, .vue-notifyjs .alert-success { 119 | color: #ffffff; } 120 | .vue-notifyjs .alert-default a, .vue-notifyjs .alert-default .alert-link { 121 | color: rgba(0,0,0, 0.87); } 122 | .vue-notifyjs .alert[data-notify="container"] { 123 | width: 350px; 124 | padding: 10px 10px 10px 20px; 125 | border-radius: 4px; } 126 | .vue-notifyjs .alert i[data-notify="icon"] { 127 | font-size: 30px; 128 | display: block; 129 | left: 15px; 130 | position: absolute; 131 | top: 50%; 132 | margin-top: -15px; } 133 | .vue-notifyjs .alert span { 134 | display: block; 135 | max-width: 89%; } 136 | .vue-notifyjs .alert .alert-icon { 137 | display: block; 138 | float: left; 139 | margin-right: 15px; } 140 | .vue-notifyjs .alert .alert-icon i { 141 | margin-top: -7px; 142 | top: 5px; 143 | position: relative; } 144 | 145 | .vue-notifyjs .alert.alert-with-icon { 146 | padding-left: 65px; } 147 | -------------------------------------------------------------------------------- /themes/material/mixins/_vendor-prefixes.scss: -------------------------------------------------------------------------------- 1 | // User select 2 | // For selecting text on the page 3 | 4 | @mixin user-select($select) { 5 | -webkit-user-select: $select; 6 | -moz-user-select: $select; 7 | -ms-user-select: $select; // IE10+ 8 | user-select: $select; 9 | } 10 | 11 | @mixin box-shadow($shadow...) { 12 | -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1 13 | box-shadow: $shadow; 14 | } 15 | 16 | // Box sizing 17 | @mixin box-sizing($boxmodel) { 18 | -webkit-box-sizing: $boxmodel; 19 | -moz-box-sizing: $boxmodel; 20 | box-sizing: $boxmodel; 21 | } 22 | 23 | 24 | @mixin transition($time, $type){ 25 | -webkit-transition: all $time $type; 26 | -moz-transition: all $time $type; 27 | -o-transition: all $time $type; 28 | -ms-transition: all $time $type; 29 | transition: all $time $type; 30 | } 31 | 32 | @mixin transform-scale($value){ 33 | -webkit-transform: scale($value); 34 | -moz-transform: scale($value); 35 | -o-transform: scale($value); 36 | -ms-transform: scale($value); 37 | transform: scale($value); 38 | } 39 | 40 | @mixin transform-translate-x($value){ 41 | -webkit-transform: translate3d($value, 0, 0); 42 | -moz-transform: translate3d($value, 0, 0); 43 | -o-transform: translate3d($value, 0, 0); 44 | -ms-transform: translate3d($value, 0, 0); 45 | transform: translate3d($value, 0, 0); 46 | } 47 | 48 | @mixin transform-origin($coordinates){ 49 | -webkit-transform-origin: $coordinates; 50 | -moz-transform-origin: $coordinates; 51 | -o-transform-origin: $coordinates; 52 | -ms-transform-origin: $coordinates; 53 | transform-origin: $coordinates; 54 | } 55 | 56 | @mixin set-background-color-button ($color){ 57 | .moving-tab{ 58 | background-color: $color; 59 | @include shadow-big-color($color); 60 | } 61 | } 62 | 63 | @mixin radial-gradient($extern-color, $center-color){ 64 | background: $extern-color; 65 | background: -moz-radial-gradient(center, ellipse cover, $center-color 0%, $extern-color 100%); /* FF3.6+ */ 66 | background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,$center-color), color-stop(100%,$extern-color)); /* Chrome,Safari4+ */ 67 | background: -webkit-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* Chrome10+,Safari5.1+ */ 68 | background: -o-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* Opera 12+ */ 69 | background: -ms-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* IE10+ */ 70 | background: radial-gradient(ellipse at center, $center-color 0%,$extern-color 100%); /* W3C */ 71 | background-size: 550% 450%; 72 | } 73 | 74 | @mixin vertical-align { 75 | position: relative; 76 | top: 50%; 77 | -webkit-transform: translateY(-50%); 78 | -ms-transform: translateY(-50%); 79 | transform: translateY(-50%); 80 | } 81 | 82 | @mixin rotate-180(){ 83 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); 84 | -webkit-transform: rotate(180deg); 85 | -ms-transform: rotate(180deg); 86 | transform: rotate(180deg); 87 | } 88 | 89 | @mixin bar-animation($type){ 90 | -webkit-animation: $type 500ms linear 0s; 91 | -moz-animation: $type 500ms linear 0s; 92 | animation: $type 500ms 0s; 93 | -webkit-animation-fill-mode: forwards; 94 | -moz-animation-fill-mode: forwards; 95 | animation-fill-mode: forwards; 96 | } 97 | 98 | @mixin topbar-x-rotation(){ 99 | @keyframes topbar-x { 100 | 0% {top: 0px; transform: rotate(0deg); } 101 | 45% {top: 6px; transform: rotate(145deg); } 102 | 75% {transform: rotate(130deg); } 103 | 100% {transform: rotate(135deg); } 104 | } 105 | @-webkit-keyframes topbar-x { 106 | 0% {top: 0px; -webkit-transform: rotate(0deg); } 107 | 45% {top: 6px; -webkit-transform: rotate(145deg); } 108 | 75% {-webkit-transform: rotate(130deg); } 109 | 100% { -webkit-transform: rotate(135deg); } 110 | } 111 | @-moz-keyframes topbar-x { 112 | 0% {top: 0px; -moz-transform: rotate(0deg); } 113 | 45% {top: 6px; -moz-transform: rotate(145deg); } 114 | 75% {-moz-transform: rotate(130deg); } 115 | 100% { -moz-transform: rotate(135deg); } 116 | } 117 | } 118 | 119 | @mixin topbar-back-rotation(){ 120 | @keyframes topbar-back { 121 | 0% { top: 6px; transform: rotate(135deg); } 122 | 45% { transform: rotate(-10deg); } 123 | 75% { transform: rotate(5deg); } 124 | 100% { top: 0px; transform: rotate(0); } 125 | } 126 | 127 | @-webkit-keyframes topbar-back { 128 | 0% { top: 6px; -webkit-transform: rotate(135deg); } 129 | 45% { -webkit-transform: rotate(-10deg); } 130 | 75% { -webkit-transform: rotate(5deg); } 131 | 100% { top: 0px; -webkit-transform: rotate(0); } 132 | } 133 | 134 | @-moz-keyframes topbar-back { 135 | 0% { top: 6px; -moz-transform: rotate(135deg); } 136 | 45% { -moz-transform: rotate(-10deg); } 137 | 75% { -moz-transform: rotate(5deg); } 138 | 100% { top: 0px; -moz-transform: rotate(0); } 139 | } 140 | } 141 | 142 | @mixin bottombar-x-rotation(){ 143 | @keyframes bottombar-x { 144 | 0% {bottom: 0px; transform: rotate(0deg);} 145 | 45% {bottom: 6px; transform: rotate(-145deg);} 146 | 75% {transform: rotate(-130deg);} 147 | 100% {transform: rotate(-135deg);} 148 | } 149 | @-webkit-keyframes bottombar-x { 150 | 0% {bottom: 0px; -webkit-transform: rotate(0deg);} 151 | 45% {bottom: 6px; -webkit-transform: rotate(-145deg);} 152 | 75% {-webkit-transform: rotate(-130deg);} 153 | 100% {-webkit-transform: rotate(-135deg);} 154 | } 155 | @-moz-keyframes bottombar-x { 156 | 0% {bottom: 0px; -moz-transform: rotate(0deg);} 157 | 45% {bottom: 6px; -moz-transform: rotate(-145deg);} 158 | 75% {-moz-transform: rotate(-130deg);} 159 | 100% {-moz-transform: rotate(-135deg);} 160 | } 161 | } 162 | 163 | @mixin bottombar-back-rotation{ 164 | @keyframes bottombar-back { 165 | 0% { bottom: 6px;transform: rotate(-135deg);} 166 | 45% { transform: rotate(10deg);} 167 | 75% { transform: rotate(-5deg);} 168 | 100% { bottom: 0px;transform: rotate(0);} 169 | } 170 | @-webkit-keyframes bottombar-back { 171 | 0% {bottom: 6px;-webkit-transform: rotate(-135deg);} 172 | 45% {-webkit-transform: rotate(10deg);} 173 | 75% {-webkit-transform: rotate(-5deg);} 174 | 100% {bottom: 0px;-webkit-transform: rotate(0);} 175 | } 176 | @-moz-keyframes bottombar-back { 177 | 0% {bottom: 6px;-moz-transform: rotate(-135deg);} 178 | 45% {-moz-transform: rotate(10deg);} 179 | 75% {-moz-transform: rotate(-5deg);} 180 | 100% {bottom: 0px;-moz-transform: rotate(0);} 181 | } 182 | 183 | } 184 | -------------------------------------------------------------------------------- /themes/default/_variables.scss: -------------------------------------------------------------------------------- 1 | $font-color: #66615b !default; 2 | $fill-font-color: rgba(255, 255, 255, 0.7); 3 | 4 | $none: 0 !default; 5 | $border-thin: 1px !default; 6 | $border-thick: 2px !default; 7 | 8 | $white-color: #FFFFFF !default; 9 | $white-bg: #FFFFFF !default; 10 | 11 | $smoke-bg: #F5F5F5 !default; 12 | $pale-bg: #FFFCF5 !default; 13 | $medium-pale-bg: #F1EAE0 !default; 14 | 15 | $table-line-color: #CCC5B9 !default; 16 | $muted-color: #a49e93 !default; 17 | 18 | $black-bg: rgba(30, 30, 30, .97) !default; 19 | 20 | $black-color: #333333 !default; 21 | $black-hr: #444444 !default; 22 | 23 | $white-background-color: #FFFFFF !default; 24 | $black-background-color: #212120 !default; 25 | $darkblue-background-color: #35495E !default; // this is the dark blue color from Vue.js branding 26 | 27 | $light-gray: #E3E3E3 !default; 28 | $medium-gray: #DDDDDD !default; 29 | $dark-gray: #9A9A9A !default; 30 | 31 | $gray-input-bg: #fffcf5 !default; 32 | $danger-input-bg: #FFC0A4 !default; 33 | $success-input-bg: #ABF3CB !default; 34 | $other-medium-gray: #A49E93 !default; 35 | $transparent-bg: transparent !default; 36 | 37 | $default-color: #66615B !default; 38 | $default-bg: #66615B !default; 39 | $default-states-color: #403D39 !default; 40 | 41 | $primary-color: #7A9E9F !default; 42 | $primary-bg: #7A9E9F !default; 43 | $primary-states-color: #427C89 !default; 44 | 45 | $success-color: #41B883 !default; // this is the green color from Vue.js branding 46 | $success-bg: #41B883 !default; 47 | $success-states-color: #229863 !default; 48 | 49 | $info-color: #68B3C8 !default; 50 | $info-bg: #68B3C8 !default; 51 | $info-states-color: #3091B2 !default; 52 | 53 | $warning-color: #F3BB45 !default; 54 | $warning-bg: #F3BB45 !default; 55 | $warning-states-color: #BB992F !default; 56 | 57 | $danger-color: #EB5E28 !default; 58 | $danger-bg: #EB5E28 !default; 59 | $danger-states-color: #B33C12 !default; 60 | 61 | $link-disabled-color: #666666 !default; 62 | 63 | /* light colors - used for select dropdown */ 64 | 65 | $light-blue: rgba($primary-color, .2); 66 | $light-azure: rgba($info-color, .2); 67 | $light-green: rgba($success-color, .2); 68 | $light-orange: rgba($warning-color, .2); 69 | $light-red: rgba($danger-color, .2); 70 | 71 | //== Components 72 | // 73 | $padding-base-vertical: 7px !default; 74 | $padding-base-horizontal: 18px !default; 75 | 76 | $padding-round-vertical: 9px !default; 77 | $padding-round-horizontal: 18px !default; 78 | 79 | $padding-simple-vertical: 10px !default; 80 | $padding-simple-horizontal: 18px !default; 81 | 82 | $padding-large-vertical: 11px !default; 83 | $padding-large-horizontal: 30px !default; 84 | 85 | $padding-small-vertical: 4px !default; 86 | $padding-small-horizontal: 10px !default; 87 | 88 | $padding-xs-vertical: 2px !default; 89 | $padding-xs-horizontal: 5px !default; 90 | 91 | $padding-label-vertical: 2px !default; 92 | $padding-label-horizontal: 12px !default; 93 | 94 | // padding for links inside dropdown menu 95 | $padding-dropdown-vertical: 10px !default; 96 | $padding-dropdown-horizontal: 15px !default; 97 | 98 | $margin-large-vertical: 30px !default; 99 | $margin-base-vertical: 15px !default; 100 | 101 | // border radius for buttons 102 | $border-radius-btn-small: 26px !default; 103 | $border-radius-btn-base: 20px !default; 104 | $border-radius-btn-large: 50px !default; 105 | 106 | // Cristina: am schimbat aici si s-au modificat inputurile 107 | $margin-bottom: 0 0 10px 0 !default; 108 | $border-radius-small: 3px !default; 109 | $border-radius-base: 4px !default; 110 | $border-radius-large: 6px !default; 111 | $border-radius-extreme: 6px !default; 112 | 113 | $border-radius-large-top: $border-radius-large $border-radius-large 0 0 !default; 114 | $border-radius-large-bottom: 0 0 $border-radius-large $border-radius-large !default; 115 | 116 | $btn-round-radius: 30px !default; 117 | 118 | $height-base: 40px !default; 119 | 120 | $font-size-base: 14px !default; 121 | $font-size-xs: 12px !default; 122 | $font-size-small: 12px !default; 123 | $font-size-medium: 16px !default; 124 | $font-size-large: 18px !default; 125 | $font-size-large-navbar: 20px !default; 126 | 127 | $font-size-h1: 3.2em !default; 128 | $font-size-h2: 2.6em !default; 129 | $font-size-h3: 1.825em !default; 130 | $font-size-h4: 1.5em !default; 131 | $font-size-h5: 1.25em !default; 132 | $font-size-h6: 0.9em !default; 133 | $font-paragraph: 16px !default; 134 | $font-size-navbar: 16px !default; 135 | $font-size-small: 12px !default; 136 | 137 | $font-weight-light: 300 !default; 138 | $font-weight-normal: 400 !default; 139 | $font-weight-semi: 500 !default; 140 | $font-weight-bold: 600 !default; 141 | 142 | $line-height-small: 20px !default; 143 | $line-height-general: 1.4em !default; 144 | $line-height: 36px !default; 145 | $line-height-lg: 54px !default; 146 | 147 | $border-radius-top: 10px 10px 0 0 !default; 148 | $border-radius-bottom: 0 0 10px 10px !default; 149 | 150 | $dropdown-shadow: 0 2px rgba(17, 16, 15, 0.1), 0 2px 10px rgba(17, 16, 15, 0.1); 151 | 152 | $general-transition-time: 300ms !default; 153 | 154 | $slow-transition-time: 300ms !default; 155 | $dropdown-coordinates: 29px -50px !default; 156 | 157 | $fast-transition-time: 150ms !default; 158 | $select-coordinates: 50% -40px !default; 159 | 160 | $transition-linear: linear !default; 161 | $transition-bezier: cubic-bezier(0.34, 1.61, 0.7, 1) !default; 162 | $transition-ease: ease 0s; 163 | 164 | $navbar-padding-a: 10px 15px; 165 | $navbar-margin-a: 15px 0px; 166 | 167 | $padding-social-a: 10px 5px; 168 | 169 | $navbar-margin-a-btn: 15px 3px; 170 | $navbar-margin-a-btn-round: 16px 3px; 171 | 172 | $navbar-padding-brand: 20px 15px; 173 | $navbar-margin-brand: 5px 0px; 174 | 175 | $navbar-margin-brand-icons: 12px auto; 176 | 177 | $navbar-margin-btn: 15px 3px; 178 | 179 | $height-icon: 64px !default; 180 | $width-icon: 64px !default; 181 | $padding-icon: 12px !default; 182 | $border-radius-icon: 15px !default; 183 | 184 | $white-navbar: rgba(#FFFFFF, .96); 185 | $blue-navbar: rgba(#34ACDC, .98); 186 | $azure-navbar: rgba(#5BCAFF, .98); 187 | $green-navbar: rgba(#4CD964, .98); 188 | $orange-navbar: rgba(#FF9500, .98); 189 | $red-navbar: rgba(#FF4C40, .98); 190 | 191 | $bg-nude: #f4f3ef !default; 192 | $bg-primary: #8ECFD5 !default; 193 | $bg-info: #7CE4FE !default; 194 | $bg-success: #8EF3C5 !default; 195 | $bg-warning: #FFE28C !default; 196 | $bg-danger: #FF8F5E !default; 197 | 198 | $topbar-x: topbar-x !default; 199 | $topbar-back: topbar-back !default; 200 | $bottombar-x: bottombar-x !default; 201 | $bottombar-back: bottombar-back !default; 202 | 203 | $transition-linear: linear !default; 204 | $transition-bezier: cubic-bezier(0.34, 1.61, 0.7, 1) !default; 205 | $transition-ease: ease 0s; 206 | $transition-ease-in: ease-in !default; 207 | $transition-ease-out: ease-out !default; 208 | 209 | $general-transition-time: 300ms !default; 210 | 211 | $slow-transition-time: 370ms !default; 212 | $dropdown-coordinates: 29px -50px !default; 213 | 214 | $fast-transition-time: 150ms !default; 215 | 216 | $ultra-fast-transition-time: 100ms !default; 217 | 218 | $select-coordinates: 50% -40px !default; 219 | 220 | $padding-zero: 0px !default; 221 | 222 | $sidebar-width: calc(100% - 260px) !default; 223 | $medium-dark-gray: #AAAAAA !default; 224 | 225 | //variables used in cards 226 | $card-black-color: #252422 !default; 227 | $card-muted-color: #ccc5b9 !default; 228 | 229 | //variables used for sidebar 230 | $sidebar-background-dark-blue: #506367; 231 | 232 | $sidebar-background-blue: #b8d8d8 !default; 233 | $sidebar-font-blue: #506568 !default; 234 | $sidebar-subtitle-blue: #7a9e9f !default; 235 | 236 | $sidebar-background-green: #d5e5a3 !default; 237 | $sidebar-font-green: #60773d !default; 238 | $sidebar-subtitle-green: #92ac56 !default; 239 | 240 | $sidebar-background-yellow: #ffe28c !default; 241 | $sidebar-font-yellow: #b25825 !default; 242 | $sidebar-subtitle-yellow: #d88715 !default; 243 | 244 | $sidebar-background-brown: #d6c1ab !default; 245 | $sidebar-font-brown: #75442e !default; 246 | $sidebar-subtitle-brown: #a47e65 !default; 247 | 248 | $sidebar-background-purple: #baa9ba !default; 249 | $sidebar-font-purple: #3a283d !default; 250 | $sidebar-subtitle-purple: #5a283d !default; 251 | 252 | $sidebar-background-orange: #ff8f5e !default; 253 | $sidebar-font-orange: #772510 !default; 254 | $sidebar-subtitle-orange: #e95e37 !default; 255 | -------------------------------------------------------------------------------- /themes/material/_material-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 | -------------------------------------------------------------------------------- /themes/material/_mixins.scss: -------------------------------------------------------------------------------- 1 | //Utilities 2 | @import "colors"; 3 | @import "mixins/shadows"; 4 | @import "mixins/vendor-prefixes"; 5 | 6 | // Placeholder text 7 | @mixin material-placeholder() { 8 | &::-moz-placeholder {@content; } // Firefox 9 | &:-ms-input-placeholder {@content; } // Internet Explorer 10+ 10 | &::-webkit-input-placeholder {@content; } // Safari and Chrome 11 | } 12 | 13 | 14 | // variations(unquote(""), background-color, #FFF); 15 | @mixin variations($component, $selector-suffix, $mdb-param-1, $color-default) { 16 | @include generic-variations($component, $selector-suffix, $color-default, "variations-content", $mdb-param-1); 17 | } 18 | 19 | @mixin variations-content($args) { 20 | //@debug "#{map-get($args, mixin-name)}{ #{map-get($args, material-param-1)}: #{map-get($args, variation-color)}; }"; 21 | //@debug "#{inspect($args)}"; 22 | //@error "break here"; 23 | #{map-get($args, material-param-1)}: map-get($args, variation-color); 24 | } 25 | 26 | @mixin background-variations($component, $selector-suffix, $color-default) { 27 | @include generic-variations($component, $selector-suffix, $color-default, "background-variations-content", null); 28 | } 29 | 30 | @mixin background-variations-content($args) { 31 | background-color: map-get($args, variation-color); 32 | @if (map-get($args, variation-color) == $mdb-btn-background-color) { 33 | color: $mdb-text-color-primary; 34 | } @else { 35 | color: map-get($args, variation-color-text); 36 | 37 | } 38 | } 39 | 40 | //@mixin text-variations($component, $selector-suffix, $color-default) { 41 | // @include generic-variations($component, $selector-suffix, $color-default, "text-variations-content", null); 42 | //} 43 | // 44 | //@mixin text-variations-content($args) { 45 | // color: map-get($args, variation-color); 46 | //} 47 | 48 | @mixin button-variations($component, $selector-suffix, $color-default) { 49 | @include generic-variations($component, $selector-suffix, $color-default, "button-variations-content", 4%); 50 | } 51 | 52 | @mixin button-variations-content($args) { 53 | //@debug "#{inspect($args)}"; 54 | $variation-color: map-get($args, variation-color); 55 | $mdb-param-1: map-get($args, material-param-1); 56 | background-color: contrast-color($variation-color, 57 | darken($variation-color, $mdb-param-1), 58 | lighten($variation-color, $mdb-param-1)); 59 | } 60 | 61 | // navbar-variations(" label input[type=checkbox]:checked + .toggle:active:after", $brand-primary 62 | @mixin navbar-variations($component, $selector-suffix, $color-default) { 63 | @include generic-variations($component, $selector-suffix, $color-default, "navbar-variations-content", null); 64 | } 65 | 66 | @mixin navbar-variations-content($args){ 67 | $variation-color: map-get($args, variation-color); 68 | $variation-color-text: map-get($args, variation-color-text); 69 | 70 | background-color: $variation-color; 71 | color: $variation-color-text; 72 | // deeply defined to override welljumbo class without !impotant need 73 | .navbar-form .form-group input.form-control, 74 | .navbar-form input.form-control { 75 | @include material-placeholder { 76 | color: $variation-color-text; 77 | } 78 | } 79 | .dropdown-menu { 80 | border-radius: $border-radius-base !important; 81 | li > a { 82 | &:hover, 83 | &:focus { 84 | color: $white-color; 85 | background-color: $variation-color; 86 | @include shadow-big-color($variation-color); 87 | } 88 | } 89 | 90 | .active > a { 91 | &:hover, 92 | &:focus { 93 | color: $variation-color-text; 94 | } 95 | background-color: $variation-color; 96 | color: $variation-color-text; 97 | @include shadow-big-color($variation-color); 98 | } 99 | } 100 | } 101 | 102 | // alert-variations("", $brand-primary) 103 | @mixin alert-variations($component, $selector-suffix, $color-default) { 104 | @include generic-variations($component, $selector-suffix, $color-default, "alert-variations-content", null); 105 | } 106 | 107 | @mixin alert-variations-content($args){ 108 | $variation-color: map-get($args, variation-color); 109 | $variation-color-text: map-get($args, variation-color-text); 110 | 111 | background-color: lighten($variation-color,5%); 112 | color: $variation-color-text; 113 | border-radius: $border-radius-base; 114 | 115 | @include shadow-big-color($variation-color); 116 | 117 | a, .alert-link { 118 | color: $variation-color-text; 119 | } 120 | } 121 | 122 | // interpolation of mixin-name is not allowed evidently, so we statically include based on the mixin-name given 123 | @mixin call-variations-content-mixin($args) { 124 | $mixin-name: map-get($args, mixin-name); 125 | @if $mixin-name == variations-content { 126 | @include variations-content($args); 127 | } @else if $mixin-name == background-variations-content { 128 | @include background-variations-content($args); 129 | } @else if $mixin-name == text-variations-content { 130 | @include text-variations-content($args); 131 | } @else if $mixin-name == button-variations-content { 132 | @include button-variations-content($args); 133 | } @else if $mixin-name == bg-color-variations-content { 134 | @include bg-color-variations-content($args); 135 | } @else if $mixin-name == bg-box-shadow-variations-content { 136 | @include bg-box-shadow-variations-content($args); 137 | } @else if $mixin-name == bg-img-variations-content { 138 | @include bg-img-variations-content($args); 139 | } @else if $mixin-name == navbar-variations-content { 140 | @include navbar-variations-content($args); 141 | }@else if $mixin-name == alert-variations-content { 142 | @include alert-variations-content($args); 143 | } @else { 144 | @error "Unknown mixin: #{$mixin-name}" 145 | } 146 | } 147 | 148 | // 149 | // To use this mixin you should pass a function as final parameter to define 150 | // the style. In that definition you can use the following variables to define it. 151 | // 152 | // $variation-color-name ---> "red", "green", "indigo" ... 153 | // $variation-color-full-name ---> "red", "green-50", "indigo-400" ... 154 | // $variation-color ---> #f44336, #e8f5e9, #5c6bc0 ... 155 | // $variation-color-text ---> rgba(255,255,255,0.84), rgba(0,0,0,0.84), rgba(255,255,255,0.84) ... 156 | // 157 | 158 | @mixin generic-variations($component, $selector-suffix, $color-default, $mixin-name, $mdb-param-1) { 159 | 160 | //setup map to pass parameters (instead of the incredibly long-error-prone list for each and every @include) 161 | $args: ( 162 | //extra: $selector-suffix, 163 | //default: $color-default, 164 | mixin-name: $mixin-name, 165 | material-param-1: $mdb-param-1 166 | ); 167 | 168 | // bootstrap styles 169 | &#{$selector-suffix}, 170 | &#{$component}-default#{$selector-suffix} { 171 | 172 | $args-extra: map-merge($args, ( 173 | variation-color: $white-color, 174 | variation-color-text: $gray 175 | )); 176 | @include call-variations-content-mixin($args-extra); 177 | } 178 | &#{$component}-inverse#{$selector-suffix} { 179 | $args-inverse: map-merge($args, ( 180 | variation-color: #212121, 181 | variation-color-text: #fff 182 | )); 183 | @include call-variations-content-mixin($args-inverse); 184 | } 185 | &#{$component}-primary#{$selector-suffix} { 186 | $args-primary: map-merge($args, ( 187 | variation-color: $brand-primary, 188 | variation-color-text: $mdb-text-color-light 189 | )); 190 | @include call-variations-content-mixin($args-primary); 191 | } 192 | &#{$component}-success#{$selector-suffix} { 193 | $args-success: map-merge($args, ( 194 | variation-color: $brand-success, 195 | variation-color-text: $mdb-text-color-light 196 | )); 197 | @include call-variations-content-mixin($args-success); 198 | } 199 | &#{$component}-info#{$selector-suffix} { 200 | $args-info: map-merge($args, ( 201 | variation-color: $brand-info, 202 | variation-color-text: $mdb-text-color-light 203 | )); 204 | @include call-variations-content-mixin($args-info); 205 | } 206 | &#{$component}-warning#{$selector-suffix} { 207 | $args-warning: map-merge($args, ( 208 | variation-color: $brand-warning, 209 | variation-color-text: $mdb-text-color-light 210 | )); 211 | @include call-variations-content-mixin($args-warning); 212 | } 213 | &#{$component}-danger#{$selector-suffix} { 214 | $args-danger: map-merge($args, ( 215 | variation-color: $brand-danger, 216 | variation-color-text: $mdb-text-color-light 217 | )); 218 | @include call-variations-content-mixin($args-danger); 219 | } 220 | 221 | &#{$component}-rose#{$selector-suffix} { 222 | $args-rose: map-merge($args, ( 223 | variation-color: $brand-rose, 224 | variation-color-text: $mdb-text-color-light 225 | )); 226 | @include call-variations-content-mixin($args-rose); 227 | } 228 | 229 | } 230 | 231 | @mixin transition($time, $type){ 232 | -webkit-transition: all $time $type; 233 | -moz-transition: all $time $type; 234 | -o-transition: all $time $type; 235 | -ms-transition: all $time $type; 236 | transition: all $time $type; 237 | } 238 | 239 | @mixin transform-scale($value){ 240 | -webkit-transform: scale($value); 241 | -moz-transform: scale($value); 242 | -o-transform: scale($value); 243 | -ms-transform: scale($value); 244 | transform: scale($value); 245 | } 246 | 247 | @mixin transform-translate-x($value){ 248 | -webkit-transform: translate3d($value, 0, 0); 249 | -moz-transform: translate3d($value, 0, 0); 250 | -o-transform: translate3d($value, 0, 0); 251 | -ms-transform: translate3d($value, 0, 0); 252 | transform: translate3d($value, 0, 0); 253 | } 254 | 255 | @mixin transform-translate-y($value){ 256 | -webkit-transform: translate3d(0,$value, 0); 257 | -moz-transform: translate3d(0, $value, 0); 258 | -o-transform: translate3d(0, $value, 0); 259 | -ms-transform: translate3d(0, $value, 0); 260 | transform: translate3d(0, $value, 0); 261 | } 262 | 263 | @mixin transform-origin($coordinates){ 264 | -webkit-transform-origin: $coordinates; 265 | -moz-transform-origin: $coordinates; 266 | -o-transform-origin: $coordinates; 267 | -ms-transform-origin: $coordinates; 268 | transform-origin: $coordinates; 269 | } 270 | 271 | @mixin black-filter(){ 272 | background: rgba(0,0,0,.55); 273 | position: absolute; 274 | width: 100%; 275 | height: 100%; 276 | content: ""; 277 | z-index: 0; 278 | left: 0; 279 | top: 0; 280 | } 281 | 282 | @mixin radial-gradient($extern-color, $center-color){ 283 | background: $extern-color; 284 | background: -moz-radial-gradient(center, ellipse cover, $center-color 0%, $extern-color 100%); /* FF3.6+ */ 285 | background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,$center-color), color-stop(100%,$extern-color)); /* Chrome,Safari4+ */ 286 | background: -webkit-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* Chrome10+,Safari5.1+ */ 287 | background: -o-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* Opera 12+ */ 288 | background: -ms-radial-gradient(center, ellipse cover, $center-color 0%,$extern-color 100%); /* IE10+ */ 289 | background: radial-gradient(ellipse at center, $center-color 0%,$extern-color 100%); /* W3C */ 290 | background-size: 550% 450%; 291 | } 292 | 293 | @mixin tag-color ($color){ 294 | .tag{ 295 | background-color: $color; 296 | color: $white-color; 297 | .tagsinput-remove-link{ 298 | color: $white-color; 299 | } 300 | } 301 | .tagsinput-add{ 302 | color: $color; 303 | } 304 | } 305 | @mixin create-colored-tags(){ 306 | &.tag-primary{ 307 | @include tag-color($brand-primary); 308 | } 309 | &.tag-info { 310 | @include tag-color($brand-info); 311 | } 312 | &.tag-success{ 313 | @include tag-color($brand-success); 314 | } 315 | &.tag-warning{ 316 | @include tag-color($brand-warning); 317 | } 318 | &.tag-danger{ 319 | @include tag-color($brand-danger); 320 | } 321 | &.tag-rose{ 322 | @include tag-color($brand-rose); 323 | } 324 | } 325 | 326 | @mixin rotate-180(){ 327 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); 328 | -webkit-transform: rotate(180deg); 329 | -ms-transform: rotate(180deg); 330 | transform: rotate(180deg); 331 | } 332 | 333 | @mixin linear-gradient($color1, $color2){ 334 | background: $color1; /* For browsers that do not support gradients */ 335 | background: -webkit-linear-gradient(60deg, $color1 , $color2); /* For Safari 5.1 to 6.0 */ 336 | background: -o-linear-gradient(60deg, $color1, $color2); /* For Opera 11.1 to 12.0 */ 337 | background: -moz-linear-gradient(60deg, $color1, $color2); /* For Firefox 3.6 to 15 */ 338 | background: linear-gradient(60deg, $color1 , $color2); /* Standard syntax */ 339 | } 340 | 341 | 342 | 343 | // Mixins for buttons 344 | 345 | @mixin btn-styles($btn-color) { 346 | 347 | // remove this line if you want black shadows 348 | @include shadow-2dp-color($btn-color); 349 | 350 | &, 351 | &:hover, 352 | &:focus, 353 | &:active, 354 | &.active, 355 | &:active:focus, 356 | &:active:hover, 357 | &.active:focus, 358 | &.active:hover, 359 | .open > &.dropdown-toggle, 360 | .open > &.dropdown-toggle:focus, 361 | .open > &.dropdown-toggle:hover { 362 | background-color: $btn-color; 363 | color: $white-color; 364 | } 365 | 366 | &:focus, 367 | &:active, 368 | &:hover{ 369 | // remove this line if you want black shadows 370 | @include button-shadow-color($btn-color); 371 | } 372 | 373 | &.disabled, 374 | &:disabled, 375 | &[disabled], 376 | fieldset[disabled] & { 377 | &, 378 | &:hover, 379 | &:focus, 380 | &.focus, 381 | &:active, 382 | &.active { 383 | box-shadow: none; 384 | } 385 | } 386 | 387 | &.btn-simple{ 388 | background-color: transparent; 389 | color: $btn-color; 390 | box-shadow: none; 391 | 392 | &:hover, 393 | &:focus, 394 | &:active{ 395 | background-color: transparent; 396 | color: $btn-color; 397 | } 398 | } 399 | 400 | } 401 | 402 | // for social buttons 403 | @mixin social-buttons-color ($color){ 404 | background-color: $color; 405 | color: #fff; 406 | @include shadow-2dp-color($color); 407 | 408 | &:focus, 409 | &:active, 410 | &:hover{ 411 | background-color: $color; 412 | color: #fff; 413 | @include button-shadow-color($color); 414 | } 415 | 416 | &.btn-simple{ 417 | color: $color; 418 | background-color: transparent; 419 | box-shadow: none; 420 | } 421 | } 422 | --------------------------------------------------------------------------------