How do I style a core-overlay?

837 Views Asked by David Notik At 11 April 2025 at 03:57

I'm going crazy here. I thought I had a handle on Polymer styling, but alas.

I've got:

<my-app>
  <sign-in>
    <core-overlay>

In sign_in.css I style:

core-overlay {
  background: red;
}

But it doesn't work!

My sign_in.html is:

<link rel="import" href="../../../../../../../packages/polymer/polymer.html">
<link rel="import" href="../../../../../../../packages/core_elements/core_overlay.html">
<polymer-element name="sign-in">
  <template>
    <link rel="stylesheet" href="sign_in.css">
    <core-overlay id="overlay" class="overlay" layered backdrop opened="false" transition="core-transition-center">
      <span id="message">Please sign in to comment.</span>
      <button class="signin-btn" id="facebook-signin" on-click="{{signInWithFacebook}}">Sign in with Facebook</button>
    </core-overlay>
  </template>
  <script type="application/dart" src="sign_in.dart"></script>
</polymer-element>

Original Q&A

There are 1 best solutions below

Günter Zöchbauer On 29 August 2014 at 05:33 BEST ANSWER

The backdrop and core-overlay elements are created dynamically as child of <body>. To style it you add the following css to your entry page CSS

backdrop

<style>
  body div.core-overlay-backdrop {
    background: red;
  }
</style>

overlay

  * /deep/ core-overlay {
     box-sizing: border-box;
     -moz-box-sizing: border-box;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 13px;
     -webkit-user-select: none;
     -moz-user-select: none;
     overflow: hidden;
     background: green;
     padding:30px 42px;
     outline: 1px solid rgba(0,0,0,0.2);
     box-shadow: 0 4px 16px rgba(0,0,0,0.2);
   }

The overlay css is copied from https://github.com/Polymer/core-overlay/blob/master/demo.html#L38-L49.
The core-overlay demo uses a custom Polymer element x-dialog to encapsulate the core-overlay and the CSS.

How do I style a core-overlay?

There are 1 best solutions below

backdrop

overlay

Related Questions in DART

Related Questions in POLYMER

Related Questions in DART-POLYMER

Related Questions in CORE-ELEMENTS

Trending Questions

Popular # Hahtags

Popular Questions