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>

src/plugins/folderView/components/grid-item.scss

@@ -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;
-            }
-        }
-    }
-}

src/plugins/folderView/components/grid-view.scss

@@ -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*='__details'] {
             opacity: $opacityMissing;

src/styles/_mixins.scss

@@ -129,7 +129,7 @@
     }
 }
 
-@mixin isStatus($absPos: false) {
+@mixin isStatus($absPos: false, $glyph: '', $color: $colorBodyFg) {
     // Supports CSS classing as follows:
     // is-status--missing, is-status--suspect, etc.
     // Common styles to be applied to tree items, object labels, grid and list item views
@@ -143,6 +143,11 @@
             position: absolute;
             z-index: 3;
         }
+
+        &:before {
+            color: $color;
+            content: $glyph;
+        }
     }
 }
 

src/styles/_status.scss

@@ -205,20 +205,10 @@ tr {
     }
 
     &--missing {
-        @include isStatus();
-
-        .is-status__indicator:before {
-            color: $colorAlert;
-            content: $glyph-icon-alert-triangle;
-        }
+        @include isStatus($glyph: $glyph-icon-alert-triangle, $color: $colorAlert);
     }
 
     &--suspect {
-        @include isStatus();
-
-        .is-status__indicator:before {
-            color: $colorWarningLo;
-            content: $glyph-icon-alert-rect;
-        }
+        @include isStatus($glyph: $glyph-icon-alert-rect, $color: $colorWarningLo);
     }
 }

src/styles/notebook.scss

@@ -217,14 +217,12 @@
 .is-status--notebook-default {
     &:after {
         color: $colorFilter;
-        content: $glyph-icon-notebook-page;
-        display: block;
         font-family: symbolsfont;
         font-size: 0.9em;
-        margin-left: $interiorMargin;
     }
 
     &.c-list__item:after {
+        content: $glyph-icon-notebook-page;
         flex: 1 0 auto;
         text-align: right;
     }

src/ui/components/object-label.scss

@@ -29,8 +29,8 @@
         transform: scale(0.5);
     }
 
-    &[class*='is-status--missing'],
-    &[class*='is-status--suspect'] {
+    &.is-status--missing,
+    &.is-status--suspect {
         [class*='__type-icon'] {
             &:before,
             &: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 {