Fix stylelint warning in related_items_list.scss

app/assets/stylesheets/components/related_items_list.scss

@@ -59,10 +59,6 @@ $item-remove-button-space: 42px;
     flex-basis: 100%;
     font-size: $gl-font-size-small;
 
-    &.mr-title {
-      font-weight: $gl-font-weight-bold;
-    }
-
     .sortable-link {
       color: $gray-900;
     }
@@ -77,10 +73,6 @@ $item-remove-button-space: 42px;
     overflow: hidden;
     white-space: nowrap;
   }
-
-  .health-label-short {
-    display: none;
-  }
 }
 
 .item-body,
@@ -89,10 +81,6 @@ $item-remove-button-space: 42px;
     max-width: 0;
   }
 
-  .health-label-long {
-    display: none;
-  }
-
   .status {
     &-at-risk {
       color: $red-500;
@@ -158,19 +146,16 @@ $item-remove-button-space: 42px;
     max-width: $item-milestone-max-width;
 
     .ic-clock {
-      color: $gl-text-color-secondary;
       margin-right: $gl-padding-4;
     }
   }
 
   .item-weight {
     max-width: $item-weight-max-width;
-
-    .ic-weight {
-      color: $gl-text-color-secondary;
-    }
   }
 
+  .item-milestone .ic-clock,
+  .item-weight .ic-weight,
   .item-due-date .ic-calendar {
     color: $gl-text-color-secondary;
   }
@@ -314,10 +299,6 @@ $item-remove-button-space: 42px;
       max-width: 100px;
     }
   }
-
-  .health-label-long {
-    display: none;
-  }
 }
 
 /* Large devices (large desktops, 1200px and up) */
@@ -331,10 +312,6 @@ $item-remove-button-space: 42px;
     }
   }
 
-  .health-label-long {
-    display: none;
-  }
-
   .item-contents {
     overflow: hidden;
   }
@@ -371,12 +348,8 @@ $item-remove-button-space: 42px;
 
 @media only screen and (min-width: 1500px) {
   .card-header {
-    .health-label-short {
-      display: none;
-    }
-
     .health-label-long {
-      display: initial;
+      display: block;
     }
   }
 }

ee/app/assets/javascripts/related_items_tree/components/epic_health_status.vue

@@ -50,8 +50,10 @@ export default {
         {{ healthStatus.issuesOnTrack }}
       </span></span
     >
-    <span class="mr-1 mr-md-2 text-secondary health-label-long">{{ __('issues on track') }}</span>
-    <span class="mr-1 mr-md-2 text-secondary text-truncate health-label-short">{{
+    <span class="mr-1 mr-md-2 text-secondary health-label-long gl-display-none">{{
+      __('issues on track')
+    }}</span>
+    <span class="mr-1 mr-md-2 text-secondary text-truncate health-label-short gl-display-none">{{
       __('on track')
     }}</span>
 
@@ -60,10 +62,10 @@ export default {
         {{ healthStatus.issuesNeedingAttention }}
       </span></span
     >
-    <span class="mr-1 mr-md-2 text-secondary health-label-long">{{
+    <span class="mr-1 mr-md-2 text-secondary health-label-long gl-display-none">{{
       __('issues need attention')
     }}</span>
-    <span class="mr-1 mr-md-2 text-secondary text-truncate health-label-short">{{
+    <span class="mr-1 mr-md-2 text-secondary text-truncate health-label-short gl-display-none">{{
       __('need attention')
     }}</span>
 
@@ -72,7 +74,9 @@ export default {
         {{ healthStatus.issuesAtRisk }}
       </span></span
     >
-    <span class="text-secondary health-label-long">{{ __('issues at risk') }}</span>
-    <span class="text-secondary text-truncate health-label-short">{{ __('at risk') }}</span>
+    <span class="text-secondary health-label-long gl-display-none">{{ __('issues at risk') }}</span>
+    <span class="text-secondary text-truncate health-label-short gl-display-none">{{
+      __('at risk')
+    }}</span>
   </div>
 </template>