@abi-software/map-side-bar 1.3.37 → 1.3.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "1.3.37",
+  "version": "1.3.38",
   "main": "./dist/map-side-bar.common.js",
   "files": [
     "dist/*",
@@ -17,7 +17,7 @@
     "start": "vue-cli-service serve"
   },
   "dependencies": {
-    "@abi-software/gallery": "^0.3.2",
+    "@abi-software/gallery": "^0.3.3",
     "@abi-software/svg-sprite": "^0.2.0",
     "algoliasearch": "^4.10.5",
     "element-ui": "^2.13.0",
@@ -34,7 +34,9 @@
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
     "file-loader": "^5.0.2",
+    "node-sass": "^4.14.1",
     "raw-loader": "^0.5.1",
+    "sass-loader": "^8.0.2",
     "transform-loader": "^0.2.4",
     "typescript": "^4.4.3",
     "vue-custom-element": "^3.3.0",

package/src/App.vue

@@ -139,7 +139,7 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss">
 #app {
   height:100%;
   width: 100%;
@@ -150,6 +150,6 @@ body {
   margin:0px;
 }
 .map-icon {
-  color: #8300bf;
+  color: $app-primary-color;
 }
 </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;
+$app-secondary-color: $darkBlue;
+$text-color: $grey;
+$input-text: $grey;
+
+$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';

package/src/components/BadgesGroup.vue

@@ -106,7 +106,9 @@ export default {
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
+<style scoped lang="scss">
+@import "~element-ui/packages/theme-chalk/src/button";
+
 .tag-button,
 .tag-button:hover,
 .tag-button:focus,
@@ -124,14 +126,14 @@ export default {
 .tag-button:focus
 {
   background: #f9f2fc;
-  border: 1px solid #8300BF;
-  color: #8300BF;
+  border: 1px solid $app-primary-color;
+  color: $app-primary-color;
 }
 
 .tag-button.active
 {
-  background: #8300BF;
-  border: 1px solid #8300BF;
+  background: $app-primary-color;
+  border: 1px solid $app-primary-color;
   color: #fff;
 }
 

package/src/components/ContextCard.vue

@@ -282,7 +282,13 @@ export default {
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
+<style scoped lang="scss">
+@import "~element-ui/packages/theme-chalk/src/button";
+@import "~element-ui/packages/theme-chalk/src/card";
+@import "~element-ui/packages/theme-chalk/src/icon";
+@import "~element-ui/packages/theme-chalk/src/input";
+@import "~element-ui/packages/theme-chalk/src/link";
+@import "~element-ui/packages/theme-chalk/src/select";
 
 .hide{
   color: #e4e7ed;
@@ -319,7 +325,7 @@ export default {
   flex: 8;
 }
 
-.context-card >>> .el-card__body {
+.context-card ::v-deep .el-card__body {
   padding: 0px;
   display: flex;
   width: 516px;
@@ -333,7 +339,7 @@ export default {
 .color-box {
   width: 16px;
   height: 16px;
-  border: solid 1px #8300bf;
+  border: solid 1px $app-primary-color;
   border-radius: 2px;
   margin-right: 8px;
 }
@@ -355,7 +361,7 @@ export default {
 
 .info{
   transform: rotate(180deg);
-  color: #8300bf;
+  color: $app-primary-color;
   margin-left: 8px;
 }
 

package/src/components/DatasetCard.vue

@@ -231,7 +231,10 @@ export default {
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
+<style scoped lang="scss">
+@import "~element-ui/packages/theme-chalk/src/col";
+@import "~element-ui/packages/theme-chalk/src/loading";
+
 .dataset-card {
   padding-left: 16px;
   position: relative;
@@ -274,15 +277,15 @@ export default {
   font-style: normal;
   line-height: normal;
   letter-spacing: normal;
-  background-color: #8300bf;
-  border: #8300bf;
+  background-color: $app-primary-color;
+  border: $app-primary-color;
   color: white;
   cursor: pointer;
   margin-top: 8px;
 }
 
 .button:hover {
-  background-color: #8300bf;
+  background-color: $app-primary-color;
   color: white;
 }
 
@@ -315,11 +318,11 @@ export default {
   left: 80px;
 }
 
-.loading-icon >>> .el-loading-mask {
+.loading-icon ::v-deep .el-loading-mask {
   background-color: rgba(117, 190, 218, 0.0) !important;
 }
 
-.loading-icon >>> .el-loading-spinner .path {
-  stroke: #8300bf;
+.loading-icon ::v-deep .el-loading-spinner .path {
+  stroke: $app-primary-color;
 }
 </style>

package/src/components/ImageGallery.vue

@@ -29,10 +29,9 @@ const capitalise = function (string) {
 };
 
 import GalleryHelper from "@abi-software/gallery/src/mixins/GalleryHelpers";
-import Gallery from "@abi-software/gallery";
+import Gallery from "@abi-software/gallery/src/main-bundle.js";
 //provide the s3Bucket related methods and data.
 import S3Bucket from "../mixins/S3Bucket";
-import "@abi-software/gallery/dist/gallery.css";
 
 export default {
   name: "ImageGallery",
@@ -444,7 +443,7 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .full-size {
   height: 100%;
   width: 244px;
@@ -452,7 +451,7 @@ export default {
 
 .key-image-span.active {
   transform: scale(1.16);
-  border: 4px #8300bf solid;
+  border: 4px $app-primary-color solid;
 }
 
 .key-image-span {
@@ -519,7 +518,7 @@ a.next {
   background-color: #555;
 }
 
-.full-size >>> .el-card {
+.full-size ::v-deep .el-card {
   border: 0px;
 }
 </style>

package/src/components/SearchFilters.vue

@@ -431,7 +431,11 @@ export default {
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
+<style scoped lang="scss">
+@import "~element-ui/packages/theme-chalk/src/option";
+@import "~element-ui/packages/theme-chalk/src/popover";
+@import "~element-ui/packages/theme-chalk/src/select";
+
 .filter-default-value {
   pointer-events: none;
   position: absolute;
@@ -475,16 +479,16 @@ export default {
   padding-bottom: 6px;
 }
 
-.cascader >>> .el-cascder-panel {
+.cascader ::v-deep .el-cascder-panel {
   max-height: 500px;
 }
 
-.cascader >>> .el-scrollbar__wrap {
+.cascader::v-deep .el-scrollbar__wrap {
   overflow-x: hidden;
   margin-bottom: 2px !important;
 }
 
-.cascader >>> li[aria-owns*="cascader"] > .el-checkbox {
+.cascader ::v-deep li[aria-owns*="cascader"] > .el-checkbox {
   display: none;
 }
 
@@ -509,76 +513,74 @@ export default {
   float: right;
 }
 
-.number-shown-select >>> .el-input__inner {
+.number-shown-select ::v-deep .el-input__inner {
   width: 68px;
   height: 40px;
   color: rgb(48, 49, 51);
 }
 
-.search-filters >>> .el-cascader-node.is-active {
-  color: #8300bf;
+.search-filters ::v-deep .el-cascader-node.is-active {
+  color: $app-primary-color;
 }
 
-.search-filters >>> .el-cascader-node.in-active-path {
-  color: #8300bf;
+.search-filters ::v-deep .el-cascader-node.in-active-path {
+  color: $app-primary-color;
 }
 
-.search-filters >>> .el-checkbox__input.is-checked > .el-checkbox__inner {
-  background-color: #8300bf;
-  border-color: #8300bf;
+.search-filters ::v-deep .el-checkbox__input.is-checked > .el-checkbox__inner {
+  background-color: $app-primary-color;
+  border-color: $app-primary-color;
 }
 
-.cascader >>> .el-cascader-menu:nth-child(2) .el-cascader-node:first-child {
+.cascader ::v-deep .el-cascader-menu:nth-child(2) .el-cascader-node:first-child {
   border-bottom: 1px solid #e4e7ed;
 }
 
-.cascader >>> .el-cascader-node__label {
+.cascader ::v-deep .el-cascader-node__label {
   text-align: left;
 }
 
-.filters >>> .el-popover {
+.filters ::v-deep .el-popover {
     background: #f3ecf6 !important;
-    border: 1px solid #8300BF;
+    border: 1px solid $app-primary-color;
     border-radius: 4px;
     color: #303133 !important;
     font-size: 12px;
     line-height: 18px;
-  
-  
 }
 
-.filters >>> .el-popover[x-placement^="top"] .popper__arrow {
-  border-top-color: #8300BF;
+.filters ::v-deep .el-popover[x-placement^="top"] .popper__arrow {
+  border-top-color: $app-primary-color;
   border-bottom-width: 0;
 }
-.filters >>> .el-popover[x-placement^="top"] .popper__arrow::after {
+.filters ::v-deep .el-popover[x-placement^="top"] .popper__arrow::after {
   border-top-color: #f3ecf6;
   border-bottom-width: 0;
 }
 
-.filters >>> .el-popover[x-placement^="bottom"] .popper__arrow {
+.filters ::v-deep .el-popover[x-placement^="bottom"] .popper__arrow {
   border-top-width: 0;
-  border-bottom-color: #8300BF;
+  border-bottom-color: $app-primary-color;
 }
-.filters >>> .el-popover[x-placement^="bottom"] .popper__arrow::after {
+.filters ::v-deep .el-popover[x-placement^="bottom"] .popper__arrow::after {
   border-top-width: 0;
   border-bottom-color: #f3ecf6;
 }
 
-.filters >>> .el-popover[x-placement^="right"] .popper__arrow {
-  border-right-color: #8300BF;
+.filters ::v-deep .el-popover[x-placement^="right"] .popper__arrow {
+  border-right-color: $app-primary-color;
   border-left-width: 0;
 }
-.filters >>> .el-popover[x-placement^="right"] .popper__arrow::after {
+.filters ::v-deep .el-popover[x-placement^="right"] .popper__arrow::after {
   border-right-color: #f3ecf6;
   border-left-width: 0;
 }
 
-.filters >>> .el-popover[x-placement^="left"] .popper__arrow {
+.filters ::v-deep .el-popover[x-placement^="left"] .popper__arrow {
   border-right-width: 0;
-  border-left-color: #8300BF;
+  border-left-color: $app-primary-color;
 }
-.filters >>> .el-popover[x-placement^="left"] .popper__arrow::after {
+.filters ::v-deep .el-popover[x-placement^="left"] .popper__arrow::after {
   border-right-width: 0;
   border-left-color: #f3ecf6;
 }

package/src/components/SideBar.vue

@@ -131,7 +131,9 @@ export default {
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
+<style scoped lang="scss">
+@import "~element-ui/packages/theme-chalk/src/drawer";
+@import "~element-ui/packages/theme-chalk/src/icon";
 
 .box-card {
   flex: 3;
@@ -146,7 +148,7 @@ export default {
   pointer-events: none;
 }
 
-.side-bar >>> .el-drawer:focus{
+.side-bar ::v-deep .el-drawer:focus{
   outline:none;
 }
 
@@ -164,7 +166,7 @@ export default {
   top: calc(50vh - 80px);
   right: 0px;
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
-  border: solid 1px #8300BF;
+  border: solid 1px $app-primary-color;
   background-color: #f9f2fc;
   text-align: center;
   vertical-align: middle;
@@ -177,7 +179,7 @@ export default {
 {
   font-weight: 600;
   margin-top: 12px;
-  color: #8300BF;
+  color: $app-primary-color;
   cursor: pointer;
   pointer-events: auto;
   transform: scaleY(2.0);
@@ -193,7 +195,7 @@ export default {
   z-index: 8;
   margin-top: calc(50vh - 80px);
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
-  border: solid 1px #8300BF; 
+  border: solid 1px $app-primary-color; 
   background-color: #f9f2fc;
   text-align: center;
   vertical-align: middle;
@@ -208,12 +210,12 @@ export default {
   pointer-events: auto;
 }
 
->>> .my-drawer {
+::v-deep .my-drawer {
   background: rgba(0,0,0,0);
   box-shadow: none;
 }
 
->>> .my-drawer .el-drawer__body {
+::v-deep .my-drawer .el-drawer__body {
   height: 100%;
 }