FUNCT Add fan speed container

1 files changed, 74 insertions, 0 deletions

diff --git a/src/styles/main.scss b/src/styles/main.scss
index bafd901..59a7b00 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -2,6 +2,53 @@
     display: none;
 }
 
+input[type=range] {
+    -webkit-appearance: none;
+    width: 100%;
+    margin: 13.8px 0;
+    background: transparent;
+    z-index: 1000;
+}
+
+input[type=range]:focus {
+    outline: none;
+}
+
+input[type=range]::-webkit-slider-runnable-track {
+      width: 100%;
+      height: 8.4px;
+      cursor: pointer;
+      background: transparent;
+}
+
+input[type=range]::-webkit-slider-thumb {
+      height: 32px;
+      width: 32px;
+      border-radius: 16px;
+      background: #FFFFFF;
+      cursor: pointer;
+      -webkit-appearance: none;
+      margin-top: -14px;
+      z-index: 0;
+}
+
+progress {
+    -webkit-appearance: none;
+    height: 8.4px;
+    width: 100%;
+    margin-top: -22px;
+    position: absolute;
+    z-index: -1000;
+}
+
+::-webkit-progress-bar {
+    background: #848286;
+}
+
+::-webkit-progress-value {
+  background-color: #00ADDC;
+}
+
 html {
     height: 100%;
     background-size: cover;
@@ -14,6 +61,31 @@ body {
     color: map-get($colors, font);
     margin: 5%;
 
+    .top {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 10%;
+        margin-bottom: 15%;
+
+        .icon {
+            flex-basis: 10%;
+        }
+
+        .fanSpeed {
+            flex-basis: 85%;
+            height: 100%;
+
+            .fanSpeedContainer {
+                position: relative;
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+
     .center {
         display: flex;
         flex-direction: row;
@@ -67,6 +139,7 @@ body {
                     height: 480px;
                     overflow-y: scroll;
                     scroll-snap-type: y mandatory;
+                    scroll-behavior: smooth;
 
                     .temperature {
                         font-size: 10rem;
@@ -91,6 +164,7 @@ body {
         justify-content: flex-start;
         align-items: flex-start;
         height: 100%;
+        margin-top: 10%;
 
         .button {
             flex-basis: 20%;