- - +

+ Volume 1: 50% +

+ + + +

+ +

+ + + +

- FAN SPEED + Volume 1: 50%

+ + + +

+ + +

- -

- - -

- A/C + Volume 1: 50% +

+ + + +

+ +

- - -

- -

+ + +

- -

+ Volume 1: 50% +

+ + + +

+ + +

- -

- - -

- -

diff --git a/src/index.js b/src/index.js index 67f800a..142b8d1 100644 --- a/src/index.js +++ b/src/index.js @@ -19,7 +19,3 @@ import './js/AFB.js'; /* CSS */ import './styles/app.scss'; - -document.addEventListener('DOMContentLoaded', function(){ - TEMPERATURE.init(); -}); \ No newline at end of file diff --git a/src/styles/app.scss b/src/styles/app.scss index c2a4c72..a67dbfe 100644 --- a/src/styles/app.scss +++ b/src/styles/app.scss @@ -4,6 +4,7 @@ $colors: ( grey: #848286 ); +@import "style.css"; @import "main.scss"; @import "portrait.scss"; @import "landscape.scss"; \ No newline at end of file diff --git a/src/styles/fonts/icomoon.eot b/src/styles/fonts/icomoon.eot new file mode 100755 index 0000000..1de3233 Binary files /dev/null and b/src/styles/fonts/icomoon.eot differ diff --git a/src/styles/fonts/icomoon.svg b/src/styles/fonts/icomoon.svg new file mode 100755 index 0000000..c58b9e7 --- /dev/null +++ b/src/styles/fonts/icomoon.svg @@ -0,0 +1,12 @@ + + + \ No newline at end of file diff --git a/src/styles/fonts/icomoon.ttf b/src/styles/fonts/icomoon.ttf new file mode 100755 index 0000000..520b0ff Binary files /dev/null and b/src/styles/fonts/icomoon.ttf differ diff --git a/src/styles/fonts/icomoon.woff b/src/styles/fonts/icomoon.woff new file mode 100755 index 0000000..d1c4591 Binary files /dev/null and b/src/styles/fonts/icomoon.woff differ diff --git a/src/styles/main.scss b/src/styles/main.scss index 6c3ed5a..07fc408 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -22,9 +22,9 @@ input[type=range]::-webkit-slider-runnable-track { } input[type=range]::-webkit-slider-thumb { - height: 32px; - width: 32px; - border-radius: 16px; + height: 64px; + width: 64px; + border-radius: 32px; background: #FFFFFF; cursor: pointer; -webkit-appearance: none; @@ -34,11 +34,11 @@ input[type=range]::-webkit-slider-thumb { progress { -webkit-appearance: none; - height: 8.4px; + height: 16px; width: 100%; - margin-top: -22px; - position: absolute; + margin-top: -12px; z-index: -1000; + display: block; } ::-webkit-progress-bar { @@ -56,10 +56,11 @@ html { } body { - font-size: 1.2rem; + font-size: 2rem; font-family: Arial; color: map-get($colors, font); - margin: 5%; + margin: 0 5%; + height: 100%; a { color: map-get($colors, font); @@ -86,148 +87,38 @@ body { } } - .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 { + .content { display: flex; - flex-direction: row; + flex-direction: column; flex-wrap: wrap; - justify-content: flex-start; - align-items: flex-start; + justify-content: space-around; height: 100%; - .item { - &:before { - content:''; - float:left; - padding-top:75%; - } - - &.ac, &.auto { - .label { - font-weight: bold; - font-size: 2.5rem; - text-align: center; - margin-top: -50%; - } - } - - &.seat { - img { - width: 50%; - margin: 0 25%; - } - - &[value="0"] { - .one, .two { - display: none; - } - .off { - display: block; - } - } - - &[value="1"] { - .off, .two { - display: none; - } - .one { - display: block; - } - } - - &[value="2"] { - .one, .off { - display: none; - } - .two { - display: block; - } - } + .entry { + height: 100px; + .label { + margin: 10px 0; } - &.circulation { - - } - - &.block { - &:before { - padding-top:150%; - } - - .item { - height: 50%; - position: relative; - float: left; - width: 100%; - } - } - - &.temperatures { - .temperatures-container { - width: 100%; - height: 240px; - overflow-y: scroll; - - .temperature { - &[enabled='true'] { - color: map-get($colors, primary); - } - &[enabled='false'] { - color: map-get($colors, grey); - } - font-size: 5rem; - font-weight: bold; - text-align: center; - width: 100%; - } - } + .button { + width: 10%; + position: relative; + float: left; + text-align: center; + height: 80px; + line-height: 80px; + background-color: map-get($colors, primary); + color: #FFFFFF; + border-radius: 20px; + text-decoration: none; } - text-decoration: none; - flex-basis: 33%; - } - } - - .bottom { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: flex-start; - align-items: flex-start; - height: 100%; - margin-top: 10%; - - .button { - flex-basis: 20%; - - img { - width: 80%; - margin: 0 10%; + .slider { + width: 78%; + position: relative; + float: left; + margin: 0 1%; } } } diff --git a/src/styles/style.css b/src/styles/style.css new file mode 100755 index 0000000..e86165c --- /dev/null +++ b/src/styles/style.css @@ -0,0 +1,33 @@ +@font-face { + font-family: 'icomoon'; + src: url('fonts/icomoon.eot?41hzv3'); + src: url('fonts/icomoon.eot?41hzv3#iefix') format('embedded-opentype'), + url('fonts/icomoon.ttf?41hzv3') format('truetype'), + url('fonts/icomoon.woff?41hzv3') format('woff'), + url('fonts/icomoon.svg?41hzv3#icomoon') format('svg'); + font-weight: normal; + font-style: normal; + font-display: block; +} + +[class^="icon-"], [class*=" icon-"] { + /* use !important to prevent issues with browser extensions that change fonts */ + font-family: 'icomoon' !important; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-volume-increase:before { + content: "\ea2b"; +} +.icon-volume-decrease:before { + content: "\ea2c"; +} -- cgit 1.2.3-korg