<!-- TABS Component -->
<nav class="kx-tabs">
    <ol class="kx-tabs__list">
        <li class="kx-tabs__item kx-is-active">
            <a href="#" class="kx-tabs__label">

                <!-- 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-tabs__txt">Home</span>
            </a>
        </li>
        <li class="kx-tabs__item">
            <a href="#" class="kx-tabs__label">
                
                <span class="kx-tabs__txt">Applications</span>
            </a>
        </li>
        <li class="kx-tabs__item">
            <a href="#" class="kx-tabs__label">
                
                <span class="kx-tabs__txt">GSN Management</span>
            </a>
        </li>
        <li class="kx-tabs__item">
            <a href="" class="kx-tabs__label">
                
                <span class="kx-tabs__txt">Node Offshore</span>
            </a>
        </li>
    </ol>
</nav>
<!-- TABS Component -->
<nav class="kx-tabs{% if theme %} kx-tabs--theme-{{ theme }}{% endif %}">
    <ol class="kx-tabs__list">
        {% for item in items -%}
        <li class="kx-tabs__item{% if item.active %} kx-is-active{% endif %}">
            <a href="{{ item.href }}" class="kx-tabs__label">
                {% if item.icon %}
                {% render '@icon', item.icon %}
                {% endif %}
                <span class="kx-tabs__txt">{{ item.txt }}</span>
            </a>
        </li>
        {%- endfor -%}
    </ol>
</nav>
{
  "theme": null,
  "classes": null,
  "items": [
    {
      "txt": "Home",
      "href": "#",
      "active": true,
      "icon": {
        "size": "base",
        "symbol": "box"
      }
    },
    {
      "txt": "Applications",
      "href": "#"
    },
    {
      "txt": "GSN Management",
      "href": "#"
    },
    {
      "txt": "Node Offshore"
    }
  ]
}
  • Content:
    // ==========================================================================
    // Component: tabs
    // ==========================================================================
    
    // Elements (children)
    // ==========================================================================
    .kx-tabs__label {
        @include type-scale(small);
        @include p(small);
        @include reset-text-underline;
        @include flex;
        @include align-items-center;
    
        &:focus {
            outline: none;
        }
    
        &:focus,
        &:hover {
            background-color: $color-tab-bg-hover;
            background-color: $color-teal-01;
        }
    
        .kx-is-active & {
            color: $color-tab-txt-active;
            box-shadow: inset rem-calc(0 -2 0 0) $color-tab-border-active;
        }
    
        .kx-icon {
            + .kx-tabs__txt {
                @include ml(mini);
            }
        }
    
        .kx-tabs__txt:not(.kx-is-vishidden) {
            + .kx-icon {
                @include ml(mini);
            }
        }
    }
    
    .kx-tabs__item {
        @include flex;
        @include align-items-stretch;
    }
    
    .kx-tabs__list {
        @include cf;
        @include reset-list;
        @include flex;
    }
    
    // Block (parent)
    // ==========================================================================
    .kx-tabs {
        background-color: $color-tabs-bg;
    }
    
    // Modifiers
    // ==========================================================================
    
    .kx-tabs--theme-white {
        background-color: $color-breadcrumb-bg-theme-white;
        color: $color-breadcrumb-txt-theme-white;
        box-shadow: 0 rem-calc(1) 0 0 $color-breadcrumb-border;
    }
    
    .kx-tabs--theme-foam {
        background-color: $color-breadcrumb-bg-theme-foam;
        color: $color-breadcrumb-txt-theme-foam;
        box-shadow: 0 0 0 rem-calc(1) $color-breadcrumb-border;
    }
    
  • URL: /components/raw/tabs/_tabs.scss
  • Filesystem Path: src\components\01-tabs\_tabs.scss
  • Size: 1.8 KB

There are no notes for this item.