diff --git a/scss/_base_placeholders.scss b/scss/_base_placeholders.scss index be5253f5f1..01f99d599f 100644 --- a/scss/_base_placeholders.scss +++ b/scss/_base_placeholders.scss @@ -42,6 +42,13 @@ padding-top: calc(#{$table-cell-vertical-padding} - 1px); } + // Default list styling + %vf-list { + list-style: none; + margin-left: 0; + padding-left: 0; + } + // Bars and borders %vf-pseudo-border { background-color: $color-mid-light; @@ -53,6 +60,8 @@ } %vf-pseudo-border--bottom { + position: relative; + &::after { @extend %vf-pseudo-border; bottom: 0; @@ -60,6 +69,8 @@ } %vf-pseudo-border--top { + position: relative; + &::after { @extend %vf-pseudo-border; top: 0; diff --git a/scss/_patterns_accordion.scss b/scss/_patterns_accordion.scss index e0029db064..b03336c1b4 100644 --- a/scss/_patterns_accordion.scss +++ b/scss/_patterns_accordion.scss @@ -10,9 +10,7 @@ } .p-accordion__group { - position: relative; - - & + &::after { + & + & { @extend %vf-pseudo-border--top; } } diff --git a/scss/_patterns_lists.scss b/scss/_patterns_lists.scss index 8d91414488..f947298859 100644 --- a/scss/_patterns_lists.scss +++ b/scss/_patterns_lists.scss @@ -263,13 +263,6 @@ $spv-list-item--inner: null; @mixin vf-p-lists { //Placeholders - // Default list styling - %vf-list { - list-style: none; - margin-left: 0; - padding-left: 0; - } - %numbered-step-container { counter-reset: li; display: flex; diff --git a/scss/_patterns_side-navigation.scss b/scss/_patterns_side-navigation.scss new file mode 100644 index 0000000000..a5e14fd4a3 --- /dev/null +++ b/scss/_patterns_side-navigation.scss @@ -0,0 +1,96 @@ +@import 'settings'; + +@mixin vf-p-side-navigation { + .p-side-navigation__list { + @extend %vf-list; + + .p-side-navigation > &:first-child { + // nudge from top to put text on baseline grid + padding-top: 0.5 * $spv-inner--x-small; + } + + & + & { + @extend %vf-pseudo-border--top; + + &::after { + left: $sph-inner; + top: -0.5 * $spv-outer--scaleable; // place border in the middle of the margin + } + } + } + + .p-side-navigation__item--title { + font-weight: $font-weight-bold; + } + + .p-side-navigation__text, + .p-side-navigation__link { + display: block; + padding: $spv-inner--x-small $sph-inner--small $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; + } + } + + .p-side-navigation__link { + @include vf-focus; + + // vf-highlight-bar is rendered above focus outline + // so we need to hide it on focus + &:focus::before { + display: none; + } + + &:hover { + text-decoration: none; + } + } + + // default light theme + @include vf-side-navigation-theme; +} + +// theme +@mixin vf-side-navigation-theme( + // default text color in sidebar + $color-sidenav-text-default: $colors--light-theme--text-muted, + // text color of highlighted items + $color-sidenav-text-active: $colors--light-theme--text-default, + // background color of active/hovered items + $color-sidenav-item-background-highlight: $colors--light-theme--background-highlighted, + // border color of active item + $color-sidenav-item-border-highlight: $color-brand, + // border color of items list + $color-sidenav-list-border: $colors--light-theme--border-default +) { + .p-side-navigation { + color: $color-sidenav-text-default; + } + + .p-side-navigation__list::after { + background: $color-sidenav-list-border; + } + + .p-side-navigation__link { + &, + &:visited { + color: $color-sidenav-text-default; + } + + &:hover, + &.is-active { + background: $color-sidenav-item-background-highlight; + color: $color-sidenav-text-active; + } + + &.is-active { + @include vf-highlight-bar($color-sidenav-item-border-highlight, left); + } + } +} diff --git a/scss/_settings_colors.scss b/scss/_settings_colors.scss index 0c2889dc09..9833f1ba2c 100644 --- a/scss/_settings_colors.scss +++ b/scss/_settings_colors.scss @@ -41,6 +41,7 @@ $colors--light-theme--border-default: #cdcdcd !default; $colors--light-theme--border-high-contrast: #999 !default; $colors--light-theme--text-hover: #757575 !default; $colors--light-theme--text-disabled: #666 !default; +$colors--light-theme--text-muted: #666 !default; $colors--light-theme--text-default: #111 !default; //text-hover: minimum contrast on primary that satisfies contrast checker AA @@ -49,4 +50,6 @@ $colors--dark-theme--background-highlighted: hsl(0, 0%, 20%) !default; $colors--dark-theme--border-default: hsl(0, 0%, 27%) !default; $colors--dark-theme--border-high-contrast: hsl(0, 0%, 42%) !default; $colors--dark-theme--text-hover: hsl(0, 0%, 56%) !default; +// TODO: add --text-disabled +// TODO: add --text-muted $colors--dark-theme--text-default: hsl(0, 0%, 100%) !default; diff --git a/scss/_vanilla.scss b/scss/_vanilla.scss index 3f69bb048f..330dc4dba8 100644 --- a/scss/_vanilla.scss +++ b/scss/_vanilla.scss @@ -33,6 +33,7 @@ @import 'patterns_pagination'; @import 'patterns_pull-quotes'; @import 'patterns_search-box'; +@import 'patterns_side-navigation'; @import 'patterns_slider'; @import 'patterns_strip'; @import 'patterns_switch'; @@ -102,6 +103,7 @@ @include vf-p-pagination; @include vf-p-pull-quotes; @include vf-p-search-box; + @include vf-p-side-navigation; @include vf-p-slider; @include vf-p-strip; @include vf-p-switch; diff --git a/scss/standalone/patterns_side-navigation.scss b/scss/standalone/patterns_side-navigation.scss new file mode 100644 index 0000000000..00059156e9 --- /dev/null +++ b/scss/standalone/patterns_side-navigation.scss @@ -0,0 +1,5 @@ +@import '../base'; +@include vf-base; + +@import '../patterns_side-navigation'; +@include vf-p-side-navigation; diff --git a/templates/_layouts/docs.html b/templates/_layouts/docs.html index c0ca99f186..ad1a7def48 100644 --- a/templates/_layouts/docs.html +++ b/templates/_layouts/docs.html @@ -88,7 +88,7 @@
  • Media object
  • Modal
  • Muted heading
    • -
  • Navigation
    Updated
    • +
  • Navigation
    New
  • Notifications
  • Pagination
  • Quotes
    • diff --git a/templates/docs/component-status.md b/templates/docs/component-status.md index 34e325926d..4dd39dfd75 100644 --- a/templates/docs/component-status.md +++ b/templates/docs/component-status.md @@ -10,29 +10,23 @@ context: When we add, make significant updates, or deprecate a component we update their status so that it’s clear what’s available to use. Check back here anytime to see current status information. -### What's new in Vanilla 2.8 +### What's new in Vanilla 2.9 - + - + - - - - - - - - - - + + + +
    ComponentStatusStatus VersionNotesNotes
    Navigation
    Updated
    		2.8.0New navigation classes (p-navigation__items, p-navigation__item, p-navigation__link) were added to replace existing (p-navigation__links, p-navigation__link, and classless <a>).
    Navigation
    Deprecated
    		2.8.0Navigation classes p-navigation__links, p-navigation__link, and classless <a> are deprecated and will be removed in future release v3.0. Please use new class names (p-navigation__items, p-navigation__item, p-navigation__link) instead.Side navigation
    New
    		2.9.0New side navigation component was added.
    @@ -43,12 +37,25 @@ When we add, make significant updates, or deprecate a component we update their Component - Status + Status Version - Notes + Notes + + + Navigation +
    Updated
    + 2.8.0 + New navigation classes (p-navigation__items, p-navigation__item, p-navigation__link) were added to replace existing (p-navigation__links, p-navigation__link, and classless <a>). + + + Navigation +
    Deprecated
    + 2.8.0 + Navigation classes p-navigation__links, p-navigation__link, and classless <a> are deprecated and will be removed in future release v3.0. Please use new class names (p-navigation__items, p-navigation__item, p-navigation__link) instead. + Contextual menu diff --git a/templates/docs/examples/patterns/side-navigation/default.html b/templates/docs/examples/patterns/side-navigation/default.html new file mode 100644 index 0000000000..072d07eb93 --- /dev/null +++ b/templates/docs/examples/patterns/side-navigation/default.html @@ -0,0 +1,87 @@ +{% extends "_layouts/examples.html" %} +{% block title %}Side navigation / Default{% endblock %} + +{% block standalone_css %}patterns_side-navigation{% endblock %} + +{% block content %} +
    + + +
    +{% endblock %} diff --git a/templates/docs/examples/patterns/side-navigation/docs.html b/templates/docs/examples/patterns/side-navigation/docs.html new file mode 100644 index 0000000000..9d2350ca9a --- /dev/null +++ b/templates/docs/examples/patterns/side-navigation/docs.html @@ -0,0 +1,75 @@ +{% extends "_layouts/examples.html" %} +{% block title %}Side navigation / MAAS docs{% endblock %} + +{% block standalone_css %}patterns_side-navigation{% endblock %} + +{% block content %} +
    + + + + +
    +{% endblock %} diff --git a/templates/docs/patterns/navigation.md b/templates/docs/patterns/navigation.md index a58c176547..c0369cbc51 100644 --- a/templates/docs/patterns/navigation.md +++ b/templates/docs/patterns/navigation.md @@ -8,7 +8,7 @@ context:
    -Updated +### Global navigation Vanilla includes a simple navigation bar that you can add to the top of your sites. @@ -61,6 +61,20 @@ By default the sub-navigation menus are left-aligned with their parent, if you'd View example of the sub-navigation pattern +### Side navigation + +New + +The side navigation pattern can be used to provide more detailed navigation alongside your content. + +It allows grouping the links into navigation sections and nesting them up to three levels. + +Current page in the side navigation should be highlighted by adding `is-active` class to the corresponding `p-side-navigation__link` element. + + +View example of the side navigation pattern + + ### Import To import just navigation or sub-navigation component into your project, copy snippets below and include it in your main Sass file. @@ -74,6 +88,13 @@ To import just navigation or sub-navigation component into your project, copy sn @include vf-p-subnav; ``` +To import side navigation, copy snippet below: + +```scss +@import 'patterns_side-navigation'; +@include vf-p-side-navigation; +``` + For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions. ### Design