diff options
Diffstat (limited to 'src/styles')
-rw-r--r-- | src/styles/app.scss | 3 | ||||
-rw-r--r-- | src/styles/main.scss | 89 |
2 files changed, 80 insertions, 12 deletions
diff --git a/src/styles/app.scss b/src/styles/app.scss index 5e7fbd4..c2a4c72 100644 --- a/src/styles/app.scss +++ b/src/styles/app.scss @@ -1,6 +1,7 @@ $colors: ( primary: #00ADDC, - font: #999999 + font: #999999, + grey: #848286 ); @import "main.scss"; diff --git a/src/styles/main.scss b/src/styles/main.scss index a72b94b..5fd580e 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -14,7 +14,7 @@ body { color: map-get($colors, font); margin: 5%; - .parent { + .center { display: flex; flex-direction: row; flex-wrap: wrap; @@ -23,19 +23,86 @@ body { height: 100%; .item { - color: map-get($colors, font); - text-decoration: none; + &:before { + content:''; + float:left; + padding-top:75%; + } + + &.ac, &.auto { + .label { + font-size: 5rem; + text-align: center; + margin-top: -50%; + } + } + + &.seat { + img { + width: 50%; + margin: 0 25%; + } + } + + &.circulation { + + } + + &.block { + &:before { + padding-top:150%; + } + + .item { + height: 50%; + position: relative; + float: left; + width: 100%; + } + } + + &.temperatures { + &:before { + padding-top:150%; + } - .icon { - width: 100%; - height: 100%; + .scrolling { + position: relative; + float: left; + width: 100%; + height: 100%; + overflow: scroll; + + .temperature { + position: relative; + float: left; + height: 50%; + width: 100%; + font-size: 10rem; + text-align: center; + } + } } - .name { - width: 100%; - text-align: center; - text-transform: uppercase; - margin-top: -20%; + 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%; + + .button { + flex-basis: 20%; + + img { + width: 80%; + margin: 0 10%; } } } |