gaf-mobile/app/styles/modules/online-status.less

GAF mobile Web site

@import (reference) '../themes/variables';
@import (reference) "../libs/mixins.less";

@online-color: @quinary-color;

/* Online Status indicator, used in chatbox, etc. */

.online-status {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    .transition(.5s, ease-in-out);

    &[data-status="offline"] {
        display: none;
    }

    &[data-status="online"] {
        background-color: @online-color;
    }

    &--withLabel {
        position: relative;
        
        &::after {
            display: inline-block;
            position: absolute;
            top: 0;
            left: 100%;
            margin-left: 8px;
            font-size: @type-size-xsml;
            font-weight: @type-weight-bold;
            line-height: 1;
            color: @text-color-light;
            content: "Online";
        }
    }

    &--attached {
        position: absolute;
        top: -5px;
        left: -5px;
        border: 1px solid @septenary-color-xxxlight;
    }
}