@wizishop/angular-components 0.0.155 → 0.0.156

package/angular-components.scss

@@ -111,6 +111,7 @@ $wac-color-success-popup-alert: #6DCC95!default;
 $wac-background-indication: #EDEFF2!default;
 
 $wac-grey: #F5F8FA!default;
+$wac-round-breadcrumbs: #DEE2ED!default;
 $wac-breadcrumbs-color: #647391!default;
 $wac-subtitle-color: #7A87A1!default;
 .zindexToggle {
@@ -3881,8 +3882,22 @@ span.wac-tooltip {
     justify-content: center;
     position: relative;
     padding: 10px;
-    &:not(.valid) {
-      cursor: pointer;
+    cursor: pointer;
+    &:before {
+      content: '';
+      display: block;
+      position: absolute;
+      bottom: -5px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: calc(100% - 5px);
+      height: 3px;
+      background-color: $wac-round-breadcrumbs;
+    }
+    &.current, &.valid {
+      &:before {
+        background-color: $wac-wizishop-blue;
+      }
     }
     @include media('<desktop') {
       width: auto;
@@ -3894,24 +3909,24 @@ span.wac-tooltip {
       }
     }
     .round {
-      min-width: 40px;
-      height: 40px;
-      border-radius: 40px;
+      min-width: 30px;
+      height: 30px;
+      border-radius: 30px;
       display: flex;
       justify-content: center;
       align-items: center;
-      border: 2px solid $wac-grey;
-      background-color: $wac-grey;
+      border: 2px solid $wac-round-breadcrumbs;
+      background-color: $wac-round-breadcrumbs;
       transition: .3s ease;
       margin: 0 15px 0 0;
       > span {
-        font-size: rem(16);
-        font-weight: 700;
-        color: $wac-breadcrumbs-color;
+        font-size: rem(12);
+        font-weight: 500;
+        color: $wac-second-color;
         line-height: 1;
       }
       > i {
-        font-size: rem(18);
+        font-size: rem(14);
         color: $wac-wizishop-blue;
       }
       &.valid {
@@ -3928,29 +3943,15 @@ span.wac-tooltip {
       }
     }
     .name {
-      font-size: rem(16);
-      font-weight: 700;
-      color: $wac-breadcrumbs-color;
+      font-size: rem(14);
+      font-weight: 500;
+      color: $wac-second-color;
       line-height: 1;
       transition: .3s ease;
       &.valid, &.current {
         color: $wac-wizishop-blue;
       }
     }
-    > i {
-      position: absolute;
-      top: 50%;
-      right: 0;
-      transform: translateY(-50%);
-      font-size: rem(18);
-      color: $wac-breadcrumbs-color;
-      line-height: 1;
-    }
-    &:last-child {
-      > i {
-        display: none;
-      }
-    }
     &:hover:not(.valid), &:focus:not(.valid) {
       .round {
         background-color: $wac-wizishop-blue;
@@ -3959,6 +3960,9 @@ span.wac-tooltip {
           color: $wac-white;
         }
       }
+      .name {
+        color: $wac-wizishop-blue;
+      }
     }
   }
 }

package/bundles/wizishop-angular-components.umd.js

@@ -4228,7 +4228,7 @@
     BreadcrumbsComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'wac-breadcrumbs',
-                    template: "<div class=\"wac-breadcrumbs\">\n  <div class=\"wac-breadcrumbs__wrapper\">\n    <div class=\"wac-breadcrumbs__item\" *ngFor=\"let b of breadcrumbs; let i = index;\" [ngClass]=\"{'valid': b.valid, 'current': b['current']}\" (click)=\"valueChanged(i)\">\n      <div class=\"round\" [ngClass]=\"{'valid': b.valid, 'current': b['current']}\"><span *ngIf=\"!b.valid\"><span *ngIf=\"i < 9\">0</span>{{ i + 1 }}</span><i class=\"fas fa-check\" *ngIf=\"b.valid\"></i></div>\n      <div class=\"name\" [ngClass]=\"{'valid': b.valid}\">{{ b.name }}</div>\n      <i class=\"fas fa-chevron-right\"></i>\n    </div>\n  </div>\n</div>\n"
+                    template: "<div class=\"wac-breadcrumbs\">\n  <div class=\"wac-breadcrumbs__wrapper\">\n    <div class=\"wac-breadcrumbs__item\" *ngFor=\"let b of breadcrumbs; let i = index;\" [ngClass]=\"{'valid': b.valid, 'current': b['current']}\" (click)=\"valueChanged(i)\">\n      <div class=\"round\" [ngClass]=\"{'valid': b.valid, 'current': b['current']}\"><span *ngIf=\"!b.valid\"><span *ngIf=\"i < 9\">0</span>{{ i + 1 }}</span><i class=\"fas fa-check\" *ngIf=\"b.valid\"></i></div>\n      <div class=\"name\" [ngClass]=\"{'valid': b.valid, 'current': b['current']}\">{{ b.name }}</div>\n    </div>\n  </div>\n</div>\n"
                 },] }
     ];
     BreadcrumbsComponent.ctorParameters = function () { return []; };