Skip to content

Commit

Permalink
Set height value lower than min-height to prevent align-items reset o…
Browse files Browse the repository at this point in the history 
…n IE11
  • Loading branch information
@salarenko
salarenko committed Dec 4, 2019
1 parent 6fb353c commit 76ae625
Show file tree
Hide file tree
Showing 2 changed files with 178 additions and 22 deletions.
4 changes: 3 additions & 1 deletion src/_nested-list.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,9 @@ $block: #{$fd-namespace}-nested-list;
&::after {
@include fd-flex-center();
@include fd-nested-list-arrow();

// `height: 0` is set to prevent breaking `align-items: center` on IE11
// Read more https://github.com/philipwalton/flexbugs/issues/231
height: 0;
min-height: 100%;
min-width: 2.75rem;
color: var(--sapList_TextColor);
Expand Down
196 changes: 175 additions & 21 deletions test/templates/side-nav/index.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,42 +7,196 @@
{% set example %}
<nav class="fd-side-nav">
<div class="fd-side-nav__main-navigation">
<ul class="test-sidenav-list">
<li>Item 1</li>
<li>Item 1</li>
<li>Item 1</li>
<li>Item 1</li>
</ul>
<ul class="fd-nested-list fd-nested-list--text-only">
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link is-selected" href="#">
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
</ul>
</div>
<div class="fd-side-nav__utility">
<ul class="test-sidenav-list">
<li>Item 1</li>
<li>Item 1</li>
</ul>
<ul class="fd-nested-list fd-nested-list--text-only">
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
</ul>
</div>
</nav>

{% endset %}
{{ format(example) }}

<br><br><br>
<h2>Side navigation with icons - condensed state</h2>
{% set example %}
<nav class="fd-side-nav fd-side-nav--condensed">
<div class="fd-side-nav__main-navigation">
<ul class="test-sidenav-list">
<li class="test-sidenav-list-icon sap-icon--home"></li>
<li class="test-sidenav-list-icon sap-icon--calendar"></li>
<li class="test-sidenav-list-icon sap-icon--employee"></li>
<li class="test-sidenav-list-icon sap-icon--activities"></li>
</ul>
<div class="fd-side-nav__main-navigation">
<ul class="fd-nested-list">
<li class="fd-nested-list__group-header">
Group Header 1
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__icon sap-icon--home"></span>
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__icon sap-icon--calendar"></span>
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link is-selected has-child" href="#">
<span class="fd-nested-list__icon sap-icon--employee"></span>
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__icon sap-icon--activities"></span>
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
<li class="fd-nested-list__group-header">
Group Header 2
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__icon sap-icon--bar-chart"></span>
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
</ul>
</div>
<div class="fd-side-nav__utility">
<ul class="fd-nested-list">
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__icon sap-icon--compare"></span>
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__icon sap-icon--chain-link"></span>
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
</ul>
</div>
</nav>
{% endset %}
{{ format(example) }}

{% set example %}
<nav class="fd-side-nav">
<div class="fd-side-nav__main-navigation">
<ul class="fd-nested-list fd-nested-list--compact">
<li class="fd-nested-list__group-header">
Group Header 1
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__icon sap-icon--home"></span>
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link is-selected" href="#">
<span class="fd-nested-list__icon sap-icon--calendar"></span>
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link has-child" href="#" aria-controls="EX500L2" aria-haspopup="true">
<span class="fd-nested-list__icon sap-icon--employee"></span>
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
<ul class="fd-nested-list fd-nested-list--text-only level-2" id="EX500L2" aria-hidden="true">
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__title">Level 2 Item</span>
</a>
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link"
href="#" aria-controls="EX500L3" aria-haspopup="true">
<span class="fd-nested-list__title">Level 2 Item</span>
</a>
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__title">Level 2 Item</span>
</a>
</li>
</ul>
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__icon sap-icon--activities"></span>
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
<li class="fd-nested-list__group-header">
Group Header 2
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__icon sap-icon--bar-chart"></span>
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
</ul>
</div>
<div class="fd-side-nav__utility">
<ul class="test-sidenav-list">
<li class="test-sidenav-list-icon sap-icon--bar-chart"></li>
<li class="test-sidenav-list-icon sap-icon--video"></li>
</ul>
<ul class="fd-nested-list fd-nested-list--compact">
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__icon sap-icon--compare"></span>
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
<li class="fd-nested-list__item">
<a class="fd-nested-list__link" href="#">
<span class="fd-nested-list__icon sap-icon--chain-link"></span>
<span class="fd-nested-list__title">Level 1 Item</span>
</a>
</li>
</ul>
</div>
</nav>

{% endset %}
{{ format(example) }}

{% endblock %}

0 comments on commit 76ae625

Please sign in to comment.