FUNCT Add first draft for settings screen

1 files changed, 21 insertions, 48 deletions

diff --git a/src/styles/main.scss b/src/styles/main.scss
index 01373eb..22dd899 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -2,45 +2,6 @@
     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: 64px;
-      width: 64px;
-      border-radius: 32px;
-      background: #FFFFFF;
-      cursor: pointer;
-      -webkit-appearance: none;
-      margin-top: -14px;
-      z-index: 0;
-}
-
-progress {
-    -webkit-appearance: none;
-    height: 16px;
-    width: 100%;
-    margin-top: -12px;
-    z-index: -1000;
-    display: block;
-}
-
 ::-webkit-progress-bar {
     background: map-get($colors, grey);
 }
@@ -93,7 +54,7 @@ body {
         display: flex;
         flex-direction: column;
         flex-wrap: wrap;
-        justify-content: space-around;
+        justify-content: center;
         height: 100%;
 
         .header {
@@ -103,25 +64,37 @@ body {
 
         .entry {
             height: 120px;
+            line-height: 120px;
+            border-bottom: 1px solid map-get($colors, grey);
 
-            .label {
-                margin: 10px 0;
+            &:last-child {
+                border-bottom: none2;
             }
 
-            .button {
+            .icon {
                 width: 10%;
                 position: relative;
                 float: left;
                 text-align: center;
-                height: 80px;
-                line-height: 80px;
             }
 
-            .slider {
-                width: 78%;
+            .label {
                 position: relative;
                 float: left;
-                margin: 0 1%;
+                text-align: left;
+                width: 80%;
+            }
+
+            .control {
+                width: 10%;
+                position: relative;
+                float: left;
+                text-align: right;
+                font-size: 5rem;
+
+                .icon-toggle_on {
+                    color: map-get($colors, primary);
+                }
             }
         }
     }