Fix stylelint warnings in related_items_list.scss59831-related-items-scss-cleanup

This commit rearranges the styles in related_items_list
to adhere to stylelint's warnings. It also adds some
utility classes where applicable

1 files changed, 207 insertions, 234 deletions

diff --git a/app/assets/stylesheets/components/related_items_list.scss b/app/assets/stylesheets/components/related_items_list.scss
index 628dffc39f1..1fe02c94334 100644
--- a/app/assets/stylesheets/components/related_items_list.scss
+++ b/app/assets/stylesheets/components/related_items_list.scss
@@ -11,6 +11,10 @@ $item-weight-max-width: 48px;
   }
 }
 
+.sortable-link {
+  max-width: 85%;
+}
+
 .item-body {
   display: flex;
   position: relative;
@@ -18,13 +22,6 @@ $item-weight-max-width: 48px;
   padding: $gl-padding-8;
   line-height: $gl-line-height;
 
-  .item-contents {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    flex-grow: 1;
-  }
-
   .issue-token-state-icon-open {
     color: $green-500;
   }
@@ -66,143 +63,136 @@ $item-weight-max-width: 48px;
       font-weight: $gl-font-weight-bold;
     }
 
-    .sortable-link {
-      max-width: 85%;
-    }
-
     .issue-token-state-icon-open,
     .issue-token-state-icon-closed {
       display: none;
     }
   }
 
-  .item-meta {
-    display: flex;
-    flex-wrap: wrap;
-    flex-basis: 100%;
-    font-size: $gl-font-size-small;
+  .item-path-id .path-id-text,
+  .item-milestone .milestone-title,
+  .item-due-date,
+  .item-weight .board-card-info-text {
     color: $gl-text-color-secondary;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+}
 
-    .item-meta-child {
-      order: 0;
-      display: flex;
-      flex-wrap: wrap;
-      flex-basis: 100%;
+.item-contents {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  flex-grow: 1;
+}
 
-      .item-due-date,
-      .item-weight {
-        margin-left: $gl-padding-8;
-      }
+.item-meta {
+  display: flex;
+  flex-wrap: wrap;
+  flex-basis: 100%;
+  font-size: $gl-font-size-small;
+  color: $gl-text-color-secondary;
 
-      .item-milestone,
-      .item-weight {
-        cursor: help;
-      }
+  .item-meta-child {
+    order: 0;
+    display: flex;
+    flex-wrap: wrap;
+    flex-basis: 100%;
+  }
 
-      .item-milestone {
-        text-decoration: none;
-        max-width: $item-milestone-max-width;
-      }
+  .item-milestone,
+  .item-weight {
+    cursor: help;
+  }
 
-      .item-due-date {
-        margin-right: 0;
-      }
+  .item-milestone {
+    text-decoration: none;
+    max-width: $item-milestone-max-width;
+  }
 
-      .item-weight {
-        margin-right: 0;
-        max-width: $item-weight-max-width;
-      }
-    }
+  .item-weight {
+    margin-right: 0;
+    max-width: $item-weight-max-width;
+  }
 
-    .item-path-id .path-id-text,
-    .item-milestone .milestone-title,
-    .item-due-date,
-    .item-weight .board-card-info-text {
-      color: $gl-text-color-secondary;
-      display: inline-block;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-    }
+  .item-milestone .ic-clock {
+    color: $gl-text-color-tertiary;
+    margin-right: $gl-padding-4;
+  }
 
-    .item-path-id {
-      margin-top: $gl-padding-4;
-      font-size: $gl-font-size-xs;
-      white-space: nowrap;
+  .item-assignees {
+    order: 2;
+    align-self: flex-end;
+    align-items: center;
+    margin-left: auto;
+
+    .user-avatar-link {
+      margin-right: -$gl-padding-4;
 
-      .path-id-text {
-        font-weight: $gl-font-weight-bold;
-        max-width: $item-path-max-width;
+      &:nth-of-type(1) {
+        z-index: 2;
       }
 
-      .issue-token-state-icon-open,
-      .issue-token-state-icon-closed {
-        display: block;
+      &:nth-of-type(2) {
+        z-index: 1;
       }
 
-      &:not(.mr-item-path) {
-        order: 1;
+      &:last-child {
+        margin-right: 0;
       }
     }
 
-    .item-milestone .ic-clock {
-      color: $gl-text-color-tertiary;
-      margin-right: $gl-padding-4;
+    .avatar {
+      height: $gl-padding;
+      width: $gl-padding;
+      margin-right: 0;
+      vertical-align: bottom;
     }
 
-    .item-assignees {
-      order: 2;
-      align-self: flex-end;
-      align-items: center;
-      margin-left: auto;
-
-      .user-avatar-link {
-        margin-right: -$gl-padding-4;
-
-        &:nth-of-type(1) {
-          z-index: 2;
-        }
+    .avatar-counter {
+      height: $gl-padding;
+      border: 1px solid transparent;
+      background-color: $gl-text-color-tertiary;
+      font-weight: $gl-font-weight-bold;
+      padding: 0 $gl-padding-4;
+      line-height: $gl-padding;
+    }
+  }
+}
 
-        &:nth-of-type(2) {
-          z-index: 1;
-        }
+.item-path-id {
+  margin-top: $gl-padding-4;
+  font-size: $gl-font-size-xs;
+  white-space: nowrap;
 
-        &:last-child {
-          margin-right: 0;
-        }
-      }
+  .path-id-text {
+    font-weight: $gl-font-weight-bold;
+    max-width: $item-path-max-width;
+  }
 
-      .avatar {
-        height: $gl-padding;
-        width: $gl-padding;
-        margin-right: 0;
-        vertical-align: bottom;
-      }
+  .issue-token-state-icon-open,
+  .issue-token-state-icon-closed {
+    display: block;
+  }
 
-      .avatar-counter {
-        height: $gl-padding;
-        border: 1px solid transparent;
-        background-color: $gl-text-color-tertiary;
-        font-weight: $gl-font-weight-bold;
-        padding: 0 $gl-padding-4;
-        line-height: $gl-padding;
-      }
-    }
+  &:not(.mr-item-path) {
+    order: 1;
   }
+}
 
-  .btn-item-remove {
-    position: absolute;
-    right: 0;
-    top: $gl-padding-4 / 2;
-    padding: $gl-padding-4;
-    margin-right: $gl-padding-4 / 2;
-    line-height: 0;
-    border-color: transparent;
-    color: $gl-text-color-secondary;
+.btn-item-remove {
+  position: absolute;
+  right: 0;
+  top: $gl-padding-4 / 2;
+  padding: $gl-padding-4;
+  margin-right: $gl-padding-4 / 2;
+  line-height: 0;
+  border-color: transparent;
+  color: $gl-text-color-secondary;
 
-    &:hover {
-      color: $gl-text-color;
-    }
+  &:hover {
+    color: $gl-text-color;
   }
 }
 
@@ -212,18 +202,20 @@ $item-weight-max-width: 48px;
 }
 
 @include media-breakpoint-up(sm) {
-  .item-body {
-    .item-contents .item-title {
-      .mr-title-link,
-      .sortable-link {
-        max-width: 90%;
-      }
-    }
+  .sortable-link {
+    max-width: 90%;
   }
 }
 
 /* Small devices (landscape phones, 768px and up) */
 @include media-breakpoint-up(md) {
+  .sortable-link {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    max-width: 100%;
+  }
+
   .item-body {
     .item-contents {
       min-width: 0;
@@ -235,37 +227,6 @@ $item-weight-max-width: 48px;
         // positioned absolutely
         width: 95%;
         margin-bottom: $gl-padding-4;
-
-        .mr-title-link,
-        .sortable-link {
-          text-overflow: ellipsis;
-          overflow: hidden;
-          white-space: nowrap;
-          max-width: 100%;
-        }
-      }
-
-      .item-meta {
-        .item-path-id {
-          order: 0;
-          margin-top: 0;
-        }
-
-        .item-meta-child {
-          flex-basis: unset;
-          margin-left: auto;
-          margin-right: $gl-padding-4;
-
-          ~ .item-assignees {
-            margin-left: $gl-padding-4;
-          }
-        }
-
-        .item-assignees {
-          margin-bottom: 0;
-          margin-left: 0;
-          order: 2;
-        }
       }
     }
 
@@ -273,6 +234,29 @@ $item-weight-max-width: 48px;
       order: 1;
     }
   }
+
+  .item-meta {
+    .item-path-id {
+      order: 0;
+      margin-top: 0;
+    }
+
+    .item-meta-child {
+      flex-basis: unset;
+      margin-left: auto;
+      margin-right: $gl-padding-4;
+
+      ~ .item-assignees {
+        margin-left: $gl-padding-4;
+      }
+    }
+
+    .item-assignees {
+      margin-bottom: 0;
+      margin-left: 0;
+      order: 2;
+    }
+  }
 }
 
 /* Medium devices (desktops, 992px and up) */
@@ -287,11 +271,6 @@ $item-weight-max-width: 48px;
     .item-meta .item-path-id {
       font-size: inherit; // Base size given to `item-meta` is `$gl-font-size-small`
     }
-
-    .issue-token-state-icon-open,
-    .issue-token-state-icon-closed {
-      margin-right: $gl-padding-4;
-    }
   }
 }
 
@@ -301,93 +280,87 @@ $item-weight-max-width: 48px;
     padding: $gl-padding-8;
     padding-left: $gl-padding;
 
-    .item-contents {
-      flex-wrap: nowrap;
-      overflow: hidden;
+    .item-title {
+      display: flex;
+      margin-bottom: 0;
+      min-width: 0;
+      width: auto;
+      flex-basis: unset;
+      font-weight: $gl-font-weight-normal;
 
-      .item-title {
-        display: flex;
-        margin-bottom: 0;
-        min-width: 0;
-        width: auto;
-        flex-basis: unset;
-        font-weight: $gl-font-weight-normal;
-
-        .mr-title-link,
-        .sortable-link {
-          display: block;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          overflow: hidden;
-          line-height: 1.3;
-        }
-
-        .issue-token-state-icon-open,
-        .issue-token-state-icon-closed {
-          display: block;
-          margin-right: $gl-padding-8;
-        }
-
-        .confidential-icon {
-          align-self: auto;
-          margin-top: 0;
-        }
+      .issue-token-state-icon-open,
+      .issue-token-state-icon-closed {
+        display: block;
+        margin-right: $gl-padding-8;
       }
 
-      .item-meta {
+      .confidential-icon {
+        align-self: auto;
         margin-top: 0;
-        justify-content: flex-end;
-        flex: 1;
-        flex-wrap: nowrap;
-
-        .item-path-id {
-          order: 0;
-          margin-top: 0;
-          margin-left: $gl-padding-8;
-          margin-right: auto;
-
-          .issue-token-state-icon-open,
-          .issue-token-state-icon-closed {
-            display: none;
-          }
-        }
-
-        .item-meta-child {
-          margin-left: $gl-padding-8;
-          flex-wrap: nowrap;
-        }
-
-        .item-assignees {
-          flex-grow: 0;
-          margin-top: 0;
-          margin-right: $gl-padding-4;
-
-          .avatar {
-            height: $gl-padding-24;
-            width: $gl-padding-24;
-          }
-
-          .avatar-counter {
-            height: $gl-padding-24;
-            min-width: $gl-padding-24;
-            line-height: $gl-padding-24;
-            border-radius: $gl-padding-24;
-          }
-        }
       }
     }
+  }
 
-    .btn-item-remove {
-      position: relative;
-      align-self: center;
-      top: initial;
-      right: 0;
-      margin-right: 0;
-      padding: $btn-sm-side-margin;
+  .item-contents {
+    flex-wrap: nowrap;
+    overflow: hidden;
+  }
 
-      &:hover {
-        border-color: $border-color;
-      }
+  .item-meta {
+    margin-top: 0;
+    justify-content: flex-end;
+    flex: 1;
+    flex-wrap: nowrap;
+
+    .item-meta-child {
+      margin-left: $gl-padding-8;
+      flex-wrap: nowrap;
     }
   }
+
+  .item-path-id {
+    order: 0;
+    margin-top: 0;
+    margin-left: $gl-padding-8;
+    margin-right: auto;
+  }
+
+  .item-assignees {
+    flex-grow: 0;
+    margin-top: 0;
+    margin-right: $gl-padding-4;
+
+    .avatar {
+      height: $gl-padding-24;
+      width: $gl-padding-24;
+    }
+
+    .avatar-counter {
+      height: $gl-padding-24;
+      min-width: $gl-padding-24;
+      line-height: $gl-padding-24;
+      border-radius: $gl-padding-24;
+    }
+  }
+
+  .btn-item-remove {
+    position: relative;
+    align-self: center;
+    top: initial;
+    right: 0;
+    margin-right: 0;
+    padding: $btn-sm-side-margin;
+
+    &:hover {
+      border-color: $border-color;
+    }
+  }
+
+  .sortable-link {
+    display: block;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    line-height: 1.3;
+  }
 }