Fix gr-alert styling in polymer2
Shadow DOM host styling has lower specificity than parent page.
Bug: Issue 11176
Change-Id: I7edb96a17e989f176ab2c78f5e91e244ab1d55bc
diff --git a/polygerrit-ui/app/elements/shared/gr-alert/gr-alert.html b/polygerrit-ui/app/elements/shared/gr-alert/gr-alert.html
index 2b043c4..cc6453c 100644
--- a/polygerrit-ui/app/elements/shared/gr-alert/gr-alert.html
+++ b/polygerrit-ui/app/elements/shared/gr-alert/gr-alert.html
@@ -35,7 +35,6 @@
box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
color: var(--view-background-color);
left: 1.25rem;
- padding: 1em 1.5em;
position: fixed;
transform: translateY(5rem);
transition: transform var(--gr-alert-transition-duration, 80ms) ease-out;
@@ -44,6 +43,17 @@
:host([shown]) {
transform: translateY(0);
}
+ /**
+ * NOTE: To avoid style being overwritten by outside of the shadow DOM
+ * (as outside styles always win), .content-wrapper is introduced as a
+ * wrapper around main content to have better encapsulation, styles that
+ * may be affected by outside should be defined on it.
+ * In this case, `padding:0px` is defined in main.css for all elements
+ * with the universal selector: *.
+ */
+ .content-wrapper {
+ padding: 1em 1.5em;
+ }
.text {
color: var(--tooltip-text-color);
display: inline-block;
@@ -62,12 +72,14 @@
}
}
</style>
- <span class="text">[[text]]</span>
- <gr-button
- link
- class="action"
- hidden$="[[_hideActionButton]]"
- on-tap="_handleActionTap">[[actionText]]</gr-button>
+ <div class="content-wrapper">
+ <span class="text">[[text]]</span>
+ <gr-button
+ link
+ class="action"
+ hidden$="[[_hideActionButton]]"
+ on-tap="_handleActionTap">[[actionText]]</gr-button>
+ </div>
</template>
<script src="gr-alert.js"></script>
</dom-module>
