@abi-software/flatmapvuer 0.2.3-beta-features-3 → 0.2.3-beta-features-4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/flatmapvuer",
-  "version": "0.2.3-beta-features-3",
+  "version": "0.2.3-beta-features-4",
   "main": "./dist/flatmapvuer.common.js",
   "files": [
     "dist/*",
@@ -34,6 +34,8 @@
     "babel-plugin-component": "^1.1.1",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
+    "node-sass": "^4.14.1",
+    "sass-loader": "^8.0.2",
     "vue-template-compiler": "^2.6.10",
     "webpack-node-externals": "^2.5.2"
   },

package/src/App.vue

@@ -30,11 +30,13 @@
 import Vue from "vue";
 import MultiFlatmapVuer from './components/MultiFlatmapVuer.vue'
 import {
+  Button,
   Col,
   Popover,
   Row,
 } from 'element-ui';
 import "./icons/mapicon-species-style.css";
+Vue.use(Button);
 Vue.use(Col);
 Vue.use(Popover);
 Vue.use(Row);
@@ -93,7 +95,12 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss">
+@import "~element-ui/packages/theme-chalk/src/button";
+@import "~element-ui/packages/theme-chalk/src/col";
+@import "~element-ui/packages/theme-chalk/src/popover";
+@import "~element-ui/packages/theme-chalk/src/row";
+
 #app {
   font-family: 'Asap', 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -140,8 +147,4 @@ body {
   height:100%;
 }
 
-
-
 </style>
-<style scoped src="./styles/purple/popover.css">
-</style>

package/src/assets/_variables.scss

@@ -0,0 +1,43 @@
+// Primary colors
+$purple: #8300BF;
+$darkBlue: #24245B;
+$grey: #303133;
+
+// Secondary colors
+$lightPurple: #BC00FC;
+$blue: #0026FF;
+
+// Status colors
+$success: #5e9f69;
+$warning: #FF8400;
+$danger: #b51d09;
+
+// Text colors
+$neutralGrey: #616161;
+$mediumGrey: #606266;
+$lightGrey: #909399;
+
+// Line colors
+$lineColor1: #DCDFE6;
+$lineColor2: #E4E7ED;
+
+// Background colors
+$background: #F5F7FA;
+$cochlear: #FFFFFF;
+
+//Search box colors
+$darkGrey: #606266;
+
+$app-primary-color: $purple !default;
+$app-secondary-color: $darkBlue !default;
+$text-color: $grey !default;
+$input-text: $grey !default;
+
+$system-font:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
+$font-family: 'Asap', sans-serif;
+
+// Viewport Sizes
+$viewport-sm: 20rem;
+$viewport-md: 47rem;
+$viewport-lg: 64rem;
+$viewport-xlg: 120rem;

package/src/assets/styles.scss

@@ -0,0 +1,7 @@
+@import url('https://fonts.googleapis.com/css?family=Asap:400,400i,500,600,700&display=swap');
+
+@import '_variables';
+
+/* icon font path, required */
+$--color-primary: $app-primary-color !default;
+$--font-path: '~element-ui/lib/theme-chalk/fonts';