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.
Related
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.
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!
Is there a shorthand way to write the following css classes that all have the same style?
.gtlab1-17, .gtlab1-19, .gtlab1-21, .gtlab2-17, .gtlab2-19, .gtlab2-21, .gtlab3-17, .gtlab3-19, .gtlab3-21 {margin-left:-3px;}
I need to avoid picking up:
.gtlab1-16, .gtlab2-16, .gtlab3-16
and
.gtlab1-15, .gtlab2-15, .gtlab3-15
which have different styles.
Thanks.
Mabye try this:
div[class^="gtlab"] {
border: 1px solid magenta;
}
div.gtlab2-16, div.gtlab1-57 {
border: 0;
}
If finds divs that have "gtlab" somewhere in its class, and then override the ones you want to exclude.
reference is here: this site i have bookmarked and i revisit that page all the time http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
You could add the same class to all elements as suggested, but if you dont have access to the html (using CMS or what ever) You could add a class to the elements with jQuery .addClass() and having div[class^="gtlab"] as your selector.
Short answer is:
[class*=gtlab]:not([class*=-16]):not([class*=-15])
But depending on the rest of your code and expected browser support (IE8?), this may not work.
Long answer is, change your HTML if you have that option or just use the long version, it's really not going to cost you much more in terms of coding time or download time and will probably be quicker to render.
Use more classes? It seems like the gtlab2 part is describing one aspect while the number is representing another. Why not split it into two distinct classes that can be used together?
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;
}
When a drupal form fails validation, it is redrawn with the elements that failed validation surrounded in a red border. Drupal does this by adding the error class to the input elements, and specifing a 2px red border on input.error elements in system.css.
Without modifying this stylesheet, how can I remove the red border on a specific form only, while using the default behavior on the rest of the site?
I believe the solution might require using a custom theme_form_element, but I can't figure out how to customize a single form only.
Note that I would like to do this without having to resort to this jQuery trick (which does work):
$("#edit-name").removeClass('error');
You will need to remove the error class from the form items. This can be done by overwriting the theme functions, in theme_textfield, theme_textarea ... (there is one for each type)
Take a look at $element['#attributes']['class'] which contains the error class.
EDIT
To do it for a specific form element or form you can use the #theme attribute or either form or element you want to change the theming function for.
The easiest way is not to try to modify the markup Drupal is spotting out, but instead to change the styles assocaited with the error class.
You can do that without modifying system.css. Simply add a new stylesheet in your theme (or using an existing one!). Use the Cascading nature of CSS to change the way elements with errors appear. Add something like:
.error {
border: 0;
}
... and you are done.
To target only one specific form, add another selector, like so:
#my-specific-form .error {
border: 0;
}