metro4/less/badges.less

The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style

@import (once) "include/vars";
@import (once) "include/mixins";

.badge {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: @light;
    color: @dark;
    border-radius: @borderRadius;
    display: inline-block;
    padding: .25em .4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;

    .translateY(-50%);
    .translateX(50%);
}

.brand,
.app-bar-item,
.app-bar-menu > li > a,
.h-menu > li > a,
.d-menu > li > a,
.v-menu > li > a,
.t-menu > li > a
{
    .badge {
        .translateY(0);
        .translateX(0);
    }
}

.badge {
    &.inline {
        position: relative;
        display: inline-block;
        right: auto;
        top: -1px;
        .translateY(0);
        .translateX(0);
    }

    &.inside {
        .translateY(0);
        .translateX(0);
    }
}