rahmanda/ayu

View on GitHub
src/components/_badge.scss

Summary

Maintainability
Test Coverage
// =====================================================
// Badge
// =====================================================

$badge-prefix: "badge" !default;
$theme-badge-enable: false !default;

@if ($theme-badge-enable == true) {
.#{$badge-prefix} {
    display: inline-block;
    box-sizing: border-box;
    margin-right: $theme-badge-margin;
    padding: $theme-badge-padding;
    color: map-get($theme-color-badge, foreground);
    background: map-get($theme-color-badge, background);
    font-size: map-get($theme-font-size, small);
    line-height: map-get($theme-line-height, small);
    font-weight: map-get($theme-font-weight, normal);
    border-radius: $theme-badge-border-radius;
    text-decoration: none;

    &:hover {
        cursor: pointer;
        background: map-get($theme-color-badge, hover);
    }

    &--gray {
        background: map-get($theme-colors, gray);

        &:hover {
            background: lighten(map-get($theme-colors, gray), 5%);
        }
    }

    &--blue {
        background: map-get($theme-colors, blue);

        &:hover {
            background: lighten(map-get($theme-colors, blue), 5%);
        }
    }

    &--red {
        background: map-get($theme-colors, red);

        &:hover {
            background: lighten(map-get($theme-colors, red), 5%);
        }
    }

    &--orange {
        background: map-get($theme-colors, orange);

        &:hover {
            background: lighten(map-get($theme-colors, orange), 5%);
        }
    }
}

}