Update Main CSS, Add Seperate CSS, Fix on firefox

fallsimply · Jun 12, 2019 · 4f9394c · 4f9394c
1 parent 8f85779
commit 4f9394c
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -18,6 +18,5 @@
             <input type="submit" value="submit">
         </form>
     </div>
-    <script src=""></script>
 </body>
 </html>
diff --git a/seperate.html b/seperate.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>fall switch demo</title>
+    <link rel="stylesheet" href="switch.seperate.css">
+</head>
+<body>
+    <div class="app">
+        <form action="form" method="GET">
+            <div>
+                <input type="checkbox" name="switch" id="switch">
+                <label class="switch__container" for="switch">
+                    <span class="switch__nub"></span>
+                    <div class="switch__background"></div>
+                </label>
+            </div>
+            <input type="submit" value="submit">
+        </form>
+    </div>
+</body>
+</html>
diff --git a/switch.css b/switch.css
@@ -40,6 +40,7 @@
     height: calc(2 * var(--switch-knob-radius));
     margin: 0;
     opacity: 0;
+    position: absolute
 }
 .nub {
     width: calc(2 * var(--switch-knob-radius));

diff --git a/switch.seperate.css b/switch.seperate.css
@@ -0,0 +1,54 @@
+:root, :host {
+    --switch: hsl(0, 0%, 73%);
+    --switch-active: hsl(231, 48%, 48%);
+    --switch-knob-radius: 10px;
+    --switch-radius: 7px;
+    --switch-offset: calc(var(--switch-knob-radius) - var(--switch-radius));
+}
+.switch__container {
+    position: relative;
+    display: block;
+    width: 36px;
+    height: calc(2 * var(--switch-knob-radius));
+    margin: var(--switch-offset) 0;
+}
+input#switch:focus ~ .switch__container .switch__background {
+    outline: 1px solid rgb(77, 144, 254);
+}
+input#switch:checked ~ .switch__container .switch__background{
+    background: var(--switch-active);
+    filter: saturate(50%) brightness(150%)
+}
+input#switch:checked ~ .switch__container .switch__nub {
+    background: var(--switch-active);
+    right: 0
+}
+.switch__container .switch__background {
+    background-color: var(--switch);
+}
+.switch__background {
+    display: block;
+    width: 36px;
+    height: calc(2 * var(--switch-radius));
+    border-radius: var(--switch-radius);
+    position: absolute;
+    top: 0;
+    margin: var(--switch-offset) 0;
+}
+input#switch {
+    width: 36px;
+    height: calc(2 * var(--switch-knob-radius));
+    margin: 0;
+    opacity: 0;
+    position: absolute;
+}
+.switch__nub {
+    width: calc(2 * var(--switch-knob-radius));
+    height: calc(2 * var(--switch-knob-radius));
+    position: absolute;
+    top: 0;
+    border-radius: 50%;
+    background: white;
+    z-index: 1;
+    box-shadow: 0px 0px 5px rgba(0,0,0,0.2)
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -18,6 +18,5 @@ @@
                 <input type="submit" value="submit">
             </form>
         </div>
-        <script src=""></script>
     </body>
     </html>