From cd781b9195b876a24debb574410423e853ea3e1a Mon Sep 17 00:00:00 2001 From: Dmitry Shovchko Date: Fri, 26 Jan 2024 21:28:53 +0200 Subject: [PATCH 1/4] feat(esl-popup): rework esl-popup styles to use CSS variables --- src/modules/esl-popup/core.less | 8 +- src/modules/esl-popup/core.mixin.less | 2 +- src/modules/esl-popup/core/esl-popup.less | 119 ++++++++---------- .../esl-popup/core/esl-popup.mixin.less | 95 ++++++++++++++ 4 files changed, 151 insertions(+), 73 deletions(-) create mode 100644 src/modules/esl-popup/core/esl-popup.mixin.less diff --git a/src/modules/esl-popup/core.less b/src/modules/esl-popup/core.less index 1913b3641..03933abf3 100644 --- a/src/modules/esl-popup/core.less +++ b/src/modules/esl-popup/core.less @@ -1,7 +1 @@ -@import 'core.mixin.less'; - -esl-popup:not(.esl-popup) { - display: none; -} - -.esl-popup-init(); +@import './core/esl-popup.less'; diff --git a/src/modules/esl-popup/core.mixin.less b/src/modules/esl-popup/core.mixin.less index 03933abf3..7b0af2e73 100644 --- a/src/modules/esl-popup/core.mixin.less +++ b/src/modules/esl-popup/core.mixin.less @@ -1 +1 @@ -@import './core/esl-popup.less'; +@import './core/esl-popup.mixin.less'; diff --git a/src/modules/esl-popup/core/esl-popup.less b/src/modules/esl-popup/core/esl-popup.less index 4da71ded3..69170d09f 100644 --- a/src/modules/esl-popup/core/esl-popup.less +++ b/src/modules/esl-popup/core/esl-popup.less @@ -1,95 +1,84 @@ -.esl-popup-arrow-init(@arrowClassName: esl-popup-arrow, - @popupArrowSize: 20px, - @popupBackgroundColor: #FFF, - @popupBorderColor: #DBDBDB, - @popupBorderWidth: 1px) { - @popupArrowHalf: (@popupArrowSize / 2); - @popupArrowShift: ( - @popupArrowSize * 0.2071 - @popupBorderWidth - ); // 0.2071 = (sqrt(2) - 1) / 2 (Don't ask why, it's an axiom) +esl-popup:not(.esl-popup) { + display: none; +} + +.esl-popup { + --_border-width: var(--esl-popup-border-width, 1px); + --_border: var(--_border-width) solid var(--esl-popup-border-color, #dbdbdb); + position: absolute; + left: 0; + top: 0; + display: block; + opacity: 0; + visibility: hidden; + transition: visibility 0.5s 0.2s; + box-sizing: border-box; + box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); + border: var(--_border); + background: var(--esl-popup-background-color, #fff); + cursor: default; + will-change: auto; + + &[open] { + z-index: var(--esl-popup-z-index, 999); + opacity: 1; + visibility: visible; + transition: + opacity 0.15s, + transform 0.2s; + } - .@{arrowClassName} { + &:not([open]) { + display: none; + } + + .esl-popup-arrow { + --_size: var(--esl-popup-arrow-size, 20px); + --_half: calc(var(--_size) / 2); + --_shift: calc(0.2071 * var(--_size) - var(--_border-width)); + // 0.2071 = (sqrt(2) - 1) / 2 position: absolute; - top: (-@popupArrowHalf - @popupBorderWidth); + top: calc(-1 * var(--_half) - var(--_border-width)); bottom: 100%; z-index: -1; transform: rotate(45deg); - width: @popupArrowSize; - height: @popupArrowSize; - margin-left: @popupArrowShift; - border-left: @popupBorderWidth solid @popupBorderColor; - border-top: @popupBorderWidth solid @popupBorderColor; - background: @popupBackgroundColor; + width: var(--_size); + height: var(--_size); + margin-left: var(--_shift); + border-left: var(--_border); + border-top: var(--_border); + background: inherit; } &[placed-at='top'] { - .@{arrowClassName} { + .esl-popup-arrow { top: auto; - bottom: (-@popupArrowHalf - @popupBorderWidth); + bottom: calc(-1 * var(--_half) - var(--_border-width)); transform: rotate(225deg); } } &[placed-at='left'] { - .@{arrowClassName} { - right: (-@popupArrowHalf - @popupBorderWidth); + .esl-popup-arrow { + right: calc(-1 * var(--_half) - var(--_border-width)); left: auto; transform: rotate(135deg); - margin-top: @popupArrowShift; + margin-top: var(--_shift); } } &[placed-at='right'] { - .@{arrowClassName} { - left: (-@popupArrowHalf - @popupBorderWidth - @popupArrowShift); + .esl-popup-arrow { + left: calc(-1 * var(--_half) - var(--_border-width) - var(--_shift)); right: auto; transform: rotate(315deg); - margin-top: @popupArrowShift; + margin-top: var(--_shift); } } &.disable-arrow { - .@{arrowClassName} { - display: none; - } - } -} - -.esl-popup-init(@className: esl-popup, - @arrowClassName: esl-popup-arrow, - @arrowSize: 20px, - @backgroundColor: #FFF, - @borderColor: #DBDBDB, - @borderWidth: 1px, - @zIndex: 999) { - .@{className} { - position: absolute; - left: 0; - top: 0; - display: block; - opacity: 0; - visibility: hidden; - transition: visibility 0.5s 0.2s; - box-sizing: border-box; - box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); - border: @borderWidth solid @borderColor; - background: @backgroundColor; - cursor: default; - will-change: auto; - - &[open] { - z-index: @zIndex; - opacity: 1; - visibility: visible; - transition: - opacity 0.15s, - transform 0.2s; - } - - &:not([open]) { + .esl-popup-arrow { display: none; } - - .esl-popup-arrow-init(@arrowClassName, @arrowSize, @backgroundColor, @borderColor, @borderWidth); } } diff --git a/src/modules/esl-popup/core/esl-popup.mixin.less b/src/modules/esl-popup/core/esl-popup.mixin.less new file mode 100644 index 000000000..4da71ded3 --- /dev/null +++ b/src/modules/esl-popup/core/esl-popup.mixin.less @@ -0,0 +1,95 @@ +.esl-popup-arrow-init(@arrowClassName: esl-popup-arrow, + @popupArrowSize: 20px, + @popupBackgroundColor: #FFF, + @popupBorderColor: #DBDBDB, + @popupBorderWidth: 1px) { + @popupArrowHalf: (@popupArrowSize / 2); + @popupArrowShift: ( + @popupArrowSize * 0.2071 - @popupBorderWidth + ); // 0.2071 = (sqrt(2) - 1) / 2 (Don't ask why, it's an axiom) + + .@{arrowClassName} { + position: absolute; + top: (-@popupArrowHalf - @popupBorderWidth); + bottom: 100%; + z-index: -1; + transform: rotate(45deg); + width: @popupArrowSize; + height: @popupArrowSize; + margin-left: @popupArrowShift; + border-left: @popupBorderWidth solid @popupBorderColor; + border-top: @popupBorderWidth solid @popupBorderColor; + background: @popupBackgroundColor; + } + + &[placed-at='top'] { + .@{arrowClassName} { + top: auto; + bottom: (-@popupArrowHalf - @popupBorderWidth); + transform: rotate(225deg); + } + } + + &[placed-at='left'] { + .@{arrowClassName} { + right: (-@popupArrowHalf - @popupBorderWidth); + left: auto; + transform: rotate(135deg); + margin-top: @popupArrowShift; + } + } + + &[placed-at='right'] { + .@{arrowClassName} { + left: (-@popupArrowHalf - @popupBorderWidth - @popupArrowShift); + right: auto; + transform: rotate(315deg); + margin-top: @popupArrowShift; + } + } + + &.disable-arrow { + .@{arrowClassName} { + display: none; + } + } +} + +.esl-popup-init(@className: esl-popup, + @arrowClassName: esl-popup-arrow, + @arrowSize: 20px, + @backgroundColor: #FFF, + @borderColor: #DBDBDB, + @borderWidth: 1px, + @zIndex: 999) { + .@{className} { + position: absolute; + left: 0; + top: 0; + display: block; + opacity: 0; + visibility: hidden; + transition: visibility 0.5s 0.2s; + box-sizing: border-box; + box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); + border: @borderWidth solid @borderColor; + background: @backgroundColor; + cursor: default; + will-change: auto; + + &[open] { + z-index: @zIndex; + opacity: 1; + visibility: visible; + transition: + opacity 0.15s, + transform 0.2s; + } + + &:not([open]) { + display: none; + } + + .esl-popup-arrow-init(@arrowClassName, @arrowSize, @backgroundColor, @borderColor, @borderWidth); + } +} From 458f4a0213be0839eb2c31e21cdacebc474a34ff Mon Sep 17 00:00:00 2001 From: Dmitry Shovchko Date: Fri, 26 Jan 2024 21:31:49 +0200 Subject: [PATCH 2/4] style(site): update styles of share popup from header with CSS variables --- site/src/navigation/header/header.less | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/site/src/navigation/header/header.less b/site/src/navigation/header/header.less index b1b02b4b8..2f8c9f465 100644 --- a/site/src/navigation/header/header.less +++ b/site/src/navigation/header/header.less @@ -85,11 +85,8 @@ } &-share-popup.esl-popup { - &, - & > .esl-popup-arrow { - background: @landing-bg-color; - border-color: gray; - } + --esl-popup-background-color: @landing-bg-color; + --esl-popup-border-color: gray; .esl-share-list { margin: 0.75rem; gap: 0.25rem; From ff4968007d69357861834d17b605a9ddf46ebf30 Mon Sep 17 00:00:00 2001 From: Dmitry Shovchko Date: Mon, 29 Jan 2024 19:34:42 +0200 Subject: [PATCH 3/4] docs(esl-popup): update README with information about styles --- src/modules/esl-popup/README.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/modules/esl-popup/README.md b/src/modules/esl-popup/README.md index f01790249..a3e31dfae 100644 --- a/src/modules/esl-popup/README.md +++ b/src/modules/esl-popup/README.md @@ -41,3 +41,15 @@ ESLPopup extends [ESLToggleable](../esl-toggleable/README.md) you can find other ### Readonly Attributes - `placed-at` (string) - popup updated position relative to the trigger. In other words, this is the real position of the popup relative to the trigger after the position update in the case when 'fit' behavior is enabled + +### Styles + +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: + +- `--esl-popup-arrow-size` - arrow size (default '20px') +- `--esl-popup-background-color` - background color of the popup ('#fff' by default) +- `--esl-popup-border-color` - popup border color (default value is '#dbdbdb') +- `--esl-popup-border-width` - border width of the popup ('1px' by default) +- `--esl-popup-z-index` - z-index of the popup (default is '999') + +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. From 4ec30d4c50d4037b1ca466fb8d11cad1c4996587 Mon Sep 17 00:00:00 2001 From: Dmitry Shovchko Date: Mon, 5 Feb 2024 12:25:58 +0200 Subject: [PATCH 4/4] docs(esl-popup): apply suggestions from the code review --- src/modules/esl-popup/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/modules/esl-popup/README.md b/src/modules/esl-popup/README.md index a3e31dfae..038b0a22f 100644 --- a/src/modules/esl-popup/README.md +++ b/src/modules/esl-popup/README.md @@ -46,10 +46,10 @@ ESLPopup extends [ESLToggleable](../esl-toggleable/README.md) you can find other 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: -- `--esl-popup-arrow-size` - arrow size (default '20px') +- `--esl-popup-arrow-size` - arrow size ('20px' by default) - `--esl-popup-background-color` - background color of the popup ('#fff' by default) -- `--esl-popup-border-color` - popup border color (default value is '#dbdbdb') +- `--esl-popup-border-color` - popup border color ('#dbdbdb' by default) - `--esl-popup-border-width` - border width of the popup ('1px' by default) -- `--esl-popup-z-index` - z-index of the popup (default is '999') +- `--esl-popup-z-index` - z-index of the popup ('999' by default) 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.