Merge pull request #4296 from AntonKhorev/header-flex

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

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 6236d3c3d04e60b54568ceb64b9acef25be1c958..a4b126b9479477aca391fce9bc5d5a019fe530d1 100644 (file)
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -81,7 +81,9 @@ time[title] {
 
 #menu-icon {
   display: none;
-  float: right;
+  position: absolute;
+  top: 0;
+  right: 0;
   background: image-url("menu-icon.png") no-repeat;
   background-size: 30px 30px;
   width: 30px;
@@ -105,10 +107,6 @@ header {
     padding: $lineheight * 0.5;
   }
 
-  h1, nav.primary {
-    float: left;
-  }
-
   img.logo {
     margin-top: -2px;
   }
@@ -122,8 +120,11 @@ header {
   .btn {
     font-size: 14px;
   }
-}
 
+  nav.primary {
+    margin-right: auto;
+  }
+}
 
 nav.primary {
   & > .btn-group .btn-outline-primary {
@@ -158,9 +159,6 @@ nav.primary {
 }
 
 nav.secondary {
-  position: absolute;
-  right: 0;
-
   .nav-link {
     padding: 0.2rem;
     color: $darkgrey;
@@ -202,15 +200,8 @@ body.small-nav {
     display: block;
   }
 
-  nav.primary,
-  nav.secondary {
-    float: none !important;
-    position: relative;
-    display: block;
-    clear: both;
-  }
-
   header {
+    flex-direction: column;
     height: auto;
     min-height: $headerHeight;
     background: #fff;
@@ -231,6 +222,7 @@ body.small-nav {
   }
 
   nav.primary {
+    margin-right: 0;
     padding: 0;
 
     ul, li {
@@ -943,10 +935,9 @@ img.user_thumbnail {
 }
 
 img.user_thumbnail_tiny {
-  width: auto;
-  height: auto;
-  max-width: 25px;
-  max-height: 25px;
+  width: 25px;
+  height: 25px;
+  object-fit: contain;
 }
 
 /* General styles for action lists / subnavs */