Dropdown: Skin: Primary, Split

Prototype

HTML
View
Context
Assets
Info
Notes


        
        <!-- DROPDOWN Component -->
<div class="kx-dropdown kx-btngroup kx-btngroup--fit-tight kx-inline-flex kx-flex-nowrap" role="group" aria-label="">
    <button class="kx-btn kx-btn--skin-primary kx-btn--size-large">
        <span class="kx-btn__inner"><span class="kx-btn__txt">Save & Close</span>
        </span>
    </button>
    <button id="--97656" class="kx-dropdown__toggle kx-btn kx-btn--skin-primary kx-btn--size-large 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>
            
            <!-- ICON Component -->
<i class="kx-icon kx-icon--size-small">
    <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" aria-labelledby="--97656">
        <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": "Save & Close",
  "skin": "primary",
  "size": "large",
  "split": true,
  "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"
}

File:

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

Handle: @dropdown--dropdown-primary-split
Variants (4): Skin: Primary, Single , Skin: Secondary, Single , Skin: Primary, Split , Skin: Secondary, Split
Preview:
- With layout
- Component only
Filesystem Path: src\components\01-dropdown\dropdown.njk
References (1): @icon

There are no notes for this item.

Dropdown: Skin: Primary, Split

Code

Layout

Utilities

Forms

Fieldset

Input

Button

Field

Label

Legend

Switch

Switch Group