public/components/presence-indicator/_presence-indicators.scss

@import "layouts/global/mixins";

// Styles for presence indicators

// Compact view

$topIconOffset: 7px !default;
$rightIconOffset: 2px !default;
$topIconOffsetCompact: 3px;
$rightIconOffsetCompact: 8px;
$iconsToStack: ceil(calc($textualIconSize / 4px)); // Return a number (must divide values with units with values with units)
$stackOffset: 4px;
$iconExpandIntervalDistance: 24;
$iconExpandIntervalDistanceCompact: 18;
$stackColorLightenIncrement: 14%;
$iconAnimationTransTime: 0.5s;
$iconAnimationEasingFunction: ease-in-out;

.content-list-item__presence {
    display: inline-block;

    &-list {
        margin: 0;
        padding: 0;
        position: absolute;
        z-index: 1;
        top: 0;
        right: 0;
        height: 100%;
        width: 100%;
    }


    &--present,
    &--unknown,
    &--furniture,
    &--idle {
        @extend .content-list-item__presence;
    }

    &--unknown {
        background-color: lightgrey;
        color: white;
    }

    &--free {
        display: none;
    }

}

// Compact View modifiers ============================================================================

.content-list--compact .content-list-item__presence-list .content-list-item__presence--present, 
.content-list-item__presence--furniture,
.content-list-item__presence--idle {
    top: $topIconOffsetCompact;
    right: $rightIconOffsetCompact;
}

.content-list--compact .content-list-item__presence-list:hover .content-list-item__presence--present,
.content-list--compact .content-list-item__presence-list:hover .content-list-item__presence--furniture,
.content-list--compact .content-list-item__presence-list:hover .content-list-item__presence--idle {
    @for $i from 1 to $iconsToStack + 50 {
        &:nth-of-type(#{$i+1}) {
            right: ($i * $iconExpandIntervalDistanceCompact) + $rightIconOffsetCompact;
        }
    }
}

// !Compact View modifiers ===========================================================================

.content-list-item__presence-list {

    .content-list-item__presence--present, .content-list-item__presence--furniture, .content-list-item__presence--idle {
        position: absolute;
        top: $topIconOffset;
        right: $rightIconOffset;

        @include transition(right $iconAnimationTransTime $iconAnimationEasingFunction);

        .content-list-item__icon--presence {
            @include transition(color $iconAnimationTransTime, background-color $iconAnimationTransTime $iconAnimationEasingFunction);
        }

        @for $i from 1 to $iconsToStack + 50 {
            &:nth-of-type(#{$i+1}){
                z-index: $i*-1;
            }
        }
    }

    .content-list-item__presence--furniture {
        .content-list-item__icon--presence {
            background-color: $c-presence-light-purple;
        }
        @for $i from 1 to 3 {
            &:nth-of-type(#{$i+1}) {
                right: ($i * -$stackOffset) + $rightIconOffset;
                .content-list-item__icon--presence {
                    background-color: lighten($c-presence-light-purple, $i*$stackColorLightenIncrement);
                    color: rgba(255, 255, 255, 0);
                }
            }
        }
    }

    .content-list-item__presence--idle {
        .content-list-item__icon--presence {
            background-color: $c-presence-lightest-purple;
        }
        @for $i from 1 to 3 {
            &:nth-of-type(#{$i+1}) {
                right: ($i * -$stackOffset) + $rightIconOffset;
                .content-list-item__icon--presence {
                    background-color: lighten($c-presence-lightest-purple, $i*$stackColorLightenIncrement);
                    color: rgba(255, 255, 255, 0);
                }
            }
        }
    }

    .content-list-item__presence--present  {
        .content-list-item__icon--presence {
            background-color: $c-presence-purple;
        }

        @for $i from 1 to 3 {
            &:nth-of-type(#{$i+1}) {
                right: ($i * -$stackOffset) + $rightIconOffset;
                .content-list-item__icon--presence {
                    background-color: lighten($c-presence-purple, $i*$stackColorLightenIncrement);
                    color: rgba(255, 255, 255, 0);
                }
            }
        }
    }

    &:hover .content-list-item__presence--present {
        @for $i from 1 to $iconsToStack + 50 {
            // ensure all icons shown when expanded
            &:nth-of-type(#{$i+1}) {
                right: ($i * $iconExpandIntervalDistance) + $rightIconOffset;
                .content-list-item__icon--presence {
                    background-color: $c-presence-purple;
                    color: rgba(255, 255, 255, 1);
                    @include box-shadow(0px 0px 4px 1px #ffffff);
                }
            }
        }
    }

    &:hover .content-list-item__presence--furniture {
        @for $i from 1 to $iconsToStack + 50 {
            // ensure all icons shown when expanded
            &:nth-of-type(#{$i+1}) {
                right: ($i * $iconExpandIntervalDistance) + $rightIconOffset;
                .content-list-item__icon--presence {
                    background-color: $c-presence-light-purple;
                    color: rgba(255, 255, 255, 1);
                    @include box-shadow(0px 0px 4px 1px #ffffff);
                }
            }
        }
    }

    &:hover .content-list-item__presence--idle {
        @for $i from 1 to $iconsToStack + 50 {
            // ensure all icons shown when expanded
            &:nth-of-type(#{$i+1}) {
                right: ($i * $iconExpandIntervalDistance) + $rightIconOffset;
                .content-list-item__icon--presence {
                    background-color: $c-presence-lightest-purple;
                    color: rgba(255, 255, 255, 1);
                    @include box-shadow(0px 0px 4px 1px #ffffff);
                }
            }
        }
    }
}

// Presence in the drawer

.content-list-item__presence-list--drawer {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;

    .content-list-item__presence--present, .content-list-item__presence--furniture, .content-list-item__presence--idle {
        position: static;
        display: inline-block;
        .content-list-item__icon--presence {
            background-color: $c-presence-purple;
            width: auto;
            height: auto;
            text-transform: none;
            @extend %fs-data-2;
            @include border-radius(50px);
            padding: 0 6px;
            line-height: 16px;
            margin: 1px 0;
            border: 1px solid transparent;

            &:hover {
                background-color: #ffffff;
                border: 1px solid $c-presence-purple;
                color: $c-presence-purple;
            }
        }
    }
    .content-list-item__presence--furniture, .content-list-item__presence--idle {
        .content-list-item__icon--presence {
            background-color: $c-presence-light-purple;

            &:hover {
                background-color: #ffffff;
                border: 1px solid $c-presence-light-purple;
                color: $c-presence-light-purple;
            }
        }
    }

}