initialize settings page

2026-06-04 04:23:01 +00:00 · 2022-08-19 19:24:38 +03:00
parent dcd27921ae
commit 44bb30fe9f
19 changed files with 327 additions and 48 deletions
@@ -0,0 +1,45 @@
+<template>
+  <div
+    class="switch rounded"
+    @click="toggled = !toggled"
+    :class="{ toggled: toggled }"
+  >
+    <div class="circle circular"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+const toggled = ref(false);
+</script>
+
+<style lang="scss">
+.switch {
+  height: 2rem;
+  background-color: $gray;
+  width: 3.75rem;
+  padding: $smaller;
+  position: relative;
+  transition: all 0.25s ease;
+
+  .circle {
+    transition: all 0.25s ease;
+    height: 1.5rem;
+    aspect-ratio: 1;
+    background-color: $gray1;
+    position: absolute;
+    left: $smaller;
+  }
+}
+
+.toggled {
+  background-color: $darkblue;
+  transition-delay: 0.15s;
+
+  .circle {
+    background-color: $white;
+    left: calc((100% - ($smaller + 1.5rem)));
+  }
+}
+</style>