Skip to content

Commit

Permalink
Fix icon inconsistencies across different browsers: use svg icons
Browse files Browse the repository at this point in the history
  • Loading branch information
@orestbida
orestbida committed May 29, 2023
1 parent f311a00 commit f7fa35a
Show file tree
Hide file tree
Showing 5 changed files with 84 additions and 144 deletions.
2 changes: 2 additions & 0 deletions src/core/modals/consentModal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
addEvent,
getModalFocusableData,
addDataButtonListeners,
getSvgIcon,
fireEvent
} from '../../utils/general';

Expand Down Expand Up @@ -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, () => {
Expand Down
12 changes: 10 additions & 2 deletions src/core/modals/preferencesModal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
isString,
isObject,
fireEvent,
getSvgIcon,
_log
} from '../../utils/general';

Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -520,19 +522,24 @@ 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');
addClass(toggle, 'section__toggle');
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');
Expand Down Expand Up @@ -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
Expand Down
42 changes: 12 additions & 30 deletions src/scss/core/components/_consent-modal.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
}
Expand Down
161 changes: 49 additions & 112 deletions src/scss/core/components/_preferences-modal.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
}
Expand Down Expand Up @@ -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);
}
}
}

Expand Down Expand Up @@ -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)
}
}

Expand All @@ -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);
}
Expand All @@ -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);
}
}
}
Expand Down Expand Up @@ -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{
Expand Down
11 changes: 11 additions & 0 deletions src/utils/general.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = '<path d="M6.25,6.25,17.75,17.75"></path><path d="M6.25,17.75,17.75,6.25"></path>';
const tickIconPath = '<path d="M 3.789 11.236 L 9.529 16.976"/></path><path d="M 9.007 17.518 L 20.439 6.086"></path>';

return `<svg viewBox="0 0 24 24" stroke-width="${strokeWidth}">${ tickIcon ? tickIconPath: xIconPath }</svg>`;
};

/**
* Trap focus inside modal and focus the first
* focusable element of current active modal
Expand Down

0 comments on commit f7fa35a

Please sign in to comment.