/*------------------------------------ Background Colors ------------------------------------*/ .u-label { display: inline-block; padding: .35rem .58rem; font-size: .9rem; line-height: 1; text-align: center; white-space: nowrap; color: #fff; &:empty { display: none; } .btn & { position: relative; top: -1px; } // Default color &-default { background-color: $g-color-gray-dark-v4; } &-default[href]:hover, &-default[href]:focus { background-color: $g-color-gray-dark-v3; } // Primary color &-primary { background-color: $g-color-success; } &-primary[href]:hover, &-primary[href]:focus { background-color: $g-color-success-dark-v1; } // Success color &-success { background-color: $g-color-success; } &-success[href]:hover, &-success[href]:focus { background-color: $g-color-success-dark-v1; } // Info color &-info { background-color: $g-color-info; } &-info[href]:hover, &-info[href]:focus { background-color: $g-color-info-dark-v1; } // Warning color &-warning { background-color: $g-color-warning; } &-warning[href]:hover, &-warning[href]:focus { background-color: $g-color-warning-dark-v1; } // Danger color &-danger { background-color: $g-color-danger; } &-danger[href]:hover, &-danger[href]:focus { background-color: $g-color-danger-dark-v1; } &.g-rounded-10 { padding: .35rem .7rem; } /* Label Size ------------------------------------*/ &--sm { font-size: .8rem; } &--lg { font-size: 1.1rem; } /* Label Styles ------------------------------------*/ &.u-label-with-icon { padding: .5rem .85rem; & i { margin-right: .5rem; } } /* Label Num ------------------------------------*/ &-num { min-width: 2rem; height: 2rem; padding: 0 .35rem; line-height: 2rem; } &-num.u-label--sm { min-width: 1.6rem; height: 1.6rem; line-height: 1.6rem; } &-num.u-label--lg { min-width: 2.2rem; height: 2.2rem; line-height: 2.2rem; } }