I'm trying to apply a theme to my dart-polymer material-design application, everywhere I look at videos and tutorials, it is suggested that with a few lines of CSS you can change the look of the whole application.
I've even generated a theme just now using: http://www.materialpalette.com/grey/red and it gave me the following CSS:
/* Palette generated by Material Palette - materialpalette.com/grey/red */
.dark-primary-color { background: #616161; }
.default-primary-color { background: #9E9E9E; }
.light-primary-color { background: #F5F5F5; }
.text-primary-color { color: #212121; }
.accent-color { background: #FF5252; }
.primary-text-color { color: #212121; }
.secondary-text-color { color: #727272; }
.divider-color { border-color: #B6B6B6; }
... which I've included in my default stylesheet, but with no colour changes.
So if this is my custom polymer element:
<polymer-element name="main-app" class="default">
<template>
<style type="text/css">
:host {
display: block;
}
</style>
<core-toolbar class="default">
<paper-icon-button icon="menu"></paper-icon-button>
<span flex class="default">
<paper-tabs selected="0">
<paper-tab>ITEM ONE</paper-tab>
<paper-tab>ITEM TWO</paper-tab>
<paper-tab>ITEM THREE</paper-tab>
</paper-tabs>
</span>
<paper-icon-button icon="refresh"></paper-icon-button>
<paper-icon-button icon="more-vert"></paper-icon-button>
</core-toolbar>
</template>
<script type="application/dart" src="main-app.dart"></script>
</polymer-element>
And this is my index.html using that custom main-app component:
<!DOCTYPE html>
<head>
...
<link rel="import" href="packages/falm/main-app.html">
<link rel="stylesheet" href="styles.css">
</head>
<body unresolved>
<main-app class="default"></main-app>
<script type="application/dart">export 'package:polymer/init.dart';</script>
</body>
</html>
... what is the proper way to use the generated theme?
Am I suppose to add those css classes in manually everywhere?
Yes, you need to add the classes somewhere.
You can use the core-style element to reuse styles or you can add the styles to the main page (index.html) and prefix them with * /deep/ (like `* /deep/ .dark-primary-color) but still need to apply the classes to the elements.
Some resources about styling polymer elements
https://www.polymer-project.org/articles/styling-elements.html
https://www.polymer-project.org/docs/polymer/styling.html
https://www.polymer-project.org/docs/polymer/layout-attrs.html
Related
I'm trying to style body, header and form tags in my ASP.NET Web App using Razor Pages, CSS Isolation. Styles created in scoped CSS file (_Layout.cshtml.css) for some HTML tags are not working. The same for other components files. Adding a class for those tags and style class selectors in scoped CSS file also doesn't work.
Code - a part of _Layout.cshtml:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - RazorTest</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="~/css/_Layout.cshtml.css" asp-append-version="true" />
<link rel="stylesheet" href="~/RazorTest.styles.css" asp-append-version="true" />
</head>
<body>
<header>
<nav>
<div>
<img src="" alt="">
</div>
</nav>
</header>
<div class="container">
<form action="">
<input type="text">
</form>
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2022 - RazorTest - <a asp-area="" asp-page="/Privacy">Privacy</a>
</div>
</footer>
_Layout.chstml.css:
body {
background-color: #444;
}
header {
border: 10px solid red;
}
form {
border: 10px solid cyan;
}
input {
border: 10px solid greenyellow;
}
nav {
border: 10px solid blue;
}
div {
border: 10px solid black;
}
main {
border: 10px solid green;
}
img {
width: 100px;
height: 100px;
border: 10px solid orange;
}
Let me show that on SS's:
_Layout.cshtml and _Layout.cshtml.css files
Browser output
Everything works well when I move my CSS file to wwwroot/css directory and link it in _Layout.cshtml file. Styles for those tags also works when added to site.css file. Screenshots:
_Layout.cshtml and _Layout.cshtml.css files
Browser output
Why styles for some tags are not working when added in scoped CSS file?
If you use .AddRazorRuntimeCompilation() for hot reload, try build without it.
Beside the tag-helper issue mentioned above, it is a build step.
Just one thing to note, CSS isolation is a build step, so it doesn't work with Razor Runtime Compliation
Beside tag-helper issue mentioned above, scoped css is build time
Faced the same issue and found this article.
I encountered similar behavior a few times when testing CSS isolation in ASP.NET 6 with Razor pages.
I noticed that not all HTML element receive a scope identifier and therefore are not affected by the scoped CSS file.
Here's a part of my final [PROJECT_NAME].styles.css file (included as link element in the page layout):
form[b-l6oslukat8] {
background-color: orange;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
And here is related part of the final HTML file where the identifier (b-l6oslukat8) should be but isn't:
<section b-l6oslukat8="" class="full page">
<form data-form-type="login">
<input b-l6oslukat8 type="text" id="Username" name="Username">
<input b-l6oslukat8 type="password" id="Password" name="Password">
</form>
</section>
Looks like this is a case with your final HTML/CSS as well. It seems to me it's a bug in the implementation of CSS isolation in .NET 6.
Why styles for some tags are not working when added in scoped CSS file?
Maybe iy is not enough tou take precedence.
You can try to use either specificity or the natural cascade to override the styling,so that it may be enough to take precedence.For example,you can change:
img {
width: 100px;
height: 100px;
border: 10px solid orange;
}
to
body > div > img {
width: 100px;
height: 100px;
border: 10px solid orange;
}
And if you want to change the style which cannot use either specificity or the natural cascade,you can try to add the style into the view,for example:
<style>
body {
background-color: #444;
}
</style>
I am trying to round the corners of a paper-listbox, which is contained in a paper-dropdown-menu. However, the following CSS doesn't change the border radius as I would've expected:
paper-listbox {
border-radius: 14pt !important;
--paper-listbox: {
border-radius: 14pt;
overflow: hidden;
};
}
How can I set the border-radius of this paper-listbox?
Screenshot:
The internal DOM of <paper-dropdown-menu> looks something like this:
<paper-menu-button>
<iron-dropdown>
<div slot="dropdown-content" class="dropdown-content">
<slot name="dropdown-content"></slot> <!-- user's slot content of paper-dropdown-menu is inserted here -->
</div>
</iron-dropdown>
</paper-menu-button>
So this user code:
<paper-dropdown-menu>
<paper-listbox slot="dropdown-content"> <!-- user's slot content -->
</paper-listbox>
</paper-dropdown-menu>
becomes:
<paper-dropdown-menu>
<paper-menu-button>
<iron-dropdown>
<div slot="dropdown-content" class="dropdown-content">
<paper-listbox> <!-- user's slot content inserted -->
</paper-listbox>
</div>
</iron-dropdown>
</paper-menu-button>
</paper-dropdown-menu>
In <paper-menu-button>, the div.dropdown-content container is styled to show a box-shadow (via --shadow-elevation-2dp), making the square edges of the <div> appear. The CSS you used to style the <paper-listbox> indeed styles the listbox, but the square edges you saw were actually from the listbox's parent (div.dropdown-content) with its box-shadow edges. You can override the styles of div.dropdown-content with the --paper-menu-button-content mixin, as shown in the following steps:
Apply a class to your <paper-dropdown-menu>:
<paper-dropdown-menu class="dropdown">
Create a style for that class that sets --paper-menu-button-content:
<style>
.dropdown {
--paper-menu-button-content: {
border-radius: 14pt;
}
}
</style>
window.addEventListener('WebComponentsReady', () => {
class XFoo extends Polymer.Element {
static get is() { return 'x-foo'; }
static get properties() {
return {
customers: {
type: Array,
value: () => [
'Alice',
'Bob',
'Charlie',
'David',
]
}
};
}
}
customElements.define(XFoo.is, XFoo);
});
<head>
<base href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/">
<script src="webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-listbox/paper-listbox.html">
<link rel="import" href="paper-item/paper-item.html">
<link rel="import" href="paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="neon-animation/web-animations.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<style>
.dropdown {
--paper-menu-button-content: {
border-radius: 14pt;
}
}
</style>
<paper-dropdown-menu id="customer"
class="dropdown"
placeholder="Select Customer">
<paper-listbox id="customerList"
slot="dropdown-content"
attr-for-selected="value"
selected="[[customer]]">
<template is="dom-repeat" items="[[customers]]" as="customer">
<paper-item value="[[customer]]">[[customer]]</paper-item>
</template>
</paper-listbox>
</paper-dropdown-menu>
</template>
</dom-module>
</body>
<paper-listbox> found you a custom-property to style the element:
Custom property | Description | Default
------------------------------------|-------------------------------|-----------------------
`--paper-listbox-background-color` | Menu background color | `--primary-background-color`
`--paper-listbox-color` | Menu foreground color | `--primary-text-color`
`--paper-listbox` | Mixin applied to the listbox | `{}`
The --paper-listbox can be useful for your case :
<dom-module id="x-app">
<template>
<style>
:host {
--paper-listbox: {
border-radius: 14pt;
border: solid 1px blue;
/* you need to hide overflow */
overflow: hidden;
}
}
/* OR (if you have multiple listbox with different styles) */
paper-listbox.radius {
--paper-listbox: {
border-radius: 14pt;
border: solid 1px blue;
overflow: hidden;
}
}
</style>
<paper-listbox class="radius">
<paper-item>a</paper-item>
<paper-item>b</paper-item>
<paper-item>c</paper-item>
</paper-listbox>
</template>
</dom-module>
I am trying to control the attribute value of webcomponent from polymer paper input.
I am able to change values with two binding of paper input but not able to control the attribute value
I created below example and trying to change resizable-panels attribute to vertical
<resizable-panels [[text]]>
to
<resizable-panels vertical>
using paper-input
Codepen code for reference
https://codepen.io/nagasai/pen/QMjjQw
HTML:
<head>
<base href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/">
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="resizable-panels/resizable-panels.html">
<link rel="import" href="paper-input/paper-input.html"
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<style>
.panel { padding: 20px; color: white; font-family: sans-serif; width: 50%; }
.p1 { background-color: #673AB7; }
.p2 { background-color: #E91E63; }
.p3 { background-color: #00BCD4; }
.p4 { background-color: #FB8C00; }
.p5 { background-color: #607D8B; }
.p6 { background-color: #4CAF50; }
</style>
<paper-input value="{{text::input}}"></paper-input>
<resizable-panels id="rp-2">
<div class="panel p1">Lorem ipsum dolor…</div>
<div class="panel p2">Second panel</div>
</resizable-panels>
<br>
<resizable-panels [[text]]>
<div class="panel p1">Lorem ipsum dolor…</div>
<div class="panel p1">Second panel</div>
<div class="panel p1">Third panel</div>
</resizable-panels>
</template>
</dom-module>
</body>
JS:
class XFoo extends Polymer.Element {
static get is() { return 'x-foo'; }
static get properties() {
return {};
}
toggle() {
this.$.collapse.toggle();
}
}
customElements.define(XFoo.is, XFoo);
Thats not how its supposed to work, you cant just slap a tag like and expect this to work - since this is not server side building - you are not supposed to treat your templates like this.
Here is a working demo: https://codepen.io/anon/pen/rzOgQX
You should be toggling a boolean property vertical between true/false to archieve what you want. Hope this helps.
I searched for my problem and found this
However, the accepted solution does not work for me BUT I can't comment, since I have only 6 Reputation yet -.-
So Situation is, I want to use the paper-item from the Polymer framework inside the paper-listbox
That works, but when you select an item by clicking on it, the background changes to grey...
Docs and the answer to the question I linked abvoe suggest to overwrite --paper-item-selected / --paper-item-focus mixin, but this does not work for me
My code:
<link rel="import" href="../../../external/Polymer/bower_components/polymer/polymer.html">
<dom-module id="cit-literal-item">
<template>
<!-- scoped CSS for this element -->
<style is="custom-style">
.spacer {
#apply(--layout-flex);
}
paper-item {
--paper-item-selected: {
background-color: #FFFFFF;
};
--paper-item-focused: {
background-color: #FFFFFF;
};
}
</style>
<paper-item>Test</paper-item>
</template>
</dom-module>
Main Document Code:
...
<!-- Polymer custom elements -->
<link rel="import" href="lib/internal/dom-modules/literals/cit-literal-item.html">
...
<body>
<paper-listbox>
<cit-literal-item></cit-literal-item>
<cit-literal-item></cit-literal-item>
</paper-listbox>
</body>
I found the "solution"!
The property I had to overwrite is called --paper-item-focused-before
I looked at the source code of the <paper-item> and found this in the shared-styles.html
shared-styles.html
:host(.iron-selected) {
font-weight: var(--paper-item-selected-weight, bold);
#apply(--paper-item-selected);
}
:host([disabled]) {
color: var(--paper-item-disabled-color, --disabled-text-color);
#apply(--paper-item-disabled);
}
:host(:focus) {
position: relative;
outline: 0;
#apply(--paper-item-focused);
}
:host(:focus):before {
#apply(--layout-fit);
background: currentColor;
content: '';
opacity: var(--dark-divider-opacity);
pointer-events: none;
#apply(--paper-item-focused-before);
}
One can see, that the only mixin applying a color by default is --paper-item-focused-before, which applies a style to the :before pseudoelement of the <paper-item>.
--paper-item-focused-before: { background: transparent; };
I'm using Bootstrap CDN. From the 3 rules, the last 2 ones don't work. Neither the image is resized nor the heading change its font color.
HTML
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Custom styles -->
<link rel="stylesheet" type="text/css" href="./stylesheets/portada.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="section1">
<h2 class="text-center">Heading</h2>
<img class="img-responsive" src="./images/8.jpg">
</div>
</div>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
CSS
.section1 { // Working
background-color: #363b48;
color: blue;
height: 100px;
}
.section1 .text-center{ // Not working
color: #985475;
margin-top: 20px;
background-color: red;
}
.section1 img{ //Not working
width:20px;
}
Try this, although what you have should work also
.section1 h2{
color: #985475;
margin-top: 20px;
background-color: red;
}
I noticed 2 issues in your code.
First the CDN should not be loaded over http, but https. For
cross domain issues when loading it it's better to use just the //
without the http or https. That way it will load without giving crossdomain issues.
For instance: <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
Second is that you are using comments which should be /* */
instead of // single slashes because they are on the same line with
some CSS code.
Look after fixing these how it looks:
.section1 { /* Working*/
background-color: #363b48;
color: blue;
height: 100px;
}
.section1 .text-center{ /* Working*/
color: #985475;
margin-top: 20px;
background-color: red;
}
.section1 img{ /* Working*/
width:20px;
}
DEMO
http://jsfiddle.net/a_incarnati/undmcszz/9/
I can't tell for sure, but I would bet the problem lies in portada.css as it is (presumably) available on your local env, but not on the online code editors.
Css rules have weight depending on specificity. Even when you supply new rules on top of older ones, the weightiest rule will be applied. See this site to help calculate specificity: http://specificity.keegan.st/
Your HTML should has the next code at the first lines:
<!DOCTYPE html>
<html>
<head>