gaf-mobile/app/styles/modules/BubbleTag.less

GAF mobile Web site

@import (reference) '../themes/variables';

/**
 * Bubble Tag
 *
 * Used as a bubble to show complimentary information
 *
 * .BubbleTag--leftArrow - bubble tag with arrow on the left
 * .BubbleTag--rightArrow - bubble tag with arrow on the right
 *
 * Markup: BubbleTag.html
 *
 * Styleguide 11
 */

 @BubbleTag-arrowMargin: 3px;
 @BubbleTag-arrowOffset: -2px;

.BubbleTag {
    position: relative;
    padding: 2px 10px;
    font-size: @type-size;
    color: @septenary-color-xxxlight;
    border-radius: 3px;
    background: @septenary-color-xxdark;

    &--leftArrow::before,
    &--rightArrow::after {
        content: "";
        position: absolute;
        top: 50%;
        height: 6px;
        width: 6px;
        margin-top: -3px;
        border-radius: 1px;
        background: @septenary-color-xxdark;
        transform: rotate(45deg);
    }

    &--leftArrow {
        margin-left:  @BubbleTag-arrowMargin;

        &::before {
            left:  @BubbleTag-arrowOffset;
        }
    }

    &--rightArrow {
        margin-right:  @BubbleTag-arrowMargin;

        &::after {
            right:  @BubbleTag-arrowOffset;
        }
    }
}