diff options
| -rw-r--r-- | src/index.html | 14 | ||||
| -rw-r--r-- | src/styles/landscape.scss | 12 | ||||
| -rw-r--r-- | src/styles/main.scss | 74 | ||||
| -rw-r--r-- | 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 @@ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> </head> <body> - <div id="fan"> + <div class="top"> + <div class="icon"> + <img src="../images/HMI_HVAC_Fan_Icon.svg"> + </div> + <div class="fanSpeed"> + <div class="fanSpeedContainer"> + <input type="range" min="1" max="100" value="50"> + <progress value="50" max="100"></progress> + </div> + <div class="label"> + FAN SPEED + </div> + </div> </div> <div class="center"> 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 |