Merge remote-tracking branch 'openstreetmap/pull/1036'

[rails.git] / app / assets / stylesheets / common.scss

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index cf687653e1efa19bd18fd82ddf7ad20d4aec8055..b2b6057bee6951fbf81f3963dbecec6094d7e528 100644 (file)
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -173,6 +173,7 @@ small, aside {
 .icon.clipboard   { background-position: -160px 0; }
 .icon.link        { background-position: -180px 0; }
 .icon.close       { background-position: -200px 0; }
+.close-wrap:hover .icon.close,
 .icon.close:hover { background-position: -200px -20px; }
 .icon.check       { background-position: -220px 0; }
 .icon.note        { background-position: -240px 0; }
@@ -546,6 +547,13 @@ body.compact {
     background: #fff;
     font-size: 12px;
 
+    > div {
+      position: relative;
+      float: left;
+      clear: both;
+      width: 100%;
+    }
+
     h2 {
       padding: $lineheight $lineheight $lineheight/2;
     }
@@ -556,9 +564,24 @@ body.compact {
       font-size: 13px;
     }
 
+    .close-wrap {
+      cursor: pointer;
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 60px;
+      height: 60px;
+
+      .icon.close {
+        pointer-events: none;
+        position: absolute;
+        right: 20px;
+        top: 20px;
+      }
+    }
+
     .icon.close {
       float: right;
-      cursor: pointer;
     }
 
     p.error {
@@ -568,25 +591,26 @@ body.compact {
     }
   }
 
-  .welcome {
-    display: none;
-  }
-
   .overlay-sidebar #sidebar {
     position: absolute;
     z-index: 1000;
     height: auto;
-    border-bottom-right-radius: 5px;
     overflow: hidden;
+
+    #banner,
     .welcome {
       display: block;
     }
+
     #sidebar_content {
       display: none;
     }
   }
 
   .welcome {
+    display: none;
+    padding-bottom: 5px;
+
     p {
       padding: $lineheight/2 $lineheight $lineheight;
       font-size: 110%;
@@ -607,6 +631,15 @@ body.compact {
     }
   }
 
+  #banner {
+    display: none;
+
+    img {
+      display: block;
+      width: $sidebarWidth;
+    }
+  }
+
   #map {
     height: 100%;
     overflow: hidden;
@@ -1003,8 +1036,8 @@ div.direction {
   height: 20px;
   background-repeat: no-repeat;
 }
-@for $i from 1 through 18 {
-div.direction.i#{$i} { background-position: #{($i)*-20+20}px 0px; }
+@for $i from 0 through 25 {
+div.direction.i#{$i} { background-position: #{($i)*-20}px 0px; }
 }
 
 p#routing_summary {