mirror of
https://github.com/nasa/openmct.git
synced 2024-12-24 15:26:39 +00:00
Mod classes to fix default Notebook indicator (#3541)
- Simplified `is-status--*` mixins; - Cleaned up CSS; - Removed unused grid-item.scss file; - Added specific styling for default Notebook grid item; Co-authored-by: Deep Tailor <deep.j.tailor@nasa.gov>
This commit is contained in:
parent
59bf981fb0
commit
fd9c9aee03
@ -1,121 +0,0 @@
|
|||||||
/******************************* GRID ITEMS */
|
|
||||||
.c-grid-item {
|
|
||||||
// Mobile-first
|
|
||||||
@include button($bg: $colorItemBg, $fg: $colorItemFg);
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
padding: $interiorMarginLg;
|
|
||||||
|
|
||||||
&__type-icon {
|
|
||||||
filter: $colorKeyFilter;
|
|
||||||
flex: 0 0 $gridItemMobile;
|
|
||||||
font-size: floor($gridItemMobile / 2);
|
|
||||||
margin-right: $interiorMarginLg;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.is-alias {
|
|
||||||
// Object is an alias to an original.
|
|
||||||
[class*='__type-icon'] {
|
|
||||||
@include isAlias();
|
|
||||||
color: $colorIconAliasForKeyFilter;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__details {
|
|
||||||
display: flex;
|
|
||||||
flex-flow: column nowrap;
|
|
||||||
flex: 1 1 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__name {
|
|
||||||
@include ellipsize();
|
|
||||||
color: $colorItemFg;
|
|
||||||
@include headerFont(1.2em);
|
|
||||||
margin-bottom: $interiorMarginSm;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__metadata {
|
|
||||||
color: $colorItemFgDetails;
|
|
||||||
font-size: 0.9em;
|
|
||||||
|
|
||||||
body.mobile & {
|
|
||||||
[class*='__item-count'] {
|
|
||||||
&:before {
|
|
||||||
content: ' - ';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__controls {
|
|
||||||
color: $colorItemFgDetails;
|
|
||||||
flex: 0 0 64px;
|
|
||||||
font-size: 1.2em;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-end;
|
|
||||||
|
|
||||||
> * + * {
|
|
||||||
margin-left: $interiorMargin;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
body.desktop & {
|
|
||||||
$transOutMs: 300ms;
|
|
||||||
flex-flow: column nowrap;
|
|
||||||
transition: background $transOutMs ease-in-out;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: $colorItemBgHov;
|
|
||||||
transition: $transIn;
|
|
||||||
|
|
||||||
.c-grid-item__type-icon {
|
|
||||||
filter: $colorKeyFilterHov;
|
|
||||||
transform: scale(1);
|
|
||||||
transition: $transInBounce;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> * {
|
|
||||||
margin: 0; // Reset from mobile
|
|
||||||
}
|
|
||||||
|
|
||||||
&__controls {
|
|
||||||
align-items: start;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
order: 1;
|
|
||||||
.c-info-button,
|
|
||||||
.c-pointer-icon { display: none; }
|
|
||||||
}
|
|
||||||
|
|
||||||
&__type-icon {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
font-size: floor($gridItemDesk / 3);
|
|
||||||
margin: $interiorMargin 22.5% $interiorMargin * 3 22.5%;
|
|
||||||
order: 2;
|
|
||||||
transform: scale(0.9);
|
|
||||||
transform-origin: center;
|
|
||||||
transition: all $transOutMs ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__details {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
justify-content: flex-end;
|
|
||||||
order: 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__metadata {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
&__type {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
@include ellipsize();
|
|
||||||
}
|
|
||||||
|
|
||||||
&__item-count {
|
|
||||||
opacity: 0.7;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
@ -43,7 +43,20 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&[class*='is-status'] {
|
&.is-status--notebook-default {
|
||||||
|
.is-status__indicator {
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
color: $colorFilter;
|
||||||
|
content: $glyph-icon-notebook-page;
|
||||||
|
font-family: symbolsfont;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&[class*='is-status--missing'],
|
||||||
|
&[class*='is-status--suspect']{
|
||||||
[class*='__type-icon'],
|
[class*='__type-icon'],
|
||||||
[class*='__details'] {
|
[class*='__details'] {
|
||||||
opacity: $opacityMissing;
|
opacity: $opacityMissing;
|
||||||
|
@ -129,7 +129,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin isStatus($absPos: false) {
|
@mixin isStatus($absPos: false, $glyph: '', $color: $colorBodyFg) {
|
||||||
// Supports CSS classing as follows:
|
// Supports CSS classing as follows:
|
||||||
// is-status--missing, is-status--suspect, etc.
|
// is-status--missing, is-status--suspect, etc.
|
||||||
// Common styles to be applied to tree items, object labels, grid and list item views
|
// Common styles to be applied to tree items, object labels, grid and list item views
|
||||||
@ -143,6 +143,11 @@
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
color: $color;
|
||||||
|
content: $glyph;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -205,20 +205,10 @@ tr {
|
|||||||
}
|
}
|
||||||
|
|
||||||
&--missing {
|
&--missing {
|
||||||
@include isStatus();
|
@include isStatus($glyph: $glyph-icon-alert-triangle, $color: $colorAlert);
|
||||||
|
|
||||||
.is-status__indicator:before {
|
|
||||||
color: $colorAlert;
|
|
||||||
content: $glyph-icon-alert-triangle;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&--suspect {
|
&--suspect {
|
||||||
@include isStatus();
|
@include isStatus($glyph: $glyph-icon-alert-rect, $color: $colorWarningLo);
|
||||||
|
|
||||||
.is-status__indicator:before {
|
|
||||||
color: $colorWarningLo;
|
|
||||||
content: $glyph-icon-alert-rect;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -217,14 +217,12 @@
|
|||||||
.is-status--notebook-default {
|
.is-status--notebook-default {
|
||||||
&:after {
|
&:after {
|
||||||
color: $colorFilter;
|
color: $colorFilter;
|
||||||
content: $glyph-icon-notebook-page;
|
|
||||||
display: block;
|
|
||||||
font-family: symbolsfont;
|
font-family: symbolsfont;
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
margin-left: $interiorMargin;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.c-list__item:after {
|
&.c-list__item:after {
|
||||||
|
content: $glyph-icon-notebook-page;
|
||||||
flex: 1 0 auto;
|
flex: 1 0 auto;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
@ -29,8 +29,8 @@
|
|||||||
transform: scale(0.5);
|
transform: scale(0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
&[class*='is-status--missing'],
|
&.is-status--missing,
|
||||||
&[class*='is-status--suspect'] {
|
&.is-status--suspect {
|
||||||
[class*='__type-icon'] {
|
[class*='__type-icon'] {
|
||||||
&:before,
|
&:before,
|
||||||
&:after {
|
&:after {
|
||||||
@ -38,6 +38,14 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.is-status--notebook-default {
|
||||||
|
&:after {
|
||||||
|
content: $glyph-icon-notebook-page;
|
||||||
|
display: block;
|
||||||
|
margin-left: $interiorMargin;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-tree .c-object-label {
|
.c-tree .c-object-label {
|
||||||
|
Loading…
Reference in New Issue
Block a user