summaryrefslogtreecommitdiffstats
path: root/src/styles/main.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/styles/main.scss')
-rw-r--r--src/styles/main.scss173
1 files changed, 32 insertions, 141 deletions
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%;
}
}
}