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 ``;
+};
+
/**
* Trap focus inside modal and focus the first
* focusable element of current active modal