commit 06f2dbbd1049f07c0aca22e416ad47ac75fe0a30
author Becky Siegel <beckysiegel@google.com> Mon Jun 05 14:23:08 2017 -0700
committer Becky Siegel <beckysiegel@google.com> Mon Jun 05 23:21:48 2017 +0000
tree 4bdb3840d6f83d143f16ff4f5c482d24ff729316
parent ea5f288bd275d36cf1d11a089ddbc3951d889c26

Fix padding on gr-tooltip with shadow DOM

The global * style in main.css took precedence over the padding applied
to :host. Instead add a wrapper div to apply padding there.

Bug: issue 6732
Change-Id: I57cec6b2a016d34a17993a0f2583e48a94dbc74e

polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip.html

diff --git a/polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip.html b/polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip.html
index 8d57be7..e79fb19 100644
--- a/polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip.html
+++ b/polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip.html
@@ -28,11 +28,13 @@
         box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
         color: #fff;
         font-size: .75rem;
-        padding: .5em .85em;
         position: absolute;
         z-index: 1000;
         max-width: var(--tooltip-max-width);
       }
+      :host .tooltip {
+        padding: .5em .85em;
+      }
       .arrow {
         border-left: var(--gr-tooltip-arrow-size) solid transparent;
         border-right: var(--gr-tooltip-arrow-size) solid transparent;
@@ -45,8 +47,10 @@
         width: 0;
       }
     </style>
-    [[text]]
-    <i class="arrow"></i>
+    <div class="tooltip">
+      [[text]]
+      <i class="arrow"></i>
+    </div>
   </template>
   <script src="gr-tooltip.js"></script>
 </dom-module>