style(demo): tweak styling of demo

acaprojects · Feb 13, 2020 · f9263e6 · f9263e6
1 parent 9e69b17
commit f9263e6
Showing 1 changed file with 33 additions and 62 deletions.
diff --git a/projects/demo/src/app/app.component.scss b/projects/demo/src/app/app.component.scss
@@ -29,86 +29,57 @@ body {
     font-family: $main-font;
 }
 
-@include respond-to(not-mobile) {
-    .mobile-only,
-    .mobile {
-        display: none !important;
-    }
-}
-
-@include respond-to(not-tablet) {
-    .tablet-only,
-    .tablet {
-        display: none !important;
-    }
-}
-
-@include respond-to(not-desktop) {
-    .desktop-only,
-    .desktop {
-        display: none !important;
-    }
-}
-
-@include respond-to(desktop) {
-    .not-desktop {
-        display: none !important;
-    }
-}
-
-@include respond-to(tablet) {
-    .not-tablet,
-    .desktop-only {
-        display: none !important;
-    }
-}
+.map-display {
+    position: absolute;
+    top: 1em;
+    left: 1em;
+    right: 1em;
+    bottom: 5em;
+    background-color: #fff;
+    border-radius: 4px;
+    box-shadow: 0 1px 3px 0 rgba(#000, .2), 0 1px 1px 0 rgba(#000, .14), 0 2px 1px -1px rgba(#000, .12);
+    overflow: hidden;
 
-@include respond-to(mobile) {
-    .not-mobile,
-    .desktop-only {
-        display: none !important;
-    }
 }
 
-.overlay-backdrop {
-    background-color: rgba(#000, .54);
+.display {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    padding: .25em;
+    z-index: 999;
 }
 
-.box {
+.item {
     background-color: #fff;
-    padding: 1em;
+    border: 1px solid #ccc;
     border-radius: 4px;
-    box-shadow: 0 1px 3px 0 rgba(#000, .2), 0 1px 1px 0 rgba(#000, .14), 0 2px 1px -1px rgba(#000, .12);
+    margin: .25em;
+    padding: .5em;
+    font-size: .8em;
 }
 
-.test {
+.controls {
+    position: absolute;
     display: flex;
     align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    margin: 1em auto;
-    width: 24em;
-    min-height: 10em;
-    padding: 1em;
+    bottom: 1em;
+    left: 1em;
+    right: 1em;
+    height: 2em;
+    padding: .5em;
     background-color: #fff;
     border-radius: 4px;
     box-shadow: 0 1px 3px 0 rgba(#000, .2), 0 1px 1px 0 rgba(#000, .14), 0 2px 1px -1px rgba(#000, .12);
-
-}
-
-.test > .map {
-    width: 24em;
-    height: 24em;
-    margin-top: .5em;
-    border: 1px solid #f0f0f0;
 }
 
 button {
-    font-size: 1em;
-    padding: .5em 1em;
+    font-size: .8em;
+    padding: .75rem 1rem;
     border-radius: 4px;
-    min-width: 12em;
+    min-width: 8rem;
     background-color: #1E88E5;
     color: #fff;
-    margin: .25em;
+    margin: .25rem;
+    flex: 1
 }