From 3522dcff65b989b5cbefcdf0bcec75f30185bfda Mon Sep 17 00:00:00 2001
From: Jack Franklin <jacktfranklin@chromium.org>
Date: Thu, 14 Jan 2021 11:51:58 +0000
Subject: [PATCH] Style component doc breadcrumbs with class

Styling it with just `ul` meant it applied to any `ul`s on the page (as
it's not in a shadow root) and it broke some examples. Added a class
instead.

Change-Id: I428b0db2aeeae507c9254e49cc3643b809aee5a5
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2626305
Auto-Submit: Jack Franklin <jacktfranklin@chromium.org>
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org>
Reviewed-by: Tim van der Lippe <tvanderlippe@chromium.org>
---
 front_end/component_docs/create_breadcrumbs.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/front_end/component_docs/create_breadcrumbs.ts b/front_end/component_docs/create_breadcrumbs.ts
index d3239f849a..6de1ed388e 100644
--- a/front_end/component_docs/create_breadcrumbs.ts
+++ b/front_end/component_docs/create_breadcrumbs.ts
@@ -10,7 +10,7 @@ export function init(): void {
   LitHtml.render(LitHtml.html`
 
   <style>
-    ul {
+    .docs-breadcrumbs {
       display: flex;
       list-style: none;
       position: absolute;
@@ -20,18 +20,18 @@ export function init(): void {
       padding: 0;
     }
 
-    li a {
+    .docs-breadcrumbs li a {
       display: block;
       padding: 10px;
       font-size: 16px;
     }
 
-    span {
+    .docs-breadcrumbs span {
       font-size: 20px;
-
+    }
   </style>
 
-  <ul>
+  <ul class="docs-breadcrumbs">
     <li><a href="/">Index</a></li>
     <li><a href=".">All component examples</a></li>
   </ul>`, container);