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

package/src/components/FlatmapVuer.vue

@@ -1,59 +1,135 @@
 <template>
-  <div class="flatmap-container"
-      v-loading="loading"
-      element-loading-text="Loading..."
-      element-loading-spinner="el-icon-loading"
-      element-loading-background="rgba(0, 0, 0, 0.3)">
-    <SvgSpriteColor/>
+  <div
+    class="flatmap-container"
+    v-loading="loading"
+    element-loading-text="Loading..."
+    element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(0, 0, 0, 0.3)"
+  >
+    <SvgSpriteColor />
     <div style="height:100%;width:100%;position:relative;overflow-y:none">
       <div style="height:100%;width:100%;" ref="display"></div>
-      <el-popover :content="warningMessage" placement="right"
-        v-if="displayWarning" :appendToBody=false trigger="manual" popper-class="warning-popper right-popper" v-model="hoverVisibilities[6].value"
-        ref="warningPopover">
-      </el-popover>
-      <i class="el-icon-warning warning-icon" v-if="displayWarning" 
-        @mouseover="showToolitip(6)" @mouseout="hideToolitip(6)"
-        v-popover:warningPopover>
+      <el-popover
+        :content="warningMessage"
+        placement="right"
+        v-if="displayWarning"
+        :appendToBody="false"
+        trigger="manual"
+        popper-class="warning-popper flatmap-popper right-popper"
+        v-model="hoverVisibilities[6].value"
+        ref="warningPopover"
+      ></el-popover>
+      <i
+        class="el-icon-warning warning-icon"
+        v-if="displayWarning"
+        @mouseover="showToolitip(6)"
+        @mouseout="hideToolitip(6)"
+        v-popover:warningPopover
+      >
         <span class="warning-text">Beta</span>
       </i>
       <div class="bottom-right-control">
-        <el-popover content="Zoom in" placement="left" 
-          :appendToBody=false trigger="manual" popper-class="flatmap-popper left-popper" v-model="hoverVisibilities[0].value">
-          <SvgIcon icon="zoomIn" class="icon-button zoomIn" slot="reference" @click.native="zoomIn()"
-            @mouseover.native="showToolitip(0)" @mouseout.native="hideToolitip(0)"/>
+        <el-popover
+          content="Zoom in"
+          placement="left"
+          :appendToBody="false"
+          trigger="manual"
+          popper-class="flatmap-popper left-popper"
+          v-model="hoverVisibilities[0].value"
+        >
+          <SvgIcon
+            icon="zoomIn"
+            class="icon-button zoomIn"
+            slot="reference"
+            @click.native="zoomIn()"
+            @mouseover.native="showToolitip(0)"
+            @mouseout.native="hideToolitip(0)"
+          />
         </el-popover>
-        <el-popover content="Zoom out" placement="top-end"
-          :appendToBody=false trigger="manual" popper-class="flatmap-popper popper-zoomout" v-model="hoverVisibilities[1].value">
-          <SvgIcon icon="zoomOut" class="icon-button zoomOut" slot="reference" @click.native="zoomOut()"
-            @mouseover.native="showToolitip(1)" @mouseout.native="hideToolitip(1)"/>
+        <el-popover
+          content="Zoom out"
+          placement="top-end"
+          :appendToBody="false"
+          trigger="manual"
+          popper-class="flatmap-popper popper-zoomout"
+          v-model="hoverVisibilities[1].value"
+        >
+          <SvgIcon
+            icon="zoomOut"
+            class="icon-button zoomOut"
+            slot="reference"
+            @click.native="zoomOut()"
+            @mouseover.native="showToolitip(1)"
+            @mouseout.native="hideToolitip(1)"
+          />
         </el-popover>
-        <el-popover content="Reset" placement="top"
-          :appendToBody=false trigger="manual" popper-class="flatmap-popper" v-model="hoverVisibilities[2].value">
-          <SvgIcon icon="resetZoom" class="icon-button resetView" slot="reference" @click.native="resetView()"
-            @mouseover.native="showToolitip(2)" @mouseout.native="hideToolitip(2)"/>
+        <el-popover
+          content="Reset"
+          placement="top"
+          :appendToBody="false"
+          trigger="manual"
+          popper-class="flatmap-popper"
+          v-model="hoverVisibilities[2].value"
+        >
+          <SvgIcon
+            icon="resetZoom"
+            class="icon-button resetView"
+            slot="reference"
+            @click.native="resetView()"
+            @mouseover.native="showToolitip(2)"
+            @mouseout.native="hideToolitip(2)"
+          />
         </el-popover>
       </div>
-      <el-popover content="Change pathway visibility" placement="right"
-        :appendToBody=false trigger="manual" popper-class="flatmap-popper right-popper" v-model="hoverVisibilities[4].value" ref="checkBoxPopover"/>
+      <el-popover
+        content="Change pathway visibility"
+        placement="right"
+        :appendToBody="false"
+        trigger="manual"
+        popper-class="flatmap-popper right-popper"
+        v-model="hoverVisibilities[4].value"
+        ref="checkBoxPopover"
+      />
       <div class="pathway-location" :class="{ open: drawerOpen, close: !drawerOpen }">
-        <div class="pathway-container" v-if="pathways.length > 0 && pathControls"
-           v-popover:checkBoxPopover>
-          <el-popover content="Find these markers for data" placement="right"
-            :appendToBody=false trigger="manual" popper-class="flatmap-popper popper-bump-right  right-popper" v-model="hoverVisibilities[5].value" ref="markerPopover">
-          </el-popover>
-          <div v-show="hoverVisibilities[5].value" class="flatmap-marker-help" v-html="flatmapMarker" v-popover:markerPopover></div>
+        <div
+          class="pathway-container"
+          v-if="pathways.length > 0 && pathControls"
+          v-popover:checkBoxPopover
+        >
+          <el-popover
+            content="Find these markers for data"
+            placement="right"
+            :appendToBody="false"
+            trigger="manual"
+            popper-class="flatmap-popper popper-bump-right  right-popper"
+            v-model="hoverVisibilities[5].value"
+            ref="markerPopover"
+          ></el-popover>
+          <div
+            v-show="hoverVisibilities[5].value"
+            class="flatmap-marker-help"
+            v-html="flatmapMarker"
+            v-popover:markerPopover
+          ></div>
           <el-row>
             <el-col :span="12">
-              <div class="pathways-display-text">
-                Pathways
-              </div>
+              <div class="pathways-display-text">Pathways</div>
             </el-col>
             <el-col :span="12">
-              <el-checkbox class="all-checkbox" :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">Display all</el-checkbox>
+              <el-checkbox
+                class="all-checkbox"
+                :indeterminate="isIndeterminate"
+                v-model="checkAll"
+                @change="handleCheckAllChange"
+              >Display all</el-checkbox>
             </el-col>
           </el-row>
-          <el-checkbox-group v-model="checkedItems" size="small" 
-            class="checkbox-group" @change="handleCheckedItemsChange">
+          <el-checkbox-group
+            v-model="checkedItems"
+            size="small"
+            class="checkbox-group"
+            @change="handleCheckedItemsChange"
+          >
             <div class="checkbox-group-inner">
               <el-row v-for="item in pathways" :key="item.type" :label="item.type">
                 <div class="checkbox-container">
@@ -62,13 +138,20 @@
                     :label="item.type"
                     @change="visibilityToggle()"
                     :checked="true"
-                  ><div class="path-visual" :class="item.type"></div>{{item.label}}</el-checkbox>
+                  >
+                    <div class="path-visual" :class="item.type"></div>
+                    {{item.label}}
+                  </el-checkbox>
                 </div>
               </el-row>
             </div>
           </el-checkbox-group>
         </div>
-        <div @click="toggleDrawer" class="drawer-button" :class="{ open: drawerOpen, close: !drawerOpen }">
+        <div
+          @click="toggleDrawer"
+          class="drawer-button"
+          :class="{ open: drawerOpen, close: !drawerOpen }"
+        >
           <i class="el-icon-arrow-left"></i>
         </div>
       </div>
@@ -76,49 +159,60 @@
         ref="backgroundPopover"
         placement="top-start"
         width="175"
-        :appendToBody=false
+        :appendToBody="false"
         trigger="click"
-        popper-class="background-popper">
-        <el-row class="backgroundText">
-          Organs display
-        </el-row>
-        <el-row class="backgroundControl" >
-          <el-radio-group v-model="colourRadio" class="flatmap-radio"
-            @change="setColour">
+        popper-class="background-popper"
+      >
+        <el-row class="backgroundText">Organs display</el-row>
+        <el-row class="backgroundControl">
+          <el-radio-group v-model="colourRadio" class="flatmap-radio" @change="setColour">
             <el-radio :label="true">Colour</el-radio>
             <el-radio :label="false">Greyscale</el-radio>
           </el-radio-group>
         </el-row>
-        <el-row class="backgroundSpacer">
-        </el-row>
-        <el-row class="backgroundText">
-          Outlines display
-        </el-row>
-        <el-row class="backgroundControl" >
-          <el-radio-group v-model="outlinesRadio" class="flatmap-radio"
-            @change="setOutlines">
+        <el-row class="backgroundSpacer"></el-row>
+        <el-row class="backgroundText">Outlines display</el-row>
+        <el-row class="backgroundControl">
+          <el-radio-group v-model="outlinesRadio" class="flatmap-radio" @change="setOutlines">
             <el-radio :label="true">Show</el-radio>
             <el-radio :label="false">Hide</el-radio>
           </el-radio-group>
         </el-row>
-        <el-row class="backgroundSpacer">
-        </el-row>
-        <el-row class="backgroundText">
-          Change background
-        </el-row>
-        <el-row class="backgroundControl" >
-          <div v-for="item in availableBackground" :key="item" 
-            :class="['backgroundChoice', item, item == currentBackground ? 'active' :'']" 
-            @click="backgroundChangeCallback(item)"/>
+        <el-row class="backgroundSpacer"></el-row>
+        <el-row class="backgroundText">Change background</el-row>
+        <el-row class="backgroundControl">
+          <div
+            v-for="item in availableBackground"
+            :key="item"
+            :class="['backgroundChoice', item, item == currentBackground ? 'active' :'']"
+            @click="backgroundChangeCallback(item)"
+          />
         </el-row>
       </el-popover>
-      <el-popover  content="Change background color" placement="right" v-model="hoverVisibilities[3].value"
-        :appendToBody=false trigger="manual" popper-class="flatmap-popper right-popper">
-        <SvgIcon v-popover:backgroundPopover icon="changeBckgd" class="icon-button background-colour" 
-          :class="{ open: drawerOpen, close: !drawerOpen }" slot="reference"
-          @mouseover.native="showToolitip(3)" @mouseout.native="hideToolitip(3)"/>
+      <el-popover
+        content="Change background color"
+        placement="right"
+        v-model="hoverVisibilities[3].value"
+        :appendToBody="false"
+        trigger="manual"
+        popper-class="flatmap-popper right-popper"
+      >
+        <SvgIcon
+          v-popover:backgroundPopover
+          icon="changeBckgd"
+          class="icon-button background-colour"
+          :class="{ open: drawerOpen, close: !drawerOpen }"
+          slot="reference"
+          @mouseover.native="showToolitip(3)"
+          @mouseout.native="hideToolitip(3)"
+        />
       </el-popover>
-      <Tooltip ref="tooltip" class="tooltip" :content="tooltipContent" @resource-selected="resourceSelected"/>
+      <Tooltip
+        ref="tooltip"
+        class="tooltip"
+        :content="tooltipContent"
+        @resource-selected="resourceSelected"
+      />
     </div>
   </div>
 </template>
@@ -126,8 +220,8 @@
 <script>
 /* eslint-disable no-alert, no-console */
 import Vue from "vue";
-import Tooltip from './Tooltip'
-import { SvgIcon, SvgSpriteColor} from '@abi-software/svg-sprite'
+import Tooltip from "./Tooltip";
+import { SvgIcon, SvgSpriteColor } from "@abi-software/svg-sprite";
 import {
   Checkbox,
   CheckboxGroup,
@@ -148,14 +242,13 @@ Vue.use(Loading.directive);
 Vue.use(Radio);
 Vue.use(RadioGroup);
 Vue.use(Row);
-const ResizeSensor = require('css-element-queries/src/ResizeSensor');
+const ResizeSensor = require("css-element-queries/src/ResizeSensor");
 
 const mapResize = map => {
   return () => {
-    if (map)
-      map.resize();
-  }
-}
+    if (map) map.resize();
+  };
+};
 
 export default {
   name: "FlatmapVuer",
@@ -172,10 +265,10 @@ export default {
     backgroundChangeCallback: function(colour) {
       this.currentBackground = colour;
       if (this.mapImp) {
-        this.mapImp.setBackgroundColour(this.currentBackground, 1 );
+        this.mapImp.setBackgroundColour(this.currentBackground, 1);
       }
     },
-    toggleDrawer: function () {
+    toggleDrawer: function() {
       this.drawerOpen = !this.drawerOpen;
     },
     /**
@@ -184,7 +277,7 @@ export default {
     setColour: function(flag) {
       this.colourRadio = flag;
       if (this.mapImp) {
-        this.mapImp.setColour({colour: flag, outline: this.outlinesRadio});
+        this.mapImp.setColour({ colour: flag, outline: this.outlinesRadio });
       }
     },
     /**
@@ -193,7 +286,7 @@ export default {
     setOutlines: function(flag) {
       this.outlineRadio = flag;
       if (this.mapImp) {
-        this.mapImp.setColour({colour: this.colourRadio, outline: flag});
+        this.mapImp.setColour({ colour: this.colourRadio, outline: flag });
       }
     },
     /**
@@ -234,7 +327,8 @@ export default {
     handleCheckedItemsChange: function(value) {
       let checkedCount = value.length;
       this.checkAll = checkedCount === this.pathways.length;
-      this.isIndeterminate = checkedCount > 0 && checkedCount < this.pathways.length;
+      this.isIndeterminate =
+        checkedCount > 0 && checkedCount < this.pathways.length;
     },
     handleCheckAllChange(val) {
       this.checkedItems = val ? this.pathways.map(a => a.type) : [];
@@ -244,93 +338,114 @@ export default {
       }
     },
     eventCallback: function() {
-      
       return (eventType, feature, ...args) => {
         const label = feature.label;
-        const resource = [ feature.models ];
+        const resource = [feature.models];
         const taxonomy = this.entry;
-        const data = { dataset: feature.dataset, taxonomy: taxonomy, resource: resource, label: label,
-          feature: feature, userData: args, eventType: eventType};
+        const data = {
+          dataset: feature.dataset,
+          taxonomy: taxonomy,
+          resource: resource,
+          label: label,
+          feature: feature,
+          userData: args,
+          eventType: eventType
+        };
         // Disable the nueron pop up for now.
         if (feature && feature.type !== "marker")
-          this.checkAndCreatePopups(data)
+          this.checkAndCreatePopups(data);
         this.$emit("resource-selected", data);
-      }
+      };
     },
     // checkNeuronClicked shows a neuron path pop up if a path was recently clicked
-    checkAndCreatePopups: function(data){
-      if (data.eventType == 'click' && this.createTooltipFromNeuronCuration(data)) { 
-        this.mapImp.showPopup(this.mapImp.modelFeatureIds(data.resource[0])[0],this.$refs.tooltip.$el,
-          {className: "flatmap-tooltip-dialog"})
-        this.popUpCssHack()
+    checkAndCreatePopups: function(data) {
+      if (
+        data.eventType == "click" &&
+        this.createTooltipFromNeuronCuration(data)
+      ) {
+        this.mapImp.showPopup(
+          this.mapImp.modelFeatureIds(data.resource[0])[0],
+          this.$refs.tooltip.$el,
+          { className: "flatmap-tooltip-dialog" }
+        );
+        this.popUpCssHack();
       }
     },
-    popUpCssHack: function(){
+    popUpCssHack: function() {
       // Below is a hack to remove flatmap tooltips while popup is open
-      let ftooltip = document.querySelector('.flatmap-tooltip-popup')
-      if (ftooltip) ftooltip.style.display = 'none'
-      document.querySelector('.mapboxgl-popup-close-button').style.display = 'block'
-      this.$refs.tooltip.$el.style.display = 'flex'
-      document.querySelector('.mapboxgl-popup-close-button').onclick = ()=>{
-        document.querySelector('.flatmap-tooltip-popup').style.display = 'block'
-      }
+      let ftooltip = document.querySelector(".flatmap-tooltip-popup");
+      if (ftooltip) ftooltip.style.display = "none";
+      document.querySelector(".mapboxgl-popup-close-button").style.display =
+        "block";
+      this.$refs.tooltip.$el.style.display = "flex";
+      document.querySelector(".mapboxgl-popup-close-button").onclick = () => {
+        document.querySelector(".flatmap-tooltip-popup").style.display =
+          "block";
+      };
     },
-    resourceSelected: function(action){
-      this.$emit("resource-selected", action)
+    resourceSelected: function(action) {
+      this.$emit("resource-selected", action);
     },
-    createTooltipFromNeuronCuration: function(data){
-      const feature = data.resource[0]
+    createTooltipFromNeuronCuration: function(data) {
+      const feature = data.resource[0];
       let content = {
-        title: undefined, components: undefined, start: undefined, distribution: undefined, actions: []
-      }
-      
-      let foundAnnotations = false
-      this.tooltipVisible = false
+        title: undefined,
+        components: undefined,
+        start: undefined,
+        distribution: undefined,
+        actions: []
+      };
+
+      let foundAnnotations = false;
+      this.tooltipVisible = false;
 
       // neural data check
-      if (feature){
-        if (feature.includes('ilxtr:neuron')){
-          foundAnnotations = true
-          this.tooltipVisible = true
-          this.tooltipContent = content
-          this.tooltipContent.uberon = feature
-          this.tooltipContent.title = data.label
-          this.tooltipContent.featureId = feature
+      if (feature) {
+        if (feature.includes("ilxtr:neuron")) {
+          foundAnnotations = true;
+          this.tooltipVisible = true;
+          this.tooltipContent = content;
+          this.tooltipContent.uberon = feature;
+          this.tooltipContent.title = data.label;
+          this.tooltipContent.featureId = feature;
           this.tooltipContent.actions.push({
-            title: 'Search for dataset',
-            label: 'Neuron Datasets',
-            resource: feature.split(':')[1],
-            type: 'Neuron Search',
-            nervePath: true,
-          })
+            title: "Search for dataset",
+            label: "Neuron Datasets",
+            resource: feature.split(":")[1],
+            type: "Neuron Search",
+            nervePath: true
+          });
         }
       }
       // annotated with datset check
-      if (data.dataset){
-        foundAnnotations = true
-        this.tooltipVisible = true
-        this.tooltipContent = content
-        this.tooltipContent.uberon = feature
-        this.tooltipContent.title = data.label
+      if (data.dataset) {
+        foundAnnotations = true;
+        this.tooltipVisible = true;
+        this.tooltipContent = content;
+        this.tooltipContent.uberon = feature;
+        this.tooltipContent.title = data.label;
         this.tooltipContent.actions.push({
           title: "View dataset",
           resource: data.dataset,
           type: "URL",
-          nervePath: false,
-        })
+          nervePath: false
+        });
+      }
+
+      if (foundAnnotations) {
+        return true;
+      } else {
+        return false;
       }
-    
-      if(foundAnnotations) { return true } else { return false }
     },
-    // Keeping this as an API 
+    // Keeping this as an API
     showPopup: function(featureId, node, options) {
       let myOptions = options;
       if (this.mapImp) {
         if (myOptions) {
-          if (!myOptions.className)
-            myOptions.className = "flatmapvuer-popover";
+          if (!myOptions.className) myOptions.className = "flatmapvuer-popover";
         } else {
-          myOptions = {className: "flatmapvuer-popover"};
+          myOptions = { className: "flatmapvuer-popover" };
         }
         this.mapImp.showPopup(featureId, node, myOptions);
       }
@@ -340,50 +455,57 @@ export default {
         this.mapImp.showMarkerPopup(featureId, node, options);
       }
     },
-    setHelpMode: function(helpMode){
-      if (helpMode){
+    setHelpMode: function(helpMode) {
+      if (helpMode) {
         this.inHelp = true;
-        this.hoverVisibilities.forEach( (item) =>{
+        this.hoverVisibilities.forEach(item => {
           item.value = true;
         });
         this.openFlatmapHelpPopup();
       } else {
         this.inHelp = false;
-        this.hoverVisibilities.forEach( (item) =>{
+        this.hoverVisibilities.forEach(item => {
           item.value = false;
         });
         this.closeFlatmapHelpPopup();
       }
     },
-    showToolitip: function(tooltipNumber){
-      if (!this.inHelp){
-        this.tooltipWait = setTimeout( ()=>{
-          this.hoverVisibilities[tooltipNumber].value = true}, 500);
+    showToolitip: function(tooltipNumber) {
+      if (!this.inHelp) {
+        this.tooltipWait = setTimeout(() => {
+          this.hoverVisibilities[tooltipNumber].value = true;
+        }, 500);
       }
     },
-    hideToolitip: function(tooltipNumber){
-      if (!this.inHelp){
+    hideToolitip: function(tooltipNumber) {
+      if (!this.inHelp) {
         this.hoverVisibilities[tooltipNumber].value = false;
         clearTimeout(this.tooltipWait);
       }
     },
-    openFlatmapHelpPopup: function(){
+    openFlatmapHelpPopup: function() {
       if (this.mapImp) {
-        let heartId = this.mapImp.featureIdsForModel('UBERON:0000948')[0];
-        const elm = 'Click for more information';
-        this.mapImp.showPopup(heartId, elm, {anchor: "top", className: "flatmap-popup-popper"});
+        let heartId = this.mapImp.featureIdsForModel("UBERON:0000948")[0];
+        const elm = "Click for more information";
+        this.mapImp.showPopup(heartId, elm, {
+          anchor: "top",
+          className: "flatmap-popup-popper"
+        });
       }
     },
-    closeFlatmapHelpPopup: function(){
-      this.$el.querySelectorAll('.mapboxgl-popup-close-button').forEach((item) => {item.click()});
+    closeFlatmapHelpPopup: function() {
+      this.$el
+        .querySelectorAll(".mapboxgl-popup-close-button")
+        .forEach(item => {
+          item.click();
+        });
     },
     getLabels: function() {
       let labels = [];
       if (this.mapImp) {
         let annotations = this.mapImp.annotations;
         for (let value of annotations.values()) {
-          if (value.label)
-            labels.push(value.label);
+          if (value.label) labels.push(value.label);
         }
         return Array.from(new Set(labels));
       }
@@ -392,8 +514,8 @@ export default {
       if (this.mapImp) {
         let state = {
           entry: this.entry,
-          viewport: this.mapImp.getState(),
-        }
+          viewport: this.mapImp.getState()
+        };
         return state;
       }
       return undefined;
@@ -418,9 +540,10 @@ export default {
           minimap = { position: "top-right" };
         }
         let entry = this.entry;
-        if (state && state.entry)
-          entry = state.entry;
-        let promise1 = this.mapManager.loadMap(entry, this.$refs.display,
+        if (state && state.entry) entry = state.entry;
+        let promise1 = this.mapManager.loadMap(
+          entry,
+          this.$refs.display,
           this.eventCallback(),
           {
             //fullscreenControl: false,
@@ -432,10 +555,14 @@ export default {
             searchable: this.searchable,
             tooltips: this.tooltips,
             minimap: minimap
-          });
+          }
+        );
         promise1.then(returnedObject => {
           this.mapImp = returnedObject;
-          this.sensor = new ResizeSensor(this.$refs.display, mapResize(this.mapImp));
+          this.sensor = new ResizeSensor(
+            this.$refs.display,
+            mapResize(this.mapImp)
+          );
           this.mapImp.setBackgroundOpacity(1);
           this.backgroundChangeCallback(this.currentBackground);
           this.pathways = this.mapImp.pathTypes();
@@ -447,8 +574,7 @@ export default {
             this.mapImp.setState(state.viewport);
         });
       } else if (state) {
-        if (this.entry == state.entry)
-          this._viewportToBeSet = state.viewport;
+        if (this.entry == state.entry) this._viewportToBeSet = state.viewport;
       }
     },
     /**
@@ -458,13 +584,11 @@ export default {
       if (this.mapImp) {
         if (term === undefined || term === "") {
           this.mapImp.clearSearchResults();
-        }
-        else {
+        } else {
           let searchResults = this.mapImp.search(term);
           if (searchResults && searchResults.__featureIds.length > 0)
             this.mapImp.showSearchResults(searchResults);
-          else
-            this.mapImp.clearSearchResults();
+          else this.mapImp.clearSearchResults();
         }
       }
     }
@@ -473,7 +597,7 @@ export default {
     entry: String,
     featureInfo: {
       type: Boolean,
-      default: false,
+      default: false
     },
     minZoom: {
       type: Number,
@@ -485,11 +609,11 @@ export default {
     },
     searchable: {
       type: Boolean,
-      default: false,
+      default: false
     },
     tooltips: {
       type: Boolean,
-      default: true,      
+      default: true
     },
     helpMode: {
       type: Boolean,
@@ -497,7 +621,7 @@ export default {
     },
     renderAtMounted: {
       type: Boolean,
-      default: true, 
+      default: true
     },
     displayWarning: {
       type: Boolean,
@@ -516,7 +640,7 @@ export default {
      */
     state: {
       type: Object,
-      default: undefined,
+      default: undefined
     },
     /**
      * Specify the endpoint of the flatmap server.
@@ -524,7 +648,7 @@ export default {
     flatmapAPI: {
       type: String,
       default: "https://mapcore-demo.org/flatmaps/"
-    },
+    }
   },
   data: function() {
     return {
@@ -532,11 +656,18 @@ export default {
       pathways: [],
       isIndeterminate: false,
       checkAll: true,
-      hoverVisibilities: [{value: false}, {value: false}, {value: false},
-        {value: false}, {value: false}, {value: false}, {value: false}],
+      hoverVisibilities: [
+        { value: false },
+        { value: false },
+        { value: false },
+        { value: false },
+        { value: false },
+        { value: false },
+        { value: false }
+      ],
       inHelp: false,
-      currentBackground: 'white',
-      availableBackground: ['white', 'lightskyblue', 'black' ],
+      currentBackground: "white",
+      availableBackground: ["white", "lightskyblue", "black"],
       loading: false,
       flatmapMarker: flatmapMarker,
       drawerOpen: true,
@@ -547,10 +678,9 @@ export default {
   },
   watch: {
     entry: function() {
-      if (!this.state)
-        this.createFlatmap();
+      if (!this.state) this.createFlatmap();
     },
-    helpMode: function(val){
+    helpMode: function(val) {
       this.setHelpMode(val);
     },
     state: {
@@ -558,87 +688,85 @@ export default {
         this.setState(state);
       },
       immediate: true,
-      deep: true,
+      deep: true
     }
   },
   mounted: function() {
     const flatmap = require("@abi-software/flatmap-viewer");
     this.mapManager = new flatmap.MapManager(this.flatmapAPI);
-    if (this.renderAtMounted)
-      this.createFlatmap();
+    if (this.renderAtMounted) this.createFlatmap();
   }
 };
 </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/checkbox";
+@import "~element-ui/packages/theme-chalk/src/checkbox-group";
+@import "~element-ui/packages/theme-chalk/src/loading";
+@import "~element-ui/packages/theme-chalk/src/row";
+
 .warning-icon {
   position: absolute;
   top: 90px;
   left: 37px;
   text-align: left;
   font-size: 25px;
-  color: #ff8400;
-}
-.warning-icon:hover {
-  cursor: pointer;
-}
->>> .warning-popper {
-  padding:9px 10px;
-  min-width:150px;
-  max-width: 400px;
-  font-size:12px;
-  color: #fff;
-  word-break: keep-all;
-  background-color: #ff8400;
-}
->>> .warning-popper.right-popper .popper__arrow::after{
-  border-right-color: #ff8400 !important;
+  color: $warning;
+
+  &:hover {
+    cursor: pointer;
+  }
 }
 
-.warning-text{
+.warning-text {
   font-size: 15px;
-  vertical-align:5px;
+  vertical-align: 5px;
 }
 
 .path-visual {
   margin: 3px 0;
   height: 3px;
-  width:25px;
+  width: 25px;
   margin-right: 5px;
   display: inline-block;
-}
-
-.path-visual.cns {
-  background:#9b1fc1;
-}
-
-.path-visual.lcn {
-  background:#f19e38;
-}
-
-.path-visual.para-pre {
-  background:#3f8f4a;
-}
-
-.path-visual.para-post {
-  background:repeating-linear-gradient(90deg,#3f8f4a,#3f8f4a 6px,transparent 0,transparent 9px);
-}
-
-.path-visual.sensory {
-  background:#2a62f6;
-}
-
-.path-visual.somatic {
-  background:#98561d;
-}
-
-.path-visual.symp-pre {
-  background: #ea3423;
-}
-
-.path-visual.symp-post {
-  background: repeating-linear-gradient(90deg,#ea3423,#ea3423 6px,transparent 0,transparent 9px);
+  &.cns {
+    background: #9b1fc1;
+  }
+  &.lcn {
+    background: #f19e38;
+  }
+  &.para-pre {
+    background: #3f8f4a;
+  }
+  &.para-post {
+    background: repeating-linear-gradient(
+      90deg,
+      #3f8f4a,
+      #3f8f4a 6px,
+      transparent 0,
+      transparent 9px
+    );
+  }
+  &.sensory {
+    background: #2a62f6;
+  }
+  &.somatic {
+    background: #98561d;
+  }
+  &.symp-pre {
+    background: #ea3423;
+  }
+  &.symp-post {
+    background: repeating-linear-gradient(
+      90deg,
+      #ea3423,
+      #ea3423 6px,
+      transparent 0,
+      transparent 9px
+    );
+  }
 }
 
 .flatmap-container {
@@ -650,12 +778,12 @@ export default {
   position: absolute;
   bottom: 0px;
   transition: all 1s ease;
-}
-.pathway-location.open {
-  left: 0px;
-}
-.pathway-location.close {
-  left: -298px;
+  &.open {
+    left: 0px;
+  }
+  &.close {
+    left: -298px;
+  }
 }
 
 .pathway-container {
@@ -666,9 +794,9 @@ export default {
   text-align: left;
   overflow: auto;
   border: 1px solid rgb(220, 223, 230);
-  padding-top:7px;
-  padding-bottom:16px;
-  background:#ffffff;
+  padding-top: 7px;
+  padding-bottom: 16px;
+  background: #ffffff;
 }
 
 .pathways-display-text {
@@ -685,7 +813,7 @@ export default {
   float: right;
 }
 
-.checkbox-container { 
+.checkbox-container {
   display: flex;
   cursor: pointer;
 }
@@ -699,48 +827,47 @@ export default {
 
 .my-checkbox {
   background-color: #fff;
-  width:100%;
+  width: 100%;
 }
 
 .checkbox-group-inner {
-  padding:18px;
+  padding: 18px;
 }
 
-.flatmap-marker-help{
+.flatmap-marker-help {
   display: inline-block;
 }
 
->>> .popper-bump-right{
+::v-deep .popper-bump-right {
   left: 30px;
 }
 
->>> .el-checkbox__label {
-  padding-left:5px;
-  color: rgb(131, 0, 191);
+::v-deep .el-checkbox__label {
+  padding-left: 5px;
+  color: $app-primary-color;
   font-size: 12px;
   font-weight: 500;
   letter-spacing: 0px;
   line-height: 14px;
 }
 
->>> .el-checkbox__input.is-indeterminate .el-checkbox__inner
-{
-  background-color: #8300bf;
-  border-color:  #8300bf;
-}
-
->>> .el-checkbox__input.is-checked .el-checkbox__inner {
-  background-color: #8300bf;
-  border-color:  #8300bf;
+::v-deep .el-checkbox__input {
+  &.is-indeterminate,
+  &.is-checked {
+    .el-checkbox__inner {
+      background-color: $app-primary-color;
+      border-color: $app-primary-color;
+    }
+  }
 }
 
->>> .el-checkbox__label {
-  color:  #8300bf !important;
+::v-deep .el-checkbox__label {
+  color: $app-primary-color !important;
 }
 
 .el-dropdown-link {
   cursor: pointer;
-  color: #409EFF;
+  color: #409eff;
 }
 .el-icon-arrow-down {
   font-size: 12px;
@@ -756,119 +883,122 @@ export default {
   display: none;
 }
 
->>> .mapboxgl-popup{
+::v-deep .mapboxgl-popup {
   max-width: 300px !important;
 }
 
->>>.flatmap-tooltip-popup .mapboxgl-popup-content {
-  border-radius: 4px;
-  box-shadow: 0 1px 2px rgba(0,0,0,.1);
-  pointer-events: none;
-  display: none;
-  background: #fff;
-  border: 1px solid rgb(131, 0, 191);
-  padding-left: 6px;
-  padding-right: 6px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-}
-
->>>.flatmap-tooltip-popup.mapboxgl-popup-anchor-bottom .mapboxgl-popup-content {
-  margin-bottom: 12px;
-}
-
->>>.flatmap-tooltip-popup.mapboxgl-popup-anchor-top .mapboxgl-popup-content {
-  margin-top: 18px;
-}
-
->>> .mapboxgl-popup.flatmap-marker-popup{
-  box-shadow: 1px 1px 2px rgba(0,0,0,.1);
-  pointer-events: auto;
-  background: #fff;
-}
-
-
->>>.flatmap-tooltip-popup .mapboxgl-popup-content::after,
->>>.flatmap-tooltip-popup .mapboxgl-popup-content::before {
-    content: '';
-    display: block;
-    position: absolute;
-    width: 0;
-    height: 0;
-    border-style: solid;
-    flex-shrink: 0;
-}
-
->>>.flatmap-tooltip-popup.mapboxgl-popup-anchor-bottom .mapboxgl-popup-content::after,
->>>.flatmap-tooltip-popup.mapboxgl-popup-anchor-bottom .mapboxgl-popup-content::before {
-    top: 100%;
-}
-
-/* this border color controlls the color of the triangle (what looks like the fill of the triangle) */
->>>.flatmap-tooltip-popup.mapboxgl-popup-anchor-bottom .mapboxgl-popup-content::after {
-    margin-top: -1px;
-    border-color: rgb(255, 255, 255) transparent transparent  transparent ;
-    border-width: 12px;
-}
-
->>>.flatmap-tooltip-popup.mapboxgl-popup-anchor-top .mapboxgl-popup-content::after,
->>>.flatmap-tooltip-popup.mapboxgl-popup-anchor-top .mapboxgl-popup-content::before {
-    top: calc(-100% + 6px);
+::v-deep .flatmap-tooltip-popup {
+  &.mapboxgl-popup-anchor-bottom {
+    .mapboxgl-popup-content {
+      margin-bottom: 12px;
+      &::after,
+      &::before {
+        top: 100%;
+        border-width: 12px;
+      }
+      /* this border color controlls the color of the triangle (what looks like the fill of the triangle) */
+      &::after {
+        margin-top: -1px;
+        border-color: rgb(255, 255, 255) transparent transparent transparent;
+      }
+      /* this border color controlls the outside, thin border */
+      &::before {
+        margin: 0 auto;
+        border-color: $app-primary-color transparent transparent transparent;
+      }
+    }
+  }
+  &.mapboxgl-popup-anchor-top {
+    .mapboxgl-popup-content {
+      margin-top: 18px;
+      &::after,
+      &::before {
+        top: calc(-100% + 6px);
+        border-width: 12px;
+      }
+      /* this border color controlls the color of the triangle (what looks like the fill of the triangle) */
+      &::after {
+        margin-top: 1px;
+        border-color: transparent transparent rgb(255, 255, 255) transparent;
+      }
+      &::before {
+        margin: 0 auto;
+        border-color: transparent transparent $app-primary-color transparent;
+      }
+    }
+  }
+  .mapboxgl-popup-content {
+    border-radius: 4px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    pointer-events: none;
+    display: none;
+    background: #fff;
+    border: 1px solid $app-primary-color;
+    padding-left: 6px;
+    padding-right: 6px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    &::after,
+    &::before {
+      content: "";
+      display: block;
+      position: absolute;
+      width: 0;
+      height: 0;
+      border-style: solid;
+      flex-shrink: 0;
+    }
+  }
+  .mapboxgl-popup-tip {
+    display: none;
+  }
 }
 
-/* this border color controlls the color of the triangle (what looks like the fill of the triangle) */
->>>.flatmap-tooltip-popup.mapboxgl-popup-anchor-top .mapboxgl-popup-content::after {
-    margin-top: 1px;
-    border-color:  transparent transparent rgb(255, 255, 255) transparent ;
-    border-width: 12px;
+::v-deep .mapboxgl-popup {
+  &.flatmap-marker-popup {
+    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
+    pointer-events: auto;
+    background: #fff;
+  }
 }
 
 /* Fix for chrome bug where under triangle pops up above one on top of it  */
-.selector:not(*:root), >>>.flatmap-tooltip-popup .mapboxgl-popup-content::after{
-  top: 99.9%;
-}
-
-/* this border color controlls the outside, thin border */
->>>.flatmap-tooltip-popup.mapboxgl-popup-anchor-bottom .mapboxgl-popup-content::before {
-    margin: 0 auto;
-    border-color: rgb(131, 0, 191)  transparent  transparent transparent ;
-    border-width: 12px;
-}
-
->>>.flatmap-tooltip-popup.mapboxgl-popup-anchor-top .mapboxgl-popup-content::before {
-    margin: 0 auto;
-    border-color: transparent  transparent rgb(131, 0, 191) transparent ;
-    border-width: 12px;
-}
-
->>> .flatmap-tooltip-popup .mapboxgl-popup-tip{
-  display: none;
+.selector:not(*:root),
+::v-deep.flatmap-tooltip-popup {
+  .mapboxgl-popup-content::after {
+    top: 99.9%;
+  }
 }
 
->>> .flatmap-tooltip-dialog .mapboxgl-popup-tip {
-  display: none;
+::v-deep .flatmap-tooltip-dialog {
+  .mapboxgl-popup-tip {
+    display: none;
+  }
 }
 
->>> .flatmap-marker-popup .mapboxgl-popup-content {
-  padding: 0px;
+::v-deep .flatmap-marker-popup {
+  .mapboxgl-popup-content {
+    padding: 0px;
+  }
 }
 
->>>.flatmapvuer-popover .mapboxgl-popup-close-button {
-  position: absolute;
-  right: 0.5em;
-  top: 0;
-  border: 0;
-  border-radius: 0 3px 0 0;
-  cursor: pointer;
-  background-color: transparent;
-  font-size: 2.5em;
-  color: grey;
-  top: 0.95em;
+::v-deep .flatmapvuer-popover {
+  .mapboxgl-popup-close-button {
+    position: absolute;
+    right: 0.5em;
+    top: 0;
+    border: 0;
+    border-radius: 0 3px 0 0;
+    cursor: pointer;
+    background-color: transparent;
+    font-size: 2.5em;
+    color: grey;
+    top: 0.95em;
+  }
 }
 
-.zoomOut{
+.zoomOut {
   padding-left: 8px;
 }
 
@@ -888,25 +1018,24 @@ export default {
   left: 24px;
 }
 
->>> .background-popper {
+::v-deep .background-popper {
   padding: 5px 12px;
   background-color: #ffffff;
-  border: 1px solid rgb(131, 0, 191);
+  border: 1px solid $app-primary-color;
   box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
   height: 200px;
   width: 175px;
-  min-width:175px;
-}
-
->>> .background-popper.el-popper[x-placement^="top"] .popper__arrow {
-  border-top-color: #8300bf !important;
-}
-
->>> .background-popper.el-popper[x-placement^="top"] .popper__arrow:after {
-  border-top-color: #fff !important;
+  min-width: 175px;
+  &.el-popper[x-placement^="top"] {
+    .popper__arrow {
+      border-top-color: $app-primary-color !important;
+      &::after {
+        border-top-color: #fff !important;
+      }
+    }
+  }
 }
 
-
 .backgroundText {
   color: rgb(48, 49, 51);
   font-size: 14px;
@@ -916,185 +1045,193 @@ export default {
 
 .backgroundControl {
   display: flex;
-  margin-top:16px;
+  margin-top: 16px;
 }
 
 .backgroundChoice {
-  width:20px;
-  height:20px;
+  width: 20px;
+  height: 20px;
   border: 1px solid rgb(144, 147, 153);
-  margin-left:20px;
-}
-.backgroundChoice.active {
-  border:2px solid #8300bf;
-}
-.backgroundChoice:hover {
-  cursor: pointer;
-}
-
-.backgroundChoice.white {
-  background-color: white;
-  margin-left:10px;
-}
-.backgroundChoice.black {
-  background-color: black;
-}
-.backgroundChoice.lightskyblue {
-  background-color: lightskyblue;
+  margin-left: 20px;
+  &.active {
+    border: 2px solid $app-primary-color;
+  }
+  &:hover {
+    cursor: pointer;
+  }
+  &.white {
+    background-color: white;
+    margin-left: 10px;
+  }
+  &.black {
+    background-color: black;
+  }
+  &.lightskyblue {
+    background-color: white;
+  }
 }
 
 .togglePaths {
-  top:201px;
-  right:20px;
+  top: 201px;
+  right: 20px;
   position: absolute;
 }
 
 .icon-button {
-  height:24px!important;
-  width:24px!important;
-  color: #8300bf;
-}
-.icon-button:hover {
-  cursor:pointer;
+  height: 24px !important;
+  width: 24px !important;
+  color: $app-primary-color;
+  &:hover {
+    cursor: pointer;
+  }
 }
 
->>> .flatmap-popper {
+::v-deep .flatmap-popper {
   padding: 6px 4px;
-  font-size:12px;
+  font-size: 12px;
   color: rgb(48, 49, 51);
   background-color: #f3ecf6;
-  border: 1px solid rgb(131, 0, 191);
+  border: 1px solid $app-primary-color;
   white-space: nowrap;
   min-width: unset;
+  &.warning-popper {
+    min-width: 150px;
+    max-width: 400px;
+    word-break: keep-all;
+    white-space: unset;
+  }
+  &.left-popper {
+    .popper__arrow {
+      border-left-color: $app-primary-color !important;
+      &::after {
+        border-left-color: #f3ecf6 !important;
+      }
+    }
+  }
+  &.right-popper {
+    .popper__arrow {
+      border-right-color: $app-primary-color !important;
+      &:after {
+        border-right-color: #f3ecf6 !important;
+      }
+    }
+  }
+  &.el-popper[x-placement^="top"] {
+    .popper__arrow {
+      border-top-color: $app-primary-color !important;
+      &:after {
+        border-top-color: #f3ecf6 !important;
+      }
+    }
+  }
 }
 
->>> .flatmap-marker{
-  cursor: pointer;
-}
-
->>>.el-loading-spinner i{
-  color: #8300bf;  
-}
->>>.el-loading-spinner .el-loading-text {
-  color: #8300bf; 
-}
-
->>> .flatmap-popup-popper .mapboxgl-popup-content {
-  padding: 6px 4px;
-  font-size:12px;
-  color: rgb(48, 49, 51);
-  background-color: #f3ecf6;
-  border: 1px solid rgb(131, 0, 191);
-  word-break: keep-all;
-  min-width: unset;
-}
-
->>>.flatmap-popper.left-popper .popper__arrow{
-  border-left-color: #8300bf !important;
-}
-
->>>.flatmap-popper.left-popper .popper__arrow:after{
-  border-left-color: #f3ecf6 !important;
-}
-
->>>.flatmap-popper.right-popper .popper__arrow{
-  border-right-color: #8300bf !important;
-}
-
->>>.flatmap-popper.right-popper .popper__arrow:after{
-  border-right-color: #f3ecf6 !important;
-}
-
->>>.flatmap-popper.el-popper[x-placement^="top"] .popper__arrow {
-  border-top-color:#8300bf !important;
+::v-deep .el-loading-spinner {
+  i,
+  .el-loading-text {
+    color: $app-primary-color;
+  }
 }
 
->>>.flatmap-popper.el-popper[x-placement^="top"] .popper__arrow:after{
-  border-top-color: #f3ecf6 !important;
+::v-deep .flatmap-popup-popper {
+  .mapboxgl-popup-tip {
+    border-bottom-color: $app-primary-color;
+  }
+  .mapboxgl-popup-content {
+    padding: 6px 4px;
+    font-size: 12px;
+    color: rgb(48, 49, 51);
+    background-color: #f3ecf6;
+    border: 1px solid $app-primary-color;
+    white-space: nowrap;
+    min-width: unset;
+    .mapboxgl-popup-close-button {
+      display: none;
+    }
+  }
 }
 
->>>.popper-zoomout {
-  padding-right:13px!important;
-  left:-21px!important;
+::v-deep .flatmap-popper {
+  
 }
 
->>>.popper-zoomout .popper__arrow{
-  left:53px!important;
+::v-deep .popper-zoomout {
+  padding-right: 13px !important;
+  left: -21px !important;
 }
 
->>> .flatmap-popup-popper .mapboxgl-popup-content .mapboxgl-popup-close-button {
-  display: none;
+::v-deep .popper-zoomout {
+  .popper__arrow {
+    left: 53px !important;
+  }
 }
 
->>> .mapboxgl-popup-content {
+::v-deep .mapboxgl-popup-content {
   padding: 0px;
 }
 
->>> .flatmap-popup-popper .mapboxgl-popup-tip {
-  border-bottom-color: #8300bf;  
-}
-
 .bottom-right-control {
-  position:absolute;
-  right:16px;
-  bottom:16px;
+  position: absolute;
+  right: 16px;
+  bottom: 16px;
 }
 
->>> .my-drawer {
-  background: rgba(0,0,0,0);
+::v-deep .my-drawer {
+  background: rgba(0, 0, 0, 0);
   box-shadow: none;
 }
 
-.drawer >>> .el-drawer:focus{
-  outline:none;
-}
-
-.open-drawer{
-  width: 20px;
-  height: 40px;
-  z-index: 8;
-  position: absolute;
-  left: 0px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
-  border: solid 1px #e4e7ed;
-  background-color: #F7FAFF;
-  text-align: center;
-  vertical-align: middle;
-  cursor: pointer;
-  pointer-events: auto;
+.drawer {
+  ::v-deep .el-drawer:focus {
+    outline: none;
+  }
 }
 
+.open-drawer,
 .drawer-button {
-  float: left;
+  z-index: 8;
   width: 20px;
   height: 40px;
-  z-index: 8;
-  margin-top:calc(50% - 36px);
   border: solid 1px #e4e7ed;
-  border-left: 0;
-  background-color: #FFFFFF;
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
   pointer-events: auto;
 }
 
-.drawer-button i{
-  margin-top:12px;
-  color: #8300bf;
-  transition-delay: 0.9s;
-}
-
-.drawer-button.open i{
-  transform: rotate(0deg) scaleY(2.5);
+.open-drawer {
+  position: absolute;
+  left: 0px;
+  background-color: #f7faff;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
 }
 
-.drawer-button.close i{
-  transform: rotate(180deg) scaleY(2.5);
+.drawer-button {
+  float: left;
+  margin-top: calc(50% - 36px);
+  border-left: 0;
+  background-color: #ffffff;
+  i {
+    margin-top: 12px;
+    color: $app-primary-color;
+    transition-delay: 0.9s;
+  }
+  &.open {
+    i {
+      transform: rotate(0deg) scaleY(2.5);
+    }
+  }
+  &.close {
+    i {
+      transform: rotate(180deg) scaleY(2.5);
+    }
+  }
 }
 
->>>.mapboxgl-canvas-container canvas {
-  outline:none;
+::v-deep .mapboxgl-canvas-container {
+  canvas {
+    outline: none;
+  }
 }
 
 .backgroundSpacer {
@@ -1102,32 +1239,24 @@ export default {
   margin-bottom: 10px;
 }
 
-.flatmap-radio >>> label{
-  margin-right:20px;
-}
-
-.flatmap-radio >>> label:last-child{
-  margin-right:0px;
-}
-
-.flatmap-radio >>> .el-radio__input.is-checked+.el-radio__label {
-  color: #8300bf;
-}
-
-.flatmap-radio >>> .el-radio__input.is-checked .el-radio__inner {
-  border-color: #8300bf;
-  background: #8300bf;
+.flatmap-radio {
+  ::v-deep label {
+    margin-right: 20px;
+    &:last-child {
+      margin-right: 0px;
+    }
+  }
+  .el-radio__input {
+    &.is-checked {
+      & + .el-radio__label {
+        color: $app-primary-color;
+      }
+      .el-radio__inner {
+        border-color: $app-primary-color;
+        background: $app-primary-color;
+      }
+    }
+  }
 }
-
 </style>
 
-<style scoped src="../styles/purple/checkbox.css">
-</style>
-<style scoped src="../styles/purple/checkbox-group.css">
-</style>
-<style scoped src="../styles/purple/row.css">
-</style>
-<style scoped src="../styles/purple/button.css">
-</style>
-<style scoped src="../styles/purple/loading.css">
-</style>