summaryrefslogtreecommitdiffstats
path: root/src/styles/main.scss
diff options
context:
space:
mode:
authorHumberto Alfonso Díaz <humberto.alfonso@asvito.es>2019-10-23 09:44:29 +0200
committerLorenzo Tilve <ltilve@igalia.com>2020-02-04 19:20:13 +0100
commit33702aea7ce42c8240e4bed7b424cc8ac4a33826 (patch)
tree6bba05249b6830fa6cdaea1bbd88971e8e027634 /src/styles/main.scss
parent00b8929291665238cbcd88676fe65f67900be1c3 (diff)
FUNCT Implement bluetooth screen
Diffstat (limited to 'src/styles/main.scss')
-rw-r--r--src/styles/main.scss90
1 files changed, 62 insertions, 28 deletions
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 518bdc2..6b917d1 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -53,9 +53,10 @@ body {
.page {
display: flex;
flex-direction: column;
- flex-wrap: wrap;
+ flex-wrap: nowrap;
justify-content: center;
height: 100%;
+ overflow: hidden;
&.hide {
display: none;
@@ -66,42 +67,75 @@ body {
margin: 0;
}
- .entry {
- height: 120px;
- line-height: 120px;
- border-bottom: 1px solid map-get($colors, grey);
+ .container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ justify-content: center;
+ flex-grow: 2;
- &:last-child {
- border-bottom: none2;
- }
+ .entry {
+ height: 120px;
+ line-height: 120px;
+ border-bottom: 1px solid map-get($colors, grey);
- .icon {
- width: 10%;
- position: relative;
- float: left;
- text-align: center;
- }
+ &:last-child {
+ border-bottom: none;
+ }
- .label {
- position: relative;
- float: left;
- text-align: left;
- width: 80%;
- }
+ .icon {
+ width: 10%;
+ position: relative;
+ float: left;
+ text-align: center;
+ }
- .control {
- width: 10%;
- position: relative;
- float: left;
- text-align: right;
- font-size: 5rem;
+ .label {
+ position: relative;
+ float: left;
+ text-align: left;
+ width: 75%;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
- .icon-toggle_on {
- color: map-get($colors, primary);
+ .control {
+ width: 15%;
+ position: relative;
+ float: left;
+ text-align: right;
+ font-size: 5rem;
+
+ & > * {
+ height: 120px;
+ line-height: 120px;
+ }
+
+ &.enabled {
+ .icon-toggle_on {
+ display: block;
+ color: map-get($colors, primary);
+ }
+
+ .icon-toggle_off {
+ display: none;
+ }
+ }
+
+ .icon-toggle_on {
+ display: none;
+ }
+
+ .icon-toggle_off {
+ display: block;
+ }
}
}
}
+
+
.confirm {
position: absolute;
bottom: 5%;