-
Notifications
You must be signed in to change notification settings - Fork 1.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(ui-shell): add platform nav (#1082)
* feat(ui-shell): add platform nav * feat(platform-nav): add support for category expansion * chore: update visibility to inherit value
- Loading branch information
Showing
7 changed files
with
307 additions
and
17 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,146 @@ | ||
@import '../../globals/scss/colors'; | ||
@import '../../globals/scss/css--helpers'; | ||
@import '../../globals/scss/helper-mixins'; | ||
@import '../../globals/scss/vars'; | ||
@import 'functions'; | ||
|
||
@mixin platform-nav { | ||
//---------------------------------------------------------------------------- | ||
// Platform Navigation | ||
//---------------------------------------------------------------------------- | ||
.#{$prefix}--platform__nav { | ||
position: absolute; | ||
top: get-fixed-size(6); | ||
bottom: 0; | ||
left: 0; | ||
background-color: $ibm-colors__gray--90; | ||
width: get-fixed-size(32); | ||
z-index: 1000; | ||
box-shadow: 0 get-fixed-size(1) get-fixed-size(2) 0 rgba(0, 0, 0, 0.25); | ||
color: $ibm-colors__gray--10; | ||
} | ||
|
||
.#{$prefix}--platform__nav svg { | ||
fill: $ibm-colors__gray--10; | ||
} | ||
|
||
//---------------------------------------------------------------------------- | ||
// Platform Nav Section | ||
//---------------------------------------------------------------------------- | ||
.#{$prefix}--platform__nav-section:not(:last-child)::after { | ||
display: block; | ||
content: ''; | ||
height: 1px; | ||
background-color: $ibm-colors__gray--80; | ||
margin: 0 get-fixed-size(2); | ||
} | ||
|
||
//---------------------------------------------------------------------------- | ||
// Platform Nav Item | ||
//---------------------------------------------------------------------------- | ||
.#{$prefix}--platform__nav-item { | ||
display: flex; | ||
align-items: center; | ||
} | ||
|
||
//---------------------------------------------------------------------------- | ||
// Platform Nav Link | ||
//---------------------------------------------------------------------------- | ||
a.#{$prefix}--platform__nav-link { | ||
display: flex; | ||
align-items: center; | ||
color: $ibm-colors__gray--10; | ||
text-decoration: none; | ||
font-size: rem(14px); | ||
font-weight: 400; | ||
width: 100%; | ||
} | ||
|
||
a.#{$prefix}--platform__nav-link:hover { | ||
background-color: $ibm-colors__gray--80; | ||
color: $ibm-colors__gray--10; | ||
} | ||
|
||
a.#{$prefix}--platform__nav-link:focus { | ||
outline: get-fixed-size(0.5) solid $ibm-colors__blue--60; | ||
outline-offset: get-fixed-size(-0.5); | ||
} | ||
|
||
//---------------------------------------------------------------------------- | ||
// Platform Nav Category | ||
//---------------------------------------------------------------------------- | ||
.#{$prefix}--platform__category { | ||
width: 100%; | ||
} | ||
|
||
.#{$prefix}--platform__category-toggle { | ||
@include button-reset($width: true); | ||
|
||
display: flex; | ||
align-items: center; | ||
} | ||
|
||
.#{$prefix}--platform__category-toggle:hover { | ||
background-color: $ibm-colors__gray--80; | ||
} | ||
|
||
.#{$prefix}--platform__category-toggle:focus { | ||
outline: get-fixed-size(0.5) solid $ibm-colors__blue--60; | ||
outline-offset: get-fixed-size(-0.5); | ||
} | ||
|
||
.#{$prefix}--platform__category-title { | ||
display: flex; | ||
align-items: center; | ||
justify-content: space-between; | ||
padding-right: get-fixed-size(2); | ||
width: 100%; | ||
color: $ibm-colors__gray--10; | ||
font-size: rem(14px); | ||
font-weight: 400; | ||
} | ||
|
||
.#{$prefix}--platform__category-items { | ||
display: none; | ||
visibility: hidden; | ||
} | ||
|
||
.#{$prefix}--platform__category-item > a.#{$prefix}--platform__nav-link { | ||
display: flex; | ||
align-items: center; | ||
min-height: get-fixed-size(5); | ||
padding-left: get-fixed-size(7); | ||
} | ||
|
||
.#{$prefix}--platform__category--expanded .#{$prefix}--platform__category-title { | ||
font-weight: 600; | ||
} | ||
|
||
.#{$prefix}--platform__category--expanded .#{$prefix}--platform__category-title > svg { | ||
transform: rotate(180deg); | ||
} | ||
|
||
.#{$prefix}--platform__category--expanded .#{$prefix}--platform__category-items { | ||
display: block; | ||
visibility: inherit; | ||
} | ||
|
||
//---------------------------------------------------------------------------- | ||
// Platform Nav Icon | ||
//---------------------------------------------------------------------------- | ||
.#{$prefix}--platform__nav-icon { | ||
display: flex; | ||
align-items: center; | ||
justify-content: center; | ||
width: get-fixed-size(6); | ||
min-width: get-fixed-size(6); | ||
height: get-fixed-size(5); | ||
margin-right: get-fixed-size(1); | ||
} | ||
} | ||
|
||
@include exports('platform-nav') { | ||
@if feature-flag-enabled('ui-shell') { | ||
@include platform-nav; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -3,3 +3,4 @@ | |
@import 'functions'; | ||
@import 'platform-header'; | ||
@import 'platform-side-nav'; | ||
@import 'platform-nav'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,55 @@ | ||
{{#if nav.state.expanded}} | ||
<div class="bx--platform__nav"> | ||
{{#each nav.sections}} | ||
<div class="bx--platform__nav-section"> | ||
<ul class="bx--platform__nav-items"> | ||
{{#each this.items}} | ||
<li class="bx--platform__nav-item"> | ||
{{#eq this.type "link"}} | ||
<a class="bx--platform__nav-link" href="{{ this.href }}"> | ||
<div class="bx--platform__nav-icon"> | ||
<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true"> | ||
<path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" /> | ||
</svg> | ||
</div> | ||
{{ this.title }} | ||
</a> | ||
{{/eq}} | ||
{{#eq this.type "category"}} | ||
{{#if ../../nav.state.category}} | ||
<div class="bx--platform__category bx--platform__category--expanded"> | ||
{{else}} | ||
<div class="bx--platform__category"> | ||
{{/if}} | ||
<button class="bx--platform__category-toggle" aria-haspopup="true" aria-expanded="true" aria-controls="category-1-menu"> | ||
<div class="bx--platform__nav-icon"> | ||
|
||
<svg aria-hidden="true" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"> | ||
<path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" /> | ||
</svg> | ||
</div> | ||
<div class="bx--platform__category-title"> | ||
{{ this.title }} | ||
<svg aria-hidden="true" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"> | ||
<path d="M16 22L6 12l1.414-1.414L16 19.172l8.586-8.586L26 12 16 22z"/> | ||
</svg> | ||
</div> | ||
</button> | ||
<ul id="category-1-menu" class="bx--platform__category-items" role="menu"> | ||
{{#each this.links}} | ||
<li class="bx--platform__category-item"> | ||
<a class="bx--platform__nav-link" href="{{ this.href }}" role="menuitem"> | ||
{{ this.title }} | ||
</a> | ||
</li> | ||
{{/each}} | ||
</ul> | ||
</div> | ||
{{/eq}} | ||
</li> | ||
{{/each}} | ||
</ul> | ||
</div> | ||
{{/each}} | ||
</div> | ||
{{/if}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,2 +1,3 @@ | ||
{{> platform-header }} | ||
{{> platform-side-nav }} | ||
{{> platform-nav }} |