I have a document with a color property that I want to use as the background for a div. I currently do the following and it works:
<li class="task" style="background-color: {{statusColor}}">
The color is saved as a hex value and I would like to add transparency to it. I read that it is possible to do this with less:
.task{
#result: fade(red, 50%);
background-color: #result;
}
Is there a way to use the {{statusColor}} as the argument for the fade() function?
You are correct that less can add transparency with fade(). The problem with that approach is that less is part of the meteor build process and therefor cannot possibly know which document's statusColor to use. In other words, your .less files are compiled to .css at build-time, not run-time.
So you either need to store your colors in rgb format so that you can use background-color: rgba(r,g,b,a); or do the conversion on the front-end.
Here is some code to convert from hex to rgba: https://stackoverflow.com/a/19663620/211727
You could use it in a helper like this:
Template.task.helpers({
statusColorRGBA: function(hex) {
return 'rgba(' + parseInt(hex.slice(-6,-4),16)
+ ',' + parseInt(hex.slice(-4,-2),16)
+ ',' + parseInt(hex.slice(-2),16)
+',0.5)';
}
});
Usage:
<li class="task" style="background-color: {{statusColorRGBA statusColor}}">
FYI, there is currently no way to specify in alpha channel with hex notation: https://stackoverflow.com/a/31029864/211727
Related
I am passing in a Hex Colour into a prop and attempting to set the background of an element with it. Here is my code:
let cardColourRGB: string;
if (cardColour) {
cardColourRGB = "[" + cardColour + "]";
console.log(cardColourRGB);
} else {
cardColourRGB = "white/50"
}
In the return function:
<div className={`bg-${cardColourRGB}`}></div>
Passing in some colours work, but others don't. For example, passing in #AAA32E as the prop does not set the colour, but setting the colour directly works:
<div className={`bg-[#AAA32E]`}></div>
Why could this be?
According to the official documentation of the tailwind.css it is not preferred to have such classNames
As document says:
The most important implication of how Tailwind extracts class names is that it will only find classes that exist as complete unbroken strings in your source files.
If you use string interpolation or concatenate partial class names together, Tailwind will not find them and therefore will not generate the corresponding CSS:
Don't construct class names dynamically
<div class="text-{{ error ? 'red' : 'green' }}-600"></div>
Instead, make sure any class names you’re using exist in full
<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>
So , for your case, use the following code:
<div class="{{ cardColour ? 'bg-[#AAA32E]' : 'bg-white-50' }}"></div>
Hope it helps!
TailwindCSS doesn't allow you to generate classes dynamically. So when you use the following to generate the class…
`bg-${cardColourRGB}`
…TailwindCSS will not pick that up as a valid TailwindCSS class and therefore will not produce the necessary CSS.
Instead, you must include the full name of the class in your source code. You can return the full value like this
let cardColourRGB: string;
if (cardColour) {
cardColourRGB = "bg-[" + cardColour + "]";
console.log(cardColourRGB);
} else {
cardColourRGB = "bg-white/50"
}
where cardColourRGB is your value you are passing .
By doing it this way, the entire string for every class is in your source code, so TailwindCSS will know to generate the applicable CSS.
Read more: https://tailwindcss.com/docs/content-configuration#class-detection-in-depth
I am trying to dynamize color changing in my application built with react and CSS modules. I want to display complementary colors based on one color for each time.
To do that I defined my colors manually
style: [
{
toolbarColor:'#c80eff',
centerWidgetColor:'#0040ff',
buttomWidgetColor:'#0040ff',
rightWidgetColor:'#ffbf00',
},
{
toolbarColor:'#c80eff',
centerWidgetColor:'#fab81e',
buttomWidgetColor:'#00ff9c',
rightWidgetColor:'#12b274',
},...
But it is a long work to do and it is impossible to define all the cases.
For that, my question is, is there any equation to get complementary colors, shades, etc based on one color reference ( hex or rgb )
You can do it in two ways:
CSS
For all CSS, use variables and mixins ( for more information read this article: http://thesassway.com/intermediate/mixins-for-semi-transparent-colors ) but for that code:
$color00: #c80eff;
$color02: #0040ff;
$color03: #00ff9c;
Defining your colors will always create consistency. Then, create a mixin of the like similar to:
```
#mixin alpha-background-color($color, $background) {
$percent: alpha($color01) * 100%;
$opaque: opacify($color, 1);
$solid-color: mix($opaque, $background, $percent);
background-color: $solid-color;
background-color: $color02;
}
```
Finally, you would apply to your item:
```
.button {
#include alpha-background-color(rgba(black, 0.5), white);
}
```
Otherwise, you can do that with JS:
set your variable for the color
$color00: #c80eff;
set a trigger in the button
<button onClick="changeColor()" > Change color </button>
set the function, something on the lines of :
const changeColor = ( opacity) => {
const b = document.querySelector('.button');
let colorChange = b.style.backgroundColor;
// change opacity
b.style.opacity = `${opacity}`;
}
changeColor('set here the opacity you would want');
document.querySelector('.button').addEventListener('click',
changeColor);
Summary and suggestion:
However, any good project will have some defined color palette and styles, if you set those up in variables in CSS then you simply re use them everywhere else in the project. Otherwise it will end up being inconsistent.
Dynamic CSS Background Color
If you're using a framework like Vue and you are receiving your data from a database that contains stuff like the colors etc, you could either have specific classes but that gets tedious...
I recently found that you could pass a css variable to your html as a style property and then use that variable in your css...
Of course, this needs to be edited to change the below red to a variable of your choosing, this is just the concept.
<style>
.myDiv {
height: 200px;
width: 200px;
background: var(--backgroundColor);
}
</style>
<div class="myDiv" style="'--backgroundColor: red;'>Some block</div>
From here, you would use Javascript to either change the value of your css variable with the below
const root = document.querySelector(':root');
root.style.setProperty('--backgroundColor', 'blue');
Or in Vue logic simply dynamically change the value with something like this
<div class="myDiv" :style="'--backgroundColor: ' + backgroundVariable + ';'">
Some Block
</div>
I am setting up a background in a div tag that is a font awesome icon in each row of a table. This icon depends on the object that is being displayed. I tried setting up the code similar to Changing CSS content property dynamically. However, my data-content would be a unicode. I am assigning the values in an angular controller as follows:
if (type) {
if (type.image.includes('fa-hand-o-up')) {
type.background = '\f0a6';
} else if (type.image.includes('fa-wrench')) {
type.background = '\f0ad';
} else if (type.image.includes('fa-star')) {
type.background = '\f005';
}
return type;
}
and then including them in the table as follows:
<td>
<div class="text-center type-wrapper"
data-content="{{::dataItem.type.background}}">
<span class="bold">{{::dataItem.type.name}}</span>
</div>
</td>
However, this just puts 0a6, 0ad, and 005 as the background 'image'. Is there a way to add unicode content dynamically or is the attr(data-xxx) just for plain text?
Also, I tried adding a attr(data-color) for color, but that doesn't seem to work either. Is that also because I am using hex code instead of plain text?
If I got your question correctly...
try prefixing with &#x reference
span:before{
content: attr(data-content);
}
<span data-content="ÿ"></span>
references start with &# and end with ; and the x means that what's used is a hexadecimal value.
This worked for me: https://stackoverflow.com/a/26025865/2077405
Insert in this format, using the \u that, in Javascript, denotes an
Unicode number inside a string literal
$("a").attr ("data-content", "\u25BC");
I have a link:
<a class="title">My link</a>
It is styled with this CSS code:
a.title {
color: #CC3333;
}
How can I verify that the text "My link" is red? I can locate the element with css=a.title, but how can I assert that color == "#CC3333" in Selenium IDE?
style.color will return color if actual DOM element has style attribute. In your case, when color is definied in <style> tag it won't work. This we need you use getComputedStyle(). Still, color returns color in RGB format but you may convert your color manually and verify RGB result.
Like this:
assertEval(
"window.document.defaultView.getComputedStyle(window.document.getElementsByClassName('title')[0]).getPropertyValue('color')",
"rgb(204, 51, 51)"
)
N.B. It's also recommended to use selenium.browserbot.getCurrentWindow() instead of window. I left window to make snippet shorter.
Is there a more efficient way of declaring and using these (very similar/repetitive) CSS classes:
div.rounded20
{
-webkit-border-radius:20px;
-moz-border-radius:20px;
}
div.rounded15
{
-webkit-border-radius:15px;
-moz-border-radius:15px;
}
Say maybe with something along the lines of:
div.rounded(#Y)
{
-webkit-border-radius:#Ypx;
-moz-border-radius:#Ypx;
}
And the actual class usage being
<div class="rounded(15)" ...>
Any suggestions are welcomed, including using jquery or an alternate styling method...
you should look at sass/compass solutions which are designed to do exactly that. They also have arithmetic operations and support for variables and colors.
i don't believe there's a way to do that with straight css, as it is static. however, there's definitely a way to do it with jquery. you can set a named function, say SetRoundedCorners(element, radius) and do something like this:
function SetRoundedCorners (element, radius) {
$(element).css("-webkit-border-radius:" + radius +";
-moz-border-radius:" + radius +";");
}
$("#myelement").click(function(){
SetRoundedCorners(this, someRadius);
});
haven't tested it, but something along those lines should work. good luck!
EDIT: There's also a jquery function you could use to round the corners:
$(document).ready(function(){
$("#box1").corner();
});
which can be found here: http://www.malsup.com/jquery/corner/
Maybe something like this...
HTML:
<div class="rounded 15"></div>
<div class="rounded 45"></div>
jQuery:
$("div.rounded").each
(
function()
{
// Calculate the radius as the number at the end of the class name.
var radius = $(this).attr("class").replace(/^.*?(\d+)$/, "$1");
// Set both CSS properties to the calculated radius.
$(this).css({"-webkit-border-radius": radius + "px", "-moz-border-radius": radius + "px"});
}
);
I use a CSS compiler... that basically generates your CSS files for you. The one I use is proprietary but it works very similar to this one (PHP)
By using a compiler you can define variables, loops, add/subtract/multiply etc. as well as (if you are hardcore) build dynamic color palletes by manipulating the RGB of your "known" colors.. e.g. if you want a color that is 10% lighter, 50% darker, or the inverse.