From 907b806e3659b1756fc226f975a4619a3fb65bba Mon Sep 17 00:00:00 2001 From: Humberto Alfonso Díaz Date: Fri, 5 Jul 2019 09:06:16 +0200 Subject: FUNCT Add fan speed container --- src/index.html | 14 ++++++++- src/styles/landscape.scss | 12 ++++++-- src/styles/main.scss | 74 +++++++++++++++++++++++++++++++++++++++++++++++ src/styles/portrait.scss | 4 +-- 4 files changed, 99 insertions(+), 5 deletions(-) diff --git a/src/index.html b/src/index.html index e727743..4541301 100644 --- a/src/index.html +++ b/src/index.html @@ -6,7 +6,19 @@ -
+
+
+ +
+
+
+ + +
+
+ FAN SPEED +
+
diff --git a/src/styles/landscape.scss b/src/styles/landscape.scss index 39ac270..4742273 100644 --- a/src/styles/landscape.scss +++ b/src/styles/landscape.scss @@ -5,8 +5,16 @@ } body { - .item { - flex-basis: 25%; + + .center { + width: 80%; + float: left; + } + + .bottom { + flex-direction: column; + width: 20%; } + } } \ No newline at end of file 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%; diff --git a/src/styles/portrait.scss b/src/styles/portrait.scss index a4eb732..8c1502d 100644 --- a/src/styles/portrait.scss +++ b/src/styles/portrait.scss @@ -5,8 +5,8 @@ } body { - .item { - flex-basis: 33%; + .center { + width: : 100%; } } } \ No newline at end of file -- cgit 1.2.3-korg