<nav class="kx-nav" aria-labelledby="--68925">
<h2 class="kx-nav__header kx-is-vishidden" id="--68925">Navigation header</h2>
<ul class="kx-tree kx-is-root">
<li class="kx-tree__item kx-is-node kx-is-open" data-treedepth="0">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-tiny kx-tree__caret">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
</svg>
</i>
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 0</span>
</a>
<ul class="kx-tree">
<li class="kx-tree__item kx-is-node kx-is-open" data-treedepth="1">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-tiny kx-tree__caret">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
</svg>
</i>
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 1</span>
</a>
<ul class="kx-tree">
<li class="kx-tree__item kx-is-node kx-is-open" data-treedepth="2">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-tiny kx-tree__caret">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
</svg>
</i>
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 2</span>
</a>
<ul class="kx-tree">
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
</ul>
</li>
<li class="kx-tree__item kx-is-node" data-treedepth="2">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-tiny kx-tree__caret">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
</svg>
</i>
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 2</span>
</a>
<ul class="kx-tree">
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
</ul>
</li>
<li class="kx-tree__item kx-is-node" data-treedepth="2">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-tiny kx-tree__caret">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
</svg>
</i>
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 2</span>
</a>
<ul class="kx-tree">
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="kx-tree__item kx-is-node" data-treedepth="1">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-tiny kx-tree__caret">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
</svg>
</i>
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 1</span>
</a>
<ul class="kx-tree">
<li class="kx-tree__item kx-is-node kx-is-open" data-treedepth="2">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-tiny kx-tree__caret">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
</svg>
</i>
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 2</span>
</a>
<ul class="kx-tree">
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
</ul>
</li>
<li class="kx-tree__item kx-is-node" data-treedepth="2">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-tiny kx-tree__caret">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
</svg>
</i>
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 2</span>
</a>
<ul class="kx-tree">
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
</ul>
</li>
<li class="kx-tree__item kx-is-node" data-treedepth="2">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-tiny kx-tree__caret">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
</svg>
</i>
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 2</span>
</a>
<ul class="kx-tree">
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="kx-tree__item kx-is-node" data-treedepth="1">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-tiny kx-tree__caret">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
</svg>
</i>
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 1</span>
</a>
<ul class="kx-tree">
<li class="kx-tree__item kx-is-node kx-is-open" data-treedepth="2">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-tiny kx-tree__caret">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
</svg>
</i>
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 2</span>
</a>
<ul class="kx-tree">
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
</ul>
</li>
<li class="kx-tree__item kx-is-node" data-treedepth="2">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-tiny kx-tree__caret">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
</svg>
</i>
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 2</span>
</a>
<ul class="kx-tree">
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
</ul>
</li>
<li class="kx-tree__item kx-is-node" data-treedepth="2">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-tiny kx-tree__caret">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
</svg>
</i>
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 2</span>
</a>
<ul class="kx-tree">
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="kx-tree__item kx-is-node" data-treedepth="1">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-tiny kx-tree__caret">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
</svg>
</i>
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 1</span>
</a>
<ul class="kx-tree">
<li class="kx-tree__item kx-is-node kx-is-open" data-treedepth="2">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-tiny kx-tree__caret">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
</svg>
</i>
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 2</span>
</a>
<ul class="kx-tree">
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
</ul>
</li>
<li class="kx-tree__item kx-is-node" data-treedepth="2">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-tiny kx-tree__caret">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
</svg>
</i>
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 2</span>
</a>
<ul class="kx-tree">
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
</ul>
</li>
<li class="kx-tree__item kx-is-node" data-treedepth="2">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-tiny kx-tree__caret">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-right"></use>
</svg>
</i>
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 2</span>
</a>
<ul class="kx-tree">
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
<li class="kx-tree__item kx-is-leaf" data-treedepth="3">
<a href="#" class="kx-tree__link">
<span class="kx-tree__link__txt">Link level 3</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
{% if id %}
{% set random_number = range(0, 100000) | random %}
{% set id = id | replace(' ', '-') | lower + '--' + random_number %}
{% else %}
{% set random_number = range(0, 100000) | random %}
{% set id = label | replace(' ', '-') | lower + '--' + random_number %}
{% endif %}
<nav class="kx-nav{% for class in classes %} {{ class }}{% endfor %}" aria-labelledby="{{ id }}">
{%- if search -%}
<div class="kx-nav__search">
<div class="kx-inputgroup">
{% render '@field', { labelTxt: 'Find Component', hideLabel: true, element: 'input', type: 'search', placeholder: 'Find component', size: 'base'} %}
{% render '@button', { text: 'Search', skin: 'primary', size: 'base', hideText: true, icon: { symbol: 'search', size: 'base'} } %}
</div>
</div>
{%- endif -%}
{%- if header -%}
<h2 class="kx-nav__header{% if hideHeader == true %} kx-is-vishidden{% endif %}" id="{{ id }}">{{ header }}</h2>
{%- endif -%}
{% render '@tree' %}
</nav>
{
"classes": null,
"header": null,
"hideHeader": true,
"id": null,
"items": null,
"stackedList": null,
"search": null
}
-
Content:
// ========================================================================== // Component: nav // ========================================================================== // Elements (children) // ========================================================================== .kx-nav__search { @include p(small); } // Block (parent) // ========================================================================== // Modifiers // ========================================================================== $icon-size: rem-calc(18); .kx-nav--main { .kx-tree__link { padding-left: rem-calc(12); } .kx-tree__item { &[data-treedepth='1'] { .kx-tree__link { padding-left: calc(#{$icon-size} + 12px); } &.kx-is-leaf { .kx-tree__link { padding-left: calc((#{$icon-size} * 2) + 12px); } } } &[data-treedepth='2'] { .kx-tree__link { padding-left: calc((#{$icon-size} * 2) + 12px); } &.kx-is-leaf { .kx-tree__link { padding-left: calc((#{$icon-size} * 3) + 12px); } } } &[data-treedepth='3'] { .kx-tree__link { padding-left: calc((#{$icon-size} * 3) + 12px); } &.kx-is-leaf { .kx-tree__link { padding-left: calc((#{$icon-size} * 4) + 12px); } } } &[data-treedepth='4'] { .kx-tree__link { padding-left: calc((#{$icon-size} * 4) + 12px); } &.kx-is-leaf { .kx-tree__link { padding-left: calc((#{$icon-size} * 5) + 12px); } } } &[data-treedepth='5'] { .kx-tree__link { padding-left: calc((#{$icon-size} * 5) + 12px); } &.kx-is-leaf { .kx-tree__link { padding-left: calc((#{$icon-size} * 6) + 12px); } } } &[data-treedepth='6'] { .kx-tree__link { padding-left: calc((#{$icon-size} * 6) + 12px); } &.kx-is-leaf { .kx-tree__link { padding-left: calc((#{$icon-size} * 7) + 12px); } } } &[data-treedepth='7'] { .kx-tree__link { padding-left: calc((#{$icon-size} * 7) + 12px); } &.kx-is-leaf { .kx-tree__link { padding-left: calc((#{$icon-size} * 5) + 12px); } } } &[data-treedepth='8'] { .kx-tree__link { padding-left: calc((#{$icon-size} * 8) + 12px); } &.kx-is-leaf { .kx-tree__link { padding-left: calc((#{$icon-size} * 9) + 12px); } } } &[data-treedepth='9'] { .kx-tree__link { padding-left: calc((#{$icon-size} * 9) + 12px); } &.kx-is-leaf { .kx-tree__link { padding-left: calc((#{$icon-size} * 10) + 12px); } } } &[data-treedepth='10'] { .kx-tree__link { padding-left: calc((#{$icon-size} * 10) + 12px); } &.kx-is-leaf { .kx-tree__link { padding-left: calc((#{$icon-size} * 11) + 12px); } } } } } - URL: /components/raw/nav/_nav.scss
- Filesystem Path: src\components\01-nav\_nav.scss
- Size: 3.9 KB
There are no notes for this item.