<!-- DROPDOWN Component -->
<div class="kx-dropdown" role="group">
    <button id="--79004" class="kx-dropdown__toggle kx-btn kx-btn--skin-secondary kx-btn--size-large kx-js-dropdown__toggle" aria-haspopup="true" aria-expanded="false">
        <span class="kx-btn__inner">
                <span class="kx-btn__txt">Dropdown</span>
                <!-- ICON Component -->
<i class="kx-icon kx-icon--size-small kx-dropdown__caret">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#caret-down"></use>
    </svg>
</i>
                </span>
    </button>
    <div class="kx-dropdown__menu kx-dropdown__menu--align-left kx-js-dropdown__menu" aria-labelledby="--79004">
        <ul class="kx-dropdown__list">
            <li class="kx-dropdown__item">
                <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Action</span>
                            </a>
            </li>
            <li class="kx-dropdown__item">
                <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Another Action</span>
                            </a>
            </li>
            <li class="kx-divider kx-divider--size-mini" aria-hidden="true" tabindex="-1"></li>
            <li class="kx-dropdown__item">
                <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Action with subitems</span>
                            <!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#angle-right"></use>
    </svg>
</i>
                            </a>
                <div class="kx-dropdown__menu">
                    <ul class="kx-dropdown__list">
                        <li class="kx-dropdown__item">
                            <a class="kx-dropdown__link" href="#">
                                                Sub action
                                            </a>
                        </li>
                        <li class="kx-dropdown__item">
                            <a class="kx-dropdown__link" href="#">
                                                Another sub action
                                            </a>
                        </li>
                    </ul>
                </div>
            </li>
            <li class="kx-dropdown__item">
                <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Action with subitems</span>
                            <!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#angle-right"></use>
    </svg>
</i>
                            </a>
                <div class="kx-dropdown__menu">
                    <ul class="kx-dropdown__list">
                        <li class="kx-dropdown__item">
                            <a class="kx-dropdown__link" href="#">
                                                Sub action
                                            </a>
                        </li>
                        <li class="kx-dropdown__item">
                            <a class="kx-dropdown__link" href="#">
                                                Another sub action
                                            </a>
                        </li>
                    </ul>
                </div>
            </li>
            <li class="kx-dropdown__item">
                <a class="kx-dropdown__link" href="#">
                    <!-- 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-dropdown__item__txt">Action with icon</span>
                </a>
            </li>
            <li class="kx-dropdown__item">
                <a class="kx-dropdown__link" href="#">
                    <!-- 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-dropdown__item__txt">Action with icon and subitems</span>
                    <!-- ICON Component -->
                    <i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#angle-right"></use>
    </svg>
</i>
                </a>
                <div class="kx-dropdown__menu">
                    <ul class="kx-dropdown__list">
                        <li class="kx-dropdown__item">
                            <a class="kx-dropdown__link" href="#">
                                                Sub action
                                            </a>
                        </li>
                        <li class="kx-dropdown__item">
                            <a class="kx-dropdown__link" href="#">
                                                Another sub action
                                            </a>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</div>
{%- 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 -%}
<!-- DROPDOWN Component -->
{%- if split -%}
<div class="kx-dropdown kx-btngroup kx-btngroup--fit-tight kx-inline-flex kx-flex-nowrap" role="group" aria-label="{{ ariaLabel }}">
    <button class="kx-btn{% if skin %} kx-btn--skin-{{ skin }}{% endif %}{% if size %} kx-btn--size-{{ size }}{% endif %}">
        <span class="kx-btn__inner">
            {%- if icon %}
                {% if iconAfter -%}
                <span class="kx-btn__txt{% if hideText %} kx-is-vishidden{% endif %}">{{ text }}</span>
                {% render '@icon', icon, true %}
                {%- else -%}
                {% render '@icon', icon, true %}
                <span class="kx-btn__txt{% if hideText %} kx-is-vishidden{% endif %}">{{ text }}</span>
                {%- endif -%}
            {%- else -%}
            <span class="kx-btn__txt{% if hideText %} kx-is-vishidden{% endif %}">{{ text }}</span>
            {%- endif %}
        </span>
    </button>
    <button id="{{ id }}" class="kx-dropdown__toggle kx-btn{% if skin %} kx-btn--skin-{{ skin }}{% endif %}{% if size %} kx-btn--size-{{ size }}{% endif %}{% if show %} kx-dropdown--show{% endif %} kx-btn--icon kx-js-dropdown__toggle" aria-haspopup="true" aria-expanded="false">
        <span class="kx-btn__inner">
            <span class="kx-btn__txt kx-is-vishidden">Toggle Dropdown</span>
            {% if caret %}
            {% render '@icon', { symbol: 'caret-down', size: 'small' } %}
            {% endif %}
        </span>
    </button>
    <div class="kx-dropdown__menu{% if menuAlignment %} kx-dropdown__menu--align-{{ menuAlignment }}{% endif %}" aria-labelledby="{{ id }}">
        <ul class="kx-dropdown__list">
            {% for item in items -%}
                {% if item.divider -%}
                <li class="kx-divider kx-divider--size-mini" aria-hidden="true" tabindex="-1"></li>
                {% else -%}
                <li class="kx-dropdown__item">
                    <a class="kx-dropdown__link" href="{{ item.href }}">
                        {% if item.icon -%}
                        {%- render '@icon', item.icon -%}
                        {% endif -%}
                        <span class="kx-dropdown__item__txt">{{ item.text }}</span>
                        {% if item.subitems -%}
                        {%- render '@icon', { symbol: 'angle-right', size: 'base' } %}
                        {% endif -%}
                    </a>
                    {% if item.subitems -%}
                        <div class="kx-dropdown__menu">
                            <ul class="kx-dropdown__list">
                                {% for subitem in item.subitems -%}
                                    <li class="kx-dropdown__item">
                                        <a class="kx-dropdown__link" href="{{ subitem.href }}">
                                            {{ subitem.text }}
                                        </a>
                                    </li>
                                {% endfor -%}
                            </ul>
                        </div>
                    {% endif -%}
                </li>
                {% endif %}
            {%- endfor -%}
        </ul>
    </div>
</div>

{% else -%}

<div class="kx-dropdown{% if show %} kx-dropdown--show{% endif %}" role="group">
    <button id="{{ id }}" class="kx-dropdown__toggle kx-btn{% if skin %} kx-btn--skin-{{ skin }}{% endif %}{% if size %} kx-btn--size-{{ size }}{% endif %}{% if icon %}{% if hideText==true %} kx-btn--icon{% endif %}{% endif %}{% if show %} kx-dropdown--show{% endif %} kx-js-dropdown__toggle" aria-haspopup="true" aria-expanded="false">
        <span class="kx-btn__inner">
            {%- if icon %}
                {% if iconAfter -%}
                <span class="kx-btn__txt{% if hideText %} kx-is-vishidden{% endif %}">{{ text }}</span>
                {% render '@icon', icon, true -%}
                {% if caret %}
                    {% render '@icon', { symbol: 'caret-down', size: 'small', classes: ['kx-dropdown__caret'] } %}
                {% endif %}
                {%- else -%}
                {% render '@icon', icon, true %}
                <span class="kx-btn__txt{% if hideText %} kx-is-vishidden{% endif %}">{{ text }}</span>
                {% if caret -%}
                    {% render '@icon', { symbol: 'caret-down', size: 'small', classes: ['kx-dropdown__caret'] } %}
                {% endif -%}
                {%- endif -%}
            {%- else %}
                <span class="kx-btn__txt{% if hideText %} kx-is-vishidden{% endif %}">{{ text }}</span>
                {% if caret -%}
                {%- render '@icon', { symbol: 'caret-down', size: 'small', classes: ['kx-dropdown__caret'] } %}
                {% endif -%}
            {% endif -%}
        </span>
    </button>
    <div class="kx-dropdown__menu{% if menuAlignment %} kx-dropdown__menu--align-{{ menuAlignment }}{% endif %} kx-js-dropdown__menu" aria-labelledby="{{ id }}">
        <ul class="kx-dropdown__list">
            {% for item in items -%}
                {% if item.divider -%}
                    <li class="kx-divider kx-divider--size-mini" aria-hidden="true" tabindex="-1"></li>
                {% else -%}
                    <li class="kx-dropdown__item">
                        <a class="kx-dropdown__link" href="{{ item.href }}">
                            {% if item.icon -%}
                                {% render '@icon', item.icon -%}
                            {% endif -%}
                            <span class="kx-dropdown__item__txt">{{ item.text }}</span>
                            {% if item.subitems -%}
                                {% render '@icon', { symbol: 'angle-right', size: 'base' } %}
                            {% endif -%}
                        </a>
                        {% if item.subitems -%}
                            <div class="kx-dropdown__menu">
                                <ul class="kx-dropdown__list">
                                    {% for subitem in item.subitems -%}
                                        <li class="kx-dropdown__item">
                                            <a class="kx-dropdown__link" href="{{ subitem.href }}">
                                                {{ subitem.text }}
                                            </a>
                                        </li>
                                    {% endfor -%}
                                </ul>
                            </div>
                        {% endif -%}
                    </li>
                {% endif %}
            {%- endfor -%}
        </ul>
    </div>
</div>
{% endif %}
{
  "classes": null,
  "text": "Dropdown",
  "skin": "secondary",
  "size": "large",
  "split": null,
  "icon": null,
  "iconAfter": null,
  "hideText": null,
  "caret": true,
  "items": [
    {
      "text": "Action",
      "href": "#"
    },
    {
      "text": "Another Action",
      "href": "#"
    },
    {
      "divider": true
    },
    {
      "text": "Action with subitems",
      "href": "#",
      "subitems": [
        {
          "text": "Sub action",
          "href": "#"
        },
        {
          "text": "Another sub action",
          "href": "#"
        }
      ]
    },
    {
      "text": "Action with subitems",
      "href": "#",
      "subitems": [
        {
          "text": "Sub action",
          "href": "#"
        },
        {
          "text": "Another sub action",
          "href": "#"
        }
      ]
    },
    {
      "text": "Action with icon",
      "href": "#",
      "icon": {
        "symbol": "box",
        "size": "base"
      }
    },
    {
      "text": "Action with icon and subitems",
      "href": "#",
      "icon": {
        "symbol": "box",
        "size": "base"
      },
      "subitems": [
        {
          "text": "Sub action",
          "href": "#"
        },
        {
          "text": "Another sub action",
          "href": "#"
        }
      ]
    }
  ],
  "menuAlignment": "left"
}
  • Content:
    // ==========================================================================
    // Component: dropdown
    // ==========================================================================
    
    // Elements (children)
    // ==========================================================================
    .kx-dropdown__toggle {
        position: relative;
    
        .kx-dropdown__caret {
            will-change: transform;
            transition: transform $duration-instant ease-in-out;
            transform-origin: center;
        }
    
        &.kx-dropdown--show,
        &[aria-expanded='true'] {
            + .kx-dropdown__menu {
                transition-property: visibility, opacity;
                transition-duration: 0s, $duration-instant;
                opacity: 1;
                visibility: visible;
            }
    
            &.kx-btn--skin-primary {
                background-color: $color-btn-primary-bg-active;
                color: $color-btn-primary-txt-active;
            }
    
            &.kx-btn--skin-secondary {
                background-color: $color-btn-secondary-bg-active;
                color: $color-btn-secondary-txt-active;
            }
    
            &.kx-btn--skin-flat {
                background-color: $color-btn-flat-bg-active;
                color: $color-btn-flat-txt-active;
            }
        }
    }
    
    .kx-dropdown__link {
        @include type-scale(small);
        @include p(tiny, moderate, tiny, moderate);
        @include flex;
        @include align-items-start;
        border: 0;
        text-decoration: none;
        color: $color-dropdownmenu-txt;
    
        &:focus {
            box-shadow: 0 0 0 rem-calc(2) $color-btn-secondary-border-focus;
            outline: 0;
        }
    
        &:hover,
        &:focus {
            text-decoration: none;
            background-color: $color-dropdownmenu-bg-hover;
    
            + .kx-dropdown__menu {
                opacity: 1;
                visibility: visible;
            }
        }
    
        &:hover {
            box-shadow: none;
        }
    
        &:active {
            background-color: $color-link-bg-focus;
        }
    
        .kx-icon {
            flex: 0 0 auto;
            transform: translateY(1px);
    
            + .kx-dropdown__item__txt {
                @include ml(tiny);
            }
        }
    
        .kx-dropdown__item__txt {
            flex: 1 1 auto;
    
            + .kx-icon {
                margin-left: auto;
            }
        }
    }
    
    .kx-dropdown__item {
        position: relative;
    
        .kx-dropdown__menu {
            position: absolute;
            top: -11px;
            left: 100%;
        }
    
        &:hover {
            > .kx-dropdown__item {
                background-color: $color-dropdownmenu-bg-hover;
                box-shadow: none;
            }
    
            > .kx-dropdown__menu {
                opacity: 1;
                visibility: visible;
            }
        }
    }
    
    .kx-dropdown__list {
        @include reset-list;
        @include p(mini, none, mini, none);
        @include mt(nano);
        @include shadow(3);
        min-width: rem-calc(200);
        border: rem-calc(1) solid $color-dropdownmenu-border;
        background-color: $color-dropdownmenu-bg;
    }
    
    .kx-dropdown__menu {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
        will-change: opacity, visibility;
        opacity: 0;
        visibility: hidden;
        transition-property: opacity, visibility;
        transition-duration: $duration-fast, 0s;
        transition-delay: 0s, $duration-fast;
        margin-left: -28%;
        padding-left: 28%;
    }
    
    // Block (parent)
    // ==========================================================================
    .kx-dropdown {
        display: inline-flex;
        position: relative;
    
        &.kx-btngroup--fit-tight {
            .kx-btn--skin-primary {
                + .kx-btn--skin-primary {
                    border-left: rem-calc(1) solid $color-dropdownmenu-border-primary;
                }
            }
        }
    }
    
    
    // Modifiers
    // ==========================================================================
    
    .kx-dropdown__menu--align-left {
        left: 0;
        right: auto;
    }
    
    .kx-dropdown__menu--align-right {
        left: auto;
        right: 0;
    }
    
  • URL: /components/raw/dropdown/_dropdown.scss
  • Filesystem Path: src\components\01-dropdown\_dropdown.scss
  • Size: 4 KB
  • Content:
    //toggle dropdown menu open/close
    var toClose = false;
    
    function toggle(e) {
        e.stopPropagation();
        var dropdownToggle = this;
        var dropdownMenu = dropdownToggle.nextSibling;
    
        while(dropdownMenu && dropdownMenu.nodeType !== 1) {
            dropdownMenu = dropdownMenu.nextSibling;
        }
    
        if(!dropdownMenu) {
            return;
        }
    
        if (!dropdownToggle.classList.contains('kx-dropdown--show')) {
            dropdownToggle.classList.add('kx-dropdown--show');
    
            if(toClose) {
                toClose.classList.remove('kx-dropdown--show');
            }
    
            toClose = dropdownToggle;
    
        }  else {
            dropdownToggle.classList.remove('kx-dropdown--show');
            toClose = false;
            console.log(toClose);
        }
    }
    
    function closeAll() {
        toClose.classList.remove('kx-dropdown--show');
        toClose = false;
    }
    
    window.addEventListener('DOMContentLoaded',function(){
        document.querySelectorAll('.kx-js-dropdown__toggle').forEach(function(btn){
            btn.addEventListener('click', toggle, true);
        });
    });
    
    window.onclick = function(event){
        if (toClose){
            closeAll.call(event.target);
        }
    };
    
  • URL: /components/raw/dropdown/dropdown.js
  • Filesystem Path: src\components\01-dropdown\dropdown.js
  • Size: 1.2 KB

There are no notes for this item.