I'd like to change the css style of an activated element.
Here's a ionic-list you can see.
I tried to set the css style of the aktivated element like this:
.item-content.activated{
background-color: rgba(0,100,255, 0.5);
}
That doesn't change anything
In the css-framework of ionic I have this line that sets the style of the activated elements:
.item.active, .item.activated, .item-complex.active .item-content, .item-complex.activated .item-content, .item .item-content.active, .item .item-content.activated
{
border-color: #ccc;
background-color: #D9D9D9;
}
If I change it in the framework, it works. But I only want it to be applied on list items and in my own css-stylesheet ... How can I do that?
You need to use the selector:
.item .item-content.activated
It has the additional .item so more specificity which is why it is overriding the one you have written.
You can do it as follows
.item.active,
.item.activated,
.item-complex.active .item-content,
.item-complex.activated .item-content,
.item .item-content.active,
.item .item-content.activated {
color: #493F0B;
font-weight: bold;
border-color: #eee;
background-color: #fafafa;
}
Related
is teher any chance to style my button inside tab in the css for vaadin-tabs component or i must do it by setclassname individually for button?
Accordin to this tutorial https://vaadin.com/docs/v14/flow/styling/styling-components
i tried:
vaadin-tabs vaadin-button{
background-color:red;
}
vaadin-tab > vaadin-button{
background-color:red;
}
[part="close-tab-btn"]{
background-color:red;
}
But none of it work. I`m importing my css by annotation:
#CssImport(value="./styles/components/tabs.css", themeFor = "vaadin-tabs")
and rest of my css looks like this:
[part="tabs"] ::slotted(vaadin-tab[selected]) {
color: var(--default-white-color);
background-color: var(--default-black-color);
}
[part="tabs"] ::slotted(vaadin-tab) {
color: var(--default-black-color);
background-color: var(--default-white-color-2);
border-radius: var(--default-border-radius) var(--default-border-radius) 0px 0px;
MARGIN-RIGHT: 3px;
}
[part="tabs"] ::slotted(vaadin-tab[selected])::before{
background-color: var(--default-app-color);
width:100%
}
*edit
But if my component is inside of dom in my slotted component then i can somehow style it from my top layout. In this example i mean if i can style input-field of text-area inside vaadin-vertical-layout
From the looks of your screenshot, the vaadin-button is not inside any shadow root. In that case, you can style it from the global styles.
For example styles.css
vaadin-button.close-tab-btn {
background-color: red;
}
and importing it with something like
#CssImport("./styles/styles.css").
I have a form in my application where I use the following code from Primafaces:
...other inputs...
<label for="workshopTags">Tags</label>
<p-chips
[(ngModel)]="values"
name="workshopTags"
id="workshopTags"
></p-chips>
I am able to display the Chip element correctly but I would like to style it putting its width to 100% and the height to 100px, but nothing seems to work to change those. This solution didn't work for me. I tried to set a styleClass or an inline style as the documentation suggest but they didn't work either. If I write inline:
style="width: 100%"
The following error is thrown:
Error: Cannot find a differ supporting object 'width: 100%;'
How can I make it work?
there are tow methos to style primeng component overwrite the original style or by create a custom style base on custome class
overwrite
add the style to global style.css or style.scss , this method for overwrite primeng component style without add extra class to the component.
.ui-chips {
display: inline-block
}
.ui-chips ul {
border:2px dashed green !important; /* 👈 I have use important */
}
.ui-chips > ul.ui-inputtext .ui-chips-token {
font-size: 14px;
background: green !important; /* 👈 I have use important */
border:1px solid #005555;
box-shadow: 0 0 25px #ccc;
}
stackblitz demo 🍏🍏
custome style
the method above will change the style of all p-chips component in the entier project , by this method you need to set styleClass property so you can create different style like the example here 👇 , but you need to set styleClass property for every component
<p-chips [(ngModel)]="values" styleClass="p-chips"></p-chips>
style.css
.p-chips.ui-chips {
/* border:1px solid #ff2200; */
display: inline-block
}
.p-chips.ui-chips ul {
border:2px dashed orange;
}
.p-chips.ui-chips > ul.ui-inputtext .ui-chips-token {
font-size: 14px;
background: orange;
border:1px solid #ff5555;
box-shadow: 0 0 25px #ccc;
}
stackblitz demo 🍊🍊
You can use ht /deep/ modifier ,add this inside your app.component.css and delete it from your style.css, and you don't need !important to force the style here, delete it. here is what you are looking for
p {
font-family: Lato;
}
/deep/ .p-chips > .ui-inputtext {
width: 100%;
height: 100px;
}
check it here https://stackblitz.com/edit/angular-primeng-startup-kmm7xw
You could try encapsulation: ViewEncapsulation.None in your override component decorator:
#Component({
selector: 'app-chip',
templateUrl: 'path-to-template where you use ui-chips',
styleUrls: ['path-to-styles where you could override ui-chips styles'],
encapsulation: ViewEncapsulation.None
})
export class AppChipComponent { }
To set the width to 100%, you have to use the style or styleClass attribute and set the css property display: block.
As an example using the styleClass attribute
<p-chips
[(ngModel)]="interests"
styleClass="block">
</p-chips>
Here I am using Prime Flex v3 with PrimeNg.
Presentation
I'm trying to build a web site available in multiple cultures, with different reading direction.
To do so, I simply add the dir="rtl" attribute on my root HTML element.
My issue is that I have some CSS rules that are specific to one direction or the other (margins or paddings, most of the times).
Unsuccessful try with attribute selector
I though that I could simply use the attribute selector but the dir attribute is only set on the root element, so this wouldn't work :
selector {
&[dir="ltr"] {
// LTR specific
}
&[dir="rtl"] {
// RTL specific
}
}
For instance, on this demo, the title should have a margin of 5px on the right if the application is in rtl or on the left if it's in standard ltr.
Other idea
I've noticed that the direction is rightfully set at rtl, is there a way to use that rule within a CSS or Sass selector ?
Edit and precisions
It seems that I've forgotten an important point. I'm building the web site using Vue.js, the dir attribute is bind in the main component (App) and the RTL/LTR specific CSS rules can be in the same component or in other self-contained component.
Following your css code you could do this with SASS at-root directive DEMO. So this:
#app {
width: 300px;
height: 100px;
border: 1px solid red;
h1 {
#at-root {
[dir="rtl"]#{&} {color: green}
}
#at-root {
[dir="ltr"]#{&} {color: red}
}
}
}
It will compile to this css.
#app {
width: 300px;
height: 100px;
border: 1px solid red;
}
[dir="rtl"]#app h1 {
color: green;
}
[dir="ltr"]#app h1 {
color: red;
}
You could style everything LTR, and only adjust some elements styling for RTL. Might this work for you?
[dir="rtl"] {
&selector {
// RTL specific
}
&selectorN {
// RTL specific
}
}
Use below scss to get expected output
#app {
width: 300px;
height: 300px;
background: red;
&[dir="ltr"] h1{
margin-left: 10px;
}
&[dir="rtl"] h1 {
margin-right: 10px;
}
}
Probably you are going a little in the wrong direction.
Most of the time, you can achieve this automatically, no need for specific selectors.
Margin, for instance:
Just set it both for left and right margin. The browser will choose the correct one for you
#app {
width: 300px;
background: tomato;
margin: 10px;
}
h1 {
margin-left: 15px;
margin-right: 5px;
}
<div id="app" dir="ltr">
<h1>
margin left 15
</h1>
</div><div id="app" dir="rtl">
<h1>
margin right 5
</h1>
</div>
Right now I have CSS (SASS) code that does this:
.container
background-color: red
.inner
...
border-bottom-color: red
(in this case, the .inner is a triangle, so its border color is serving as its background color)
I'd like to avoid specifying the second 'red', something like:
.container
background-color: red
.inner
border-bottom-color: attr(parent.background-color)
Is there a way to do this in pure CSS? (I can do it using SASS variables, or JS, or whatnot, but I'd like to stay within CSS.)
There's no way (currently) to do this in pure CSS, but since you mentioned you're using SASS, you could simply use a variable:
$myColor: red
.container
background-color: $myColor
.inner
border-bottom-color: $myColor
Edit
Depending on how the rest of your CSS is structured and since you're dealing with border-color you can set either border-color or color on .container and then set border-bottom-color: inherit; on .inner:
.container {
border-color: red;
background-color: red;
}
.container .inner { border-bottom-color: inherit; }
This is specific to the properties in your example, however. There is no way to explicitly inherit values across different properties.
CSS variables are in a very early stage of the specification process.
This is something that will definitely come, but you can't really use it nowadays. (MDN states that Fx 29 supports it already)
Example:
::root {
var-brand-color: red;
}
.container {
background-color: var( brand-color );
}
.container .inner {
border-bottom-color: var( brand-color );
}
I have following html:
<div class="red placeholder"></div>
<div class="blue placeholder"></div>
<div class="green placeholder"></div>
and CSS:
.placeholder {
width: 100px;
height: 100px;
margin: 10px;
border: 1px solid black;
}
.placeholder:hover {
background-color: gray;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
I should not change initial placeholder declaration(s) and I don't want DIVs to change colour on hover.
Is there any way I can override placeholder class to "cancel" or turn off that hover property?
jsFiddle: http://jsfiddle.net/8QJEq/4/
That was really a good question, since am not able to work out any easier way than this, you can check out my solution
div[class="red placeholder"]:hover {
background-color: red;
}
div[class="blue placeholder"]:hover {
background-color: blue;
}
div[class="green placeholder"]:hover {
background-color: green;
}
Demo
Explanation: What we are doing here is, we are selecting the elements having a combination of 2 classes, and than we use the same color on hover, which is their default background-color, so inshort, this won't take out the hover, it does hover, but because of the same background color, you won't see any change.
I would recommend to avoid targeting the elements in the first place if at all possible.
If that's not possible, you could just declare the hover state with each color. As long as .color:hover is declared after .placeholder:hover it will override it since they share the same specificity.
jsfiddle 1
CSS
.color, .color:hover { background-color: color; }
Though I wouldn't recommend it, but it sounds like you don't want divs with color classes to not change background-color you could also just declare the rules as !important. But this would only be a last resort option since you wouldn't be able to easily override the background-color again.
jsfiddle 2
CSS
.color { background-color: color !important; }