summaryrefslogtreecommitdiffstats
path: root/src/styles
diff options
context:
space:
mode:
authorHumberto Alfonso Díaz <humberto.alfonso@asvito.es>2019-07-04 13:37:31 +0200
committerLorenzo Tilve <ltilve@igalia.com>2020-02-04 19:20:13 +0100
commit558b6c53f0895ccf064e85020c48ac3fc489da24 (patch)
treecf7e72acaf8b1fb0b59ebd44903de155af824314 /src/styles
parented4ef248f82ea53d861799a4e8e6615b96c776ea (diff)
FUNCT First layout structure
Diffstat (limited to 'src/styles')
-rw-r--r--src/styles/app.scss3
-rw-r--r--src/styles/main.scss89
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%;
}
}
}