From ae6c1f3eab3ca81a9310694057eb149d1baa1603 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Thu, 6 Jan 2022 09:08:59 +0100
Subject: [PATCH] refactor: use ems for switch styles

---
 src/components/NsfwSwitch.vue | 38 +++++++++++++++++------------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/components/NsfwSwitch.vue b/src/components/NsfwSwitch.vue
index 5d3bffe..8dd2bf9 100644
--- a/src/components/NsfwSwitch.vue
+++ b/src/components/NsfwSwitch.vue
@@ -34,13 +34,13 @@ export default {
 
   padding: 0.5em;
 
-  display: flex;
+  display: inline-flex;
   justify-content: center;
   align-items: center;
   align-content: center;
 
   > div {
-    flex: 0 1 33%;
+    flex: 0 1 auto;
     align-self: center;
     line-height: 1;
     text-align: center;
@@ -53,10 +53,10 @@ export default {
   .toggle {
     position: relative;
     display: inline-block;
-    width: 46px;
-    height: 26px;
+    width: 2.3em;
+    height: 1.3em;
     background-color: #e6e6e6;
-    border-radius: 23px;
+    border-radius: 1.15em;
     vertical-align: text-bottom;
     transition: all 0.3s linear;
 
@@ -64,11 +64,11 @@ export default {
       content: "";
       position: absolute;
       left: 0;
-      width: 42px;
-      height: 22px;
+      width: 2.1em;
+      height: 1.1em;
       background-color: #fff;
-      border-radius: 11px;
-      transform: translate3d(2px, 2px, 0) scale3d(1, 1, 1);
+      border-radius: 0.55em;
+      transform: translate3d(0.1em, 0.1em, 0) scale3d(1, 1, 1);
       transition: all 0.25s linear;
     }
 
@@ -76,25 +76,25 @@ export default {
       content: "";
       position: absolute;
       left: 0;
-      width: 22px;
-      height: 22px;
+      width: 1.1em;
+      height: 1.1em;
       background-color: #fff;
-      border-radius: 11px;
-      box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24);
-      transform: translate3d(2px, 2px, 0);
+      border-radius: 0.55em;
+      box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.24);
+      transform: translate3d(0.1em, 0.1em, 0);
       transition: all 0.2s ease-in-out;
     }
   }
 
   &:active {
     .toggle::after {
-      width: 28px;
-      transform: translate3d(2px, 2px, 0);
+      width: 1.4em;
+      transform: translate3d(0.1em, 0.1em, 0);
     }
 
     input {
       &:checked + .toggle::after {
-        transform: translate3d(16px, 2px, 0);
+        transform: translate3d(0.8em, 0.1em, 0);
       }
     }
   }
@@ -108,11 +108,11 @@ export default {
       background-color: $bg-color-light;
 
       &::before {
-        transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0);
+        transform: translate3d(0.9em, 0.1em, 0) scale3d(0, 0, 0);
       }
 
       &::after {
-        transform: translate3d(22px, 2px, 0);
+        transform: translate3d(1.1em, 0.1em, 0);
       }
     }
   }