Badge: Icon

<span class="kx-badge kx-inline-flex kx-align-items-center">
    <span class="kx-badge__fill kx-inline-flex kx-align-items-center">
    <!-- ICON Component -->
<i class="kx-icon kx-icon--size-base kx-badge__icon">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#arrow-down"></use>
    </svg>
</i>
    </span>
<span class="kx-badge__txt kx-is-vishidden">Badge</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": "arrow-down",
    "size": "base",
    "classes": [
      "kx-badge__icon"
    ]
  },
  "skin": null,
  "text": "Badge",
  "hideTxt": true
}
  • 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.