Skip to content

Commit bb1581e

Browse files
themustafaomarthemustafaomar
authored
refactor: use css variables to override style (#191)
* refactor: use css variables to override style * refactor: remove unwanted float property * refactor: remove duplicated border color property in .jvm-length * fix: missing css variables * fix: add missing tooltip color variable
1 parent c2cfb10 commit bb1581e

File tree

2 files changed

+139
-106
lines changed

2 files changed

+139
-106
lines changed

‎packages/jsvectormap/src/scss/_variables.scss

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
// Class prefix
2+
$border-color: #e5e7eb !default;
3+
$box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !default;
4+
5+
// Tooltip
6+
$tooltip-shadow: 1px 2px 12px rgba(0, 0, 0, .2) !default;
7+
$tooltip-font-family: sans-serif, Verdana !default;
8+
$tooltip-bg-color: #337ffa !default;
9+
$tooltip-color: #FFF !default;
10+
$tooltip-radius: 3px !default;
11+
$tooltip-font-size: smaller !default;
12+
$tooltip-padding: 3px 5px !default;
13+
14+
// Zoom buttons
15+
$zoom-btns-bg-color: #292929 !default;
16+
$zoom-btns-color: #FFF !default;
17+
$zoom-btns-radius: 3px !default;
18+
$zoom-btns-height: 15px !default;
19+
$zoom-btns-padding: 3px !default;
20+
$zoom-btns-width: 15px !default;
21+
22+
// Series
23+
$series-container-right: 15px !default;
24+
25+
// Legends
26+
$legend-background-color: #FFF !default;
27+
$legend-radius: 0.25rem !default;
28+
$legend-margin-left: .75rem !default;
29+
$legend-padding: 0.6rem !default;
30+
31+
// Legend title
32+
$legend-title-padding-bottom: 0.5rem !default;
33+
$legend-title-margin-bottom: 0.575rem !default;
34+
35+
// Legend ticks
36+
$legend-tick-margin-top: .575rem !default;
37+
$legend-tick-sample-radius: 4px !default;
38+
$legend-tick-sample-height: 16px !default;
39+
$legend-tick-sample-width: 16px !default;
40+
$legend-tick-text-font-size: 12px !default;
41+
$legend-tick-text-margin-top: 3px !default;

‎packages/jsvectormap/src/scss/jsvectormap.scss

Lines changed: 98 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -1,153 +1,145 @@
1-
// Class prefix
2-
$classPrefix: jvm- !default;
3-
$border-color: #e5e7eb !default;
4-
$box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !default;
1+
@import './variables';
2+
3+
:root {
4+
--jvm-border-color: #{$border-color};
5+
--jvm-box-shadow: #{$box-shadow};
6+
7+
// Tooltip
8+
--jvm-tooltip-shadow: var(--jvm-box-shadow);
9+
--jvm-tooltip-font-family: #{$tooltip-font-family};
10+
--jvm-tooltip-bg-color: #{$tooltip-bg-color};
11+
--jvm-tooltip-color: #{$tooltip-color};
12+
--jvm-tooltip-radius: #{$tooltip-radius};
13+
--jvm-tooltip-font-size: #{$tooltip-font-size};
14+
--jvm-tooltip-padding: #{$tooltip-padding};
15+
16+
// Zoom buttons
17+
--jvm-zoom-btns-bg-color: #{$zoom-btns-bg-color};
18+
--jvm-zoom-btns-color: #{$zoom-btns-color};
19+
--jvm-zoom-btns-radius: #{$zoom-btns-radius};
20+
--jvm-zoom-btns-height: #{$zoom-btns-height};
21+
--jvm-zoom-btns-padding: #{$zoom-btns-padding};
22+
--jvm-zoom-btns-width: #{$zoom-btns-width};
23+
24+
// Series
25+
--jvm-series-container-right: #{$series-container-right};
526

6-
// Tooltip
7-
$tooltip-shadow: 1px 2px 12px rgba(0, 0, 0, .2) !default;
8-
$tooltip-font-family: sans-serif, Verdana !default;
9-
$tooltip-bg-color: #5c5cff !default;
10-
$tooltip-radius: 3px !default;
11-
$tooltip-font-size: smaller !default;
12-
$tooltip-padding: 3px 5px !default;
13-
14-
// Zoom buttons
15-
$zoom-btns-bg-color: #292929 !default;
16-
$zoom-btns-radius: 3px !default;
17-
$zoom-btns-height: 15px !default;
18-
$zoom-btns-padding: 3px !default;
19-
$zoom-btns-width: 15px !default;
20-
21-
// Series
22-
$series-container-right: 15px !default;
23-
24-
// Legends
25-
$legend-background-color: #FFF !default;
26-
$legend-radius: 0.25rem !default;
27-
$legend-margin-left: .75rem !default;
28-
$legend-padding: 0.6rem !default;
29-
30-
// Legend title
31-
$legend-title-padding-bottom: 0.5rem !default;
32-
$legend-title-margin-bottom: 0.575rem !default;
33-
34-
// Legend ticks
35-
$legend-tick-margin-top: .575rem !default;
36-
$legend-tick-sample-radius: 4px !default;
37-
$legend-tick-sample-height: 16px !default;
38-
$legend-tick-sample-width: 16px !default;
39-
$legend-tick-text-font-size: 12px !default;
40-
$legend-tick-text-margin-top: 3px !default;
27+
// Legends
28+
--jvm-legend-background-color: #{$legend-background-color};
29+
--jvm-legend-radius: #{$legend-radius};
30+
--jvm-legend-margin-left: #{$legend-margin-left};
31+
--jvm-legend-padding: #{$legend-padding};
32+
33+
// Legend title
34+
--jvm-legend-title-padding-bottom: #{$legend-title-padding-bottom};
35+
--jvm-legend-title-margin-bottom: #{$legend-title-margin-bottom};
36+
37+
// Legend ticks
38+
--jvm-legend-tick-margin-top: #{$legend-tick-margin-top};
39+
--jvm-legend-tick-sample-radius: #{$legend-tick-sample-radius};
40+
--jvm-legend-tick-sample-height: #{$legend-tick-sample-height};
41+
--jvm-legend-tick-sample-width: #{$legend-tick-sample-width};
42+
--jvm-legend-tick-text-font-size: #{$legend-tick-text-font-size};
43+
--jvm-legend-tick-text-margin-top: #{$legend-tick-text-margin-top};
44+
}
4145

4246
// Global resets
43-
image, text, .#{$classPrefix}zoomin, .#{$classPrefix}zoomout { user-select: none }
47+
image, text, .jvm-zoom-btn { user-select: none }
4448

4549
// jsVectorMap container
46-
.#{$classPrefix}container {
50+
.jvm-container {
4751
position: relative;
4852
overflow: hidden;
4953
height: 100%;
5054
width: 100%;
5155
}
5256

5357
// Tooltip
54-
.#{$classPrefix}tooltip {
55-
border-radius: $tooltip-radius;
56-
background-color: $tooltip-bg-color;
57-
font-family: $tooltip-font-family;
58-
font-size: $tooltip-font-size;
59-
box-shadow: $tooltip-shadow;
60-
padding: $tooltip-padding;
58+
.jvm-tooltip {
59+
border-radius: var(--jvm-tooltip-radius);
60+
background-color: var(--jvm-tooltip-bg-color);
61+
color: var(--jvm-tooltip-color);
62+
font-family: var(--jvm-tooltip-font-family);
63+
font-size: var(--jvm-tooltip-font-size);
64+
box-shadow: var(--jvm-tooltip-shadow);
65+
padding: var(--jvm-tooltip-padding);
6166
white-space: nowrap;
6267
position: absolute;
6368
display: none;
64-
color: #FFF;
6569
&.active {
6670
display: block;
6771
}
6872
}
6973

7074
// Zoom buttons
71-
.#{$classPrefix}zoom-btn {
72-
border-radius: $zoom-btns-radius;
73-
background-color: $zoom-btns-bg-color;
74-
padding: $zoom-btns-padding;
75+
.jvm-zoom-btn {
76+
border-radius: var(--jvm-zoom-btns-radius);
77+
background-color: var(--jvm-zoom-btns-bg-color);
78+
padding: var(--jvm-zoom-btns-padding);
79+
color: var(--jvm-zoom-btns-color);
7580
box-sizing: border-box;
7681
position: absolute;
7782
line-height: 10px;
7883
cursor: pointer;
79-
color: #FFF;
8084
height: 15px;
8185
width: 15px;
8286
left: 10px;
8387

84-
&.#{$classPrefix}zoomout {
88+
&.jvm-zoomout {
8589
top: 30px
8690
}
8791

88-
&.#{$classPrefix}zoomin {
92+
&.jvm-zoomin {
8993
top: 10px
9094
}
9195
}
9296

9397
// Series
94-
.#{$classPrefix}series-container {
95-
right: $series-container-right;
98+
.jvm-series-container {
99+
right: var(--jvm-series-container-right);
96100
position: absolute;
101+
&.jvm-series-h { bottom: 15px }
102+
&.jvm-series-v { top: 15px }
103+
}
97104

98-
// horizontal
99-
&.#{$classPrefix}series-h { bottom: 15px }
105+
// Legends
106+
.jvm-legend {
107+
background-color: var(--jvm-legend-background-color);
108+
border: 1px solid var(--jvm-border-color);
109+
margin-left: var(--jvm-legend-margin-left);
110+
border-radius: var(--jvm-legend-radius);
111+
padding: var(--jvm-legend-padding);
112+
box-shadow: var(--jvm-box-shadow);
113+
}
100114

101-
// Vertical
102-
&.#{$classPrefix}series-v { top: 15px }
115+
.jvm-legend-title {
116+
line-height: 1;
117+
border-bottom: 1px solid var(--jvm-border-color);
118+
padding-bottom: var(--jvm-legend-title-padding-bottom);
119+
margin-bottom: var(--jvm-legend-title-margin-bottom);
120+
text-align: left;
121+
}
103122

104-
// Legends
105-
.#{$classPrefix}legend {
106-
background-color: $legend-background-color;
107-
border: 1px solid $border-color;
108-
margin-left: $legend-margin-left;
109-
border-radius: $legend-radius;
110-
border-color: $border-color;
111-
padding: $legend-padding;
112-
box-shadow: $box-shadow;
113-
float: left;
114-
115-
.#{$classPrefix}legend-title {
116-
line-height: 1;
117-
border-bottom: 1px solid $border-color;
118-
padding-bottom: $legend-title-padding-bottom;
119-
margin-bottom: $legend-title-margin-bottom;
120-
text-align: left;
121-
}
122-
123-
.#{$classPrefix}legend-inner {
124-
overflow: hidden;
125-
126-
.#{$classPrefix}legend-tick {
127-
overflow: hidden;
128-
min-width: 40px;
129-
&:not(:first-child) {
130-
margin-top: $legend-tick-margin-top;
131-
}
132-
133-
.#{$classPrefix}legend-tick-sample {
134-
border-radius: $legend-tick-sample-radius;
135-
margin-right: .65rem;
136-
height: $legend-tick-sample-height;
137-
width: $legend-tick-sample-width;
138-
float: left;
139-
}
140-
141-
.#{$classPrefix}legend-tick-text {
142-
font-size: $legend-tick-text-font-size;
143-
text-align: center;
144-
float: left;
145-
}
146-
}
147-
}
123+
.jvm-legend-tick {
124+
display: flex;
125+
min-width: 40px;
126+
&:not(:first-child) {
127+
margin-top: var(--jvm-legend-tick-margin-top);
148128
}
149129
}
150130

131+
.jvm-legend-tick-sample {
132+
border-radius: var(--jvm-legend-tick-sample-radius);
133+
margin-right: .65rem;
134+
height: var(--jvm-legend-tick-sample-height);
135+
width: var(--jvm-legend-tick-sample-width);
136+
}
137+
138+
.jvm-legend-tick-text {
139+
font-size: var(--jvm-legend-tick-text-font-size);
140+
text-align: center;
141+
}
142+
151143
// Line animation
152144
.jvm-line[animation="true"] {
153145
-webkit-animation: jvm-line-animation 10s linear forwards infinite;

0 commit comments

Comments
 (0)