With LESS how can I apply styles to both a selector and the selector within it?
My demo I need to apply opacity and z-index to the class a, and to label that come directly after it.
.a {
color: red;
opacity: 0.9;
z-index: 2;
& + label {
color: blue;
opacity: 0.9;
z-index: 2;
}
}
Here the complete answer, to help others with same doubt. To achieve desired result, original code could become:
SOLUTION 1:
.a
{
&,
& + label
{
color: red;
opacity: 0.9;
z-index: 2;
}
& + label
{
color: blue;
}
}
Firstly you define common properties for both selectors with , separator and then you'll override only color property for & + label one.
SOLUTION 2:
If you want, you could achieve the same result using first class .a as a mixin and then overriding again color property:
.a
{
color: red;
opacity: 0.9;
z-index: 2;
}
a + label
{
.a;
color: blue;
}
Related
I use file *.qss to apply style sheet on my program. I want apply color on several QLabel, which have text "%number% channel".
I can write this:
Mnemonics--Base QLabel[text="1 channel"] {
color: white;
};
Mnemonics--Base QLabel[text="2 channel"] {
color: white;
};
Mnemonics--Base QLabel[text="3 channel"] {
color: white;
};
Mnemonics--Base QLabel[text="4 channel"] {
color: white;
};
But I'm wondering if I can write something like this?
#for $i from 1 through 4 {
num: #{$i};
ch: num+ " channel";
Mnemonics--Base QLabel[text=$ch] {
color: white;
};
}
But this code doesn't work.
Can it work? And if so, how to write it correctly for qss?
I am using PrimeNG Steps. How to remove the numbers in steps?
I tried using the Default CSS Property.
component has no option for this ,but you can use css to hide the innerHtml by after pseudo-element
style.scss (global style)
p-steps{
.ui-steps-number {
overflow: hidden
}
.ui-steps-number::after {
content: '';
background: currentColor;
width: 100%;
height: 100%;
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
.ui-steps .ui-steps-item.ui-state-highlight .ui-steps-number {
color: #007ad9 !important;
}
.ui-steps .ui-steps-item .ui-steps-number {
color: #ccc !important;
}
}
demo 🚀
the style above will change the style for all p-steps components but you can use custom styleClass like this
template
<p-steps styleClass="dot-theme" [model]="items"
[(activeIndex)]="activeIndex" [readonly]="false">
</p-steps>
style.scss
.dot-theme {
.ui-steps-number {
overflow: hidden
}
.ui-steps-number::after {
content: '';
background: currentColor ;
width: 100%;
height: 100%;
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
.ui-state-highlight .ui-steps-number {
color: #007ad9 !important;
}
.ui-steps-number {
color: #ccc !important;
}
}
demo 🌟
You can simply hide the text setting it's colour to transparent:
.p-steps .p-steps-item .p-menuitem-link .p-steps-number {
color: transparent;
}
I'd like to write a plugin that can generate a LESS function named alt that can do the following transformation:
.button {
background-color: alt(red, blue);
color: alt(black, white);
}
And output the following:
.button {
background-color: red;
color: black;
body.alt & {
background-color: blue;
color: white;
}
}
There doesn't seem to be much documentation about writing LESS plugins on the site, so hoping someone can provide an example of how this might be written :) Thanks!
I think a mixin would be best for this. Something like the following LESS:
.alt(#property, #primary-color, #alternate-color) {
#{property}: #primary-color;
body.alt & {
#{property}: #alternate-color;
}
}
.button {
.alt(background-color, red, blue);
.alt(color, black, white);
}
Which will compile to the following CSS:
.button {
background-color: red;
color: black;
}
body.alt .button {
background-color: blue;
}
body.alt .button {
color: white;
}
Can I do negation of media query selector?
Something like:
#media ($mat-xsmall):not() {
nav {
// taken from md-card-image styles
margin-top: -24px !important;
width: calc(100% + 48px);
margin: 0 -24px 16px;
}
}
I've reading about native CSS variables for declaring colors, but I wondering if there is a way to create a variable for top: left positions? I have a CSS template that overlays text boxes on an image, and the layout page get's changed periodically by the designer. I'd like to accomplish something like this:
:root {
--topOffset: 10px;
-- leftOffset: 20px;
}
.text_Date_Overlay {
position: absolute;
top: 516px + topOffset;
left:570px + leftOffset;
font-family:Verdana;
font-size:18px;
font-style:italic;
}
Is there a way, other thank going into JavaScript?
Thanks
You can combine them with calc() and do something like this.
:root {
--topOffset: 10px;
--leftOffset: 20px;
}
.text_Date_Overlay {
position: absolute;
top: calc(516px + var(--topOffset));
left: calc(570px + var(--leftOffset));
font-family:Verdana;
font-size:18px;
font-style:italic;
}
View Example Fiddle