aboutsummaryrefslogtreecommitdiffstats
path: root/src/styles/main.scss
diff options
context:
space:
mode:
authorHumberto Alfonso Díaz <humberto.alfonso@asvito.es>2019-07-05 09:06:16 +0200
committerHumberto Alfonso Díaz <humberto.alfonso@asvito.es>2019-07-05 09:06:16 +0200
commit6cedff9adf4aac9fa136a65f7a48fad90dfb0b8a (patch)
tree05aeeb3d1b6f20d2bc9e5abfddb3fa2d89e375b2 /src/styles/main.scss
parent9ccd0ed5af07c6099035ffac936932a5edfb4ce6 (diff)
FUNCT Add fan speed container
Diffstat (limited to 'src/styles/main.scss')
-rw-r--r--src/styles/main.scss74
1 files changed, 74 insertions, 0 deletions
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%;