Merge "Bug 1726655: Allow more space for logo in IE11"

htdocs/theme/raw/sass/layout/_footer.scss

@@ -40,6 +40,11 @@
     }
 }
 
-.mahara-footer-logo {
+.mahara-logo a {
     height: 37px;
+    display: inline-block;
+    .mahara-footer-logo {
+        height: 100%;
+        max-width: none;
+    }
 }

htdocs/theme/raw/sass/layout/_header.scss

@@ -11,32 +11,37 @@
     .loading-box {
         float: left;
     }
+
+    $screen-width-small-logo: 415px;
+
     .logo {
-        padding: 6px 0;
-        margin-right: 15px;
+        margin: 6px 15px 6px 0;
+        display: inline-block;
         // logo restricted to 45px - custom work required for a larger version
-        img {
-            height: 45px;
+        height: 45px;
+
+        // When small logo is uploaded 'change-to-small' class is added.
+        &.change-to-small {
+          display: none;
+          @media (min-width: $screen-width-small-logo) {
+              display: inline-block;
+          }
         }
     }
 
-    .logo.change-to-small {
-        img {
-            @media (max-width: 415px) {
-              display: none;
-            }
+    .logoxs {
+        margin: 6px 15px 6px 0;
+        height: 48px;
+        @media (min-width: $screen-width-small-logo) {
+          display: none;
         }
     }
 
+    .logo,
     .logoxs {
-        padding: 6px 0;
-        margin-right: 15px;
         img {
-            display: none;
-            @media (max-width: 415px) {
-              display: inherit;
-              height: 48px;
-            }
+            height: 100%;
+            max-width: none;
         }
     }
 

htdocs/theme/raw_old/sass/layout/_footer.scss

@@ -27,6 +27,11 @@
     }
 }
 
-.mahara-footer-logo {
+.mahara-logo a {
     height: 37px;
+    display: inline-block;
+    .mahara-footer-logo {
+        height: 100%;
+        max-width: none;
+    }
 }

htdocs/theme/raw_old/sass/layout/_header.scss

@@ -11,31 +11,37 @@
     .loading-box {
         float: left;
     }
+
+    $screen-width-small-logo: 415px;
+
     .logo {
-        margin-right: 15px;
+        margin: 6px 15px 6px 0;
+        display: inline-block;
         // logo restricted to 45px - custom work required for a larger version
-        img {
-            height: 45px;
+        height: 45px;
+
+        // When small logo is uploaded 'change-to-small' class is added.
+        &.change-to-small {
+          display: none;
+          @media (min-width: $screen-width-small-logo) {
+              display: inline-block;
+          }
         }
     }
 
-    .logo.change-to-small {
-        img {
-            @media (max-width: 415px) {
-              display: none;
-            }
+    .logoxs {
+        margin: 6px 15px 6px 0;
+        height: 48px;
+        @media (min-width: $screen-width-small-logo) {
+          display: none;
         }
     }
 
+    .logo,
     .logoxs {
-        padding: 6px 0;
-        margin-right: 15px;
         img {
-            display: none;
-            @media (max-width: 415px) {
-              display: inherit;
-              height: 48px;
-            }
+            height: 100%;
+            max-width: none;
         }
     }