summaryrefslogtreecommitdiffstats
path: root/src/styles
diff options
context:
space:
mode:
authorHumberto Alfonso Díaz <humberto.alfonso@asvito.es>2019-11-27 14:00:37 +0100
committerLorenzo Tilve <ltilve@igalia.com>2020-02-04 19:20:13 +0100
commit56514d2337ab5b1d2d8f3666c211e2e04f73bd68 (patch)
tree918219a94418c50b9bcc74d038527ea9aa8ebdab /src/styles
parentdb370a3eaac20d716ae1401dbf8383d7ece89a9f (diff)
FUNCT Added bluetooth screen
Diffstat (limited to 'src/styles')
-rw-r--r--src/styles/app.scss4
-rwxr-xr-xsrc/styles/fonts/icomoon.eotbin2300 -> 2348 bytes
-rwxr-xr-xsrc/styles/fonts/icomoon.svg5
-rwxr-xr-xsrc/styles/fonts/icomoon.ttfbin2136 -> 2184 bytes
-rwxr-xr-xsrc/styles/fonts/icomoon.woffbin2212 -> 2260 bytes
-rw-r--r--src/styles/main.scss88
-rw-r--r--src/styles/portrait.scss4
-rwxr-xr-xsrc/styles/style.css17
8 files changed, 80 insertions, 38 deletions
diff --git a/src/styles/app.scss b/src/styles/app.scss
index d97030b..c69ad19 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -1,5 +1,6 @@
$colors: (
primary: #00ADDC,
+ secondary: #223340,
font: #FFFFFF,
grey: #848286
);
@@ -7,4 +8,5 @@ $colors: (
@import "style.css";
@import "main.scss";
@import "portrait.scss";
-@import "landscape.scss"; \ No newline at end of file
+@import "landscape.scss";
+@import "~@fortawesome/fontawesome-free/css/all.min.css"; \ No newline at end of file
diff --git a/src/styles/fonts/icomoon.eot b/src/styles/fonts/icomoon.eot
index fb55d1c..ba1208c 100755
--- a/src/styles/fonts/icomoon.eot
+++ b/src/styles/fonts/icomoon.eot
Binary files differ
diff --git a/src/styles/fonts/icomoon.svg b/src/styles/fonts/icomoon.svg
index 6fedeea..809d2c2 100755
--- a/src/styles/fonts/icomoon.svg
+++ b/src/styles/fonts/icomoon.svg
@@ -14,9 +14,10 @@
<glyph unicode="&#xe904;" glyph-name="speed" d="M512 256.667q-34 0-60 25t-26 59q0 36 26 62l362 240-242-362q-24-24-60-24zM870 572.667q28-44 48-112t20-120q0-118-56-212-26-44-74-44h-592q-48 0-74 44-56 94-56 212 0 176 125 301t303 125q52 0 119-20t111-48l-80-52q-72 36-152 36-140 0-241-100t-101-242q0-92 46-170h592q46 78 46 170 0 82-36 154z" />
<glyph unicode="&#xe905;" glyph-name="toggle_off" d="M298 298.667q52 0 90 38t38 90-38 90-90 38-90-38-38-90 38-90 90-38zM726 640.667q88 0 150-63t62-151-62-151-150-63h-428q-88 0-150 63t-62 151 62 151 150 63h428z" />
<glyph unicode="&#xe906;" glyph-name="toggle_on" d="M726 298.667q52 0 90 38t38 90-38 90-90 38-90-38-38-90 38-90 90-38zM726 640.667q88 0 150-63t62-151-62-151-150-63h-428q-88 0-150 63t-62 151 62 151 150 63h428z" />
-<glyph unicode="&#xe907;" glyph-name="keyboard_arrow_down" d="M316 572.667l196-196 196 196 60-60-256-256-256 256z" />
-<glyph unicode="&#xe908;" glyph-name="keyboard_arrow_up" d="M316 280.667l-60 60 256 256 256-256-60-60-196 196z" />
+<glyph unicode="&#xe907;" glyph-name="arrow_down" d="M316 572.667l196-196 196 196 60-60-256-256-256 256z" />
+<glyph unicode="&#xe908;" glyph-name="arrow_up" d="M316 280.667l-60 60 256 256 256-256-60-60-196 196z" />
<glyph unicode="&#xe909;" glyph-name="clear" d="M810 664.667l-238-238 238-238-60-60-238 238-238-238-60 60 238 238-238 238 60 60 238-238 238 238z" />
<glyph unicode="&#xe90a;" glyph-name="computer" d="M854 298.667v426h-684v-426h684zM598 170.667v42h-172v-42h172zM938 170.667h86v-86h-1024v86h86v640h852v-640z" />
<glyph unicode="&#xe90b;" glyph-name="phone" d="M736 170.667v598h-448v-598h448zM598 42.667v42h-172v-42h172zM682 896.667q52 0 90-38t38-90v-684q0-52-38-90t-90-38h-340q-52 0-90 38t-38 90v684q0 52 38 90t90 38h340z" />
+<glyph unicode="&#xe90c;" glyph-name="arrow_back" d="M498 772.667l-346-346 346-346-76-76-422 422 422 422z" />
</font></defs></svg> \ No newline at end of file
diff --git a/src/styles/fonts/icomoon.ttf b/src/styles/fonts/icomoon.ttf
index ec51acb..f79ee84 100755
--- a/src/styles/fonts/icomoon.ttf
+++ b/src/styles/fonts/icomoon.ttf
Binary files differ
diff --git a/src/styles/fonts/icomoon.woff b/src/styles/fonts/icomoon.woff
index ca1195e..f21dee2 100755
--- a/src/styles/fonts/icomoon.woff
+++ b/src/styles/fonts/icomoon.woff
Binary files differ
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 6b917d1..84d877c 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -26,7 +26,6 @@ body {
a {
color: map-get($colors, font);
text-decoration: none;
- font-size: 2.5rem;
}
.button {
@@ -51,33 +50,44 @@ body {
}
.page {
- display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
height: 100%;
overflow: hidden;
+ position: relative;
&.hide {
display: none;
}
.header {
- text-align: center;
- margin: 0;
+ text-align: left;
+ margin: 50px 0;
+
+ .backButton {
+ padding-right: 20px;
+ font-size: 1em;
+ }
}
.container {
- display: flex;
- flex-direction: column;
- flex-wrap: nowrap;
- justify-content: center;
- flex-grow: 2;
+ overflow-y: scroll;
+ height: 1040px;
.entry {
- height: 120px;
- line-height: 120px;
- border-bottom: 1px solid map-get($colors, grey);
+ $entryHeight: 120px;
+ height: $entryHeight;
+ line-height: $entryHeight;
+ border-bottom: 9 solid map-get($colors, grey);
+
+ &:nth-last-child(1) {
+ margin-bottom: 90px;
+ }
+
+ &.secondary {
+ $entryHeight: 90px;
+ }
&:last-child {
border-bottom: none;
@@ -85,6 +95,7 @@ body {
.icon {
width: 10%;
+ height: $entryHeight;
position: relative;
float: left;
text-align: center;
@@ -95,9 +106,20 @@ body {
float: left;
text-align: left;
width: 75%;
+ height: $entryHeight;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
+
+ .title {
+ height: 2*$entryHeight/3;
+ line-height: 2*$entryHeight/3;
+ }
+ .subtitle {
+ height: $entryHeight/3;
+ line-height: $entryHeight/3;
+ font-size: 0.75em;
+ }
}
.control {
@@ -105,46 +127,56 @@ body {
position: relative;
float: left;
text-align: right;
- font-size: 5rem;
+ height: $entryHeight;
& > * {
- height: 120px;
- line-height: 120px;
+ height: $entryHeight;
+ line-height: $entryHeight;
}
&.enabled {
- .icon-toggle_on {
+ .on {
display: block;
color: map-get($colors, primary);
}
- .icon-toggle_off {
+ .off {
display: none;
}
}
- .icon-toggle_on {
+ .on {
display: none;
}
- .icon-toggle_off {
+ .off {
display: block;
}
}
}
}
-
-
- .confirm {
+ .footer {
position: absolute;
- bottom: 5%;
+ bottom: 0;
text-align: center;
- height: 120px;
- line-height: 120px;
- width: 90%;
- background: map-get($colors, primary);
- border-radius: 20px;
+ height: 80px;
+ line-height: 80px;
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: space-evenly;
+ align-content: stretch;
+
+ .button {
+ flex-grow: 1;
+ background: map-get($colors, secondary);
+
+ &.active {
+ background: map-get($colors, primary);
+ }
+ }
}
}
diff --git a/src/styles/portrait.scss b/src/styles/portrait.scss
index eff553c..4016600 100644
--- a/src/styles/portrait.scss
+++ b/src/styles/portrait.scss
@@ -2,6 +2,10 @@
html {
background-image: url('../images/vertical_background.png');
+ background-position: top center;
+ background-repeat: no-repeat;
+ background-color: transparent;
+ height: 992px;
}
body {
diff --git a/src/styles/style.css b/src/styles/style.css
index e656a4e..d947765 100755
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -1,10 +1,10 @@
@font-face {
font-family: 'icomoon';
- src: url('fonts/icomoon.eot?6brftk');
- src: url('fonts/icomoon.eot?6brftk#iefix') format('embedded-opentype'),
- url('fonts/icomoon.ttf?6brftk') format('truetype'),
- url('fonts/icomoon.woff?6brftk') format('woff'),
- url('fonts/icomoon.svg?6brftk#icomoon') format('svg');
+ src: url('fonts/icomoon.eot?wt3pj6');
+ src: url('fonts/icomoon.eot?wt3pj6#iefix') format('embedded-opentype'),
+ url('fonts/icomoon.ttf?wt3pj6') format('truetype'),
+ url('fonts/icomoon.woff?wt3pj6') format('woff'),
+ url('fonts/icomoon.svg?wt3pj6#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
@@ -34,10 +34,10 @@
.icon-bluetooth:before {
content: "\e901";
}
-.icon-keyboard_arrow_down:before {
+.icon-arrow_down:before {
content: "\e907";
}
-.icon-keyboard_arrow_up:before {
+.icon-arrow_up:before {
content: "\e908";
}
.icon-computer:before {
@@ -46,6 +46,9 @@
.icon-phone:before {
content: "\e90b";
}
+.icon-arrow_back:before {
+ content: "\e90c";
+}
.icon-wifi:before {
content: "\e902";
}