fixed dark mode toggle button and added screenshots

fasih-mehmood · Aug 13, 2021 · 3446eec · 3446eec
1 parent f36dc20
commit 3446eec
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 10 deletions.
diff --git a/screenshots/desktop-dark.png b/screenshots/desktop-dark.png
diff --git a/screenshots/desktop-light.png b/screenshots/desktop-light.png
diff --git a/screenshots/mobile-dark.png b/screenshots/mobile-dark.png
diff --git a/screenshots/mobile-light.png b/screenshots/mobile-light.png
diff --git a/style.css b/style.css
@@ -54,12 +54,12 @@ html {
   background-color: var(--bs-Toggle);
   transition: 0.4s;
 }
-.slider:before {
+.slider:after {
   position: absolute;
   content: "";
   height: 16px;
   width: 16px;
-  left: 4px;
+  right: 4px;
   bottom: 4px;
   background-color: white;
   transition: 0.3s;
@@ -71,15 +71,15 @@ input:checked + .slider {
 input:focus + .slider {
   box-shadow: 0 0 1px #2196F3;
 }
-input:checked + .slider:before {
-  transform: translateX(26px);
+input:checked + .slider:after {
+  transform: translateX(-26px);
 }
 
 /* Rounded sliders */
 .slider.round {
   border-radius: 34px;
 }
-.slider.round:before {
+.slider.round:after {
   border-radius: 50%;
 }
 

diff --git a/style.scss b/style.scss
@@ -58,12 +58,12 @@ html {
   background-color: var(--bs-Toggle);
   transition: .4s;
 
-  &:before {
+  &:after {
     position: absolute;
     content: "";
     height: 16px;
     width: 16px;
-    left: 4px;
+    right: 4px;
     bottom: 4px;
     background-color: white;
     transition: .3s;
@@ -79,16 +79,16 @@ input {
     box-shadow: 0 0 1px #2196F3;
   }
 
-  &:checked+.slider:before {
-    transform: translateX(26px);
+  &:checked+.slider:after {
+    transform: translateX(-26px);
   }
 }
 
 /* Rounded sliders */
 .slider.round {
   border-radius: 34px;
 
-  &:before {
+  &:after {
     border-radius: 50%;
   }
 }