From 00779f934621ad68640220ef6ea59e572dfdfe63 Mon Sep 17 00:00:00 2001 From: Robert Hjalmers Date: Mon, 25 Feb 2019 11:06:16 +0100 Subject: [PATCH 1/4] fix(breadcrumbs): update design and add mobile version closes #101 --- scss/_variables.scss | 11 ++++- scss/styles/_breadcrumb.scss | 43 ++++++++++++++++++- .../ng-bootstrap/mixins/_ngb-accordion.scss | 1 - .../breadcrumbs/breadcrumbs.component.html | 2 +- 4 files changed, 52 insertions(+), 5 deletions(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index 45721d8..1eb85ac 100644 --- 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 index 136e39c..042a7d7 100644 --- 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; + } + } + } +} \ No newline at end of file diff --git a/scss/third-parties/ng-bootstrap/mixins/_ngb-accordion.scss b/scss/third-parties/ng-bootstrap/mixins/_ngb-accordion.scss index eedf67c..74684c8 100644 --- 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/src/example/components/breadcrumbs/breadcrumbs.component.html b/src/example/components/breadcrumbs/breadcrumbs.component.html index f019ecd..4f1d2d8 100644 --- a/src/example/components/breadcrumbs/breadcrumbs.component.html +++ b/src/example/components/breadcrumbs/breadcrumbs.component.html @@ -1,7 +1,7 @@

Breadcrumbs
-

Use breadcrumbs to leave a trace so that the users can find their way back when navigating the app.

+

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.

  1. Home
From f22420103cdd96ab4c4767a1f7bf7d2f6b19407d Mon Sep 17 00:00:00 2001 From: Robert Hjalmers Date: Mon, 25 Feb 2019 12:20:58 +0100 Subject: [PATCH 2/4] fix(container): add padding and adjust max width of `container-content` --- scss/styles/_grid.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/scss/styles/_grid.scss b/scss/styles/_grid.scss index 4b83eea..283d0c5 100644 --- 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) { From eebe8014e2feebb6574787928a07a5eccd75fbcb Mon Sep 17 00:00:00 2001 From: Robert Hjalmers Date: Mon, 25 Feb 2019 13:33:24 +0100 Subject: [PATCH 3/4] fix(ng-bootstrap): fix dropdown/datepicker position on mobile --- scss/third-parties/ng-bootstrap/mixins/_ngb-datepicker.scss | 5 +++-- scss/third-parties/ng-bootstrap/mixins/_ngb-dropdown.scss | 6 ++++-- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/scss/third-parties/ng-bootstrap/mixins/_ngb-datepicker.scss b/scss/third-parties/ng-bootstrap/mixins/_ngb-datepicker.scss index 8395cea..7926b5e 100644 --- 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 index 5c2541d..4b0c392 100644 --- 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; } } } From e8cca857ff7bd84d28d73cbee0706155702bef11 Mon Sep 17 00:00:00 2001 From: Robert Hjalmers Date: Mon, 25 Feb 2019 15:36:39 +0100 Subject: [PATCH 4/4] docs: layout fix using utility classes --- .../accordion/accordion.component.html | 6 ++-- .../components/alerts/alerts.component.html | 14 ++++---- .../breadcrumbs/breadcrumbs.component.html | 4 +-- .../button-group/button-group.component.html | 4 +-- .../components/buttons/buttons.component.html | 10 +++--- .../components/cards/cards.component.html | 26 ++++++-------- ...heckboxes-and-slide-toggles.component.html | 10 +++--- .../components/colors/colors.component.html | 2 +- .../datepicker/datepicker.component.html | 32 ++++++++--------- .../dropdowns/dropdowns.component.html | 12 +++---- .../components/forms/forms.component.html | 34 +++++++++---------- .../components/icons/icons.component.html | 2 +- .../input-group/input-group.component.html | 4 +-- .../list-group/list-group.component.html | 4 +-- .../components/modals/modals.component.html | 12 +++---- .../components/navbar/navbar.component.html | 6 ++-- .../pagination/pagination.component.html | 6 ++-- .../radio-buttons.component.html | 8 ++--- .../skeleton-loader.component.html | 14 ++++---- .../spinners/spinners.component.html | 8 ++--- .../components/tables/tables.component.html | 28 +++++++-------- .../components/tabs/tabs.component.html | 4 +-- .../toast-notifications.component.html | 8 ++--- .../tooltips/tooltips.component.html | 10 +++--- .../typography/typography.component.html | 2 +- 25 files changed, 131 insertions(+), 139 deletions(-) diff --git a/src/example/components/accordion/accordion.component.html b/src/example/components/accordion/accordion.component.html index 96dcd6f..4ce5d39 100644 --- a/src/example/components/accordion/accordion.component.html +++ b/src/example/components/accordion/accordion.component.html @@ -1,8 +1,8 @@ -

Accordion

 -
+

Accordion

 +
Framework needed! 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 ng-bootstrap and their accordion component.
-
+
diff --git a/src/example/components/alerts/alerts.component.html b/src/example/components/alerts/alerts.component.html index 9c7f4a3..1abab62 100644 --- a/src/example/components/alerts/alerts.component.html +++ b/src/example/components/alerts/alerts.component.html @@ -1,5 +1,5 @@ -

Alerts

 -
+

Alerts

 +
When to use alerts?

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.

@@ -48,7 +48,7 @@
What context should I use?
-
+

Alert outlined

The examples below use the .alert-outline-* class (replace * with context) for a more subtle message. The background is white to make it stick out when placed on grey backgrounds.

@@ -73,7 +73,7 @@

Alert outlined

-
+

Alert

The examples below use the traditional .alert-* class (replace * with context), for use cases where the message is really important and needs to stand out.

@@ -98,7 +98,7 @@

Alert

-
+

Alert with icons

The examples below use the traditional .alert-* class (replace * with context), together with .alert-icon to add extra emphasis by displaying an icon next to the message. Note that only warning and danger alerts have icons at the moment.

@@ -123,7 +123,7 @@

Alert with icons

-
+

Alert with link

Use the .alert-link utility class to quickly provide matching colored links within any alert.

@@ -142,7 +142,7 @@

Alert with link

-
+

Alert that can be dismissed

A more complex alert that can be dismissed (please note that JavaScript or framework is needed to dismiss alert messages!).

diff --git a/src/example/components/breadcrumbs/breadcrumbs.component.html b/src/example/components/breadcrumbs/breadcrumbs.component.html index 4f1d2d8..7faf698 100644 --- a/src/example/components/breadcrumbs/breadcrumbs.component.html +++ b/src/example/components/breadcrumbs/breadcrumbs.component.html @@ -1,5 +1,5 @@ -

Breadcrumbs

 -
+

Breadcrumbs

 +

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.

    diff --git a/src/example/components/button-group/button-group.component.html b/src/example/components/button-group/button-group.component.html index d80074e..da2a5c0 100644 --- a/src/example/components/button-group/button-group.component.html +++ b/src/example/components/button-group/button-group.component.html @@ -1,5 +1,5 @@ -

    Button group

     -
    +

    Button group

     +

    Group buttons together using a button group, check bootstrap docs for more info and examples. Note that javascript is required to use button groups like radio buttons or checkboxes.

    diff --git a/src/example/components/buttons/buttons.component.html b/src/example/components/buttons/buttons.component.html index 7f43773..d5b4d5c 100644 --- a/src/example/components/buttons/buttons.component.html +++ b/src/example/components/buttons/buttons.component.html @@ -1,5 +1,5 @@ -

    Buttons

     -
    +

    Buttons

     +

    Main buttons

    We have three main button classes that we use .btn-primary, .btn-secondary and .btn-link, 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).

    @@ -16,7 +16,7 @@

    Main buttons

    -
    +

    Buttons and colored backgrounds

    The .btn-light class should only be used when buttons are placed on colored or dark backgrounds/images.

    @@ -42,7 +42,7 @@

    Buttons and colored backgrounds

    -
    +

    Alternative buttons (internal use)

    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 .btn-danger 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 $enable-button-variations variable to true.

    @@ -53,7 +53,7 @@

    Alternative buttons (internal use)

    -
    +

    Sizing

    Add .btn-sm for smaller buttons and .btn-lg for larger buttons.

    diff --git a/src/example/components/cards/cards.component.html b/src/example/components/cards/cards.component.html index c229f77..b6fa2aa 100644 --- a/src/example/components/cards/cards.component.html +++ b/src/example/components/cards/cards.component.html @@ -1,19 +1,15 @@ -

    Cards

     -
    -
    +

    Cards

     +
    +
    +

    Card with header and content

    +

    For more info and examples please refer to Bootstraps official documentation.

    -
    -

    Card with header and content

    -

    For more info and examples please refer to Bootstraps official documentation.

    -
    -

    Card header

    -
    -

    With supporting text below as a natural lead-in to additional content.

    - Go somewhere -
    -
    - +

    Card header

    +
    +

    With supporting text below as a natural lead-in to additional content.

    + Go somewhere
    +
    -
    +
    \ No newline at end of file diff --git a/src/example/components/checkboxes-and-slide-toggles/checkboxes-and-slide-toggles.component.html b/src/example/components/checkboxes-and-slide-toggles/checkboxes-and-slide-toggles.component.html index 835922f..7b3d983 100644 --- a/src/example/components/checkboxes-and-slide-toggles/checkboxes-and-slide-toggles.component.html +++ b/src/example/components/checkboxes-and-slide-toggles/checkboxes-and-slide-toggles.component.html @@ -1,6 +1,6 @@ -

    Checkboxes and slide toggles

     -

    Below you'll find some examples of checkboxes and layout options using the grid (rows and columns), check the forms section for more form elements or head over to bootstrap docs for more info and examples.

    -
    +

    Checkboxes and slide toggles

     +

    Below you'll find some examples of checkboxes and layout options using the grid (rows and columns), check the forms section for more form elements or head over to bootstrap docs for more info and examples.

    +

    Standard checkbox

    We use a standard input element with type="checkbox" for checkboxes but we need to wrap it in a div to get the right style for the different states.

    @@ -15,7 +15,7 @@

    Standard checkbox

    -
    +

    Horizontal layout

    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 .my-*, .mb-* or .mt-* to add spacing between the different options, ie. mb-2 mb-md-0 to get a small bottom margin on small screens and below.

    @@ -42,7 +42,7 @@

    Horizontal layout

    -
    +

    Slide toggle

    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 custom-slide-toggle.

    diff --git a/src/example/components/colors/colors.component.html b/src/example/components/colors/colors.component.html index 12d0bd0..1cc3d26 100644 --- a/src/example/components/colors/colors.component.html +++ b/src/example/components/colors/colors.component.html @@ -1,4 +1,4 @@ -

    Colors

    +

    Colors

    Read more about our colors and how and when to use them in design library and in our brand manual. diff --git a/src/example/components/datepicker/datepicker.component.html b/src/example/components/datepicker/datepicker.component.html index 849a02c..f87557a 100644 --- a/src/example/components/datepicker/datepicker.component.html +++ b/src/example/components/datepicker/datepicker.component.html @@ -1,20 +1,16 @@ -

    Datepicker

    -
    -
    -
    -
    -
    Framework needed! Please note that you need to install ng-bootstrap and their datepicker component in order to use the datepickers in this example.
    -

    Simple datepicker with week number

    -

    For more info and examples please refer to ng-bootstrap official documentation.

    - - -
    -
    -

    Datepicker with input

    -

    For more info and examples please refer to ng-bootstrap official documentation.

    - - -
    -
    +

    Datepicker

     +
    +
    +
    Framework needed! Please note that you need to install ng-bootstrap and their datepicker component in order to use the datepickers in this example.
    +

    Simple datepicker with week number

    +

    For more info and examples please refer to ng-bootstrap official documentation.

    + + +
    +
    +

    Datepicker with input

    +

    For more info and examples please refer to ng-bootstrap official documentation.

    + +
    diff --git a/src/example/components/dropdowns/dropdowns.component.html b/src/example/components/dropdowns/dropdowns.component.html index 83e56ee..891dd2a 100644 --- a/src/example/components/dropdowns/dropdowns.component.html +++ b/src/example/components/dropdowns/dropdowns.component.html @@ -1,6 +1,6 @@ -

    Selects and dropdowns

     -

    The native html select element looks and behaves a bit differently depending on the browser and the device a user is on but it will always work and iOS and Android devices will use their own native components in it's place.

    -
    +

    Selects and dropdowns

     +

    The native html select element looks and behaves a bit differently depending on the browser and the device a user is on but it will always work and iOS and Android devices will use their own native components in it's place.

    +

    Native html select

    @@ -24,7 +24,7 @@

    Framework needed! Please note that the examples below uses a framework for Angular called ng-bootstrap and their dropdown component, so in order to use the components below you need to add ng-bootstrap to your project.
    - -
    +

    Angular multi-select

    @@ -86,7 +86,7 @@

    -