Merge pull request #102 from sebgroup/feature/breadcrumbs

Feature/breadcrumbs
seb-oss · Feb 25, 2019 · cc88d36 · cc88d36
2 parents ee56bec + e8cca85
commit cc88d36
Show file tree

Hide file tree

Showing 31 changed files with 193 additions and 149 deletions.
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -455,9 +455,16 @@ $list-group-disabled-bg:            $gray-200 !default;
 // Figures
 
 // Breadcrumbs
-
-$breadcrumb-bg:                     none !default;
+$breadcrumb-padding-y:              .75rem !default;
+$breadcrumb-padding-x:              0 !default;
+$breadcrumb-bg:                     transparent !default;
+$breadcrumb-divider-color:          $black !default;
+$breadcrumb-active-color:           $black !default;
+$breadcrumb-active-font-weight:     $font-weight-medium !default; // SEB Specific
 $breadcrumb-border-radius:          0 !default;
+$breadcrumb-divider:                str-replace(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$breadcrumb-divider-color}' viewBox='0 0 256 512'%3E%3Cpath d='M17.525 36.465l-7.071 7.07c-4.686 4.686-4.686 12.284 0 16.971L205.947 256 10.454 451.494c-4.686 4.686-4.686 12.284 0 16.971l7.071 7.07c4.686 4.686 12.284 4.686 16.97 0l211.051-211.05c4.686-4.686 4.686-12.284 0-16.971L34.495 36.465c-4.686-4.687-12.284-4.687-16.97 0z'/%3E%3C/svg%3E"), "#", "%23") !default; // SEB specific
+$breadcrumb-back-icon:              str-replace(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$breadcrumb-divider-color}' viewBox='0 0 256 512'%3E%3Cpath d='M238.475 475.535l7.071-7.07c4.686-4.686 4.686-12.284 0-16.971L50.053 256 245.546 60.506c4.686-4.686 4.686-12.284 0-16.971l-7.071-7.07c-4.686-4.686-12.284-4.686-16.97 0L10.454 247.515c-4.686 4.686-4.686 12.284 0 16.971l211.051 211.05c4.686 4.686 12.284 4.686 16.97-.001z'/%3E%3C/svg%3E"), "#", "%23") !default; // SEB specific
+$breadcrumb-divider-width:          15px !default; // SEB Specific
 
 
 // Close

diff --git a/scss/styles/_breadcrumb.scss b/scss/styles/_breadcrumb.scss
@@ -1,4 +1,45 @@
 @import "../bootstrap-core/breadcrumb";
 .breadcrumb-item {
-  font-size: $font-size-sm;
+  &.active {
+    font-weight: $breadcrumb-active-font-weight;
+  }
+  + .breadcrumb-item::before {
+    width: $breadcrumb-divider-width;
+    vertical-align: middle;
+  }
+
 }
+
+
+@include media-breakpoint-down(xs) {
+  .breadcrumb {
+    padding:0;
+    margin-bottom: 0;
+  }
+  .breadcrumb-item {
+    display: none;
+
+    + .breadcrumb-item {
+      &::before {
+        display: none;
+      }
+
+      padding-left: 0;
+    }
+
+    &:nth-last-child(2) {
+      display: inline-block;
+      padding: $breadcrumb-padding-y 0;
+      margin-bottom: $breadcrumb-margin-bottom;
+
+      &::before {
+        display: inline-block;
+        padding-right: $breadcrumb-item-padding;
+        color: $breadcrumb-divider-color;
+        content: $breadcrumb-back-icon;
+        width: $breadcrumb-divider-width;
+        vertical-align: middle;
+      }
+    }
+  }
+}
diff --git a/scss/styles/_grid.scss b/scss/styles/_grid.scss
@@ -1,8 +1,10 @@
 @import "../bootstrap-core/grid";
 .container-content {
-  max-width: map-get($grid-breakpoints,'lg');
+  max-width: map-get($grid-breakpoints,'md');
   margin-right: auto;
   margin-left: auto;
+  padding-right: $grid-gutter-width / 2;
+  padding-left: $grid-gutter-width / 2;
 }
 
 @if ($enable-responsive-gutters) {

diff --git a/scss/third-parties/ng-bootstrap/mixins/_ngb-accordion.scss b/scss/third-parties/ng-bootstrap/mixins/_ngb-accordion.scss
@@ -36,7 +36,6 @@
         height: $accordion-size;
         margin-right: map-get($spacers, 2);
         cursor: pointer;
-        background: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%230092e1' d='M443.5 162.6l-7.1-7.1c-4.7-4.7-12.3-4.7-17 0L224 351 28.5 155.5c-4.7-4.7-12.3-4.7-17 0l-7.1 7.1c-4.7 4.7-4.7 12.3 0 17l211 211.1c4.7 4.7 12.3 4.7 17 0l211-211.1c4.8-4.7 4.8-12.3.1-17z'/%3E%3C/svg%3E");
         background: str-replace(url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='#{$dropdown-chevron-color}' d='M443.5 162.6l-7.1-7.1c-4.7-4.7-12.3-4.7-17 0L224 351 28.5 155.5c-4.7-4.7-12.3-4.7-17 0l-7.1 7.1c-4.7 4.7-4.7 12.3 0 17l211 211.1c4.7 4.7 12.3 4.7 17 0l211-211.1c4.8-4.7 4.8-12.3.1-17z'/%3E%3C/svg%3E"), "#", "%23");
         transform: rotateZ(0deg) translateY(2px);
         background-repeat: no-repeat;

diff --git a/scss/third-parties/ng-bootstrap/mixins/_ngb-datepicker.scss b/scss/third-parties/ng-bootstrap/mixins/_ngb-datepicker.scss
@@ -77,7 +77,8 @@
     @include media-breakpoint-down(xs) {
       &.dropdown-menu.show {
         @include add-transition('slideInUp');
-        position: fixed;
+        transform: none !important;
+        position: fixed !important;
         left: 0 !important;
         bottom: 0 !important;
         top: auto !important;
@@ -130,7 +131,7 @@
   @include media-breakpoint-down(xs) {
     .input-group.active > [ngbdatepicker] ~ .input-group-append::after {
       @include add-transition('fadeIn');
-      position: fixed;
+      position: fixed !important;
       top: 0;
       background: rgba($modal-backdrop-bg, $modal-backdrop-opacity);
       width: 100%;

diff --git a/scss/third-parties/ng-bootstrap/mixins/_ngb-dropdown.scss b/scss/third-parties/ng-bootstrap/mixins/_ngb-dropdown.scss
@@ -53,7 +53,8 @@
       }
 
       &.show {
-        position: fixed;
+        transform: none !important;
+        position: fixed !important;
         left: 0 !important;
         bottom: 0 !important;
         top: auto !important;
@@ -83,7 +84,7 @@
     justify-content: space-between;
     align-items: baseline;
     &::after {
-      border: none;
+      border: none !important;
       content: '';
       display: inline-block;
       height: $font-size-base;
@@ -123,6 +124,7 @@
         background-size: cover;
         background-position-y: 2px;
         background-repeat: no-repeat;
+        border: none;
       }
     }
   }

diff --git a/src/example/components/accordion/accordion.component.html b/src/example/components/accordion/accordion.component.html
@@ -1,8 +1,8 @@
-<a name="accordion"><h2 class="px-3 px-md-0 my-3">Accordion</h2></a>
-<div class="alert alert-info">
+<a name="accordion"><h2 class="my-3">Accordion</h2></a>
+<div class="alert alert-info mx-n3 mx-md-0">
   <strong>Framework needed!</strong> Please note that the example below is just a representation of how accordions look and the needed markup. In order to use accordion you need a framework to control when and how to toggle between active states. If you're using angular, please take a look at <a class="alert-link" href="https://ng-bootstrap.github.io/" target="_blank">ng-bootstrap</a> and their <a class="alert-link" href="https://ng-bootstrap.github.io/#/components/accordion" target="_blank">accordion component</a>.</div>
 
-<div class="card">
+<div class="card mx-n3 mx-md-0">
   <div class="card-body">
     <ngb-accordion [closeOthers]="true" activeIds="static-1">
       <ngb-panel id="static-1" title="Simple">

diff --git a/src/example/components/alerts/alerts.component.html b/src/example/components/alerts/alerts.component.html
@@ -1,5 +1,5 @@
-<a name="alerts"><h2 class="px-3 px-md-0 my-3">Alerts</h2></a>
-<div class="card mb-4">
+<a name="alerts"><h2 class="my-3">Alerts</h2></a>
+<div class="card mb-4 mx-n3 mx-md-0">
   <div class="card-body">
     <h5>When to use alerts?</h5>
     <p>Alerts are available for any length of text and can be used for more than traditional alerts. Ideally they should be used when we want content or information to stand out, be separated from the "normal" state, highlight a change, make the user aware of important information or simply to convey the response from an action.</p>
@@ -48,7 +48,7 @@ <h5>What context should I use?</h5>
     </table>
   </div>
 </div>
-<div class="card mb-4" id="alertOutlineExample">
+<div class="card mb-4 mx-n3 mx-md-0" id="alertOutlineExample">
   <h4 class="card-header">Alert outlined</h4>
   <div class="card-body">
     <p>The examples below use the <code>.alert-outline-*</code> class (replace * with context) for a more subtle message. The background is white to make it stick out when placed on grey backgrounds.</p>
@@ -73,7 +73,7 @@ <h4 class="card-header">Alert outlined</h4>
     <exemplify [selector]="'#alertOutlineExample .alert'"></exemplify>
   </div>
 </div>
-<div class="card mb-4" id="alertExample">
+<div class="card mb-4 mx-n3 mx-md-0" id="alertExample">
   <h4 class="card-header">Alert</h4>
   <div class="card-body">
     <p>The examples below use the traditional <code>.alert-*</code> class (replace * with context), for use cases where the message is really important and needs to stand out.</p>
@@ -98,7 +98,7 @@ <h4 class="card-header">Alert</h4>
     <exemplify [selector]="'#alertExample .alert'"></exemplify>
   </div>
 </div>
-<div class="card mb-4" id="alertIconExample">
+<div class="card mb-4 mx-n3 mx-md-0" id="alertIconExample">
   <h4 class="card-header">Alert with icons</h4>
   <div class="card-body">
     <p>The examples below use the traditional <code>.alert-*</code> class (replace * with context), together with <code>.alert-icon</code> to add extra emphasis by displaying an icon next to the message. Note that only <code>warning</code> and <code>danger</code> alerts have icons at the moment.</p>
@@ -123,7 +123,7 @@ <h4 class="card-header">Alert with icons</h4>
     <exemplify [selector]="'#alertIconExample .alert'"></exemplify>
   </div>
 </div>
-<div class="card mb-4" id="alertLinkExample">
+<div class="card mb-4 mx-n3 mx-md-0" id="alertLinkExample">
   <h4 class="card-header">Alert with link</h4>
   <div class="card-body">
     <p>Use the <code>.alert-link</code> utility class to quickly provide matching colored links within any alert.</p>
@@ -142,7 +142,7 @@ <h4 class="card-header">Alert with link</h4>
     <exemplify [selector]="'#alertLinkExample .alert'"></exemplify>
   </div>
 </div>
-<div class="card mb-4" id="alertAdvancedExample">
+<div class="card mb-4 mx-n3 mx-md-0" id="alertAdvancedExample">
   <h4 class="card-header">Alert that can be dismissed</h4>
   <div class="card-body bg-light">
     <p>A more complex alert that can be dismissed (please note that JavaScript or framework is needed to dismiss alert messages!).</p>

diff --git a/src/example/components/breadcrumbs/breadcrumbs.component.html b/src/example/components/breadcrumbs/breadcrumbs.component.html
@@ -1,7 +1,7 @@
-<a name="breadcrumbs"><h2 class="px-3 px-md-0 my-3">Breadcrumbs</h2></a>
-<div class="card mb-4">
+<a name="breadcrumbs"><h2 class="my-3">Breadcrumbs</h2></a>
+<div class="card mb-4 mx-n3 mx-md-0">
   <div class="card-body">
-    <p>Use breadcrumbs to leave a trace so that the users can find their way back when navigating the app.</p>
+    <p>Use breadcrumbs to leave a trace so that the users can find their way back when navigating the app. On mobile devices only the second to last item will be displayed together with a back icon, resize the browser to see it live.</p>
     <ol class="breadcrumb">
       <li class="breadcrumb-item active">Home</li>
     </ol>

diff --git a/src/example/components/button-group/button-group.component.html b/src/example/components/button-group/button-group.component.html
@@ -1,5 +1,5 @@
-<a name="buttonGroup"><h2 class="px-3 px-md-0 my-3">Button group</h2></a>
-<div class="card">
+<a name="buttonGroup"><h2 class="my-3">Button group</h2></a>
+<div class="card mx-n3 mx-md-0">
   <div class="card-body">
     <p>Group buttons together using a button group, check <a href="https://getbootstrap.com/docs/4.2/components/button-group/" target="_blank">bootstrap docs</a> for more info and examples. Note that javascript is required to use button groups like radio buttons or checkboxes.</p>
       <div class="btn-group" role="group" aria-label="Basic example">

diff --git a/src/example/components/buttons/buttons.component.html b/src/example/components/buttons/buttons.component.html
@@ -1,5 +1,5 @@
-<a name="buttons"><h2 class="px-3 px-md-0 my-3">Buttons</h2></a>
-<div class="card mb-4" id="buttonsExample">
+<a name="buttons"><h2 class="my-3">Buttons</h2></a>
+<div class="card mb-4 mx-n3 mx-md-0" id="buttonsExample">
   <h4 class="card-header">Main buttons</h4>
   <div class="card-body">
     <p>We have three main button classes that we use <code>.btn-primary</code>, <code>.btn-secondary</code> and <code>.btn-link</code>, use the latter to give buttons the same behavior as normal links (used for links placed outside text segments and paragraphs as well as actions similar to "go to" or regular links).</p>
@@ -16,7 +16,7 @@ <h4 class="card-header">Main buttons</h4>
     <exemplify [selector]="'#buttonsExample .btn:not(.disabled)'"></exemplify>
   </div>
 </div>
-<div class="card mb-4" id="buttonsLightExample">
+<div class="card mb-4 mx-n3 mx-md-0" id="buttonsLightExample">
   <h4 class="card-header">Buttons and colored backgrounds</h4>
   <div class="card-body">
     <p>The <code>.btn-light</code> class should only be used when buttons are placed on colored or dark backgrounds/images.</p>
@@ -42,7 +42,7 @@ <h4 class="card-header">Buttons and colored backgrounds</h4>
     </div>
   </div>
 </div>
-<div class="card mb-4" id="additionalButtonsExample">
+<div class="card mb-4 mx-n3 mx-md-0" id="additionalButtonsExample">
   <h4 class="card-header">Alternative buttons (internal use)</h4>
   <div class="card-body">
     <p>Since SEB Style is a theme for Bootstrap and Bootstrap has some additional button classes to differentiate the severity or the meaning of a button like <code>.btn-danger</code> for actions like delete and remove that might require a bit more attentions, the following classes are available too. Note however that they'll still fallback to our default classes. For internal apps you can override this behaviour and get alternative buttons by setting <code>$enable-button-variations</code> variable to <code>true</code>.</p>
@@ -53,7 +53,7 @@ <h4 class="card-header">Alternative buttons (internal use)</h4>
     <exemplify [selector]="'#additionalButtonsExample .btn:not(.disabled)'"></exemplify>
   </div>
 </div>
-<div class="card mb-4" id="smallButtonsExample">
+<div class="card mb-4 mx-n3 mx-md-0" id="smallButtonsExample">
   <h4 class="card-header">Sizing</h4>
   <div class="card-body">
     <p>Add <code>.btn-sm</code> for smaller buttons and <code>.btn-lg</code> for larger buttons.</p>

diff --git a/src/example/components/cards/cards.component.html b/src/example/components/cards/cards.component.html
@@ -1,19 +1,15 @@
-<a name="cards"><h2 class="px-3 px-md-0 my-3">Cards</h2></a>
-<div class="row">
-  <div class="col mb-4">
+<a name="cards"><h2 class="my-3">Cards</h2></a>
+<div class="card mx-n3 mx-md-0">
+  <div class="card-body" id="cardExample">
+    <h4 class="card-title">Card with header and content</h4>
+    <p class="mb-3">For more info and examples please refer to Bootstraps <a href="http://getbootstrap.com/docs/4.1/components/card/" target="_blank">official documentation</a>.</p>
     <div class="card">
-      <div class="card-body" id="cardExample">
-        <h4 class="card-title">Card with header and content</h4>
-        <p class="mb-3">For more info and examples please refer to Bootstraps <a href="http://getbootstrap.com/docs/4.1/components/card/" target="_blank">official documentation</a>.</p>
-        <div class="card">
-          <h4 class="card-header">Card header</h4>
-          <div class="card-body">
-            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
-            <a href="#" class="btn btn-primary">Go somewhere</a>
-          </div>
-        </div>
-        <exemplify [selector]="'#cardExample > .card'"></exemplify>
+      <h4 class="card-header">Card header</h4>
+      <div class="card-body">
+        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+        <a href="#" class="btn btn-primary">Go somewhere</a>
       </div>
     </div>
+    <exemplify [selector]="'#cardExample > .card'"></exemplify>
   </div>
-</div>
+</div>
diff --git a/...ample/components/checkboxes-and-slide-toggles/checkboxes-and-slide-toggles.component.html b/...ample/components/checkboxes-and-slide-toggles/checkboxes-and-slide-toggles.component.html
@@ -1,6 +1,6 @@
-<a name="checkboxes"><h2 class="px-3 px-md-0 my-3">Checkboxes and slide toggles</h2></a>
-<p class="px-3 px-md-0">Below you'll find some examples of checkboxes and layout options using the grid (rows and columns), check the <a routerLink="/forms">forms</a> section for more form elements or head over to <a href="https://getbootstrap.com/docs/4.0/components/forms/#overview" target="_blank">bootstrap docs</a> for more info and examples.</p>
-<div class="card mb-4" id="checkboxExample">
+<a name="checkboxes"><h2 class="my-3">Checkboxes and slide toggles</h2></a>
+<p class="lead">Below you'll find some examples of checkboxes and layout options using the grid (rows and columns), check the <a routerLink="/forms">forms</a> section for more form elements or head over to <a href="https://getbootstrap.com/docs/4.0/components/forms/#overview" target="_blank">bootstrap docs</a> for more info and examples.</p>
+<div class="card mb-4 mx-n3 mx-md-0" id="checkboxExample">
   <h4 class="card-header">Standard checkbox</h4>
   <div class="card-body">
     <p>We use a standard input element with <code>type="checkbox"</code> for checkboxes but we need to wrap it in a div to get the right style for the different states.</p>
@@ -15,7 +15,7 @@ <h4 class="card-header">Standard checkbox</h4>
     <exemplify [selector]="'#checkboxExample .custom-control'"></exemplify>
   </div>
 </div>
-<div class="card mb-4" id="checkboxLayoutExample">
+<div class="card mb-4 mx-n3 mx-md-0" id="checkboxLayoutExample">
   <h4 class="card-header">Horizontal layout</h4>
   <div class="card-body">
     <p>Use rows and columns to create a responsive layout, in the example below checkboxes will be placed inline on medium sized screens and up. On smaller screens the checkboxes will stack on top of each other, test by resizing the window. Use one of the following utility classes <code>.my-*</code>, <code>.mb-*</code> or <code>.mt-*</code> to add spacing between the different options, ie. <code>mb-2 mb-md-0</code> to get a small bottom margin on small screens and below.</p>
@@ -42,7 +42,7 @@ <h4 class="card-header">Horizontal layout</h4>
     <exemplify [selector]="'#checkboxLayoutExample .row'"></exemplify>
   </div>
 </div>
-<div class="card mb-4" id="slideToggleExample">
+<div class="card mb-4 mx-n3 mx-md-0" id="slideToggleExample">
   <h4 class="card-header">Slide toggle</h4>
   <div class="card-body">
     <p>The slide toggle works just like a normal checkbox and uses the same markup and bindings, to make it look like a slide toggle just add the class <code>custom-slide-toggle</code>.</p>

diff --git a/src/example/components/colors/colors.component.html b/src/example/components/colors/colors.component.html
@@ -1,4 +1,4 @@
-<h2 class="px-3 px-md-0 my-3">Colors</h2>
+<h2 class="my-3">Colors</h2>
 <p class="lead px-3 px-md-0">
   Read more about our colors and how and when to use them in <a class="font-weight-normal" href="http://designlibrary.sebank.se/visual-identity/colours/" target="_blank">design library</a> and in our
   <a class="font-weight-normal" href="https://seb.brandmanual.se/en/design-elements/colours" target="_blank">brand manual</a>.