From e783359ff309848ad37a2cd4b2b67a8be78db4b4 Mon Sep 17 00:00:00 2001
From: Becky Siegel <beckysiegel@google.com>
Date: Fri, 14 Jul 2017 16:50:08 -0700
Subject: [PATCH] Change gr-page-nav styles to be in a css template

Previously, gr-page-nav styled <content> passed from a parent element.
Because Polymer2 does not allow for reaching into <slot> to style
content as was done before, the styles have to be imported to the
element that originally creates the content.

Change-Id: I6b12a90545482254df259a5b438f19153a947569
---
 .../admin/gr-admin-view/gr-admin-view.html    |  4 +-
 .../gr-settings-view/gr-settings-view.html    |  4 +-
 .../shared/gr-page-nav/gr-page-nav.html       | 42 -------------
 .../app/styles/gr-page-nav-styles.html        | 63 +++++++++++++++++++
 4 files changed, 69 insertions(+), 44 deletions(-)
 create mode 100644 polygerrit-ui/app/styles/gr-page-nav-styles.html

diff --git a/polygerrit-ui/app/elements/admin/gr-admin-view/gr-admin-view.html b/polygerrit-ui/app/elements/admin/gr-admin-view/gr-admin-view.html
index 087f0697c8..5bfa407244 100644
--- a/polygerrit-ui/app/elements/admin/gr-admin-view/gr-admin-view.html
+++ b/polygerrit-ui/app/elements/admin/gr-admin-view/gr-admin-view.html
@@ -19,6 +19,7 @@ limitations under the License.
 <link rel="import" href="../../../behaviors/base-url-behavior/base-url-behavior.html">
 <link rel="import" href="../../../behaviors/gr-url-encoding-behavior.html">
 <link rel="import" href="../../../styles/gr-menu-page-styles.html">
+<link rel="import" href="../../../styles/gr-page-nav-styles.html">
 <link rel="import" href="../../../styles/shared-styles.html">
 <link rel="import" href="../../shared/gr-page-nav/gr-page-nav.html">
 <link rel="import" href="../../shared/gr-placeholder/gr-placeholder.html">
@@ -34,7 +35,8 @@ limitations under the License.
   <template>
     <style include="shared-styles"></style>
     <style include="gr-menu-page-styles"></style>
-    <gr-page-nav>
+    <style include="gr-page-nav-styles"></style>
+    <gr-page-nav class="navStyles">
       <ul class="sectionContent">
         <template id="adminNav" is="dom-repeat" items="[[_filteredLinks]]">
           <li class$="sectionTitle [[_computeSelectedClass(item.view, params)]]">
diff --git a/polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view.html b/polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view.html
index 8679f98a69..761870e712 100644
--- a/polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view.html
+++ b/polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view.html
@@ -18,6 +18,7 @@ limitations under the License.
 
 <link rel="import" href="../../../styles/shared-styles.html">
 <link rel="import" href="../../../styles/gr-menu-page-styles.html">
+<link rel="import" href="../../../styles/gr-page-nav-styles.html">
 <link rel="import" href="../../../styles/gr-form-styles.html">
 <link rel="import" href="../../settings/gr-change-table-editor/gr-change-table-editor.html">
 <link rel="import" href="../../shared/gr-button/gr-button.html">
@@ -46,9 +47,10 @@ limitations under the License.
     </style>
     <style include="gr-form-styles"></style>
     <style include="gr-menu-page-styles"></style>
+    <style include="gr-page-nav-styles"></style>
     <div class="loading" hidden$="[[!_loading]]">Loading...</div>
     <div hidden$="[[_loading]]" hidden>
-      <gr-page-nav>
+      <gr-page-nav class="navStyles">
         <ul>
           <li><a href="#Profile">Profile</a></li>
           <li><a href="#Preferences">Preferences</a></li>
diff --git a/polygerrit-ui/app/elements/shared/gr-page-nav/gr-page-nav.html b/polygerrit-ui/app/elements/shared/gr-page-nav/gr-page-nav.html
index 9edb424e6a..f98a62cbaa 100644
--- a/polygerrit-ui/app/elements/shared/gr-page-nav/gr-page-nav.html
+++ b/polygerrit-ui/app/elements/shared/gr-page-nav/gr-page-nav.html
@@ -32,48 +32,6 @@ limitations under the License.
       #nav.pinned {
         position: fixed;
       }
-      #nav ::content ul {
-        padding: 1em 0;
-      }
-      #nav ::content li {
-        border-bottom: 1px solid transparent;
-        border-top: 1px solid transparent;
-        display: block;
-        padding: 0 2em;
-      }
-      #nav ::content li  a {
-        display: block;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-      #nav ::content .subsectionItem {
-        padding-left: 3em;
-      }
-      #nav ::content .hideSubsection {
-        display: none;
-      }
-      #nav ::content li.sectionTitle {
-        padding: 0 2em 0 1.5em;
-      }
-      #nav ::content li.sectionTitle:not(:first-child) {
-        margin-top: 1em;
-      }
-      #nav ::content .title {
-        font-weight: bold;
-        margin: .4em 0;
-      }
-      #nav ::content .selected {
-        background-color: #fff;
-        border-bottom: 1px dotted #808080;
-        border-top: 1px dotted #808080;
-        font-weight: bold;
-      }
-      #nav ::content a {
-        color: black;
-        display: inline-block;
-        margin: .4em 0;
-      }
       @media only screen and (max-width: 53em) {
         #nav {
           display: none;
diff --git a/polygerrit-ui/app/styles/gr-page-nav-styles.html b/polygerrit-ui/app/styles/gr-page-nav-styles.html
new file mode 100644
index 0000000000..e6e9c960e8
--- /dev/null
+++ b/polygerrit-ui/app/styles/gr-page-nav-styles.html
@@ -0,0 +1,63 @@
+<!--
+Copyright (C) 2017 The Android Open Source Project
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<dom-module id="gr-page-nav-styles">
+  <template>
+    <style>
+      .navStyles ul {
+        padding: 1em 0;
+      }
+      .navStyles li {
+        border-bottom: 1px solid transparent;
+        border-top: 1px solid transparent;
+        display: block;
+        padding: 0 2em;
+      }
+      .navStyles li  a {
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .navStyles .subsectionItem {
+        padding-left: 3em;
+      }
+      .navStyles .hideSubsection {
+        display: none;
+      }
+      .navStyles li.sectionTitle {
+        padding: 0 2em 0 1.5em;
+      }
+      .navStyles li.sectionTitle:not(:first-child) {
+        margin-top: 1em;
+      }
+      .navStyles .title {
+        font-weight: bold;
+        margin: .4em 0;
+      }
+      .navStyles .selected {
+        background-color: #fff;
+        border-bottom: 1px dotted #808080;
+        border-top: 1px dotted #808080;
+        font-weight: bold;
+      }
+      .navStyles a {
+        color: black;
+        display: inline-block;
+        margin: .4em 0;
+      }
+    </style>
+  </template>
+</dom-module>