separate breadcrumbs & blade-static-flat styles

Author: goldenmaya

src/VirtoCommerce.Platform.Web/wwwroot/css/themes/main/sass/main.sass

@@ -6,6 +6,18 @@
 @import "includes/_gfonts.sass"
 @import "includes/_reset.sass"
 
+@import "modules/_vc-alert.sass"
+@import "modules/_vc-button.sass"
+@import "modules/_vc-button-social.sass"
+@import "modules/_vc-checkbox.sass"
+@import "modules/_vc-divider.sass"
+@import "modules/_vc-input.sass"
+@import "modules/_vc-link.sass"
+@import "modules/_vc-loader.sass"
+@import "modules/_vc-gridster.sass"
+@import "modules/_vc-badge.sass"
+@import "modules/_vc-breadcrumbs.sass"
+
 @import "modules/_window-modals.sass"
 @import "modules/_dialogs.sass"
 @import "modules/_base-modules.sass"
@@ -15,24 +27,14 @@
 @import "modules/_links-menu-button.sass"
 @import "modules/_links-menu.sass"
 
-@import "modules/_errors.sass"
-
-@import "modules/_lang-rtl.sass"
-
 @import "blade-constructor.scss"
 
-// Login components
-@import "modules/_vc-alert.sass"
-@import "modules/_vc-button.sass"
-@import "modules/_vc-button-social.sass"
-@import "modules/_vc-checkbox.sass"
-@import "modules/_vc-divider.sass"
-@import "modules/_vc-input.sass"
-@import "modules/_vc-link.sass"
-@import "modules/_vc-loader.sass"
 @import "modules/_login-form.sass"
 @import "modules/_forgot-password.sass"
 @import "modules/_auth.sass"
 @import "modules/_socials.sass"
-@import "modules/_vc-gridster.sass"
-@import "modules/_vc-badge.sass"
+@import "modules/_blade-static-flat.sass"
+
+@import "modules/_errors.sass"
+
+@import "modules/_lang-rtl.sass"

src/VirtoCommerce.Platform.Web/wwwroot/css/themes/main/sass/modules/_base-modules.sass

@@ -1041,39 +1041,33 @@ $names: "", ".double", ".triple", ".quadro"
 /* Breadcrumbs */
 .breadcrumbs
   .arrow-color
-    color: #87A3B5
+    color: #A1C0D4
+  padding: 15px 0
   .menu
     display: flex
-    gap: 6px
+    margin: 4px 0 -8px 0
+    vertical-align: top
     &.flex-row-wrap
       flex-flow: row wrap
-  .menu-item
-    display: flex
-    align-items: center
-    gap: 6px
-    &:before
-      content: none
-    &:after
-      content: "\f054"
-      font: normal normal normal 14px/1 FontAwesome
-      font-size: 10px
-      color: #87A3B5
-      text-rendering: auto
-      -webkit-font-smoothing: antialiased
-      -moz-osx-font-smoothing: grayscale
-    &:last-child
-      &:after
-        content: none
+  li.menu-item:not(:last-child),
+  li.menu-item:first-child
+    margin: 0 6px 8px 0
   .menu-link
-    max-width: 108px
+    padding: 4px 12px 4px 12px
+    border: 1px solid #A1C0D4
+    border-radius: 15px
+    background-color: white
+    max-width: 123px
+    display: block
     text-overflow: ellipsis
     overflow: hidden
-    color: #43B0E6
-    font-size: 12px
+    color: #43b0e6
+    font-size: 14px
     &:hover
       color: #52a2ca
     &.last-item
-      color: #465769
+      border: 1px solid #838d9a
+      color: #838d9a
 
 /* Tree */
 .tree
@@ -1730,30 +1724,28 @@ tags-input
       .menu-item
         > *:disabled
           cursor: not-allowed
-    .blade-t-container
-      position: relative
-      height: 50px
     .blade-t
-      box-sizing: border-box
-      position: absolute
-      display: flex
-      align-items: center
-      width: 100%
-      height: 100%
-      padding: 8px 16px
       color: $whiteColor
+      left: 0
+      margin: 8px 15px
+      min-height: 34px
+      padding: 0 0 0 45px
+      position: absolute
+      right: 0
       .blade-t_head
-        margin: 0 6px 0 0
         font-size: 18px
+        margin: 4px 0 0
     .blade-t_ico
-      position: relative
-      flex: none
-      margin: 0 12px 0 0
-      width: 30px
-      height: 30px
-      font-size: 30px
+      font-size: 34px
+      line-height: 34px
+      height: 34px
+      left: 0
+      position: absolute
+      top: 0
+      width: 40px
     .blade-t_head,
     .blade-t_subhead
+      font-weight: 300
       overflow: hidden
       text-overflow: ellipsis
       white-space: nowrap
@@ -1863,18 +1855,25 @@ tags-input
     position: relative
     transition: height .3s ease
     .blade-static
-      box-sizing: border-box
-      padding: 16px
       background: $lightBg
       border-color: $baseBrd
       border-style: solid
       border-width: 0 0 2px
-      & > *:not(:last-child)
-        margin: 0 0 14px
+      box-sizing: border-box
+      height: 70px
     .blade-static.__quote
       height: 230px
+    .blade-static.__collapsed
+      .breadcrumbs
+        padding: 13px 20px
+    .blade-static.__expanded
+      .breadcrumbs
+        margin: 0 0 -15px
+        padding: 14px 15px
     .blade-static .form-group,
     .blade-static .form
+      margin: 0 20px
+      padding: 17px 0
       position: relative
     .blade-static .form-group:only-child
       box-sizing: border-box
@@ -1925,6 +1924,8 @@ tags-input
       text-align: left
     .blade-static .btn + .btn
       margin: 0 0 0 15px
+    .blade-static.__expanded
+      height: 114px
     .blade-static.__collapsed
       height: 60px
     .blade-static.__bottom

src/VirtoCommerce.Platform.Web/wwwroot/css/themes/main/sass/modules/_blade-static-flat.sass

@@ -0,0 +1,6 @@
+.blade-static-flat
+  display: flex
+  flex-direction: column
+  gap: 12px
+  padding: 16px
+  background: #fbfdfe

src/VirtoCommerce.Platform.Web/wwwroot/css/themes/main/sass/modules/_vc-breadcrumbs.sass

@@ -0,0 +1,45 @@
+.vc-breadcrumbs
+  $last: ''
+
+  &__list
+    display: flex
+    gap: 6px
+    flex-flow: row wrap
+
+  &__item
+    display: flex
+    align-items: center
+    gap: 6px
+    padding: 0
+    text-indent: 0
+
+    &:before
+      content: none
+
+    &:last-child
+      $last: &
+
+  &__link
+    overflow: hidden
+    max-width: 108px
+    color: #43B0E6
+    font-size: 12px
+    text-overflow: ellipsis
+
+    &:hover
+      color: #52a2ca
+
+    #{$last} &
+      color: #465769
+
+  &__arrow
+    font-size: 10px
+    color: #87A3B5
+
+    #{$last} &
+      display: none
+
+  // TEMP workaround
+  // delete after blade-static has been everywhere replaced with blade-static-flat
+  .blade-static &
+    padding: 14px 20px 0

src/VirtoCommerce.Platform.Web/wwwroot/js/app/navigation/breadcrumbs/breadcrumbs.js

@@ -15,7 +15,7 @@ angular.module('platformWebApp')
                     var originalWidth = availableWidth;
 
                     $timeout(() => {
-                        element.find(".menu.__inline").css('max-width', availableWidth);
+                        element.find('[data="breadcrumbs"]').css('max-width', availableWidth);
                     });
 
                     scope.breadcrumbs = [];
@@ -39,7 +39,7 @@ angular.module('platformWebApp')
 
                         recalculateItemVisibility(scope.breadcrumbs);
 
-                        element.find(".menu.__inline").css('max-width', availableWidth);
+                        element.find('[data="breadcrumbs"]').css('max-width', availableWidth);
                     });
 
                     scope.$watchCollection('breadcrumbs', (newItems) => {

src/VirtoCommerce.Platform.Web/wwwroot/js/app/navigation/breadcrumbs/breadcrumbs.tpl.html

@@ -1,13 +1,46 @@
-<div class="breadcrumbs">
-    <ul class="menu __inline" ng-class="{'flex-row-wrap': expanded}">
-        <li class="menu-item" ng-if="breadcrumbs.length">
-            <a class="menu-link" ng-class="{'last-item': breadcrumbs.length == 1}" ng-click='innerNavigate(breadcrumbs[0])' href="" title="{{breadcrumbs[0].name}}">{{breadcrumbs[0].name}}</a>
-        </li>
-        <li class="menu-item" ng-if="canExpand()">
-            <a class="menu-link" ng-click='expand()' href="" title="Expand">...</a>
-        </li>
-        <li class="menu-item" ng-repeat="breadcrumb in breadcrumbs | limitTo:999:1" ng-if="breadcrumb.isVisible">
-            <a class="menu-link" ng-class="{'last-item': $last}" ng-click='innerNavigate(breadcrumb)' href="" title="{{breadcrumb.name}}">{{breadcrumb.name}}</a>
-        </li>
-    </ul>
+<div class="vc-breadcrumbs">
+  <ul class="vc-breadcrumbs__list" ng-if="breadcrumbs.length" data="breadcrumbs">
+    <li class="vc-breadcrumbs__item">
+      <a
+        class="vc-breadcrumbs__link"
+        ng-click="innerNavigate(breadcrumbs[0])"
+        href=""
+        title="{{breadcrumbs[0].name}}"
+      >
+        {{breadcrumbs[0].name}}
+      </a>
+
+      <i class="vc-breadcrumbs__arrow fas fa-chevron-right"></i>
+    </li>
+
+    <li class="vc-breadcrumbs__item" ng-if="canExpand()">
+      <a
+        class="vc-breadcrumbs__link"
+        ng-click="expand()"
+        href=""
+        title="Expand"
+      >
+        ...
+      </a>
+
+      <i class="vc-breadcrumbs__arrow fas fa-chevron-right"></i>
+    </li>
+
+    <li
+      class="vc-breadcrumbs__item"
+      ng-repeat="breadcrumb in breadcrumbs | limitTo:999:1"
+      ng-if="breadcrumb.isVisible"
+    >
+      <a
+        class="vc-breadcrumbs__link"
+        ng-click="innerNavigate(breadcrumb)"
+        href=""
+        title="{{breadcrumb.name}}"
+      >
+        {{breadcrumb.name}}
+      </a>
+
+      <i class="vc-breadcrumbs__arrow fas fa-chevron-right"></i>
+    </li>
+  </ul>
 </div>

src/VirtoCommerce.Platform.Web/wwwroot/js/app/security/blades/account-list.tpl.html

@@ -1,4 +1,4 @@
-<div class="blade-static">
+<div class="blade-static-flat">
   <div class="vc-input vc-input--sm vc-input--clearable">
     <div class="vc-input__container">
       <input class="vc-input__field"