birt cmps版本升级

08335 / hivui-platform-template

hivui平台项目模板

Browse code birt cmps版本升级 master
1 parent 7d5a7c3 commit c924b137f5aaa0283eb9fc96c2376af7803af31d hhb authored on 28 Mar 2022

Showing 2 changed files

Ignore Space Show notes View package.json
{ "name": "hi-vui-template", "version": "1.1.12", "description": "A hi-vui-template project", "author": "zhcTeam", "scripts": { "rm:vite": "rimraf node_modules/.vite && rimraf node_modules/.cache", "pm2:start": "pm2 start processes.json", "dev": "vite --host", "def": "vite --host", "build": "node build/copyBaseAssets.js && cross-env NODE_ENV=production node build/webpack.prod.conf.js", "build:modules": "cross-env NODE_ENV=production node build/webpack.prod.conf.js", "build1": "webpack --mode production --config build/webpack.prod.conf.js", "dll": "webpack --config build/webpack.dll.conf.js", "start": "webpack-dev-server --config build/webpack.dev.conf.js", "copyassets": "node build/copyBaseAssets.js" }, "devDependencies": { "@babel/core": "^7.1.2", "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7", "@babel/plugin-proposal-optional-chaining": "^7.16.7", "@babel/plugin-syntax-dynamic-import": "^7.0.0", "@babel/preset-env": "^7.1.0", "@vitejs/plugin-vue-jsx": "^1.3.3", "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1", "@vue/babel-preset-jsx": "^1.2.4", "add-asset-html-webpack-plugin": "^3.2.0", "autoprefixer": "^9.1.5", "babel-loader": "^8.0.4", "babel-plugin-component": "^1.1.1", "babel-plugin-transform-vite-meta-env": "^1.0.3", "chalk": "^3.0.0", "clean-webpack-plugin": "^0.1.19", "copy-webpack-plugin": "^4.5.3", "cross-env": "^7.0.3", "css-loader": "^1.0.0", "dotenv": "^10.0.0", "file-loader": "^2.0.0", "happypack": "^5.0.1", "html-webpack-plugin": "^4.5.2", "less": "^4.1.2", "less-loader": "^5.0.0", "mini-css-extract-plugin": "^1.6.2", "node-sass": "^4.9.3", "optimize-css-assets-webpack-plugin": "^5.0.1", "parallel-webpack": "^2.6.0", "postcss-import": "^11.1.0", "postcss-loader": "^2.1.6", "postcss-url": "^7.3.2", "progress-bar-webpack-plugin": "^2.1.0", "sass": "^1.49.0", "sass-loader": "^7.1.0", "style-loader": "^0.23.0", "thread-loader": "^3.0.4", "uglifyjs-webpack-plugin": "^2.0.1", "url-loader": "^1.1.1", "vite": "2.3.7", "vite-plugin-html": "^2.1.1", "vite-plugin-imp": "^2.0.11", "vite-plugin-pagedata": "^1.0.4", "vite-plugin-vue2": "^1.9.0", "vue-loader": "^15.4.2", "vue-template-compiler": "^2.6.14", "webpack": "^4.46.0", "webpack-cli": "^4.9.2", "webpack-dev-server": "^3.11.3", "webpack-merge": "^4.1.4" }, "dependencies": { "axios": "^0.24.0", "babel-polyfill": "^6.26.0", "canvas": "^2.9.0", "classnames": "^2.3.1", "deep-lu-trans": "^1.0.5", "element-ui": "^2.15.7", "enquire.js": "^2.1.6", "font-awesome": "^4.7.0", "hi-taskcenter": "^1.0.9", "hi-ui": "^1.1.1006", "jquery": "^3.6.0", "js-cookie": "^3.0.1", "js-md5": "^0.7.3", "js-pinyin": "^0.1.9", "lodash": "^4.17.11", "qrcodejs2": "0.0.2", "screenfull": "^6.0.0", "sortablejs": "^1.14.0", "v-clipboard": "^2.2.3", "vue": "^2.6.14", "vue-draggable-resizable": "^2.3.0", "vue-gemini-scrollbar": "^2.0.1", "vue-i18n": "^8.27.0", "vue-jstree": "^2.1.6", "vue-qr": "^3.2.4", "vue-router": "^3.0.1", "vuex": "^3.6.2", "zhc-birt-cmps": "^2.5.7", "zhc-birt-core": "^1.9.0", "zhc-flowchart": "^1.0.20" } } { "name": "hi-vui-template", "version": "1.1.12", "description": "A hi-vui-template project", "author": "zhcTeam", "scripts": { "rm:vite": "rimraf node_modules/.vite && rimraf node_modules/.cache", "pm2:start": "pm2 start processes.json", "dev": "vite --host", "def": "vite --host", "build": "node build/copyBaseAssets.js && cross-env NODE_ENV=production node build/webpack.prod.conf.js", "build:modules": "cross-env NODE_ENV=production node build/webpack.prod.conf.js", "build1": "webpack --mode production --config build/webpack.prod.conf.js", "dll": "webpack --config build/webpack.dll.conf.js", "start": "webpack-dev-server --config build/webpack.dev.conf.js", "copyassets": "node build/copyBaseAssets.js" }, "devDependencies": { "@babel/core": "^7.1.2", "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7", "@babel/plugin-proposal-optional-chaining": "^7.16.7", "@babel/plugin-syntax-dynamic-import": "^7.0.0", "@babel/preset-env": "^7.1.0", "@vitejs/plugin-vue-jsx": "^1.3.3", "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1", "@vue/babel-preset-jsx": "^1.2.4", "add-asset-html-webpack-plugin": "^3.2.0", "autoprefixer": "^9.1.5", "babel-loader": "^8.0.4", "babel-plugin-component": "^1.1.1", "babel-plugin-transform-vite-meta-env": "^1.0.3", "chalk": "^3.0.0", "clean-webpack-plugin": "^0.1.19", "copy-webpack-plugin": "^4.5.3", "cross-env": "^7.0.3", "css-loader": "^1.0.0", "dotenv": "^10.0.0", "file-loader": "^2.0.0", "happypack": "^5.0.1", "html-webpack-plugin": "^4.5.2", "less": "^4.1.2", "less-loader": "^5.0.0", "mini-css-extract-plugin": "^1.6.2", "node-sass": "^4.9.3", "optimize-css-assets-webpack-plugin": "^5.0.1", "parallel-webpack": "^2.6.0", "postcss-import": "^11.1.0", "postcss-loader": "^2.1.6", "postcss-url": "^7.3.2", "progress-bar-webpack-plugin": "^2.1.0", "sass": "^1.49.0", "sass-loader": "^7.1.0", "style-loader": "^0.23.0", "thread-loader": "^3.0.4", "uglifyjs-webpack-plugin": "^2.0.1", "url-loader": "^1.1.1", "vite": "2.3.7", "vite-plugin-html": "^2.1.1", "vite-plugin-imp": "^2.0.11", "vite-plugin-pagedata": "^1.0.4", "vite-plugin-vue2": "^1.9.0", "vue-loader": "^15.4.2", "vue-template-compiler": "^2.6.14", "webpack": "^4.46.0", "webpack-cli": "^4.9.2", "webpack-dev-server": "^3.11.3", "webpack-merge": "^4.1.4" }, "dependencies": { "axios": "^0.24.0", "babel-polyfill": "^6.26.0", "canvas": "^2.9.0", "classnames": "^2.3.1", "deep-lu-trans": "^1.0.5", "element-ui": "^2.15.7", "enquire.js": "^2.1.6", "font-awesome": "^4.7.0", "hi-taskcenter": "^1.0.9", "hi-ui": "^1.1.1006", "jquery": "^3.6.0", "js-cookie": "^3.0.1", "js-md5": "^0.7.3", "js-pinyin": "^0.1.9", "lodash": "^4.17.11", "qrcodejs2": "0.0.2", "screenfull": "^6.0.0", "sortablejs": "^1.14.0", "v-clipboard": "^2.2.3", "vue": "^2.6.14", "vue-draggable-resizable": "^2.3.0", "vue-gemini-scrollbar": "^2.0.1", "vue-i18n": "^8.27.0", "vue-jstree": "^2.1.6", "vue-qr": "^3.2.4", "vue-router": "^3.0.1", "vuex": "^3.6.2", "zhc-birt-cmps": "^2.5.6", "zhc-birt-core": "^1.9.0", "zhc-flowchart": "^1.0.20" } }

Ignore Space Show notes View

package.json

{
  "name": "hi-vui-template",
  "version": "1.1.12",
  "description": "A hi-vui-template project",
  "author": "zhcTeam",
  "scripts": {
    "rm:vite": "rimraf node_modules/.vite && rimraf node_modules/.cache",
    "pm2:start": "pm2 start processes.json",
    "dev": "vite --host",
    "def": "vite --host",
    "build": "node build/copyBaseAssets.js && cross-env NODE_ENV=production node build/webpack.prod.conf.js",
    "build:modules": "cross-env NODE_ENV=production node build/webpack.prod.conf.js",
    "build1": "webpack --mode production --config build/webpack.prod.conf.js",
    "dll": "webpack --config build/webpack.dll.conf.js",
    "start": "webpack-dev-server --config build/webpack.dev.conf.js",
    "copyassets": "node build/copyBaseAssets.js"
  },
  "devDependencies": {
    "@babel/core": "^7.1.2",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
    "@babel/plugin-proposal-optional-chaining": "^7.16.7",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/preset-env": "^7.1.0",
    "@vitejs/plugin-vue-jsx": "^1.3.3",
    "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
    "@vue/babel-preset-jsx": "^1.2.4",
    "add-asset-html-webpack-plugin": "^3.2.0",
    "autoprefixer": "^9.1.5",
    "babel-loader": "^8.0.4",
    "babel-plugin-component": "^1.1.1",
    "babel-plugin-transform-vite-meta-env": "^1.0.3",
    "chalk": "^3.0.0",
    "clean-webpack-plugin": "^0.1.19",
    "copy-webpack-plugin": "^4.5.3",
    "cross-env": "^7.0.3",
    "css-loader": "^1.0.0",
    "dotenv": "^10.0.0",
    "file-loader": "^2.0.0",
    "happypack": "^5.0.1",
    "html-webpack-plugin": "^4.5.2",
    "less": "^4.1.2",
    "less-loader": "^5.0.0",
    "mini-css-extract-plugin": "^1.6.2",
    "node-sass": "^4.9.3",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "parallel-webpack": "^2.6.0",
    "postcss-import": "^11.1.0",
    "postcss-loader": "^2.1.6",
    "postcss-url": "^7.3.2",
    "progress-bar-webpack-plugin": "^2.1.0",
    "sass": "^1.49.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.0",
    "thread-loader": "^3.0.4",
    "uglifyjs-webpack-plugin": "^2.0.1",
    "url-loader": "^1.1.1",
    "vite": "2.3.7",
    "vite-plugin-html": "^2.1.1",
    "vite-plugin-imp": "^2.0.11",
    "vite-plugin-pagedata": "^1.0.4",
    "vite-plugin-vue2": "^1.9.0",
    "vue-loader": "^15.4.2",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^4.46.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^3.11.3",
    "webpack-merge": "^4.1.4"
  },
  "dependencies": {
    "axios": "^0.24.0",
    "babel-polyfill": "^6.26.0",
    "canvas": "^2.9.0",
    "classnames": "^2.3.1",
    "deep-lu-trans": "^1.0.5",
    "element-ui": "^2.15.7",
    "enquire.js": "^2.1.6",
    "font-awesome": "^4.7.0",
    "hi-taskcenter": "^1.0.9",
    "hi-ui": "^1.1.1006",
    "jquery": "^3.6.0",
    "js-cookie": "^3.0.1",
    "js-md5": "^0.7.3",
    "js-pinyin": "^0.1.9",
    "lodash": "^4.17.11",
    "qrcodejs2": "0.0.2",
    "screenfull": "^6.0.0",
    "sortablejs": "^1.14.0",
    "v-clipboard": "^2.2.3",
    "vue": "^2.6.14",
    "vue-draggable-resizable": "^2.3.0",
    "vue-gemini-scrollbar": "^2.0.1",
    "vue-i18n": "^8.27.0",
    "vue-jstree": "^2.1.6",
    "vue-qr": "^3.2.4",
    "vue-router": "^3.0.1",
    "vuex": "^3.6.2",
    "zhc-birt-cmps": "^2.5.7",
    "zhc-birt-core": "^1.9.0",
    "zhc-flowchart": "^1.0.20"
  }
}

{
  "name": "hi-vui-template",
  "version": "1.1.12",
  "description": "A hi-vui-template project",
  "author": "zhcTeam",
  "scripts": {
    "rm:vite": "rimraf node_modules/.vite && rimraf node_modules/.cache",
    "pm2:start": "pm2 start processes.json",
    "dev": "vite --host",
    "def": "vite --host",
    "build": "node build/copyBaseAssets.js && cross-env NODE_ENV=production node build/webpack.prod.conf.js",
    "build:modules": "cross-env NODE_ENV=production node build/webpack.prod.conf.js",
    "build1": "webpack --mode production --config build/webpack.prod.conf.js",
    "dll": "webpack --config build/webpack.dll.conf.js",
    "start": "webpack-dev-server --config build/webpack.dev.conf.js",
    "copyassets": "node build/copyBaseAssets.js"
  },
  "devDependencies": {
    "@babel/core": "^7.1.2",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
    "@babel/plugin-proposal-optional-chaining": "^7.16.7",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/preset-env": "^7.1.0",
    "@vitejs/plugin-vue-jsx": "^1.3.3",
    "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
    "@vue/babel-preset-jsx": "^1.2.4",
    "add-asset-html-webpack-plugin": "^3.2.0",
    "autoprefixer": "^9.1.5",
    "babel-loader": "^8.0.4",
    "babel-plugin-component": "^1.1.1",
    "babel-plugin-transform-vite-meta-env": "^1.0.3",
    "chalk": "^3.0.0",
    "clean-webpack-plugin": "^0.1.19",
    "copy-webpack-plugin": "^4.5.3",
    "cross-env": "^7.0.3",
    "css-loader": "^1.0.0",
    "dotenv": "^10.0.0",
    "file-loader": "^2.0.0",
    "happypack": "^5.0.1",
    "html-webpack-plugin": "^4.5.2",
    "less": "^4.1.2",
    "less-loader": "^5.0.0",
    "mini-css-extract-plugin": "^1.6.2",
    "node-sass": "^4.9.3",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "parallel-webpack": "^2.6.0",
    "postcss-import": "^11.1.0",
    "postcss-loader": "^2.1.6",
    "postcss-url": "^7.3.2",
    "progress-bar-webpack-plugin": "^2.1.0",
    "sass": "^1.49.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.0",
    "thread-loader": "^3.0.4",
    "uglifyjs-webpack-plugin": "^2.0.1",
    "url-loader": "^1.1.1",
    "vite": "2.3.7",
    "vite-plugin-html": "^2.1.1",
    "vite-plugin-imp": "^2.0.11",
    "vite-plugin-pagedata": "^1.0.4",
    "vite-plugin-vue2": "^1.9.0",
    "vue-loader": "^15.4.2",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^4.46.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^3.11.3",
    "webpack-merge": "^4.1.4"
  },
  "dependencies": {
    "axios": "^0.24.0",
    "babel-polyfill": "^6.26.0",
    "canvas": "^2.9.0",
    "classnames": "^2.3.1",
    "deep-lu-trans": "^1.0.5",
    "element-ui": "^2.15.7",
    "enquire.js": "^2.1.6",
    "font-awesome": "^4.7.0",
    "hi-taskcenter": "^1.0.9",
    "hi-ui": "^1.1.1006",
    "jquery": "^3.6.0",
    "js-cookie": "^3.0.1",
    "js-md5": "^0.7.3",
    "js-pinyin": "^0.1.9",
    "lodash": "^4.17.11",
    "qrcodejs2": "0.0.2",
    "screenfull": "^6.0.0",
    "sortablejs": "^1.14.0",
    "v-clipboard": "^2.2.3",
    "vue": "^2.6.14",
    "vue-draggable-resizable": "^2.3.0",
    "vue-gemini-scrollbar": "^2.0.1",
    "vue-i18n": "^8.27.0",
    "vue-jstree": "^2.1.6",
    "vue-qr": "^3.2.4",
    "vue-router": "^3.0.1",
    "vuex": "^3.6.2",
    "zhc-birt-cmps": "^2.5.6",
    "zhc-birt-core": "^1.9.0",
    "zhc-flowchart": "^1.0.20"
  }
}

Ignore Space Show notes View project/hivuiBirt/components/vue-m-message/message.less
.m-message-container { position: fixed; z-index: 3010; pointer-events: none; display: flex; flex-direction: column; box-sizing: border-box; padding: 15px; &.is-top-left, &.is-top-center, &.is-top-right { width: 100%; top: 0; left: 0; } &.is-top-left { align-items: flex-start; } &.is-top-center { align-items: center; } &.is-top-right { align-items: flex-end; } &.is-center { width: 100%; height: 100%; left: 0; top: 0; align-items: center; justify-content: center; } &.is-bottom-left, &.is-bottom-center, &.is-bottom-right { bottom: 0; left: 0; width: 100%; justify-content: flex-end; } &.is-bottom-left { align-items: flex-start; } &.is-bottom-center { align-items: center; } &.is-bottom-right { align-items: flex-end; } &.has-mask { background-color: rgba(255,255,255, 0.5); width: 100%; height: 100%; pointer-events: all; } } .m-message-wrapper { display: inline-block; max-width: 500px; & + & { margin-top: 15px; } &::before, &::after { content: ""; clear: both; display: table; } } .m-message { display: flex; align-items: center; padding: 10px 16px; font-size: 14px; overflow: hidden; border-radius: 4px; box-sizing: border-box; box-shadow: 0 1px 8px rgba(0,0,0,.15); color: rgba(0,0,0,.65); background: rgba(255,255,255,0.95); pointer-events: all; position: relative; &-icons { float: left; box-sizing: border-box; margin-right: 10px; } &--title { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } &-content { box-sizing: border-box; overflow: auto; width: 100%; } &--description { line-height: 1.6; color: #777; } &--title + &--description { margin-top: 5px; } &--icon { width: 25px; height: 25px; vertical-align: middle; display: inline-block; border-radius: 50%; } &--control { position: relative; height: 100%; align-self: flex-start; white-space: nowrap; margin-right: -5px; margin-left: 10px; } &--button { border: none; outline: none; background: none; cursor: pointer; font-size: 15px; color: #646464; font-weight: 600; padding: 0; width: 20px; height: 20px; line-height: 20px; text-align: center; vertical-align: middle; &:hover { color: #F56C6C; } } &--arrow-down { &.is-collapsed { transform: rotate(90deg); } } } .m-message-fade-enter-active { animation: m-message-fade-in-down 0.3s; } .m-message-fade-leave-active { animation: m-message-fade-out 0.3s; } @keyframes m-message-fade-in-down { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0px); } } @keyframes m-message-fade-out { 0% { opacity: 1; margin-top: 0; } 100% { opacity: 0; margin-top: -45px; } } .m-message-container { position: fixed; z-index: 1010; pointer-events: none; display: flex; flex-direction: column; box-sizing: border-box; padding: 15px; &.is-top-left, &.is-top-center, &.is-top-right { width: 100%; top: 0; left: 0; } &.is-top-left { align-items: flex-start; } &.is-top-center { align-items: center; } &.is-top-right { align-items: flex-end; } &.is-center { width: 100%; height: 100%; left: 0; top: 0; align-items: center; justify-content: center; } &.is-bottom-left, &.is-bottom-center, &.is-bottom-right { bottom: 0; left: 0; width: 100%; justify-content: flex-end; } &.is-bottom-left { align-items: flex-start; } &.is-bottom-center { align-items: center; } &.is-bottom-right { align-items: flex-end; } &.has-mask { background-color: rgba(255,255,255, 0.5); width: 100%; height: 100%; pointer-events: all; } } .m-message-wrapper { display: inline-block; max-width: 500px; & + & { margin-top: 15px; } &::before, &::after { content: ""; clear: both; display: table; } } .m-message { display: flex; align-items: center; padding: 10px 16px; font-size: 14px; overflow: hidden; border-radius: 4px; box-sizing: border-box; box-shadow: 0 1px 8px rgba(0,0,0,.15); color: rgba(0,0,0,.65); background: rgba(255,255,255,0.95); pointer-events: all; position: relative; &-icons { float: left; box-sizing: border-box; margin-right: 10px; } &--title { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } &-content { box-sizing: border-box; overflow: auto; width: 100%; } &--description { line-height: 1.6; color: #777; } &--title + &--description { margin-top: 5px; } &--icon { width: 25px; height: 25px; vertical-align: middle; display: inline-block; border-radius: 50%; } &--control { position: relative; height: 100%; align-self: flex-start; white-space: nowrap; margin-right: -5px; margin-left: 10px; } &--button { border: none; outline: none; background: none; cursor: pointer; font-size: 15px; color: #646464; font-weight: 600; padding: 0; width: 20px; height: 20px; line-height: 20px; text-align: center; vertical-align: middle; &:hover { color: #F56C6C; } } &--arrow-down { &.is-collapsed { transform: rotate(90deg); } } } .m-message-fade-enter-active { animation: m-message-fade-in-down 0.3s; } .m-message-fade-leave-active { animation: m-message-fade-out 0.3s; } @keyframes m-message-fade-in-down { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0px); } } @keyframes m-message-fade-out { 0% { opacity: 1; margin-top: 0; } 100% { opacity: 0; margin-top: -45px; } }

Ignore Space Show notes View

project/hivuiBirt/components/vue-m-message/message.less

.m-message-container {
  position: fixed;
  z-index: 3010;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 15px;

&.is-top-left,
  &.is-top-center,
  &.is-top-right {
    width: 100%;
    top: 0;
    left: 0;
  }
  &.is-top-left {
    align-items: flex-start;
  }
  &.is-top-center {
    align-items: center;
  }
  &.is-top-right {
    align-items: flex-end;
  }
  &.is-center {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    align-items: center;
    justify-content: center;
  }
  &.is-bottom-left,
  &.is-bottom-center,
  &.is-bottom-right {
    bottom: 0;
    left: 0;
    width: 100%;
    justify-content: flex-end;
  }
  &.is-bottom-left {
    align-items: flex-start;
  }
  &.is-bottom-center {
    align-items: center;
  }
  &.is-bottom-right {
    align-items: flex-end;
  }
  &.has-mask {
    background-color: rgba(255,255,255, 0.5);
    width: 100%;
    height: 100%;
    pointer-events: all;
  }
}

.m-message-wrapper {
  display: inline-block;
  max-width: 500px;

& + & {
    margin-top: 15px;
  }

&::before,
  &::after {
    content: "";
    clear: both;
    display: table;
  }
}
.m-message {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  font-size: 14px;
  overflow: hidden;
  border-radius: 4px;
  box-sizing: border-box;
  box-shadow: 0 1px 8px rgba(0,0,0,.15);
  color: rgba(0,0,0,.65);
  background: rgba(255,255,255,0.95);
  pointer-events: all;
  position: relative;

&-icons {
    float: left;
    box-sizing: border-box;
    margin-right: 10px;
  }
  &--title {
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  &-content {
    box-sizing: border-box;
    overflow: auto;
    width: 100%;
  }
  &--description {
    line-height: 1.6;
    color: #777;
  }
  &--title + &--description {
    margin-top: 5px;
  }

&--icon {
    width: 25px;
    height: 25px;
    vertical-align: middle;
    display: inline-block;
    border-radius: 50%;
  }
  &--control {
    position: relative;
    height: 100%;
    align-self: flex-start;
    white-space: nowrap;
    margin-right: -5px;
    margin-left: 10px;
  }
  &--button {
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    font-size: 15px;
    color: #646464;
    font-weight: 600;
    padding: 0;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;

&:hover {
      color: #F56C6C;
    }
  }
  &--arrow-down {
    &.is-collapsed {
      transform: rotate(90deg);
    }
  }
}

.m-message-fade-enter-active {
  animation: m-message-fade-in-down 0.3s;
}
.m-message-fade-leave-active {
  animation: m-message-fade-out 0.3s;
}

@keyframes m-message-fade-in-down {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes m-message-fade-out {
  0% {
    opacity: 1;
    margin-top: 0;
  }
  100% {
    opacity: 0;
    margin-top: -45px;
  }
}

.m-message-container {
  position: fixed;
  z-index: 1010;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 15px;