feat: include logo images via CSS to configure them via theme styling (…

…#49, #64) - made html structure of the 3 different headers similar for consistent logo styling closes #49
intershop · Jan 17, 2020 · a5f49fb · a5f49fb
1 parent fb62ebb
commit a5f49fb
Show file tree

Hide file tree

Showing 11 changed files with 57 additions and 57 deletions.
diff --git a/src/app/shell/header/header-checkout/header-checkout.component.html b/src/app/shell/header/header-checkout/header-checkout.component.html
@@ -1,23 +1,15 @@
-<div class="top-header header-checkout">
-  <div class="row">
-    <div class="container">
-      <div class="header-utility col-3 col-md-12">
-        <ul class="user-links">
-          <li><ish-login-status [logoutOnly]="true"></ish-login-status></li>
-        </ul>
-      </div>
-      <div class="mid-header col-9 col-md-12">
-        <div class="logo-wrapper d-md-none">
-          <a rel="home" routerLink="/home" class="mobile-logo" data-testing-id="link-home">
-            <img src="assets/img/logo_mobile.png" alt="Logo" width="41" height="41" />
-          </a>
-        </div>
-        <div class="logo-wrapper d-none d-md-block">
-          <a rel="home" routerLink="/home" data-testing-id="link-home">
-            <img src="assets/img/logo.png" alt="Logo" />
-          </a>
-        </div>
-      </div>
+<div class="header header-checkout container">
+  <div class="header-utility col-3 col-md-12">
+    <ul class="user-links">
+      <li><ish-login-status [logoutOnly]="true"></ish-login-status></li>
+    </ul>
+  </div>
+  <div class="mid-header col-9 col-md-12">
+    <div class="logo-wrapper d-md-none">
+      <a rel="home" routerLink="/home" class="mobile-logo" data-testing-id="link-home"></a>
+    </div>
+    <div class="logo-wrapper d-none d-md-block">
+      <a rel="home" routerLink="/home" class="logo" data-testing-id="link-home"></a>
     </div>
   </div>
 </div>
diff --git a/src/app/shell/header/header-default/header-default.component.html b/src/app/shell/header/header-default/header-default.component.html
@@ -63,17 +63,14 @@
       routerLink="/home"
       class="logo"
       data-testing-id="header-home-link-desktop"
-    >
-      <img src="assets/img/logo.png" alt="Logo" />
-    </a>
+    ></a>
     <a
       *ngIf="showMobileLogoLink"
       rel="home"
       routerLink="/home"
       class="mobile-logo"
       data-testing-id="header-home-link-mobile"
-      ><img src="assets/img/logo_mobile.png" alt="Logo" width="41" height="41"
-    /></a>
+    ></a>
   </div>
 
   <button class="navbar-toggler" type="button" (click)="toggle('navbar')">

diff --git a/src/app/shell/header/header-simple/header-simple.component.html b/src/app/shell/header/header-simple/header-simple.component.html
@@ -1,19 +1,10 @@
-<div class="top-header">
-  <nav class="container">
-    <div class="row">
-      <a rel="home" routerLink="/home" class="d-md-none mobile-logo">
-        <img src="assets/img/logo_mobile.png" alt="Logo" width="41" height="41" />
-      </a>
+<div class="header header-simple container">
+  <div class="mid-header">
+    <div class="logo-wrapper d-none d-md-block">
+      <a rel="home" routerLink="/home" class="logo" data-testing-id="link-home"></a>
     </div>
-  </nav>
-</div>
-
-<div class="mid-header">
-  <div class="container">
-    <div class="row">
-      <div class="col-md-3 logo-wrapper d-none d-md-block">
-        <a rel="home" routerLink="/home"> <img src="assets/img/logo.png" alt="Logo" /> </a>
-      </div>
+    <div class="logo-wrapper d-md-none">
+      <a rel="home" routerLink="/home" class="mobile-logo" data-testing-id="link-home"></a>
     </div>
   </div>
 </div>
diff --git a/src/assets/img/themes/blue/logo.png b/src/assets/img/themes/blue/logo.png
diff --git a/src/assets/img/themes/blue/logo_mobile.png b/src/assets/img/themes/blue/logo_mobile.png
diff --git a/src/styles/components/header/header-sticky.scss b/src/styles/components/header/header-sticky.scss
@@ -39,7 +39,7 @@
         padding-top: 0;
         padding-bottom: 0;
 
-        .logo img {
+        .logo {
           height: 25px;
           padding-right: $space-default * 2;
         }

diff --git a/src/styles/components/header/header.scss b/src/styles/components/header/header.scss
@@ -19,7 +19,6 @@ header {
   }
 
   .logo-wrapper {
-    max-width: 25%;
     padding-top: ($space-default * 2);
     padding-bottom: 20px;
 
@@ -165,10 +164,24 @@ header {
   }
 }
 
+.logo {
+  display: block;
+  width: $logo-width;
+  height: $logo-height;
+  background: $logo left no-repeat;
+  background-size: contain;
+}
+
 .mobile-logo {
-  padding: 0 $space-default * 2 0 $space-default;
+  display: block;
+  width: $logo-mobile-width;
+  height: $logo-mobile-height;
+  margin: 0 $space-default * 2 0 $space-default;
+  background: $logo-mobile left no-repeat;
+  background-size: $logo-mobile-width $logo-mobile-height;
 }
 
+header .header-simple,
 header .header-checkout {
   .header-utility {
     justify-content: flex-start;
@@ -190,7 +203,6 @@ header .header-checkout {
         height: $header-height-mobile;
         padding-top: 0;
         padding-bottom: 0;
-        padding-left: $space-default;
       }
 
       .mobile-logo {

diff --git a/src/styles/pages/errorpage/errorpage.scss b/src/styles/pages/errorpage/errorpage.scss
@@ -9,10 +9,6 @@
       padding-top: $space-default * 2 + $top-header-height;
       padding-bottom: 20px;
     }
-
-    .mobile-logo {
-      padding: 5px;
-    }
   }
 
   .wrapper {

diff --git a/src/styles/themes/blue/style.scss b/src/styles/themes/blue/style.scss
@@ -11,11 +11,3 @@
 @import '../../main';
 
 // customizations
-
-.logo {
-  background-image: url('/assets/img/logo_blue.png');
-}
-
-.mobile-logo {
-  background-image: url('/assets/img/logo_mobile_blue.png');
-}
diff --git a/src/styles/themes/blue/variables.scss b/src/styles/themes/blue/variables.scss
@@ -6,6 +6,16 @@
 //
 ///////////////////////////////////////////////////////////////////////////////
 
+//
+// LOGOS
+
+$logo: url('/assets/img/themes/blue/logo.png');
+$logo-width: 114px;
+$logo-height: 40px;
+$logo-mobile: url('/assets/img/themes/blue/logo_mobile.png');
+$logo-mobile-width: 41px;
+$logo-mobile-height: 41px;
+
 // General spaces
 $space-default: 15px;
 
@@ -28,7 +38,7 @@ $font-size-corporate: 0.875rem; // 14px is the bootstrap 3 default font size (1r
 //
 //CORPORATE DESIGN COLORS
 
-$CORPORATE-PRIMARY: #00abea; // BLUE
+$CORPORATE-PRIMARY: #688dc3; // BLUE
 $CORPORATE-SECONDARY: darken($CORPORATE-PRIMARY, 10%);
 
 //

diff --git a/src/styles/themes/default/variables.scss b/src/styles/themes/default/variables.scss
@@ -6,6 +6,16 @@
 //
 ///////////////////////////////////////////////////////////////////////////////
 
+//
+// LOGOS
+
+$logo: url('/assets/img/logo.png');
+$logo-width: 114px;
+$logo-height: 40px;
+$logo-mobile: url('/assets/img/logo_mobile.png');
+$logo-mobile-width: 41px;
+$logo-mobile-height: 41px;
+
 // General spaces
 $space-default: 15px;