Tabs: Theme Foam 

<!-- TABS Component -->
<nav class="kx-tabs kx-tabs--theme-foam">
    <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": "foam",
  "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.