From f7fa35a2b0064f408222df622b14bd15123ef955 Mon Sep 17 00:00:00 2001 From: Orest Bida Date: Mon, 29 May 2023 03:42:46 +0200 Subject: [PATCH] Fix icon inconsistencies across different browsers: use svg icons --- src/core/modals/consentModal.js | 2 + src/core/modals/preferencesModal.js | 12 +- src/scss/core/components/_consent-modal.scss | 42 ++--- .../core/components/_preferences-modal.scss | 161 ++++++------------ src/utils/general.js | 11 ++ 5 files changed, 84 insertions(+), 144 deletions(-) diff --git a/src/core/modals/consentModal.js b/src/core/modals/consentModal.js index 3ebebdde..0311dccc 100644 --- a/src/core/modals/consentModal.js +++ b/src/core/modals/consentModal.js @@ -10,6 +10,7 @@ import { addEvent, getModalFocusableData, addDataButtonListeners, + getSvgIcon, fireEvent } from '../../utils/general'; @@ -122,6 +123,7 @@ export const createConsentModal = (api, createMainContainer) => { if(consentModalTitleValue && closeIconLabelData && isBoxLayout){ if(!dom._cmCloseIconBtn){ dom._cmCloseIconBtn = createNode(BUTTON_TAG); + dom._cmCloseIconBtn.innerHTML = getSvgIcon(); addClassCm(dom._cmCloseIconBtn, 'btn'); addClassCm(dom._cmCloseIconBtn, 'btn--close'); addEvent(dom._cmCloseIconBtn, CLICK_EVENT, () => { diff --git a/src/core/modals/preferencesModal.js b/src/core/modals/preferencesModal.js index 149ef3ce..6c720d93 100644 --- a/src/core/modals/preferencesModal.js +++ b/src/core/modals/preferencesModal.js @@ -14,6 +14,7 @@ import { isString, isObject, fireEvent, + getSvgIcon, _log } from '../../utils/general'; @@ -122,6 +123,7 @@ export const createPreferencesModal = (api, createMainContainer) => { dom._pmFocusSpan = createNode('span'); dom._pmFocusSpan.tabIndex = -1; + dom._pmFocusSpan.innerHTML = getSvgIcon(); appendChild(dom._pmCloseBtn, dom._pmFocusSpan); dom._pmBody = createNode(DIV_TAG); @@ -520,12 +522,16 @@ function createToggleLabel(label, value, sCurrentCategoryObject, isService, cate /** @type {HTMLLabelElement} */ const toggleLabel = createNode('label'); /** @type {HTMLInputElement} */ const toggle = createNode('input'); /** @type {HTMLSpanElement} */ const toggleIcon = createNode('span'); + /** @type {HTMLSpanElement} */ const toggleIconCircle = createNode('span'); /** @type {HTMLSpanElement} */ const toggleLabelSpan = createNode('span'); // each will contain 2 pseudo-elements to generate 'tick' and 'x' icons /** @type {HTMLSpanElement} */ const toggleOnIcon = createNode('span'); /** @type {HTMLSpanElement} */ const toggleOffIcon = createNode('span'); + toggleOnIcon.innerHTML = getSvgIcon(true, 2); + toggleOffIcon.innerHTML = getSvgIcon(false, 2); + toggle.type = 'checkbox'; addClass(toggleLabel, 'section__toggle-wrapper'); @@ -533,6 +539,7 @@ function createToggleLabel(label, value, sCurrentCategoryObject, isService, cate addClass(toggleOnIcon, 'toggle__icon-on'); addClass(toggleOffIcon, 'toggle__icon-off'); addClass(toggleIcon, 'toggle__icon'); + addClass(toggleIconCircle, 'toggle__icon-circle'); addClass(toggleLabelSpan, 'toggle__label'); setAttribute(toggleIcon, ARIA_HIDDEN, 'true'); @@ -590,8 +597,9 @@ function createToggleLabel(label, value, sCurrentCategoryObject, isService, cate toggle.value = value; toggleLabelSpan.textContent = label.replace(/<.*>.*<\/.*>/gm, ''); - appendChild(toggleIcon, toggleOffIcon); - appendChild(toggleIcon, toggleOnIcon); + appendChild(toggleIconCircle, toggleOffIcon); + appendChild(toggleIconCircle, toggleOnIcon); + appendChild(toggleIcon, toggleIconCircle); /** * If consent is valid => retrieve category states from cookie diff --git a/src/scss/core/components/_consent-modal.scss b/src/scss/core/components/_consent-modal.scss index 1e654d9e..eadd0199 100644 --- a/src/scss/core/components/_consent-modal.scss +++ b/src/scss/core/components/_consent-modal.scss @@ -224,44 +224,26 @@ $footer-links-gap: 1.3em; font-size: 1em; overflow: hidden; - &::after, - &::before { - content: ""; - position: absolute; - top: 50%; - left: 0; - right: 0; - margin: auto; - background: var(--cc-btn-primary-color); - height: .9em; - width: 1.5px; - margin-top: 1px; - transform: translateY(-50%) rotate(45deg); - transition: all 0.15s ease; - } - - &::after { - transform: translateY(-50%) rotate(-45deg); + svg { + stroke: var(--cc-btn-primary-color); + transform: scale(.6); + transition: stroke .15s ease; } - &:hover{ - - &::after, - &::before{ - background: var(--cc-btn-primary-hover-color); + &:hover { + svg { + stroke: var(--cc-btn-primary-hover-color); } } &.cm__btn--secondary{ - &::after, - &::before{ - background: var(--cc-btn-secondary-color); + svg { + stroke: var(--cc-btn-secondary-color); } - &:hover{ - &::after, - &::before{ - background: var(--cc-btn-secondary-hover-color); + &:hover { + svg { + stroke: var(--cc-btn-secondary-hover-color); } } } diff --git a/src/scss/core/components/_preferences-modal.scss b/src/scss/core/components/_preferences-modal.scss index 5ce96a4f..8afb15ea 100644 --- a/src/scss/core/components/_preferences-modal.scss +++ b/src/scss/core/components/_preferences-modal.scss @@ -68,32 +68,24 @@ $service-toggle-knob-icon-width: 1.7px; border: 1px solid var(--cc-btn-secondary-border-color); transition: all .15s ease; - span::after, - span::before{ - content: ''; - position: absolute; - top: 50%; - left: 0; - right: 0; - margin: auto; - height: 0.9em; - width: 1.5px; - background: var(--cc-btn-secondary-color); - transform: translateY(-50%) rotate(45deg); - transition: all .15s ease; + span { + display: flex; + height: 100%; + width: 100%; } - span::after { - transform: translateY(-50%) rotate(-45deg); + svg{ + stroke: var(--cc-btn-secondary-color); + transform: scale(.6); + transition: stroke .15s ease; } &:hover{ border-color: var(--cc-btn-secondary-hover-border-color); background: var(--cc-btn-secondary-hover-bg); - span::after, - span::before{ - background: var(--cc-btn-secondary-hover-color); + svg{ + stroke: var(--cc-btn-secondary-hover-color); } } } @@ -330,27 +322,17 @@ $service-toggle-knob-icon-width: 1.7px; .toggle__icon{ position: relative; - &::after{ - height: $service-toggle-knob-height; - width: $service-toggle-knob-height; - } - } - - .section__toggle:checked ~ .toggle__icon::after{ - transform: translateX(23px); } - .toggle__icon-off::after, - .toggle__icon-off::before{ - width: $service-toggle-knob-icon-width; - height: 9px; - margin: 0.1px 2px 0 auto; + .toggle__icon-circle { + height: $service-toggle-knob-height; + width: $service-toggle-knob-height; } - .toggle__icon-on::before{ - border-width: 0 $service-toggle-knob-icon-width $service-toggle-knob-icon-width 0; - padding: 1.3px 1.3px 6px; - margin: -3.8px auto 0 6px; + .section__toggle:checked ~ .toggle__icon{ + .toggle__icon-circle { + transform: translateX(23px); + } } } @@ -380,82 +362,46 @@ $service-toggle-knob-icon-width: 1.7px; pointer-events: none; display: flex; flex-direction: row; + } - &::after{ - content: ""; - position: absolute; - display: block; - left: 0; - top: 0; - width: $toggle-knob-height; - height: $toggle-knob-height; - border: none; - background: var(--cc-toggle-off-knob-bg); - box-shadow: 0 1px 2px rgba(24, 32, 3, .36); - transition: transform .25s ease, background-color .25s ease; - border-radius: 100%; - } + .toggle__icon-circle { + position: absolute; + display: block; + left: 0; + top: 0; + width: $toggle-knob-height; + height: $toggle-knob-height; + border: none; + background: var(--cc-toggle-off-knob-bg); + box-shadow: 0 1px 2px rgba(24, 32, 3, .36); + transition: transform .25s ease, background-color .25s ease; + border-radius: 100%; } .toggle__icon-on, .toggle__icon-off{ height: 100%; - position: relative; - flex: 1; - display: flex; - justify-content: center; - align-items: center; - text-align: center; - transform: translateZ(0); + position: absolute; + width: 100%; transition: opacity .15s ease; } .toggle__icon-on{ - left: 0; opacity: 0; - z-index: 1; + transform: rotate(45deg); - &::before{ - border: solid var(--cc-toggle-on-bg); - border-width: 0 $toggle-knob-icon-width $toggle-knob-icon-width 0; - padding: 1.5px; - display: inline-block; - padding-bottom: 7px; - content: ''; - margin: 0 auto; - top: 50%; - transform: rotate(45deg) translate(-50%); - margin-top: -4.5px; - margin-left: 7px; - position: absolute; + svg { + stroke: var(--cc-toggle-on-bg); + transform: scale(.6) rotate(-45deg); } } .toggle__icon-off{ opacity: 1; - z-index: 1; - - &::after, - &::before { - content: ''; - top: 50%; - height: 0.7em; - width: $toggle-knob-icon-width; - display: block; - background: var(--cc-toggle-off-bg); - margin: 0 auto; - margin-right: 2px; - margin-top: .5px; - position: absolute; - transform-origin: center; - } - - &::before{ - transform: translateY(-50%) rotate(45deg); - } - &::after{ - transform: translateY(-50%) rotate(-45deg); + svg { + stroke: var(--cc-toggle-off-bg); + transform: scale(.7) } } @@ -465,7 +411,7 @@ $service-toggle-knob-icon-width: 1.7px; background: var(--cc-toggle-on-bg); box-shadow: 0 0 0 1px var(--cc-toggle-on-bg); - &::after{ + .toggle__icon-circle { transform: translateX(calc($toggle-knob-width - $toggle-knob-height)); background-color: var(--cc-toggle-on-knob-bg); } @@ -484,15 +430,13 @@ $service-toggle-knob-icon-width: 1.7px; background: var(--cc-toggle-readonly-bg); box-shadow: 0 0 0 1px var(--cc-toggle-readonly-bg); - &::after{ + .toggle__icon-circle { background: var(--cc-toggle-readonly-knob-bg); box-shadow: none; } - .toggle__icon-on::before, - .toggle__icon-off::before, - .toggle__icon-off::after{ - border-color: var(--cc-toggle-readonly-knob-icon-color) + svg { + stroke: var(--cc-toggle-readonly-knob-icon-color); } } } @@ -900,28 +844,21 @@ $service-toggle-knob-icon-width: 1.7px; margin-right: 1em; } - .toggle__icon::after{ + .toggle__icon-circle{ transform: translateX(27px); } - .toggle-service .toggle__icon::after{ + .toggle-service .toggle__icon-circle { transform: translateX(23px); } - .section__toggle:checked ~ .toggle__icon::after{ - transform: translateX(0); - } - .toggle__icon-off::after, - .toggle__icon-off::before { - margin-right: unset; - margin-left: 2px; + .section__toggle:checked ~ .toggle__icon{ + .toggle__icon-circle { + transform: translateX(0); + } } - .toggle__icon-on::before { - margin-right: unset; - margin-left: 2px; - } .pm__table-th, .pm__table-td{ diff --git a/src/utils/general.js b/src/utils/general.js index 52a68391..56431855 100644 --- a/src/utils/general.js +++ b/src/utils/general.js @@ -779,6 +779,17 @@ export const toggleDisableInteraction = (enable) => { } }; +/** + * x and v (tick) icons + * @param {boolean} [tickIcon] + */ +export const getSvgIcon = (tickIcon = false, strokeWidth = 1.5) => { + const xIconPath = ''; + const tickIconPath = ''; + + return `${ tickIcon ? tickIconPath: xIconPath }`; +}; + /** * Trap focus inside modal and focus the first * focusable element of current active modal