How can I create a kernel overlay?
I'm going crazy. I thought I had a Polymer style pen, but alas.
I have:
<my-app>
<sign-in>
<core-overlay>
In sign_in.css I style:
core-overlay {
background: red;
}
But it won't work!
My sign_in.html:
<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>
+3
source to share
1 answer
The backdrop and core-overlay elements are dynamically created as a child <body>
. To style the style you add the following css page to the CSS login page
background
<style>
body div.core-overlay-backdrop {
background: red;
}
</style>
imposition
* /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 css overlay 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 and CSS overlay.
+2
source to share