refactor: enhance style and drop unwanted props (#197)

Author: themustafaomar

packages/jsvectormap/src/js/legend.js

@@ -22,7 +22,6 @@ class Legend {
 
   render() {
     let ticks = this._series.scale.getTicks()
-    let inner = createElement('div', 'jvm-legend-inner')
 
     this._body.innderHTML = ''
 
@@ -31,8 +30,6 @@ class Legend {
       this._body.appendChild(legendTitle)
     }
 
-    this._body.appendChild(inner)
-
     for (let i = 0; i < ticks.length; i++) {
       let tick = createElement('div', 'jvm-legend-tick',)
       let sample = createElement('div', 'jvm-legend-tick-sample')
@@ -64,7 +61,7 @@ class Legend {
       const tickText = createElement('div', 'jvm-legend-tick-text', label)
 
       tick.appendChild(tickText)
-      inner.appendChild(tick)
+      this._body.appendChild(tick)
     }
   }
 }

packages/jsvectormap/src/scss/_variables.scss

@@ -1,41 +1,37 @@
-// Class prefix
-$border-color: #e5e7eb !default;
-$box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !default;
+$border-color: #E5E6E7 !default;
+$box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05) !default;
 
 // Tooltip
-$tooltip-shadow: 1px 2px 12px rgba(0, 0, 0, .2) !default;
-$tooltip-font-family: sans-serif, Verdana !default;
-$tooltip-bg-color: #337ffa !default;
+$tooltip-font-size: 0.9rem !default;
+$tooltip-bg-color: #337FFA !default;
 $tooltip-color: #FFF !default;
-$tooltip-radius: 3px !default;
-$tooltip-font-size: smaller !default;
 $tooltip-padding: 3px 5px !default;
+$tooltip-shadow: 1px 2px 12px rgba(0, 0, 0, .2) !default;
+$tooltip-radius: 3px !default;
 
 // Zoom buttons
-$zoom-btns-bg-color: #292929 !default;
-$zoom-btns-color: #FFF !default;
-$zoom-btns-radius: 3px !default;
-$zoom-btns-height: 15px !default;
-$zoom-btns-padding: 3px !default;
-$zoom-btns-width: 15px !default;
+$zoom-btn-bg-color: #292929 !default;
+$zoom-btn-color: #FFF !default;
+$zoom-btn-size: 15px !default;
+$zoom-btn-radius: 3px !default;
 
 // Series
 $series-container-right: 15px !default;
 
 // Legends
-$legend-background-color: #FFF !default;
-$legend-radius: 0.25rem !default;
+$legend-bg-color: #FFF !default;
+$legend-radius: .15rem !default;
 $legend-margin-left: .75rem !default;
-$legend-padding: 0.6rem !default;
+$legend-padding: .6rem !default;
 
 // Legend title
-$legend-title-padding-bottom: 0.5rem !default;
-$legend-title-margin-bottom: 0.575rem !default;
+$legend-title-padding-bottom: .5rem !default;
+$legend-title-margin-bottom: .575rem !default;
 
 // Legend ticks
 $legend-tick-margin-top: .575rem !default;
-$legend-tick-sample-radius: 4px !default;
-$legend-tick-sample-height: 16px !default;
-$legend-tick-sample-width: 16px !default;
+$legend-tick-sample-radius: 0 !default;
+$legend-tick-sample-height: 12px !default;
+$legend-tick-sample-width: 30px !default;
 $legend-tick-text-font-size: 12px !default;
 $legend-tick-text-margin-top: 3px !default;

packages/jsvectormap/src/scss/jsvectormap.scss

@@ -5,27 +5,24 @@
   --jvm-box-shadow: #{$box-shadow};
 
   // Tooltip
-  --jvm-tooltip-shadow: var(--jvm-box-shadow);
-  --jvm-tooltip-font-family: #{$tooltip-font-family};
+  --jvm-tooltip-font-size: #{$tooltip-font-size};
   --jvm-tooltip-bg-color: #{$tooltip-bg-color};
   --jvm-tooltip-color: #{$tooltip-color};
-  --jvm-tooltip-radius: #{$tooltip-radius};
-  --jvm-tooltip-font-size: #{$tooltip-font-size};
   --jvm-tooltip-padding: #{$tooltip-padding};
+  --jvm-tooltip-shadow: var(--jvm-box-shadow);
+  --jvm-tooltip-radius: #{$tooltip-radius};
 
   // Zoom buttons
-  --jvm-zoom-btns-bg-color: #{$zoom-btns-bg-color};
-  --jvm-zoom-btns-color: #{$zoom-btns-color};
-  --jvm-zoom-btns-radius: #{$zoom-btns-radius};
-  --jvm-zoom-btns-height: #{$zoom-btns-height};
-  --jvm-zoom-btns-padding: #{$zoom-btns-padding};
-  --jvm-zoom-btns-width: #{$zoom-btns-width};
+  --jvm-zoom-btn-bg-color: #{$zoom-btn-bg-color};
+  --jvm-zoom-btn-color: #{$zoom-btn-color};
+  --jvm-zoom-btn-size: #{$zoom-btn-size};
+  --jvm-zoom-btn-radius: #{$zoom-btn-radius};
 
   // Series
   --jvm-series-container-right: #{$series-container-right};
 
   // Legends
-  --jvm-legend-background-color: #{$legend-background-color};
+  --jvm-legend-bg-color: #{$legend-bg-color};
   --jvm-legend-radius: #{$legend-radius};
   --jvm-legend-margin-left: #{$legend-margin-left};
   --jvm-legend-padding: #{$legend-padding};
@@ -49,7 +46,6 @@ image, text, .jvm-zoom-btn { user-select: none }
 // jsVectorMap container
 .jvm-container {
   position: relative;
-  overflow: hidden;
   height: 100%;
   width: 100%;
 }
@@ -59,7 +55,6 @@ image, text, .jvm-zoom-btn { user-select: none }
   border-radius: var(--jvm-tooltip-radius);
   background-color: var(--jvm-tooltip-bg-color);
   color: var(--jvm-tooltip-color);
-  font-family: var(--jvm-tooltip-font-family);
   font-size: var(--jvm-tooltip-font-size);
   box-shadow: var(--jvm-tooltip-shadow);
   padding: var(--jvm-tooltip-padding);
@@ -73,38 +68,43 @@ image, text, .jvm-zoom-btn { user-select: none }
 
 // Zoom buttons
 .jvm-zoom-btn {
-  border-radius: var(--jvm-zoom-btns-radius);
-  background-color: var(--jvm-zoom-btns-bg-color);
-  padding: var(--jvm-zoom-btns-padding);
-  color: var(--jvm-zoom-btns-color);
+  background-color: var(--jvm-zoom-btn-bg-color);
+  color: var(--jvm-zoom-btn-color);
+  border-radius: var(--jvm-zoom-btn-radius);
+  height: var(--jvm-zoom-btn-size);
+  width: var(--jvm-zoom-btn-size);
   box-sizing: border-box;
   position: absolute;
-  line-height: 10px;
-  cursor: pointer;
-  height: 15px;
-  width: 15px;
   left: 10px;
+  line-height: var(--jvm-zoom-btn-size);
+  text-align: center;
+  cursor: pointer;
 
-  &.jvm-zoomout {
-    top: 30px
+  &.jvm-zoomin {
+    top: var(--jvm-zoom-btn-size)
   }
 
-  &.jvm-zoomin {
-    top: 10px
+  &.jvm-zoomout {
+    top: calc(var(--jvm-zoom-btn-size) * 2 + (var(--jvm-zoom-btn-size) / 3));
   }
 }
 
 // Series
 .jvm-series-container {
-  right: var(--jvm-series-container-right);
   position: absolute;
+  right: var(--jvm-series-container-right);
   &.jvm-series-h { bottom: 15px }
-  &.jvm-series-v { top: 15px }
+  &.jvm-series-v {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    top: 15px;
+  }
 }
 
 // Legends
 .jvm-legend {
-  background-color: var(--jvm-legend-background-color);
+  background-color: var(--jvm-legend-bg-color);
   border: 1px solid var(--jvm-border-color);
   margin-left: var(--jvm-legend-margin-left);
   border-radius: var(--jvm-legend-radius);
@@ -122,6 +122,7 @@ image, text, .jvm-zoom-btn { user-select: none }
 
 .jvm-legend-tick {
   display: flex;
+  align-items: center;
   min-width: 40px;
   &:not(:first-child) {
     margin-top: var(--jvm-legend-tick-margin-top);
@@ -130,14 +131,15 @@ image, text, .jvm-zoom-btn { user-select: none }
 
 .jvm-legend-tick-sample {
   border-radius: var(--jvm-legend-tick-sample-radius);
-  margin-right: .65rem;
+  margin-right: 0.45rem;
   height: var(--jvm-legend-tick-sample-height);
   width: var(--jvm-legend-tick-sample-width);
 }
 
 .jvm-legend-tick-text {
   font-size: var(--jvm-legend-tick-text-font-size);
   text-align: center;
+  line-height: 1;
 }
 
 // Line animation