I have a scenario to change the branding color and few other styling variables on the portal at run time based on some conditions. I'm able to achieve that
using CSS (look at the below sample snippet).
But since all our CSS are generated by converting the LESS files at compile time, not sure on how to write a similar logic in LESS so that it generates the CSS like below?
:root {
--brand-color: yellow;
}
h1 {
color: var(--brand-color);
}
<h1 id="demo">Hello</h1>
<button onclick="myFunction()">Click me</button>
function myFunction() {
document.documentElement.style.setProperty('--brand-color', 'red');
}
#yellow-color: yellow;
#red-color: red;
h1{
color: #yellow-color;
&.red-color{
color: #red-color;
}
}
Add class instead
function myFunction(){
$("myelement").addClass("red-color");
}
Related
I need to select the body element when it has a class beginning with post-type- but not select it when there's also a class beginning with taxonomy-. Does anyone know how to get this to work?
body[class^="post-type-"],
body[class*=" post-type-"] {
&:not([class^="taxonomy-"]),
&:not([class*=" taxonomy-"]) {
.widefat {
.check-column {
display: none;
}
}
}
}
EDIT: 0stone0's answer below helped me realize the CSS it was outputting was completely wrong, so this new approach is working well:
body[class^="post-type-"]:not([class^="taxonomy-"]):not([class*=" taxonomy-"]),
body[class*=" post-type-"]:not([class^="taxonomy-"]):not([class*=" taxonomy-"]) {
.widefat {
.check-column {
display: none;
}
}
}
div[class*='post-type-']:not([class*="taxonomy-"])
This pure CSS should target the desired element
Select classes that contain post-type-, but not() containing taxonomy-
div[class*='post-type-']:not([class*="taxonomy-"]) {
border: 1px solid red;
}
<div class='post-type-something'>post-type-something</div>
<div class='post-type-something taxonomy-foobar'>post-type-something taxonomy-foobar</div>
<div class='taxonomy-foobar post-type-something'>taxonomy-foobar post-type-something</div>
Note: Demo uses <div> instead of <body> and applies a border when targeted
I have say 3 spans as below :
<span class = "testVar1" onClick = "testFunction(Var1)">
<span class = "testVar2" onClick = "testFunction(Var2)">
<span class = "testVar3" onClick = "testFunction(Var3)">
testFunction(var){
here I assign class "on" to the span which calls this function
}
If span with class testVar1 calls this then it becomes
<span class = "testVar1 on" onClick = "testFunction(Var1)"></span>
My Css is as below
.test .on {
some CSS
}
Is there a way in CSS where I can use a variable and apply css to those span which is clicked?
Like
.test[Var1 or Var2 or Var3] .on {
some CSS
}
I have achieved it by using multiple selectors manually like#
.testVar1 .on {
some CSS
}
.testVar2 .on {
some CSS
}
I have read the post Using regular expression in css? , it,s helpful but not answering my question.
In this post css is applied to all the element, but I want css to be applied only to the element which called the function.
and so on.
Any help or pointers would be appreciated!
Thanks!
You are making things too complicated. Just use the same CSS class on all of them, then add the click listener programmatically, not as an inline onlick listener:
document.querySelectorAll('span.test').forEach(
span =>
span.addEventListener('click', () => {
console.log(`you clicked ${span.innerText}`)
span.classList.toggle('on')
})
)
.test {
background: red;
color: white;
display: inline-block;
padding: 40px;
}
.test.on {
background: green;
}
<span class="test">foo</span>
<span class="test">bar</span>
<span class="test">baz</span>
If you insist on inline event listeners (you really shouldn't, it's widely considered bad practice), for this simple example it's probably even easier:
function foobar(span) {
console.log(`you clicked ${span.innerText}`)
span.classList.toggle('on')
}
.test {
background: red;
color: white;
display: inline-block;
padding: 40px;
}
.test.on {
background: green;
}
<span class="test" onclick="foobar(this)">foo</span>
<span class="test" onclick="foobar(this)">bar</span>
<span class="test" onclick="foobar(this)">baz</span>
You can use regex selector: span[class^='test'] which means select every span with class start with "test".
You can combine it with another class (.on) like that: span[class^='test'].on
As for inline code, you can do something like that:
const spans = document.querySelectorAll('span[class^="test"]'); // select all spans
for (var i=0; i < spans.length; i++) { // iterate them
spans[i].addEventListener('click',function() { // add event listener to them
this.classList.add('on'); // set class on click
});
}
span[class^='test'] {color: blue;}
span[class^='test'].on { color: red; }
<span class="testVar1">1</span>
<span class="testVar2">2</span>
<span class="testVar3">3</span>
Check this for selecting element with more then one class.
And this for regExp selector.
Enjoy code!
I'm trying to find out whether the following logic, that would allow for a more modular approach, can be implemented or not:
Challenge:
I got three major categories in my app: running, swimming, biking, each with their own theme/color, e.g.
scss:
$category-colors: (
'running': red;
'swimming': blue;
'biking': green;
)
Throughout the app, specific components and nested components should adapt e.g. their background-color to the color of the context, meaning to the color of one of the categories. The following is one such component:
html:
<div class="running">
<div class="form">
<div class="form__header">
<h3>New</h3>
</div>
<div class="form__content">
<p>Some text</p>
</div>
</div>
</div>
scss:
.form {
&__header {
height: 100px;
// 'running' is not available here but it illustrates what I'm trying to achieve
background: map-get($category-colors, 'running');
}
&__content {
height: 50vh;
}
}
The background color should be dynamically set depending on the presence of the parent/grandparent/n-parent running. Is there any way to get 'category' dynamically?
I could to add a suffix for the class that should adopt that theme/color like form__header_running but I couldn't find a way to extract "running" as a variable to then map the color.
I tried something like the following, but the variables somehow always ends up to be the last one in that chain, meaning 'biking', even if biking is not present on the parent.
.form {
$bgColor: black !default;
.running & {
$bgColor: map-get($category-colors, 'running')
}
.swimming & {
$bgColor: map-get($category-colors, 'swimming')
}
.biking & {
$bgColor: map-get($category-colors, 'biking')
}
&__header {
height: 100px;
background: $bgColor;
}
&__content {
height: 50vh;
}
// image much more children/sub children, so the simple use of $bgColor would be much more efficient
}
Any idea/concepts on how to achieve what I want?
Any inputs on a styling structure/architecture you would choose for a larger app with similar demands?
Looking forward to a discussion!
I'm using LESS in one of my projects right now and I need to create some colour-schemes for different users. I'm building a portal and based on what kind of user logs in, the colour-scheme needs to change.
So in my mixins.less (which I can't modify) file I have:
#color-button-bg: #333;
#color-button-txt: #fff;
#color-button-fs: 1.5rem;
#color-button-fw: 500;
#color-button-hover-pct: 10%;
.base-btn-default(#type: button) {
background: ~"#{color-button-bg}";
border: 1px solid ~"#{color-button-bg}";
color: ~"#{color-button-txt}";
font-size: ~"#{color-button-fs}";
font-weight: ~"#{color-button-fw}";
&:hover, &:focus {
#color-btn-hover: ~"color-button-bg";
#color-btn-hover-pct: ~"color-button-hover-pct";
background: darken(##color-btn-hover,##color-btn-hover-pct);
border-color: darken(##color-btn-hover,##color-btn-hover-pct);
color: ~"#{color-button-txt}";
}
}
And in a separate file with client-specific mixins I tried the following:
/* Override default color with theme-color */
.theme-styling() {
#color-button-bg: #main-theme-color;
}
Then finally I wanted to add a class to my <body> tag and style the colour-scheme based on that classname:
body.theme-a {
#main-theme-color: teal;
.theme-styling();
}
However, this doesn't seem to work. I think it has something to do with scoping / Lazy evaluation, but I'm not that experienced in LESS yet, to see where my error is.
I created a Codepen for it, without the separate files and in a bit of a simplified form:
https://codepen.io/jewwy0211/pen/JVNZPv
I've just played around with your codepen a bit. When you define the variable in your mixin, it does work, the problem is that you then don't use that variable in the mixin or in the class that contains the mixin.
So, if you've got 2 buttons like this:
<div class="wrapper one">
<button>Theme 1</button>
</div>
<div class="wrapper two">
<button>Theme 2</button>
</div>
You can call their theme-specific variable mixins in their respective classes to get the vars set, but you then must use the vars within the same class:
.wrapper.one {
.theme-styling-1();
background-color: #color-button-bg;
}
.wrapper.two {
.theme-styling-2();
background-color: #color-button-bg;
}
/* Theme Vars */
.theme-styling-1() {
#color-button-bg: teal;
}
.theme-styling-2() {
#color-button-bg: red;
}
EDIT: Here's a codepen: https://codepen.io/mmshr/pen/OGZEPy
Composition-vs-inheritance React
Documentation
function FancyBorder(props) {
return (
<div className={'FancyBorder FancyBorder-' + props.color}>
{props.children}
</div>
);
}
function WelcomeDialog() {
return (
<FancyBorder color="blue">
<h1 className="Dialog-title">
Welcome
</h1>
<p className="Dialog-message">
Thank you for visiting our spacecraft!
</p>
</FancyBorder>
);
}
https://codepen.io/gaearon/pen/ozqNOV?editors=0010
When you're viewing a pen on CodePen, the styling will most likely be applied by the code in the CSS section. It's possible that there is inline CSS in the HTML, and it's also possible JavaScript is manipulating the styling inline, but in all three instances you'll be dealing with CSS code.
The example you posted is doing all of the styling in the CSS tab. The HTML tab only contains a container for the React elements to render to.
We'll use your FancyBorder function as an example.
function FancyBorder(props) {
return (
<div className={'FancyBorder FancyBorder-' + props.color}>
{props.children}
</div>
);
}
You're constructing a <div> with the class name of 'FancyBorder-' + props.color, where props.color is a variable that will be used later on.
Continuing with your example, you use the following code to create a welcome dialog:
function WelcomeDialog() {
return (
<FancyBorder color="blue">
<h1>
Welcome
</h1>
</FancyBorder>
);
}
In this code, you're calling the FancyBorder function and passing through color="blue" which is referenced in the original function as props.color. It now runs 'FancyBorder-' + props.color to generate a class named: FancyBorder-blue.
Now in the CSS section, you'll see your FancyBorder-blue is already setup as a class and has styling applied to it:
.FancyBorder-blue {
border-color: blue;
}
This specific CSS applies a blue border around the box we just created. Hopefully that clears things up.
Figured it out. Those styles when opened in CodePen in edit mode are not visible when tabs are minimized. It's enough to drag them open or change the link so they are opened by default. Just a CodePen feature =)
See the difference:
https://codepen.io/gaearon/pen/ozqNOV?editors=0010
https://codepen.io/gaearon/pen/ozqNOV
.FancyBorder {
padding: 10px 10px;
border: 10px solid;
}
.FancyBorder-blue {
border-color: blue;
}
.Dialog-title {
margin: 0;
font-family: sans-serif;
}
.Dialog-message {
font-size: larger;
}