Badge: Foam 

<span class="kx-badge kx-inline-flex kx-align-items-center">
    <span class="kx-badge__fill kx-badge--skin-foam kx-inline-flex kx-align-items-center">
    <span class="kx-badge__txt">Foam</span>
</span>
</span>
 
<span class="kx-badge kx-inline-flex kx-align-items-center">
    <span class="kx-badge__fill{% if skin %} kx-badge--skin-{{ skin }}{% endif %} kx-inline-flex kx-align-items-center">
    {% if icon.symbol -%}
        {% render '@icon', icon, true %}
    </span>
    <span class="kx-badge__txt{% if hideTxt %} kx-is-vishidden{% endif %}">{{ text }}</span>
    {%- else -%}
        <span class="kx-badge__txt">{{ text }}</span>
    </span>
    {% endif -%}
</span>
 
{
  "icon": {
    "symbol": null,
    "size": "base",
    "classes": [
      "kx-badge__icon"
    ]
  },
  "skin": "foam",
  "text": "Foam"
}
  • Content: 
    // ==========================================================================
// Component: badge
// ==========================================================================

// Elements (children)
// ==========================================================================
.kx-badge__fill {
    border-radius: 500px;
    background-color: $color-notification-bg-neutral;

    > .kx-badge__txt {
        @include p(nano, mini, nano, mini);
    }

    > .kx-badge__icon {
        margin: rem-calc(3);
    }

    + .kx-badge__txt {
        @include ml(tiny);
    }
}

// Block (parent)
// ==========================================================================
.kx-badge {
    @include type-scale(small);
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
}

// Modifiers
// ==========================================================================

.kx-badge--skin-primary {
    background-color: $color-badge-bg-primary;
    color: $color-badge-txt-primary;
}

.kx-badge--skin-secondary {
    background-color: $color-badge-bg-secondary;
    color: $color-badge-txt-secondary;
}

.kx-badge--skin-info {
    background-color: $color-badge-bg-info;
    color: $color-badge-txt-info;
}

.kx-badge--skin-success {
    background-color: $color-badge-bg-success;
    color: $color-badge-txt-success;
}

.kx-badge--skin-warning {
    background-color: $color-badge-bg-warning;
    color: $color-badge-txt-warning;
}

.kx-badge--skin-danger {
    background-color: $color-badge-bg-danger;
    color: $color-badge-txt-danger;
}

.kx-badge--skin-foam {
    background-color: $color-badge-bg-foam;
    color: $color-badge-txt-foam;
}

.kx-badge--skin-navy {
    background-color: $color-badge-bg-navy;
    color: $color-badge-txt-navy;
}
  • URL: /components/raw/badge/_badge.scss
  • Filesystem Path: src\components\01-badge\_badge.scss
  • Size: 1.8 KB

There are no notes for this item.