<!-- DROPDOWN Component -->

<div class="kx-dropdown kx-dropdown--show" role="group">
    <button id="--37850" class="kx-dropdown__toggle kx-btn kx-btn--skin-primary kx-btn--size-large kx-dropdown--show" 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 aria-hidden="true" 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="--37850">
        <a class="kx-dropdown__item" href="#">Action</a><a class="kx-dropdown__item" href="#">Another Action</a><a class="kx-dropdown__item" href="#">Something else</a></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-dropdown--split kx-btn-group" role="group" aria-label="{{ aria_label }}">
    <button id="{{ id }}" class="kx-btn{% if skin %} kx-btn--skin-{{ skin }}{% endif %}{% if size %} kx-btn--size-{{ size }}{% endif %}" aria-haspopup="true" aria-expanded="false">
        <span class="kx-btn__inner">
            {%- if icon %}
                {% if icon_after -%}
                <span class="kx-btn__txt{% if hide_text %} kx-is-vishidden{% endif %}">{{ text }}</span>
                {% render '@icon', icon, true %}
                {%- else -%}
                {% render '@icon', icon, true %}
                <span class="kx-btn__txt{% if hide_text %} kx-is-vishidden{% endif %}">{{ text }}</span>
                {%- endif -%}
            {%- 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" 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 menu_alignment %} kx-dropdown__menu--align-{{ menu_alignment }}{% endif %}" aria-labelledby="{{ id }}">
        {% for item in items -%}
        <a class="kx-dropdown__item" href="{{ item.href }}">{{ item.text }}</a>
        {%- endfor -%}
    </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 hide_text==true %} kx-btn--icon{% endif %}{% endif %}{% if show %} kx-dropdown--show{% endif %}" aria-haspopup="true" aria-expanded="false">
        <span class="kx-btn__inner">
            {%- if icon %}
                {% if icon_after -%}
                <span class="kx-btn__txt{% if hide_text %} 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 hide_text %} 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 hide_text %} 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 menu_alignment %} kx-dropdown__menu--align-{{ menu_alignment }}{% endif %}" aria-labelledby="{{ id }}">
        {% for item in items -%}
        <a class="kx-dropdown__item" href="{{ item.href }}">{{ item.text }}</a>
        {%- endfor -%}
    </div>
</div>
{% endif %}
{
  "classes": null,
  "text": "Dropdown",
  "skin": "primary",
  "size": "large",
  "split": null,
  "show": true,
  "icon": null,
  "icon_after": null,
  "hide_text": null,
  "caret": true,
  "items": [
    {
      "text": "Action",
      "href": "#"
    },
    {
      "text": "Another Action",
      "href": "#"
    },
    {
      "text": "Something else",
      "href": "#"
    }
  ],
  "menu_alignment": "left"
}
  • Content:
    // ==========================================================================
    // Component: dropdown
    // ==========================================================================
    
    // Elements (children)
    // ==========================================================================
    .kx-dropdown__toggle {
        position: relative;
    
        .kx-dropdown__caret {
            will-change: transform;
            transition: transform $duration-fast ease-in-out;
            transform-origin: center;
        }
    
        &:hover,
        &.kx-dropdown--show {
            + .kx-dropdown__menu {
                transition-property: visibility, opacity;
                transition-duration: 0s, $duration-fast;
                opacity: 1;
                visibility: visible;
            }
    
            .kx-dropdown__caret {
                transform: rotateX(180deg);
            }
        }
    }
    
    .kx-dropdown__item {
        @include type-scale(small);
        @include p(tiny, moderate, tiny, moderate);
        margin-left: rem-calc(1);
        display: block;
        width: calc(100% - 2px);
        white-space: nowrap;
        border: 0;
        text-decoration: none;
        color: $color-dropdownmenu-txt;
    
        &:hover {
            background-color: $color-dropdownmenu-bg-hover;
        }
    }
    
    .kx-dropdown__menu {
        @include reset-list;
        @include p(mini, none, mini, none);
        @include mt(nano);
        @include shadow(3);
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
        float: left;
        min-width: rem-calc(200);
        //border-radius: $radius-global;
        will-change: opacity, visibility;
        opacity: 0;
        visibility: hidden;
        transition-property: opacity, visibility;
        transition-duration: $duration-fast, 0s;
        transition-delay: 0s, $duration-fast;
        background-color: $color-dropdownmenu-bg;
        border: rem-calc(1) solid $color-dropdownmenu-border;
        //box-shadow: 0 0 0 rem-calc(1) $color-dropdownmenu-border inset, rem-calc(0 1 4 0) $color-shadow-base;
    }
    
    // Block (parent)
    // ==========================================================================
    .kx-dropdown {
        display: inline-flex;
        position: relative;
    }
    
    
    // Modifiers
    // ==========================================================================
    
    //.kx-dropdown--split {
    //    > .kx-btn:first-child {
    //
    //    }
    //}
    
    .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: 2.5 KB

There are no notes for this item.