From a3cd846fcb8044160f30877b8ea8f6ffe6583845 Mon Sep 17 00:00:00 2001 From: Bartek Szopka Date: Fri, 13 Mar 2020 10:08:23 +0100 Subject: [PATCH 1/3] Add side navigation variant with icons on the left --- scss/_patterns_side-navigation.scss | 35 ++++++++++-- .../patterns/side-navigation/icons.html | 56 +++++++++++++++++++ 2 files changed, 86 insertions(+), 5 deletions(-) create mode 100644 templates/docs/examples/patterns/side-navigation/icons.html diff --git a/scss/_patterns_side-navigation.scss b/scss/_patterns_side-navigation.scss index c84ea89169..a0f4214f19 100644 --- a/scss/_patterns_side-navigation.scss +++ b/scss/_patterns_side-navigation.scss @@ -1,13 +1,16 @@ @import 'settings'; @mixin vf-p-side-navigation { - .p-side-navigation__list { - @extend %vf-list; - - .p-side-navigation > &:first-child { + .p-side-navigation, + .p-side-navigation--icons { + & > .p-side-navigation__list:first-child { // nudge from top to put text on baseline grid padding-top: 0.5 * $spv-inner--x-small; } + } + + .p-side-navigation__list { + @extend %vf-list; & + & { @extend %vf-pseudo-border--top; @@ -36,6 +39,27 @@ .p-side-navigation__item .p-side-navigation__item .p-side-navigation__item & { padding-left: 3 * $sph-inner; } + + .p-side-navigation--icons & { + padding-left: 2 * $sph-inner + map-get($icon-sizes, default); + position: relative; + } + + .p-side-navigation--icons .p-side-navigation__item .p-side-navigation__item & { + padding-left: 2 * $sph-inner + map-get($icon-sizes, default) + $sph-inner; + } + + .p-side-navigation__item .p-side-navigation__item .p-side-navigation__item & { + padding-left: 2 * $sph-inner + map-get($icon-sizes, default) + 2 * $sph-inner; + } + } + + .p-side-navigation--icons { + .p-side-navigation__icon { + left: $sph-inner; + position: absolute; + top: $sph-inner--small; + } } .p-side-navigation__link { @@ -74,7 +98,8 @@ // border color of items list $color-sidenav-list-border: $colors--light-theme--border-default ) { - .p-side-navigation { + .p-side-navigation, + .p-side-navigation--icons { color: $color-sidenav-text-default; } diff --git a/templates/docs/examples/patterns/side-navigation/icons.html b/templates/docs/examples/patterns/side-navigation/icons.html new file mode 100644 index 0000000000..78f50ea75c --- /dev/null +++ b/templates/docs/examples/patterns/side-navigation/icons.html @@ -0,0 +1,56 @@ +{% extends "_layouts/examples.html" %} +{% block title %}Side navigation / With icons{% endblock %} + +{% block standalone_css %}patterns_side-navigation{% endblock %} + +{% block content %} +
+ + +
+{% endblock %} From f40397e6cf0f83e5d60c56081b02964b6cc56d0f Mon Sep 17 00:00:00 2001 From: Bartek Szopka Date: Tue, 17 Mar 2020 14:18:33 +0100 Subject: [PATCH 2/3] Add docs for side navigation with icons --- templates/docs/patterns/navigation.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/templates/docs/patterns/navigation.md b/templates/docs/patterns/navigation.md index 3b41f0cafa..4bc7358155 100644 --- a/templates/docs/patterns/navigation.md +++ b/templates/docs/patterns/navigation.md @@ -77,6 +77,18 @@ Use `p-side-navigation__status` inside `p-side-navigation__link` elements to add View example of the side navigation pattern +To add icons on the left side of the items in side navigation use the `.p-side-navigation--items` class. + +
+

+ Note:Icons should only be used on the items in the first level of side navigation. +

+
+ + +View example of the side navigation pattern with icons + + ### Import To import just navigation or sub-navigation component into your project, copy snippets below and include it in your main Sass file. From c135f3238bbb40f7e142a3227aaadd4b75b41c62 Mon Sep 17 00:00:00 2001 From: Bartek Szopka Date: Tue, 17 Mar 2020 14:36:43 +0100 Subject: [PATCH 3/3] Clean up selectors for nested navigation levels --- scss/_patterns_side-navigation.scss | 30 +++++++++++++++++------------ 1 file changed, 18 insertions(+), 12 deletions(-) diff --git a/scss/_patterns_side-navigation.scss b/scss/_patterns_side-navigation.scss index a0f4214f19..51ab505b30 100644 --- a/scss/_patterns_side-navigation.scss +++ b/scss/_patterns_side-navigation.scss @@ -31,26 +31,32 @@ display: flex; padding: $spv-inner--x-small $sph-inner $spv-inner--x-small $sph-inner; - // nested 2 or 3 levels - .p-side-navigation__item .p-side-navigation__item & { - padding-left: 2 * $sph-inner; - } - - .p-side-navigation__item .p-side-navigation__item .p-side-navigation__item & { - padding-left: 3 * $sph-inner; - } + // space for the right hand icon with default inner spacing on the left + $icon-spacing-width: map-get($icon-sizes, default) + $sph-inner; .p-side-navigation--icons & { - padding-left: 2 * $sph-inner + map-get($icon-sizes, default); + padding-left: $sph-inner + $icon-spacing-width; position: relative; } - .p-side-navigation--icons .p-side-navigation__item .p-side-navigation__item & { - padding-left: 2 * $sph-inner + map-get($icon-sizes, default) + $sph-inner; + // nested 2nd level of navigation + .p-side-navigation__item .p-side-navigation__item & { + padding-left: 2 * $sph-inner; + + // add spacing for variant with right side icons + .p-side-navigation--icons & { + padding-left: 2 * $sph-inner + $icon-spacing-width; + } } + // nested 3rd level of navigation .p-side-navigation__item .p-side-navigation__item .p-side-navigation__item & { - padding-left: 2 * $sph-inner + map-get($icon-sizes, default) + 2 * $sph-inner; + padding-left: 3 * $sph-inner; + + // add spacing for variant with right side icons + .p-side-navigation--icons & { + padding-left: 3 * $sph-inner + $icon-spacing-width; + } } }