I'm using <paper-progress-button> in a project, and I want to style it from my main stylesheet but can't get it to work.
The styling code for <paper-progress-button> looks like this:
<dom-module id="paper-progress-button">
<template>
<style>
:host {
display: inline-block;
}
.button {
#apply --paper-progress-button-button;
}
.button:not([disabled]) {
#apply --paper-progress-button-button-active;
}
.spinner {
margin-left: 10px;
#apply --paper-progress-button-spinner;
}
[hidden] {
display: none;
}
</style>
...
I've tried all sorts of ways to get my styles from a main site-level stylesheet to affect the button, but none seem to work:
main.css
--paper-progress-button-button {
background-color: red;
}
main.css
* {
--paper-progress-button-button {
background-color: red;
};
}
custom_style.html
<custom-style>
<style is="custom-style">
--paper-progress-button-button {
background-color: red;
}
</style>
</custom-style>
custom_style.html
<custom-style>
<style is="custom-style">
:root {
--paper-progress-button-button {
background-color: red;
};
}
</style>
</custom-style>
The documentation for styling Polymer 2 is huge, but doesn't even mention #apply once! So how do I really style that button from my site-level stylesheet?
Polymer currently only shims CSS properties within a custom-style or a Polymer element's style; and not from an external stylesheet.
Also note the style usage is incorrect, as the CSS property name must be followed by a colon:
.my-div {
--paper-progress-button-button: {
background-color: red;
};
}
demo
Related
how to style a div element that is nested within a section, this is what I tried, but I get the error expecting "}";
#section1
{
color: blue;
#div1 {
color: red;
}
}
If it have the id, you can select the ID directly:
#div1 {
// your style here
}
or ou can use CSS selectors in conjunction with it's IDs:
div#section1 div#div1 {
// your style here
}
if you are using just css, then try like,
#section1
{
color: blue;
}
#section1 #div1
{
color: red;
}
If you do not use less or sass, you should not write nested classes.
the only thing that you can use is that divide your class into 2 classes:
But you also can only use #div 1 instead of #section1 #div1.
#section1 {
color: blue;
}
#section1 #div1 {
color: red;
}
<div id="section1">
ABC
<div id="div1">
XYZ
</div>
</div>
Is there a tool out there that allows you to combine CSS classes? It seems handy to combine them in something like Tailwind css, but is there a way to "add them up" in the css? Sass has the #extend which is similar to what I'm thinking. But is there something out there that looks like this:
HTML:
<div class="author"></div>
CSS:
.card {with: 100px; height: 100px;}
.green (background-color: green}
.author { .card + .green }
or maybe
.author = .card.green
Then with more classes, it'd end up something like:
.author,
.staff,
.jockey = .card.green.padding-large.centered.motif-top
Does this exist?
You can do so with the help of Less.css. Just add this <script> tag to your HTML file:
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.7.1/less.min.js" ></script>
And add a <link> to an external stylesheet like this (this is not needed, but Less is less buggy if written in an external file .less rather than inside <style> tags in HTML):
<link rel="stylesheet/less" type="text/css" href="styles.less" />
Now, this example you provided:
.card {width: 100px; height: 100px;}
.green (background-color: green}
.author { .card + .green }
Can be written in Less as:
.card {
width: 100px;
height: 100px;
}
.green {
background-color: green;
}
.author {
.card();
.green();
}
And the second example of:
.author,
.staff,
.jockey = .card.green.padding-large.centered.motif-top
Is written in Less like:
.author, .staff, .jockey {
.card();
.green();
.padding-large();
.centered();
.motif-top();
}
Hopefully this helped you, and go to the official website to learn more about Less CSS (Learner Style Sheets)
This is the pure CSS way, but syntax is slightly different and you don't need the first line:
.author {} /* 1st line is not required*/
.author, .class1 {
width: 100px;
}
.author, .class2 {
height: 100px;
background-color: black;
}
<div class="author"><div>
More Information here: Can a CSS class inherit one or more other classes?
I'm trying to get a better understanding of using mixins in Polymer 2: Here is my sample:
<dom-module id="x-test">
<template>
<custom-style>
<style is="custom-style">
html {
--center-on-screen: {
left: 50%;
top: 50%;
position: absolute;
border: solid 1px red;
};
}
</style>
</custom-style>
<style>
.signal {
border-radius: 30px;
height: 30px;
width: 30px;
#apply --center-on-screen;
}
</style>
<div class="signal"></div>
</template>
<script>
'use strict'
class XTest extends Polymer.Element {
static get is() {
return 'x-test';
}
static get properties() {
return {
}
}
static get observers() {
return [];
}
constructor() {
super();
}
ready() {
super.ready();
}
connectedCallback() {
super.connectedCallback();
}
connectedCallback() {
super.connectedCallback();
}
}
customElements.define(XTest.is, XTest);
</script>
</dom-module>
when the code #apply --center-on-screen; in the class, I would expect the div to have the color red and be centered on the screen. I have verified it because I had all the code in --center-on-screen in the class .signal. I moved it into --center-on-screen just for testing purposes. If anyone can advise me on what i'm doing incorrectly.
**Update **
When I move --center-on-screen into :host then it works. So it looks like this
<style>
:host {
--center-on-screen: {
left: 50%;
top: 50%;
position: absolute;
border: solid 1px red;
}
}
.signal {
border-radius: 30px;
height: 30px;
width: 30px;
border: solid 1px red;
#apply --center-on-screen;
}
</style>
Try to include cd shady css mixin:
<link rel="import" href="../../bower_components/shadycss/apply-shim.html">
CSS custom properties are becoming widely supported, CSS mixins remain a proposal. So support for CSS mixins has been moved to a separate shim that is optional for 2.0 class-style elements. For backwards compatibility, the polymer.html import includes the CSS mixin shim. Class-style elements must explicitly import the mixin shim.
Ref: https://www.polymer-project.org/2.0/docs/upgrade#class-based-elements-import-the-css-mixin-shim
Thanks for posting this query. I was searching some credible resource on how to use css mixins in polymer 2.0 .
I had this mixin -
--calendarbox-mixin: {
display:flex;
position:relative;
flex-direction: column;
border-radius: 5px;
--webkit-border-radius:5px;
--moz-border-radius:5px;
width:11vw;
margin:10px 5px;
text-align: center;
height:18vh;
justify-content: space-around;
}
I tried adding it just abover another class where I wanted to use the mixin -
.dayfare_box {
#apply(--calendarbox-mixin);
background: #fbfcfc;
border:2px solid #e2e2e2;
}
The output came without the mixin applied. Tried adding in :host and it worked!!
Just stumbled upon this link and it confirmed my doubt whether I was doing it right. Thanks for posting :)
I have some rules nested inside each other, and I'd like to add another unrelated element to one of the rules.
For example if I have
#element1{
display: block;
.sub-element1 {
background: yellow;
.sub-element2 {
color: red;
}
}
}
and then I'd like to add another element (#element2) to use same rules as .sub-element2, so compiled code would look like this:
#element1{
display:block
}
#element1 .sub-element1 {
background:yellow
}
#element1. sub-element1 .sub-element2, #element2 {
color: red;
}
Is it possible?
You could use a mixin. You can add rules to a mixin, then include the mixins where you want them:
#mixin redcolor {
color:red;
}
Then simply include this mixin in any selector:
.subelement2, #element2 {
#include redcolor;
}
More on mixins here:
http://sass-lang.com/guide
Use #extend.
#element2 {
#extend .sub-element2
}
The output created by this will however also copy the selector chain, so this would be the output:
#element1. sub-element1 .sub-element2, #element2 {
color: red;
}
Perhaps that is what you want, but I can imagine it's not.
In this case you'll need to write an #extend only selector. It works much like an #include, except it generates the compact output you outline in your question. You could do it many ways, this is one of them:
%red {
color: red;
}
#element1{
display: block;
.sub-element1 {
background: yellow;
.sub-element2 {
#extend %red;
}
}
}
#element2 {
#extend %red;
}
Here's a link to it in the official docs.
I want to apply custom CSS to the title and content of a popover in Bootstrap, however, it seems that my CSS is being ignored.
How can I apply specific CSS to the title and the content respectively?
$("#poplink").popover({
html: true,
placement: "right",
trigger: "hover",
title: function () {
return $(".pop-title").html();
},
content: function () {
return $(".pop-content").html();
}
});
html, body {
width: 100%;
height: 100%;
}
.pop-div {
font-size: 13px;
margin-top: 100px;
}
.pop-title {
display: none;
color: blue;
font-size: 15px;
}
.pop-content {
display: none;
color: red;
font-size: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="pop-div">
<a id="poplink" href="javascript:void(0);">Pop</a>
<div class="pop-title">Title here</div>
<div class="pop-content">Content here</div>
</div>
For example: http://jsfiddle.net/Mx4Ez/
The reason appears to be that the javascript is creating brand new elements to display the popover itself. These new elements have different css class names than the original.
Try adding this to your css:
.popover-title {
color: blue;
font-size: 15px;
}
.popover-content {
color: red;
font-size: 10px;
}
Update
Depending on the library version you're using, the names may be different. If the above does not work, try using .popover-header and .popover-body instead.
If you have multiple popovers on your page and only want to style one of them, you can leverage the popover's template option to add another class:
$("#myElement").popover({
template: '<div class="popover my-specific-popover" role="tooltip">...'
});
I started by just using the default value for template from the docs, and added my-specific-popover to the class attribute.
The newly created elements have the following hierarchy:
.popover
|_ .popover-title
|_ .popover-content
Which is injected after the element that triggers the popover (you can specify a specific container for the injected popover by setting the container option, in which case you will set the styles using the element that you passed as container). So to style a popover you can use css like the following example:
<div id="my-container">
Popover This!
</div>
<style>
.popover-title { color: green; } /* default title color for all popovers */
#my-container .popover-title { color: red; } /* specific popover title color */
</style>
As Matt said before, it may depend on the bootstraps version, for v4.6 you should do:
.popover{
background-color: red;
}
.popover-header {
color: red;
}
.popover-body {
color: blue;
}
Bootstrap >= 5.0
You can override Bootstrap popover styles.
.popover {
background-color: var(--main-bg-color);
border: 1px solid var(--border-color);
}
.popover-body {
color: var(--font-color);
}
.bs-popover-top {
> .popover-arrow {
&::before {
border-top-color: var(--border-color);
}
&::after {
border-top-color: var(--main-bg-color);
}
}
}
.bs-popover-end {
> .popover-arrow {
&::before {
border-right-color: var(--border-color);
}
&::after {
border-right-color: var(--main-bg-color);
}
}
}
.bs-popover-bottom {
> .popover-arrow {
&::before {
border-bottom-color: var(--border-color);
}
&::after {
border-bottom-color: var(--main-bg-color);
}
}
}
.bs-popover-start {
> .popover-arrow {
&::before {
border-left-color: var(--border-color);
}
&::after {
border-left-color: var(--main-bg-color);
}
}
}
And replace --main-bg-color, --border-color, and --font-color with yours.