summaryrefslogtreecommitdiffstats
path: root/src/styles
diff options
context:
space:
mode:
Diffstat (limited to 'src/styles')
-rw-r--r--src/styles/app.scss1
-rwxr-xr-xsrc/styles/fonts/icomoon.eotbin0 -> 1412 bytes
-rwxr-xr-xsrc/styles/fonts/icomoon.svg12
-rwxr-xr-xsrc/styles/fonts/icomoon.ttfbin0 -> 1248 bytes
-rwxr-xr-xsrc/styles/fonts/icomoon.woffbin0 -> 1324 bytes
-rw-r--r--src/styles/main.scss173
-rwxr-xr-xsrc/styles/style.css33
7 files changed, 78 insertions, 141 deletions
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
--- /dev/null
+++ b/src/styles/fonts/icomoon.eot
Binary files 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 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="icomoon" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="960" descent="-64" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
+<glyph unicode="&#xea2b;" glyph-name="volume-increase" d="M1024 384h-192v-192h-128v192h-192v128h192v192h128v-192h192v-128zM416.006 0c-8.328 0-16.512 3.25-22.634 9.374l-246.626 246.626h-114.746c-17.672 0-32 14.326-32 32v320c0 17.672 14.328 32 32 32h114.746l246.626 246.628c9.154 9.154 22.916 11.89 34.874 6.936 11.958-4.952 19.754-16.622 19.754-29.564v-832c0-12.944-7.796-24.612-19.754-29.564-3.958-1.64-8.118-2.436-12.24-2.436z" />
+<glyph unicode="&#xea2c;" glyph-name="volume-decrease" d="M512 512h512v-128h-512v128zM416.006 0c-8.328 0-16.512 3.25-22.634 9.374l-246.626 246.626h-114.746c-17.672 0-32 14.326-32 32v320c0 17.672 14.328 32 32 32h114.746l246.626 246.628c9.154 9.154 22.916 11.89 34.874 6.936 11.958-4.952 19.754-16.622 19.754-29.564v-832c0-12.944-7.796-24.612-19.754-29.564-3.958-1.64-8.118-2.436-12.24-2.436z" />
+</font></defs></svg> \ 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
--- /dev/null
+++ b/src/styles/fonts/icomoon.ttf
Binary files differ
diff --git a/src/styles/fonts/icomoon.woff b/src/styles/fonts/icomoon.woff
new file mode 100755
index 0000000..d1c4591
--- /dev/null
+++ b/src/styles/fonts/icomoon.woff
Binary files 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";
+}