In stylus is it possible to change a variable based on the class of the parent?
I'm trying to create a variable which will change the colours from white to black depending on it being inside something with an '.inverted' class. I only want the variable to change though (so I can use it for any colour-based property).
If it were written in jQuery it would look like this:
$lightswitch = ($(this).parents('.inverse')) ? '#000' : '#fff';
I imagine there is a mixin or something I could write for this but I can't quite get my head around how to do it.
Ugh. I don't think that can be done with CSS or stylus. You'll have to use a jQuery solution for that.
Gotta wait for css4's "parent selector!" $E > F
Stay awesome!
Related
I am trying to change value of CSS variable based on another variable. I want to check if current value of variable is white then set it to black...
In some class suppose my variable is --default-var, value of --default-var can be any color....
If value of default-var is white then change it to black
i tried
.my-class{
#if var(--default-var) == #fff{
--default-var : #000;
}
}
I have also tried
.my-class{
#if --default-var == #fff{
--default-var : #000;
}
}
both cases are not working..please help.
Best practice here is to create two classes with the different CSS values and then toggle the class using logic such as in C# Razor or Javascript. This keeps it cleaner to read.
You can not use this kind of Logic in CSS. There are workarounds though.
Use a Preprocessor
You could use either SASS or Less to create CSS-Files that are created conditionally based on variables that you can set yourself. This however only helps if you´re decision is made on build-time. So this will not help you if you want to react to user input.
This is not entirely true, as there are some pseudo selectors that in the end can change styles based on user input. However, you can not use them to react to variables set in your CSS.
Use Javascript
With Javascript you can manipulate elements and their style-Property or their class-List directly. In order to control under what condition you want these changes to be made you can use all the tools that you have in Javascript.
You could read what value your css variable has and then change styles on other classes based on that value.
Just Google for js DOM manipulation or setting css with js. In order to provide better ressources i´d need some more information on what exactly you want to do. This may be what you are looking for: https://stackoverflow.com/a/51860936/11930769.
I want to do the equivalent of style="background-image: url(foo.jpg); background-image: -webkit-image-set(url(foo_1x.jpg) 1x, url(foo_2x.jpg) 2x)" in a React component.
React requires me to provide a style object, not a string. But a JS object can't have the same property twice.
How do I get two background-image properties? Also, the order is significant – the image-set needs to be last.
It needs to be an inline style. (Because the URL is a dynamic, interpolated value retrieved from DB.)
I think I initially misunderstood your question. Seems you are looking to create a style object to pass as a prop to a component. You can combine your background images into a single comma separated list. You can use a string template to inject the dynamic image urls at runtime.
const style = {
backgroundImage: `url(${url1}),-webkit-image-set(url(${url2}) 1x, url(${url3}) 2x)`,
};
"spassvogel" on GitHub has a clever solution using CSS variables: https://github.com/facebook/react/issues/20757#issuecomment-776191029
The idea is to set CSS variables in the style property, like
style={ "--url1": "url(1.jpg)", "--url2": "url(2.jpg)" }
and then using them from an external style sheet, like
background-image: var(--url1);
and so on.
Turns out this still wasn't enough to solve everything I wanted – this rabbit hole runs ever deeper – but that's no fault of React's, so I'll consider this a valid answer.
I have directive which does an action when I scroll.
#HostListener('window:scroll')
doSomething() {
console.log(this.el);
console.log(this.el.nativeElement);
if (window.pageYOffset > 10) {
console.log('mouse scroll blahblah');
this.renderer.setStyle(this.el.nativeElement, 'height', '45px');
} else {
this.renderer.removeStyle(this.el.nativeElement, 'height');
}
}
But I want to also add background color to this element AND other styling to element which is in another component. How to do it?
Is it possible to add something like
this.renderer.setStyle([
element1 [ 'height', '45px], ['background-color', 'red']
],
[
element1, 'background-color', 'blue'
]
Or maybe I should use something totally different from 'setStyle'?
I know that my example is messed up but I think there may be something alike, I mean... We are not suppouse to write
this.renderer.setStyle(this.el.nativeElement, 'height', '45px');
this.renderer.setStyle(this.el.nativeElement, 'background-color', 'red');
etc?
Or maybe I shouldn't even try to do it and simply add a class as it's only proper way to add multiple styles?
But how? document.getElementsByClassName('element2') add some class
Got it
Actually I'm not sure that there is one good way to do it. Even in bigger project I can't avoid mixing setting and removing single style with classes. So I wouldn't stick to only one of them. I would definitely not use only setStyle as Kevin suggested as it is terrible to remove later. Yeah, it lets you to adjust everything independently but you can do it simpler, most of the time you won't even need control specific style of element, if - then use class, remove it, if you need to remove single part do it by setStyle/removeStyle.
If you have small project then you can use whatever you want. If it's big... Well, most probably it won't be clean at some point anyway, so mix what works for you :P
const sth = document.getElementsByClassName('myElement');
if (window.pageYOffset > 10) {
this.renderer.addClass(sth[0], 'onScroll'); //for some reason there is array created, so you have to get there by adding [0]
this.renderer.addClass(this.el.nativeElement, 'onScroll');
} else {
this.renderer.removeClass(this.el.nativeElement, 'onScroll');
this.renderer.removeClass(sth[0], 'onScroll');
}
Using addClass() and removeClass() is certainly the cleanest wax to do it, as you can simply tweak your result by adjusting the CSS later.
See Angular Renderer documentation for how to use it.
I have kendo grid in application,and its have filterable true option.my requirment is when we apply the filtering to columns,column header font style will be changed to italic..How to do it?If any one have idea about this please tell me..
I personally have not used kendo grid, but I quickly tried the demo here,
and found that it adds "k-state-active" class to the <a> element inside the <th> element.
However, the header text is not inside the <a> element. What you need is a parent selector which current CSS does not support.
So as far as i know, this is NOT possible in pure CSS
You need some javascript. Here is a possible solution using jQuery:
// adding click event handler to the "Filter" and "Clear" buttons
$('form.k-filter-menu .k-button').click(function(e) {
setTimeout(function() {
// first make all headers normal, then make the filtered column header italic
$('th.k-header.k-filterable').css('font-style', 'normal').filter(
':has(> .k-grid-filter.k-state-active)').css('font-style', 'italic');
}, 100);
})
setTimeout is used because "k-state-active" class is added only after the data is filtered. Again, I'm not familiar with kendo grid, so I do not know if there is a way to provide a callback method to the filter. You may want to investigate on that because that 100 ms delay may not be long enough if you have a huge dataset.
My apologies for jQuery specific solution. Ah... I can't do anything without jQuery. Shame.
But hopefully this was helpful to you! Let me know if you need any further help.
This is possible with one CSS line:
.k-filterable a.k-grid-filter.k-state-active ~ .k-link {font-style:italic;}
No need to use java script.
In my css, I have a table with zebra striping. e.g. white and light-blue.
Lets say I have three columns... what I'd like to do is be able to make maintain the zebra striping, and within css (no javascript) add shading/make the blues darker for each column.
Is that possible? Something like getting the "current" background color #AABBCC and then Adding #000011 to the current color to give me #AABBDD...
No idea if this is even possible, so just wondering. I'm just being lazy, as I don't want to have to redefine my zebra striping for every column/column group I may have.
Thanks
No, this is not supported with CSS, unless you were to use something like CSS expressions (which rely on Javascript).
However, if you're willing to use a preprocessor for your style sheets, you can use a library like LESS to introduce variables and perform addition like that. This example in particular uses Javascript as well, so that doesn't really fit the criteria either.
Haha, in pure CSS, no way. There are several "css-like" languages though that can do this: scss, less, stylus, etc. The gist is that you write code that gets compiled down to "real" CSS.
In stylus:
stripe( color )
&
background color
&:nth-child(odd)
background color + #000011
td.foo
stripe( teal )
generates...
td.foo {
background: #008080;
}
td.foo:nth-child(odd) {
background: #008091;
}