When clicking on the toolbar's buttons, I can see a white background displayed before rendering the menu in green. See the demo.
Appreciate if someone can let me know what I did wrong as I am new to Polymer.
Update: Including demo code based on inputs (removed unrelated code) and solution provided by Dirk. The code below will display menu with appropriate background color DURING animation rendering (green in this case).
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=no">
<script rel="import" src="http://www.polymer-project.org/components/platform/platform.js"></script>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<link rel="import" href="http://www.polymer-project.org/components/core-icons/core-icons.html">
<link rel="import" href="http://www.polymer-project.org/components/paper-item/paper-item.html">
<link rel="import" href="http://www.polymer-project.org/components/paper-menu-button/paper-menu-button.html">
</head>
<body unresolved fullbleed layout>
<my-app></my-app>
<polymer-element name="my-app" noscript>
<template>
<style>
:host {
display: block;
height: 100%;
background-color: #0000ff;
}
paper-item {
font-size: 0.5em;
color: white;
/* --- remove this */
/*background-color: green;*/
}
/* --- add this */
paper-menu-button /deep/ .paper-menu-button-overlay-bg {
background: green;
}
</style>
<paper-menu-button icon="menu">
<paper-item icon="settings" label="Settings"></paper-item>
<paper-item icon="add" label="Add"></paper-item>
<paper-item icon="search" label="Search"></paper-item>
</paper-menu-button>
</template>
</polymer-element>
</body>
</html>
Please add the relevant parts of your code in your question for future reference. It is easier to get an overview of a question if everything is in one place and the JS Bin could be deleted in the future.
Then remove the background: green entry from the paper-item section. It is not needed since we style the background color of the popup menu elsewhere (another problem with this styling is, that it removes the round corners form the popup menu. This may or may not be intentional.)
Eventually add
paper-menu-button /deep/ .paper-menu-button-overlay-bg {
background: green;
}
to your styles and now everything looks much nicer. This section styles the background of the paper-menu-button popup, aka overlay.
Is this the proper way to do it? I don't know. Because now you have a dependency on the internals of the paper-menu-button in your CSS. I think in the future all core and paper elements need (to some extend) be completely themeable, meaning you can specify most of the core colors and styles for all components in a single place.
Related
I am busy doing the tutorial on Vaadin elements using Angular 2 which I found here
https://vaadin.com/docs/-/part/elements/angular2-polymer/tutorial-index.html
In chapter 5.3, Styles are applied to the app.component.ts as follow
import { Component } from [email protected]/core';
#Component({
selector: 'my-app',
template: `
<app-header-layout has-scrolling-region>
<app-header fixed>
<app-toolbar>
<div title spacer>All heroes</div>
</app-toolbar>
</app-header>
<div>My application content</div>
</app-header-layout>
`,
styles: [`
app-toolbar {
background: var(--primary-color);
color: var(--dark-theme-text-color);
}
`]
})
export class AppComponent { }
The variables in styles does not get applied in the component but when I change the color to red or blue like so:
app-toolbar {
background: red;
color: blue;
}
It actually works, meaning that the variables are not found.
I went to the index.html and saw that there is a style being applied to the body tag which also has variables.
<!-- Styles -->
<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="bower_components/paper-styles/color.html">
<link rel="import" href="bower_components/paper-styles/default-theme.html">
<link rel="import" href="bower_components/paper-styles/typography.html">
<link rel="import" href="bower_components/paper-styles/shadow.html">
<style is="custom-style">
body {
#apply(--layout-fullbleed);
#apply(--paper-font-body1);
background: var(--primary-background-color);
color: var(--primary-text-color);
}
</style>
Though these variables are actually found and applied. I tested it out by swapping out for another variable as seen below:
<style is="custom-style">
body {
#apply(--layout-fullbleed);
#apply(--paper-font-body1);
background: var(--paper-pink-a200);
color: var(--primary-text-color);
}
</style>
This variable turns the background pink and actually works.
These variables are mainly found in the color.html and default-theme.html and gets initialized as follow
default-theme.html
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="color.html">
<style is="custom-style">
:root{
--primary-text-color: var(--dark-theme-text-color);
--dark-theme-text-color: #ffffff;
--primary-color: var(--paper-indigo-500);
</style>
color.html
<link rel="import" href="../polymer/polymer.html">
<style is="custom-style">
--paper-indigo-500: #3f51b5;
--paper-pink-a200: #ff4081;
</style>
For some reason variables get applied in the index.html but not the app.component.ts and I followed the tutorial step by step. Can you help me solve this please ?
EDIT:
Also added "emitDecoratorMetadata": true to my code as a comment (Which had since been removed for some reason) suggested and in my Crome console there are no errors nor any warnings about this issue. If there is anything extra you need ask and I shall provide
Angular doesn't support CSS variables and mixins.
That's a Polymer feature and only works in Polymer elements.
As a workaround you could try to create a wrapper Polymer element where you put the styles and wrap the Vaadin element with that Polymer wrapper element.
Is it possible to render the Polymer input field to appear more like a standard html text input field vs the (unfortunate design choice of an) underlined text field? I have googled, but surprisingly cannot find anything that discusses how to achieve this, with examples.
Ref:
https://elements.polymer-project.org/elements/paper-input?active=paper-input-container#styling
I don't see a "background-color" setting. The "container" is always referred to as the "underline".
Update:
I can probably achieve the effect by making a paper-input a child of a paper-card; make the background of the card, white; then size the card to the input field. Since the paper-card has a sharp drop-shadow effect, the field should pop in a similar way to a standard html input field, but will conform to the styling and appearance expected of the framework.
The documentation you linked to lists the available custom properties and mixins that would indeed allow fine-grain control of the styling, including background-color and the underline. It doesn't explicitly list background-color or any other CSS because you'd be able to set that within the custom CSS mixin you provide, as described by the Polymer docs, which note:
It may be tedious (or impossible) for an element author to predict every CSS property that may be important for theming, let alone expose every property individually.
To change the background color of the inner input, you would set the --paper-input-container-input CSS property to a custom mixin, containing background-color:
paper-input {
--paper-input-container-input: {
background-color: rgba(0,0,0,0.1);
}
}
HTMLImports.whenReady(() => {
Polymer({ is: 'x-foo' });
});
<head>
<base href="https://polygit.org/polymer+1.6.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-input/paper-input.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<style>
paper-input.gray {
--paper-input-container-input: {
background-color: rgba(0,0,0,0.1);
}
}
</style>
<paper-input class="gray" label="Inner Gray Background"></paper-input>
</template>
</dom-module>
</body>
To hide the underline in the 3 possible states (default, focus, and disabled), you'd set the corresponding --paper-input-container-underline to a mixin, containing display: none:
paper-input {
--paper-input-container-underline: {
display: none
}
--paper-input-container-underline-focus: {
display: none
}
--paper-input-container-underline-disabled: {
display: none
}
}
HTMLImports.whenReady(() => {
Polymer({ is: 'x-foo' });
});
<head>
<base href="https://polygit.org/polymer+1.6.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-input/paper-input.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<style>
paper-input.no-underline {
/* hide underline in all states */
--paper-input-container-underline: {
display: none
}
--paper-input-container-underline-focus: {
display: none
}
--paper-input-container-underline-disabled: {
display: none
}
}
</style>
<paper-input class="no-underline" label="No Underline"></paper-input>
</template>
</dom-module>
</body>
codepen
I have the following example:
<!doctype html>
<html>
<head>
<script src='bower_components/webcomponentsjs/webcomponents.min.js'></script>
<link rel="import" href="bower_components/polymer/polymer.html"/>
<link rel='import' href='bower_components/paper-drawer-panel/paper-drawer-panel.html'>
<link rel='import' href='bower_components/paper-item/paper-item.html'>
<link rel='import' href='bower_components/paper-menu/paper-menu.html'>
<link rel='import' href='bower_components/paper-dropdown-menu/paper-dropdown-menu.html'>
<link rel='import' href='bower_components/paper-input/paper-input.html'>
</head>
<body>
<div style='width:400px'>
<paper-input label='Input label' class='inputbox'></paper-input>
<paper-dropdown-menu label='Drop down label'>
<paper-menu class='dropdown-content'>
<paper-item>A</paper-item>
<paper-item>B</paper-item>
</paper-menu>
</paper-dropdown-menu>
</div>
</body>
</html>
Here I am trying to get the paper-dropdown-menu to behave like the paper-input with respect to width and padding, but I have a hard time getting it aligned with the input. There seems to be some left padding somewhere in the paper-dropdown-menu and I cannot get it to accept filling 100% width like the input does by default. What can I do?
Thanks :-)
Cheers
Franz Thomsen
Inside paper-dropdown-menu, there's a paper-menu-button of which style needs to be updated too.
paper-dropdown-menu {
width: 100%;
}
paper-dropdown-menu paper-menu-button {
width: 100%;
padding: 0;
}
Check out this plunker.
If you look at the paper-dropdown-menu on github. You will see that it is built using a couple of other elements like paper-input, paper-item etc. These are the child elements of paper-dropdown-menu.
To access the CSS of these child elements you will need to use "shadow" as these child elements are in the shadow DOM of paper-dropdown-menu.
paper-dropdown-menu {
width: 300px;
}
paper-dropdown-menu::shadow paper-input{
width: 300px;
}
paper-dropdown-menu::shadow paper-item{
width: 300px;
}
This will change the width of the dropdown tab and also the width of what actually opens up when you click it.
I'm newbie at Polymer.
Problem:
I want use paper-scroll-header-panel in my custom element. Trying, but background image does not appear. Update: Problem with images on Imgur
Files: index.html, salon-header.html
index.html
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="salon-header.html">
<head>
<body>
<salon-header></salon-header>
<body>
<html>
salon-header.html:
<dom-module id="salon-header">
<link rel="import" href="bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html">
<link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/iron-media-query/iron-media-query.html">
<link rel="import" href="bower_components/paper-scroll-header-panel/demo/sample-content.html">
<template>
<style>
paper-scroll-header-panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: var(--paper-grey-200, #eee);
--paper-scroll-header-panel-full-header: {
background-image: url(bg3.jpg);
}
;
--paper-scroll-header-panel-condensed-header: {
background-color: var(--google-yellow-500, #f4b400);
}
;
}
paper-toolbar {
background-color: transparent;
}
paper-toolbar .title {
font-size: 40px;
margin-left: 60px;
}
.content {
padding: 8px;
}
</style>
<paper-scroll-header-panel condenses>
<paper-toolbar class="tall">
<paper-icon-button icon="arrow-back"></paper-icon-button>
<div class="flex"></div>
<paper-icon-button icon="search"></paper-icon-button>
<paper-icon-button icon="more-vert"></paper-icon-button>
<div class="bottom indent title">Title</div>
</paper-toolbar>
<div class="content">
<h3>Resize window to toggle between fixed header and scrolled header</h3>
<sample-content size="100"></sample-content>
</div>
</paper-scroll-header-panel>
</template>
</dom-module>
<script>
Polymer({
is: 'salon-header'
});
</script>
This works in a single file. But i want seperate files to clean index.
I tried:
Put webcomponentsjs only index and only salon-header. In the same way
all of these imports.
added attiribute to style tag in
salon-header.html like: (Likewise demo
files.)
Changed dom-module and template tags includes. Example: I put
the styles inside template or outside. Same way Imports inside
template and outside.
Finally: In this project structure (In question), header not have background image, only have background color #3f51b5.
When i try other ways, sometimes header doesnt appear, sometimes header have transparent background (Inherited from body: #eee)
I hope, i can explain myself.
By the way, you can share with me your Polymer experiences and you can suggest me Polymer tips. Thanks.
Put the <style> tags outside the <template> element. Please see the relevant documentation here. Same with adding external stylesheet. You should add it before the <template> tag and inside the <dom-module>
I have a custom <my-header> element that generates a link in shadow dom, which I'd like to have styled the same as the other links in the surrounding page. The old applyAuthorStyles attribute was a decent way to accomplish that, although it had its own problems. Now that applyAuthorStyles has been removed, the option I see is to have embedders define their global styles as:
a, * ^ a { color: green; }
and so on, which intrudes into the styles of elements that don't want the page's styles.
Is there a better way to do this?
I have some sample code at http://jsbin.com/yusox/1/edit and below. You'll only see the inconsistency if your browser has native Shadow DOM turned on (chrome://flags/#enable-experimental-web-platform-features in Chrome).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/polymer/0.1.4/platform.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/polymer/0.1.4/polymer.js"></script>
<title>Test</title>
<style>
body {max-width: 50ch;}
a { color: green; text-decoration:none; border-bottom: 1px blue dashed ; }
a:visited { color: darkgreen;}
</style>
<polymer-element name="my-header" noscript attributes="sec_num">
<template>
<style>
:host { display: block; }
header { font-weight: bold; margin: 20px 0; }
header::after { clear:both; display: block; content: " "; height: 0 }
</style>
<header>
<span class="section-number">{{sec_num}}</span>
<content></content>
<span style="float:right">[{{id}}]</span>
</header>
</template>
</polymer-element>
</head>
<body>
<my-header id="first.section" sec_num="1.2">Foo Bar Baz</my-header>
Polymer
</body>
</html>
intrudes into the styles of elements that don't want the page's styles.
Yes, intrusion will happen if you use *, so instead drive the style for your specific element:
a, my-header ^ a, body ^^ my-header ^ a { .. }
Fwiw, I don't think anybody is in love with this syntax, but that's the CSS that is supported today.
There are fancier solutions involving additional custom elements to manage dynamic, shared style-sheets, but it's a larger topic. Polymer will offer some kind of solution around these lines before long.