daydream

commit b8d005b9bb1f55bf0c9e0e72c5a179e94a214462
parent 7f55517b6fd57e19b33e6f7197eaf2adf222ddb2
Author: Marcel <mtrnord1@gmail.com>
Date:   Fri, 29 May 2020 15:27:56 +0200

Fix CI issue

Took 9 minutes

Diffstat:
M
static/style.scss
 | 
8
++++----
A
static/theme_slider.scss
 | 
206
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

2 files changed, 210 insertions(+), 4 deletions(-)
diff --git a/static/style.scss b/static/style.scss
@@ -1,7 +1,7 @@
-@import "./theme_slider.scss";
+@import "theme_slider.scss";
 
 [data-theme="dark"] {
-  @import "./dark_theme/variables";
+  @import "dark_theme/variables";
 
   [data-theme] {
     background-color: var(--global-background);
@@ -18,7 +18,7 @@
 }
 
 [data-theme="light"] {
-  @import "./light_theme/variables";
+  @import "light_theme/variables";
 
   [data-theme] {
     background-color: var(--global-background);
@@ -26,7 +26,7 @@
   }
 
   @at-root {
-    @import "./custom-css.scss";
+    @import "custom-css.scss";
   }
   @at-root {
     @import "../node_modules/uikit/src/scss/mixins-theme.scss";
diff --git a/static/theme_slider.scss b/static/theme_slider.scss
@@ -0,0 +1,206 @@
+.toggleWrapper {
+  position: relative;
+  left: 25%;
+
+  input {
+    position: absolute;
+    left: -99em;
+    margin-bottom: 5px;
+  }
+}
+
+.toggle {
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  width: 90px;
+  height: 40px;
+  background-color: #83D8FF;
+  border-radius: 90px - 6;
+  transition: background-color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
+
+  &:before {
+    content: 'Light';
+    position: absolute;
+    left: -50px;
+    top: 8px;
+    font-size: 18px;
+    color: #749ED7;
+  }
+
+  &:after {
+    content: 'Dark';
+    position: absolute;
+    right: -48px;
+    top: 8px;
+    font-size: 18px;
+    color: #434B59;
+  }
+}
+
+.toggle__handler {
+  display: inline-block;
+  position: relative;
+  z-index: 1;
+  top: 3px;
+  left: 3px;
+  width: 40px - 6;
+  height: 40px - 6;
+  background-color: #FFCF96;
+  border-radius: 40px;
+  box-shadow: 0 2px 6px rgba(0,0,0,.3);
+  transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  //transform:  rotate(-45deg);
+
+  .crater {
+    position: absolute;
+    background-color: #E8CDA5;
+    opacity: 0;
+    transition: opacity 200ms ease-in-out;
+    border-radius: 100%;
+  }
+
+  .crater--1 {
+    top: 18px;
+    left: 10px;
+    width: 4px;
+    height: 4px;
+  }
+
+  .crater--2 {
+    top: 23px;
+    left: 17px;
+    width: 6px;
+    height: 6px;
+  }
+
+  .crater--3 {
+    top: 10px;
+    left: 22px;
+    width: 8px;
+    height: 8px;
+  }
+}
+
+.star {
+  position: absolute;
+  background-color: #ffffff;
+  transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
+  border-radius: 50%;
+}
+
+.star--1 {
+  top: 10px;
+  left: 20px;
+  z-index: 0;
+  width: 30px;
+  height: 3px;
+}
+
+.star--2 {
+  top: 18px;
+  left: 21px;
+  z-index: 1;
+  width: 30px;
+  height: 3px;
+}
+
+.star--3 {
+  top: 27px;
+  left: 25px;
+  z-index: 0;
+  width: 30px;
+  height: 3px;
+}
+
+.star--4,
+.star--5,
+.star--6 {
+  opacity: 0;
+  transition: all 300ms 0 cubic-bezier(0.445, 0.05, 0.55, 0.95);
+}
+
+.star--4 {
+  top: 16px;
+  left: 11px;
+  z-index: 0;
+  width: 2px;
+  height: 2px;
+  transform: translate3d(3px,0,0);
+}
+
+.star--5 {
+  top: 32px;
+  left: 17px;
+  z-index: 0;
+  width: 3px;
+  height: 3px;
+  transform: translate3d(3px,0,0);
+}
+
+.star--6 {
+  top: 36px;
+  left: 28px;
+  z-index: 0;
+  width: 2px;
+  height: 2px;
+  transform: translate3d(3px,0,0);
+}
+
+input:checked {
+  + .toggle {
+    background-color: #749DD6;
+
+    &:before {
+      color: #626C80;
+    }
+
+    &:after {
+      color: #749ED7;
+    }
+
+    .toggle__handler {
+      background-color: #FFE5B5;
+      transform: translate3d(50px, 0, 0) rotate(0);
+
+      .crater { opacity: 1; }
+    }
+
+    .star--1 {
+      width: 2px;
+      height: 2px;
+      left: 35px;
+    }
+
+    .star--2 {
+      width: 4px;
+      height: 4px;
+      left: 28px;
+      transform: translate3d(-5px, 0, 0);
+    }
+
+    .star--3 {
+      width: 2px;
+      height: 2px;
+      left: 40px;
+      transform: translate3d(-7px, 0, 0);
+    }
+
+    .star--4,
+    .star--5,
+    .star--6 {
+      opacity: 1;
+      transform: translate3d(0,0,0);
+    }
+    .star--4 {
+      transition: all 300ms 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
+    }
+    .star--5 {
+      transition: all 300ms 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
+    }
+    .star--6 {
+      transition: all 300ms 400ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
+    }
+  }
+}
+