openmct/platform/commonUI/general/res/sass/controls/_messages.scss

/*****************************************************************************
 * Open MCT, Copyright (c) 2014-2018, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/

@mixin statusBannerColors($bg, $fg: $colorStatusFg) {
	$bgPb: 10%;
	$bgPbD: 10%;
	background-color: darken($bg, $bgPb);
	color: $fg;
	&:hover {
		background-color: darken($bg, $bgPb - $bgPbD);
	}
	.s-action {
		background-color: darken($bg, $bgPb + $bgPbD);
		&:hover {
			background-color: darken($bg, $bgPb);
		}
	}
}

/******************************************************************* MESSAGE BANNERS */
.message {
	&.block {
		border-radius: $basicCr;
		padding: $interiorMarginLg;
	}
	&.error {
		background-color: rgba($colorAlert,0.3);
		color: lighten($colorAlert, 20%);
	}
}

.l-message-banner {
	$m: $interiorMarginSm;
	$lh: $ueFooterH - ($m*2) - 1;
	box-sizing: border-box;
	@include ellipsize();
	display: flex;
	flex-direction: row;
	align-items: center;
	position: absolute;
	top: $m; right: auto; bottom: $m; left: 50%;
	height: auto; width: auto;
	line-height: $lh;
	max-width: 300px;
	padding: 0 $interiorMargin 0 $interiorMargin;
	transform: translateX(-50%);

	&.minimized {
        @include transition-property(left, opacity);
        @include transition-duration(0.3s);
        @include transition-timing-function(ease-in-out);
		left: 0;
        opacity: 0;
	}

    &.new {
        left: 50%;
        opacity: 1;
        &:not(.info) {
            @include pulse($dur: 100ms, $iteration: 10);
        }
    }

	.banner-elem {
		flex: 0 1 auto;
		margin-left: $interiorMargin;
	}
	a {
		display: inline-block;
	}
	.l-action {
		line-height: $lh - 3;
		padding: 0 $interiorMargin;
	}
    .close {
		cursor: pointer;
        font-size: 7px;
		width: 8px;
    }
	.l-progress-bar {
		$h: $lh - 10;
		height: $h;
		line-height: $h;
		width: 100px;
	}
    .progress-info { display: none; }
	z-index: 10;
}

.s-message-banner {
	border-radius: $controlCr;
	@include statusBannerColors($colorStatusDefault, $colorStatusFg);
	cursor: pointer;
	a { color: inherit; }
	.s-action {
		border-radius: $basicCr;
        @include trans-prop-nice(background-color);
	}
	.close {
		opacity: 0.5;
		&:hover {
			opacity: 1;
		}
	}
	&.ok,
    &.info {
		@include statusBannerColors($colorInfo);
	}
	&.caution,
    &.warning,
    &.alert {
		@include statusBannerColors($colorWarningLo);
	}
    &.error {
        @include statusBannerColors($colorWarningHi);
    }
}

/******************************************************************* MESSAGES */

/* Contexts:
    In .t-message-list
    In .overlay as a singleton
    Inline in the view area
 */

// Archetypal message
.l-message {
    $iconW: 32px;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    padding: $interiorMarginLg;

    &:before {
        // Icon
        flex: 0 1 auto;
        @include txtShdw($shdwStatusIc);
        @extend .icon-bell;
        color: $colorStatusDefault;
        font-size: $iconW;
        width: $iconW + 2;
        margin-right: $interiorMarginLg;
    }

    &.message-severity-info:before {
        @extend .icon-info;
        color: $colorInfo;
    }

    &.message-severity-alert:before {
        color: $colorWarningLo;
    }

    &.message-severity-error:before {
        @extend .icon-alert-rect;
        color: $colorWarningHi;
    }
}


.w-message-contents {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;

    > div,
    > span {
        margin-bottom: $interiorMargin;
    }

    .message-body {
        flex: 1 1 100%;
    }
}

// Singleton in an overlay dialog
.t-message-single .l-message,
.t-message-single.l-message {
        $iconW: 80px;
        @include absPosDefault();
        padding: 0;
        &:before {
            font-size: $iconW;
            width: $iconW + 2;
        }
        .title {
            font-size: 1.2em;
        }
}

// Singleton inline in a view
.t-message-inline .l-message,
.t-message-inline.l-message {
    border-radius: $controlCr;
    &.message-severity-info { background-color: rgba($colorInfo, 0.3); }
    &.message-severity-alert { background-color: rgba($colorWarningLo, 0.3); }
    &.message-severity-error { background-color: rgba($colorWarningHi, 0.3); }

    .w-message-contents.l-message-body-only {
        .message-body {
            margin-top: $interiorMargin;
        }
    }
}

// In a list
.t-message-list {
    @include absPosDefault();
    display: flex;
    flex-direction: column;

    > div,
    > span {
        margin-bottom: $interiorMargin;
    }

    .w-messages {
        flex: 1 1 100%;
        overflow-y: auto;
        padding-right: $interiorMargin;
    }
    // Each message
    .l-message {
        border-radius: $controlCr;
        background: rgba($colorOvrFg, 0.1);
        margin-bottom: $interiorMargin;
        .hint,
        .bottom-bar {
            text-align: left;
        }
    }

}

@include phonePortrait {
    .t-message-single .l-message,
    .t-message-single.l-message {
        flex-direction: column;
        &:before {
            margin-right: 0;
            margin-bottom: $interiorMarginLg;
            text-align: center;
            width: 100%;
        }

        .bottom-bar {
            text-align: center;
            .s-button {
                display: block;
                width: 100%;
            }
        }
    }
}

body.desktop .t-message-list {
    .w-message-contents { padding-right: $interiorMargin; }
}

// Alert elements in views
.s-unsynced {
    $c: $colorPausedBg;
    border: 1px solid $c;
}

.s-status-timeconductor-unsynced {
    // Plot areas
    .gl-plot .gl-plot-display-area {
        @extend .s-unsynced;
    }

    // Object headers
    .object-header {
        .t-object-alert {
            display: inline;
        }
    }
}