164 lines
3.8 KiB
SCSS
164 lines
3.8 KiB
SCSS
/*****************************************************************************
|
|
* Open MCT Web, Copyright (c) 2014-2015, United States Government
|
|
* as represented by the Administrator of the National Aeronautics and Space
|
|
* Administration. All rights reserved.
|
|
*
|
|
* Open MCT Web 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 Web 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: 30%;
|
|
$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);
|
|
}
|
|
}
|
|
}
|
|
|
|
.status.block {
|
|
color: $colorStatusDefault;
|
|
cursor: default;
|
|
display: inline-block;
|
|
margin-right: $interiorMargin;
|
|
.status-indicator,
|
|
.label,
|
|
.count {
|
|
//@include test(#00ff00);
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
.status-indicator {
|
|
margin-right: $interiorMarginSm;
|
|
}
|
|
&.ok .status-indicator {
|
|
color: $colorStatusOk;
|
|
}
|
|
&.caution .status-indicator {
|
|
color: $colorStatusCaution;
|
|
}
|
|
.label {
|
|
// Max-width silliness is necessary for width transition
|
|
@include trans-prop-nice(max-width, .25s);
|
|
overflow: hidden;
|
|
max-width: 0px;
|
|
}
|
|
.count {
|
|
@include trans-prop-nice(opacity, .25s);
|
|
font-weight: bold;
|
|
opacity: 1;
|
|
}
|
|
&:hover {
|
|
.label {
|
|
max-width: 150px;
|
|
width: auto;
|
|
}
|
|
.count {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Styles for messages and message banners */
|
|
.message {
|
|
&.block {
|
|
@include 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;
|
|
@include box-sizing(border-box);
|
|
@include ellipsize();
|
|
@include display-flex;
|
|
@include flex-direction(row);
|
|
@include 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 $interiorMarginLg;
|
|
@include transform(translateX(-50%));
|
|
|
|
a, span {
|
|
@include flex(0 1 auto);
|
|
margin-left: $interiorMargin;
|
|
&:first-child {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
a {
|
|
display: inline-block;
|
|
}
|
|
.l-action {
|
|
line-height: $lh - 3;
|
|
padding: 0 $interiorMargin;
|
|
}
|
|
.close {
|
|
//@include test(red, 0.7);
|
|
cursor: pointer;
|
|
font-size: 7px;
|
|
width: 8px;
|
|
}
|
|
.l-progress-bar {
|
|
$h: $lh - 10;
|
|
height: $h;
|
|
line-height: $h;
|
|
width: 100px;
|
|
}
|
|
z-index: 2;
|
|
}
|
|
|
|
.s-message-banner,
|
|
.s-message-banner .s-action {
|
|
@include trans-prop-nice(background-color, .25s);
|
|
}
|
|
|
|
.s-message-banner {
|
|
@include border-radius($controlCr);
|
|
@include statusBannerColors($colorStatusDefault, $colorStatusFg);
|
|
cursor: pointer;
|
|
a { color: inherit; }
|
|
.s-action {
|
|
@include border-radius($basicCr);
|
|
}
|
|
.close {
|
|
opacity: 0.5;
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
&.ok {
|
|
@include statusBannerColors($colorStatusOk);
|
|
}
|
|
&.caution {
|
|
@include statusBannerColors($colorStatusCaution);
|
|
}
|
|
} |