Dropdown: State: Show Primary 

<!-- 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.