Skip to content

Commit 7f7ec68

Browse files
dshovchkodshovchko
authored
Merge pull request #2198 from exadel-inc/feat/esl-popup-css-variables
ESLPopup: rework styles to use CSS variables
2 parents ba7e184 + 8b9b71b commit 7f7ec68

File tree

6 files changed

+165
-78
lines changed

6 files changed

+165
-78
lines changed

Diff for: ‎site/src/navigation/header/header.less

+2-5
Original file line numberDiff line numberDiff line change
@@ -85,11 +85,8 @@
8585
}
8686

8787
&-share-popup.esl-popup {
88-
&,
89-
& > .esl-popup-arrow {
90-
background: @landing-bg-color;
91-
border-color: gray;
92-
}
88+
--esl-popup-background-color: @landing-bg-color;
89+
--esl-popup-border-color: gray;
9390
.esl-share-list {
9491
margin: 0.75rem;
9592
gap: 0.25rem;

Diff for: ‎src/modules/esl-popup/README.md

+12
Original file line numberDiff line numberDiff line change
@@ -129,3 +129,15 @@ When you add a placeholder to the DOM tree, all attributes are copied from the o
129129

130130
- `from` - static method that creates a placeholder for a given popup element
131131
- `$origin` - the original element that was here before it was replaced by a placeholder
132+
133+
### Styles
134+
135+
ESLPopup is a non-trivial component that calculates its position depending on user settings. So for styling, it would be advisable to use the basic styles that we provide with our library. You can easily override most of the rules from the base styles. Some properties are calculated, so you can't override them directly, but it is possible to set the value through CSS variables. For now, you can use the following variables:
136+
137+
- `--esl-popup-arrow-size` - arrow size ('20px' by default)
138+
- `--esl-popup-background-color` - background color of the popup ('#fff' by default)
139+
- `--esl-popup-border-color` - popup border color ('#dbdbdb' by default)
140+
- `--esl-popup-border-width` - border width of the popup ('1px' by default)
141+
- `--esl-popup-z-index` - z-index of the popup ('999' by default)
142+
143+
Or if you are using the LESS preprocessor, you can optionally use mixins instead of CSS variables. However, we would recommend using the general approach with CSS variables.

Diff for: ‎src/modules/esl-popup/core.less

+1-7
Original file line numberDiff line numberDiff line change
@@ -1,7 +1 @@
1-
@import 'core.mixin.less';
2-
3-
esl-popup:not(.esl-popup) {
4-
display: none;
5-
}
6-
7-
.esl-popup-init();
1+
@import './core/esl-popup.less';

Diff for: ‎src/modules/esl-popup/core.mixin.less

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
@import './core/esl-popup.less';
1+
@import './core/esl-popup.mixin.less';

Diff for: ‎src/modules/esl-popup/core/esl-popup.less

+54-65
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,84 @@
1-
.esl-popup-arrow-init(@arrowClassName: esl-popup-arrow,
2-
@popupArrowSize: 20px,
3-
@popupBackgroundColor: #FFF,
4-
@popupBorderColor: #DBDBDB,
5-
@popupBorderWidth: 1px) {
6-
@popupArrowHalf: (@popupArrowSize / 2);
7-
@popupArrowShift: (
8-
@popupArrowSize * 0.2071 - @popupBorderWidth
9-
); // 0.2071 = (sqrt(2) - 1) / 2 (Don't ask why, it's an axiom)
1+
esl-popup:not(.esl-popup) {
2+
display: none;
3+
}
4+
5+
.esl-popup {
6+
--_border-width: var(--esl-popup-border-width, 1px);
7+
--_border: var(--_border-width) solid var(--esl-popup-border-color, #dbdbdb);
8+
position: absolute;
9+
left: 0;
10+
top: 0;
11+
display: block;
12+
opacity: 0;
13+
visibility: hidden;
14+
transition: visibility 0.5s 0.2s;
15+
box-sizing: border-box;
16+
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
17+
border: var(--_border);
18+
background: var(--esl-popup-background-color, #fff);
19+
cursor: default;
20+
will-change: auto;
21+
22+
&[open] {
23+
z-index: var(--esl-popup-z-index, 999);
24+
opacity: 1;
25+
visibility: visible;
26+
transition:
27+
opacity 0.15s,
28+
transform 0.2s;
29+
}
1030

11-
.@{arrowClassName} {
31+
&:not([open]) {
32+
display: none;
33+
}
34+
35+
.esl-popup-arrow {
36+
--_size: var(--esl-popup-arrow-size, 20px);
37+
--_half: calc(var(--_size) / 2);
38+
--_shift: calc(0.2071 * var(--_size) - var(--_border-width));
39+
// 0.2071 = (sqrt(2) - 1) / 2
1240
position: absolute;
13-
top: (-@popupArrowHalf - @popupBorderWidth);
41+
top: calc(-1 * var(--_half) - var(--_border-width));
1442
bottom: 100%;
1543
z-index: -1;
1644
transform: rotate(45deg);
17-
width: @popupArrowSize;
18-
height: @popupArrowSize;
19-
margin-left: @popupArrowShift;
20-
border-left: @popupBorderWidth solid @popupBorderColor;
21-
border-top: @popupBorderWidth solid @popupBorderColor;
22-
background: @popupBackgroundColor;
45+
width: var(--_size);
46+
height: var(--_size);
47+
margin-left: var(--_shift);
48+
border-left: var(--_border);
49+
border-top: var(--_border);
50+
background: inherit;
2351
}
2452

2553
&[placed-at='top'] {
26-
.@{arrowClassName} {
54+
.esl-popup-arrow {
2755
top: auto;
28-
bottom: (-@popupArrowHalf - @popupBorderWidth);
56+
bottom: calc(-1 * var(--_half) - var(--_border-width));
2957
transform: rotate(225deg);
3058
}
3159
}
3260

3361
&[placed-at='left'] {
34-
.@{arrowClassName} {
35-
right: (-@popupArrowHalf - @popupBorderWidth);
62+
.esl-popup-arrow {
63+
right: calc(-1 * var(--_half) - var(--_border-width));
3664
left: auto;
3765
transform: rotate(135deg);
38-
margin-top: @popupArrowShift;
66+
margin-top: var(--_shift);
3967
}
4068
}
4169

4270
&[placed-at='right'] {
43-
.@{arrowClassName} {
44-
left: (-@popupArrowHalf - @popupBorderWidth - @popupArrowShift);
71+
.esl-popup-arrow {
72+
left: calc(-1 * var(--_half) - var(--_border-width) - var(--_shift));
4573
right: auto;
4674
transform: rotate(315deg);
47-
margin-top: @popupArrowShift;
75+
margin-top: var(--_shift);
4876
}
4977
}
5078

5179
&.disable-arrow {
52-
.@{arrowClassName} {
53-
display: none;
54-
}
55-
}
56-
}
57-
58-
.esl-popup-init(@className: esl-popup,
59-
@arrowClassName: esl-popup-arrow,
60-
@arrowSize: 20px,
61-
@backgroundColor: #FFF,
62-
@borderColor: #DBDBDB,
63-
@borderWidth: 1px,
64-
@zIndex: 999) {
65-
.@{className} {
66-
position: absolute;
67-
left: 0;
68-
top: 0;
69-
display: block;
70-
opacity: 0;
71-
visibility: hidden;
72-
transition: visibility 0.5s 0.2s;
73-
box-sizing: border-box;
74-
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
75-
border: @borderWidth solid @borderColor;
76-
background: @backgroundColor;
77-
cursor: default;
78-
will-change: auto;
79-
80-
&[open] {
81-
z-index: @zIndex;
82-
opacity: 1;
83-
visibility: visible;
84-
transition:
85-
opacity 0.15s,
86-
transform 0.2s;
87-
}
88-
89-
&:not([open]) {
80+
.esl-popup-arrow {
9081
display: none;
9182
}
92-
93-
.esl-popup-arrow-init(@arrowClassName, @arrowSize, @backgroundColor, @borderColor, @borderWidth);
9483
}
9584
}

Diff for: ‎src/modules/esl-popup/core/esl-popup.mixin.less

+95
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
.esl-popup-arrow-init(@arrowClassName: esl-popup-arrow,
2+
@popupArrowSize: 20px,
3+
@popupBackgroundColor: #FFF,
4+
@popupBorderColor: #DBDBDB,
5+
@popupBorderWidth: 1px) {
6+
@popupArrowHalf: (@popupArrowSize / 2);
7+
@popupArrowShift: (
8+
@popupArrowSize * 0.2071 - @popupBorderWidth
9+
); // 0.2071 = (sqrt(2) - 1) / 2 (Don't ask why, it's an axiom)
10+
11+
.@{arrowClassName} {
12+
position: absolute;
13+
top: (-@popupArrowHalf - @popupBorderWidth);
14+
bottom: 100%;
15+
z-index: -1;
16+
transform: rotate(45deg);
17+
width: @popupArrowSize;
18+
height: @popupArrowSize;
19+
margin-left: @popupArrowShift;
20+
border-left: @popupBorderWidth solid @popupBorderColor;
21+
border-top: @popupBorderWidth solid @popupBorderColor;
22+
background: @popupBackgroundColor;
23+
}
24+
25+
&[placed-at='top'] {
26+
.@{arrowClassName} {
27+
top: auto;
28+
bottom: (-@popupArrowHalf - @popupBorderWidth);
29+
transform: rotate(225deg);
30+
}
31+
}
32+
33+
&[placed-at='left'] {
34+
.@{arrowClassName} {
35+
right: (-@popupArrowHalf - @popupBorderWidth);
36+
left: auto;
37+
transform: rotate(135deg);
38+
margin-top: @popupArrowShift;
39+
}
40+
}
41+
42+
&[placed-at='right'] {
43+
.@{arrowClassName} {
44+
left: (-@popupArrowHalf - @popupBorderWidth - @popupArrowShift);
45+
right: auto;
46+
transform: rotate(315deg);
47+
margin-top: @popupArrowShift;
48+
}
49+
}
50+
51+
&.disable-arrow {
52+
.@{arrowClassName} {
53+
display: none;
54+
}
55+
}
56+
}
57+
58+
.esl-popup-init(@className: esl-popup,
59+
@arrowClassName: esl-popup-arrow,
60+
@arrowSize: 20px,
61+
@backgroundColor: #FFF,
62+
@borderColor: #DBDBDB,
63+
@borderWidth: 1px,
64+
@zIndex: 999) {
65+
.@{className} {
66+
position: absolute;
67+
left: 0;
68+
top: 0;
69+
display: block;
70+
opacity: 0;
71+
visibility: hidden;
72+
transition: visibility 0.5s 0.2s;
73+
box-sizing: border-box;
74+
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
75+
border: @borderWidth solid @borderColor;
76+
background: @backgroundColor;
77+
cursor: default;
78+
will-change: auto;
79+
80+
&[open] {
81+
z-index: @zIndex;
82+
opacity: 1;
83+
visibility: visible;
84+
transition:
85+
opacity 0.15s,
86+
transform 0.2s;
87+
}
88+
89+
&:not([open]) {
90+
display: none;
91+
}
92+
93+
.esl-popup-arrow-init(@arrowClassName, @arrowSize, @backgroundColor, @borderColor, @borderWidth);
94+
}
95+
}

0 commit comments

Comments
 (0)