Apply NestingDepth (level 5) (pages/pipelines.scss)

app/assets/stylesheets/pages/pipelines.scss

@@ -66,13 +66,9 @@
         }
       }
 
-      .btn-group {
-        &.open {
-          .btn-default {
-            background-color: $white-normal;
-            border-color: $border-white-normal;
-          }
-        }
+      .btn-group.open .btn-default {
+        background-color: $white-normal;
+        border-color: $border-white-normal;
       }
 
       .btn .text-center {
@@ -361,16 +357,14 @@
       &:not(:first-child) {
         margin-left: 44px;
 
-        .left-connector {
-          &::before {
-            content: '';
-            position: absolute;
-            top: 48%;
-            left: -44px;
-            border-top: 2px solid $border-color;
-            width: 44px;
-            height: 1px;
-          }
+        .left-connector::before {
+          content: '';
+          position: absolute;
+          top: 48%;
+          left: -44px;
+          border-top: 2px solid $border-color;
+          width: 44px;
+          height: 1px;
         }
       }
     }
@@ -386,22 +380,16 @@
     &:last-child {
       .build {
         // Remove right connecting horizontal line from first build in last stage
-        &:first-child {
-          &::after {
-            border: 0;
-          }
+        &:first-child::after {
+          border: 0;
         }
         // Remove right curved connectors from all builds in last stage
-        &:not(:first-child) {
-          &::after {
-            border: 0;
-          }
+        &:not(:first-child)::after {
+          border: 0;
         }
         // Remove opposite curve
-        .curve {
-          &::before {
-            display: none;
-          }
+        .curve::before {
+          display: none;
         }
       }
     }
@@ -409,16 +397,12 @@
     &:first-child {
       .build {
         // Remove left curved connectors from all builds in first stage
-        &:not(:first-child) {
-          &::before {
-            border: 0;
-          }
+        &:not(:first-child)::before {
+          border: 0;
         }
         // Remove opposite curve
-        .curve {
-          &::after {
-            display: none;
-          }
+        .curve::after {
+          display: none;
         }
       }
     }

changelogs/unreleased/39584-nesting-depth-5-pages-pipelines.yml

+---
+title: Apply NestingDepth (level 5) (pages/pipelines.scss)
+merge_request: 18830
+author: Takuya Noguchi
+type: other