page-headers

inventory-header   

  1. Settings
  2. ...
  3. Orders
  4. Customize Order

Order #123 Processing

Manage your team members and their account permissions here.

Copy
Edit
<!-- components/page-headers/generic-page-header.html --> <div class="generic-page-header inventory--header"> <div class="page-header__breadcrumb"> <ol class="page-header__breadcrumb__list"> <li class="page-header__breadcrumb__item"> <a class="breadcrumb__link text-sm gray-500" href="#">Settings</a> </li> <li class="page-header__breadcrumb__item"> <a class="breadcrumb__link text-sm gray-500" href="#">...</a> </li> <li class="page-header__breadcrumb__item"> <a class="breadcrumb__link text-sm gray-500" href="#">Orders</a> </li> <li class="page-header__breadcrumb__item"> <a class="breadcrumb__link text-sm primary-600 breadcrumb__link--active" href="#">Customize Order</a> </li> </ol> </div> <div class="generic-page-header__conatiner"> <div class="generic-page-header__caption"> <h2 class="text-xl gray-900"> <span class="caption__text"> Order #123 </span> <span class="badges"> Processing </span> </h2> <p class="text-md gray-500">Manage your team members and their account permissions here.</p> </div> <div class="generic-page-header__actions"> <div class="theme-dropdown dropdown"> <button class="base-btn secondary-gray-btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> <i class="icomoon-more-vertical"></i> </button> <div class="dropdown-menu" aria-labelledby="dropdownMenu1"> <ul class="list"> <li><a href="#">View profile</a></li> <li><a href="#">Settings</a></li> <li><a href="#">Keyboard shortcuts</a></li> <li role="separator" class="divider"></li> <li><a href="#">Company profile</a></li> <li><a href="#">Team</a></li> <li><a href="#">Invite colleagues</a></li> <li role="separator" class="divider"></li> <li><a href="#">Changelog</a></li> <li><a href="#">Slack Community</a></li> <li><a href="#">Support</a></li> <li><a href="#">API</a></li> <li role="separator" class="divider"></li> <li><a href="#">Log Out</a></li> </ul> </div> </div> <button class="base-btn"><i class="icon-plus"></i> Add Product</button> </div> </div> <div class="generic-page-header__links"> <ul class="list"> <li> <a href="#" class="text-md gray-700 active--link"> <i class="icomoon-home"></i> <span>Payment settings</span> </a> </li> <li> <a href="#" class="text-md gray-700 "> <i class="icomoon-home"></i> <span>Payment settings</span> <span class="badges badges-gray">1</span> </a> </li> </ul> <div class="mobile--links"> </div> </div> </div>
Copy
Copy
Edit
/* scss/page-headers/_inventory-header.scss */ .generic-page-header { padding: 14px 24px 0; @media (max-width: 991px) { padding: 16px 16px 0; } .page-header__breadcrumb{ margin-bottom: 2px; .page-header__breadcrumb__list{ list-style: none; padding: 0; margin-bottom: 0; .page-header__breadcrumb__item{ display: inline-block; margin-#{$end}: 5px; + .page-header__breadcrumb__item { &::before { content: '\e982'; font-family: 'icomoonapp' !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; vertical-align: middle; font-size: 16px; color: #D0D5DD; } } } } } .generic-page-header__conatiner{ display: flex; justify-content: space-between; align-items: center; .generic-page-header__caption{ h2{ display: flex; align-items: center; .badges{ font-size: 12px; padding: 1px 9px; } .caption__text{ margin-#{$end}: 8px; } } } .generic-page-header__actions{ display: flex; align-items: center; .dropdown{ margin-#{$end}: 12px; } } @media (max-width: 991px) { flex-direction: column; align-items: flex-start; .generic-page-header__caption{ margin-bottom: 16px; } .generic-page-header__actions{ width: 100%; margin-bottom: 16px; } } } .generic-page-header__links{ > ul{ li{ display: inline-block; a{ display: flex; align-items: center; padding-bottom: 7px; padding-#{$end}: 12px; padding-top: 9px; i{ color: #667085; margin-#{$end}: 10px; font-size: 20px; padding-#{$start}: 13px; } .badges { padding: 1px 7.75px; margin-#{$start}: 8px; } &.active--link{ color: $primary-900 !important; i{ color: $primary-900; } border-bottom: 2px solid $primary-900; .badges{ display: none; } } } } } @media (max-width: 991px) { .mobile--links{ .theme-dropdown{ width: 100%; .base-btn { width: 100%; justify-content: space-between; } } .list--mobile{ width: 100%; max-width: 100%; } } } } } .plato{ opacity: 1; }
Cancel