diff --git a/src/scripts/light-theme.js b/src/scripts/light-theme.js index 4702290fcd..8f2f5c628e 100644 --- a/src/scripts/light-theme.js +++ b/src/scripts/light-theme.js @@ -17,10 +17,6 @@ function setThemeBasedOnUserPreference() { page.classList.remove('page--theme--light'); contactUs.classList.remove('contact-us--theme--light'); - switchers.forEach(switcher => { - switcher.classList.remove('page__theme-switcher--theme--light'); - }); - links.forEach(link => { link.classList.remove('link--theme--light'); }); @@ -49,10 +45,6 @@ function setThemeBasedOnUserPreference() { page.classList.add('page--theme--light'); contactUs.classList.add('contact-us--theme--light'); - switchers.forEach(switcher => { - switcher.classList.add('page__theme-switcher--theme--light'); - }); - links.forEach(link => { link.classList.add('link--theme--light'); }); @@ -85,7 +77,6 @@ switchers.forEach(switcher => { switcher.addEventListener('click', () => { if (page.classList.contains('page--theme--light')) { page.classList.remove('page--theme--light'); - switcher.classList.remove('page__theme-switcher--theme--light'); contactUs.classList.remove('contact-us--theme--light'); links.forEach(link => { @@ -113,7 +104,6 @@ switchers.forEach(switcher => { }); } else { page.classList.add('page--theme--light'); - switcher.classList.add('page__theme-switcher--theme--light'); contactUs.classList.add('contact-us--theme--light'); links.forEach(link => { diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss index eaae72b880..920fc88a0a 100644 --- a/src/styles/blocks/page.scss +++ b/src/styles/blocks/page.scss @@ -9,6 +9,7 @@ --page-bg: #f2f6fa; --header-footer-bg: #2c2c2c; --bg-icon: url("../images/icons/icon-moon.svg"); + --move: translateX(0); --header-border-rds: 0 0 30px 30px; --footer-border-rds: 30px 30px 0 0; @@ -22,6 +23,7 @@ --page-bg: #f2f9ff; --header-footer-bg: #008aff; --bg-icon: url("../images/icons/icon-sun.svg"); + --move: translateX(100%); --header-border-rds: 0 0 0 200px; --footer-border-rds: 0 200px 0 0; @@ -125,13 +127,8 @@ background-repeat: no-repeat; border-radius: 100%; padding-bottom: 50%; + transform: var(--move); transition: 0.5s; } - - &--theme--light { - &::after { - transform: translateX(100%); - } - } } }