fixed breadcrumb

deskpro · Aug 10, 2019 · 6ed5002 · 6ed5002
1 parent 9231950
commit 6ed5002
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 7 deletions.
diff --git a/packages/portal-style/src/components/_alert.scss b/packages/portal-style/src/components/_alert.scss
@@ -2,16 +2,15 @@
   border-width: 2px;
 
   &.alert-icon {
-    padding-left: 60px;
+    padding-left: 70px;
 
     .dp-po-icon {
-      margin: 0 10px 0 0;
       display: inline-flex;
       background: #fff;
       border: 1px solid;
       position: absolute;
       height: calc(100% + 4px);
-      width: 50px;
+      width: 60px;
       text-align: center;
       left: -2px;
       top: -2px;

diff --git a/packages/portal-style/src/components/_breadcrumbs.scss b/packages/portal-style/src/components/_breadcrumbs.scss
@@ -3,8 +3,6 @@
 }
 
 .breadcrumb {
-  margin-left: -7px;
-
   &-item {
     color: $breadcrumb-inactive-color;
     font-weight: bold;
@@ -48,4 +46,24 @@
       color: $brand-primary;
     }
   }
+
+  &-image {
+    position: relative;
+
+    img {
+      max-width: 20px;
+      margin-right: 10px;
+    }
+
+    &:after {
+      width: 2px;
+      height: 34px;
+      content: '';
+      background: $grey-light;
+      right: -1px;
+      top: -4px;
+      display: block;
+      position: absolute;
+    }
+  }
 }
diff --git a/packages/portal-style/src/variables/_colors.scss b/packages/portal-style/src/variables/_colors.scss
@@ -59,3 +59,5 @@ $rose-grad: linear-gradient(270deg, #FF4C85 0.99%, #F8497F 21.34%, #E5416D 50.57
 
 $facebook: #3C5A97;
 $linkedin: #0077B7;
+$twitter: #1DA1F2;
+$whatsapp: #25d366;
diff --git a/packages/portal-style/website/demos/_partials/_breadcrumbs.ejs b/packages/portal-style/website/demos/_partials/_breadcrumbs.ejs
@@ -1,6 +1,9 @@
 <div class="dp-po">
   <nav class="breadcrumb-outer" aria-label="breadcrumb">
-    <div class="container">
+    <div class="container d-flex align-items-center">
+      <div class="breadcrumb-image">
+        <img src="/portal-components/portal-style/static/img/brand/logo.jpg" />
+      </div>
       <ol class="breadcrumb">
         <li class="breadcrumb-item"><a href="#">Support Centre</a></li>
         <li class="breadcrumb-item"><a href="#">Super Parent</a></li>

diff --git a/packages/portal-style/website/demos/knowledgebase-article.ejs b/packages/portal-style/website/demos/knowledgebase-article.ejs
@@ -13,7 +13,7 @@
 
             <div class="dp-po-section">
               <div class="dp-po-title">
-                <i class="dp-po-icon fad fa-books"></i>
+                <i class="dp-po-icon fad fa-file-invoice"></i>
                 <h2 class="dp-po-title-text">Deskpro for IT teams</h2>
               </div>
 

diff --git a/packages/portal-style/website/static/img/brand/logo.jpg b/packages/portal-style/website/static/img/brand/logo.jpg