Multi-staged Sign-up Design

flyingduck92 · Aug 27, 2020 · 3303745 · 3303745
commit 3303745
Show file tree

Hide file tree

Showing 10 changed files with 850 additions and 0 deletions.
diff --git a/css/second.css b/css/second.css
diff --git a/css/second.css.map b/css/second.css.map
diff --git a/css/second.scss b/css/second.scss
@@ -0,0 +1,109 @@
+select {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+
+    background: url('../img/dropdown.png');
+    background-repeat: no-repeat;
+    background-position: right;
+    background-size: 18px 18px;
+    background-origin: content-box;
+
+    line-height: 1.5em;
+}
+
+input[type=radio] {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+
+    position: relative;
+    top: 10px;
+
+    display: inline-block;
+    width: 30px;
+    height: 30px;
+    border: 2px solid #1b1b1b;
+    border-radius: 50%;
+    outline: none;
+
+    margin-top: -10px;
+}
+
+input[type=radio]:checked::before {
+    content: '';
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    background: #7B68EE;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+}
+
+.right-label {
+    display: unset;
+    margin-right: 1.5em;
+    font-weight: normal;
+}
+
+.mt-extra {
+    margin-top: 2em;
+}
+
+.fix-height {
+    min-width: 100%;
+    min-height: 150px;
+    resize: none;
+    line-height: 1.5em;
+}
+
+.tos-label {
+    color: #1b1b1b;
+}
+
+input[type=checkbox] {
+    display: none;
+    pointer-events: none;
+
+    & + label {
+        margin-top: .5em;
+
+        cursor: pointer;
+        display: grid;
+        grid-template-columns: auto 3fr;
+
+        svg {
+            width: 2em;
+            stroke: #1b1b1b;
+            stroke-width: 5;
+            fill: #fff;
+
+            .box {
+                stroke-dasharray: 320;
+                stroke-dashoffset: 0;
+                fill: #fff;
+            }
+
+            .check {
+                stroke-dasharray: 75;
+                stroke-dashoffset: 75;
+                fill: none;
+
+                transition: stroke-dashoffset .3s linear;
+            }
+        }
+        span {
+            padding-top: .3em;
+            padding-left: .5em;
+        }
+    }
+
+    &:checked + label {
+        .check {
+            stroke-dashoffset: 0;
+            transition: stroke-dashoffset .3s linear;
+        }
+    }
+
+}