Is it possible to set a color based on the lightness/darkness of a less variable?
Currently I have the following code:
li {
color: darken(#bodyBackground, 10%);
}
This works providing #bodyBackground is a light color. However if it was a dark color I'd like to use lighten(#bodyBackground, 10%). Is this possible with LESS?
There's contrast function, e.g.:
li {
color: contrast(#bodyBackground,
lighten(#bodyBackground, 13%),
darken(#bodyBackground, 13%));
}
You can be much smarter than this. You can make a mixin to check the provided color, and perform either a darken or lighten depending on its color:
.smart-text-color (#a) when (lightness(#a) >= 50%) {
// Its a light color return a dark output
color: darken(#a, 60%);
}
.smart-text-color (#a) when (lightness(#a) < 50%) {
// Its a dark color return a dark output
color: lighten(#a, 60%);
}
Here is an example mixin, that takes the background color as the variable, and works out what text color to use. Returning either a light or dark output.
http://codepen.io/TristanBrotherton/pen/GwIgx?editors=110
Related
The font size on the charts are to small and hard to read on certain colors. Is there a way to change these attributes?
I can do this do make the whole pie red but setting color or font-size doesn't make a change:
.ct-series-x .ct-slice-pie {
fill: #f05b4f
}
<div class="ct-chart ct-golden-section ct-series-x ct-slice-pie" id="chart2"></div>
For anyone who comes across this - override ct-label in your css file:
.ct-label {
font-size: 15px;
}
I need change the slider color in Google MDL Lite.
http://getmdl.io/components/index.html#sliders-section
The colors of the lines on the left and right of the circle are changing, but the circle is staying blue.
Any ideas.
Thanks.
At first, for customizing colors there is perfect Customizer and it will do what you need.
But answer for your question are these lines (rather test it in all browsers):
.mdl-slider {
&:active::-webkit-slider-thumb,
&::-webkit-slider-thumb {
background: $your-color !important;
}
&:active::-moz-range-thumb,
&::-moz-range-thumb {
background: $your-color !important;
}
&:active::-ms-thumb,
&::-ms-thumb {
background: $your-color !important;
}
}
However, there are focus color and other fixes for IE. So if you want to be 100% sure, copy this file with slider style and change color variables ($range-color, $range-bg-color, $range-faded-color etc.) by your requirements. Or use first mentioned solution.
I would like to change grid color on Chartist.js from default grey. I tried to override ct-grid-color setting, but probably did something incorrectly. Can anyone please suggest how to do it?
Just insert in your CSS.
.ct-grid{ stroke: red;}
grid lines:
.ct-grids line {
color: steelblue;
}
.. and don't forget the labels! ..
grid labels:
.ct-labels span {
color: steelblue;
}
The reason why targeting only ".ct-grid" won't work is due to css specificity. Basically the more specific the css, the more important it becomes so ..
.ct-grids line { } > .ct-grids { }
If it's a little confusing, a nifty little tool is Keegan Street's css specificity calculator.
Is it possible to set a color based on the lightness/darkness of a less variable?
Currently I have the following code:
li {
color: darken(#bodyBackground, 10%);
}
This works providing #bodyBackground is a light color. However if it was a dark color I'd like to use lighten(#bodyBackground, 10%). Is this possible with LESS?
There's contrast function, e.g.:
li {
color: contrast(#bodyBackground,
lighten(#bodyBackground, 13%),
darken(#bodyBackground, 13%));
}
You can be much smarter than this. You can make a mixin to check the provided color, and perform either a darken or lighten depending on its color:
.smart-text-color (#a) when (lightness(#a) >= 50%) {
// Its a light color return a dark output
color: darken(#a, 60%);
}
.smart-text-color (#a) when (lightness(#a) < 50%) {
// Its a dark color return a dark output
color: lighten(#a, 60%);
}
Here is an example mixin, that takes the background color as the variable, and works out what text color to use. Returning either a light or dark output.
http://codepen.io/TristanBrotherton/pen/GwIgx?editors=110
I have this less code, this is working just fine. I just want to save some spaces when the less cli compiles it.
.secondary-content {
background: #ffcc80;
color: white !important;
label, i {
background: #ffcc80;
color: white !important;
}
}
When I run less from the command prompt, the output looks like this.
.secondary-content {
background: #ffcc80;
color: white !important;
}
.secondary-content label,
.secondary-content i {
background: #ffcc80;
color: white !important;
}
as you can see they are separated on each block. I would like to have them on the same block. How could I easily merge the parent and child style properties? Like this.
.secondary-content,
.secondary-content label,
.secondary-content i {
background: #ffcc80;
color: white !important;
}
I'm still learning less, so any help would be much greatly appreciated.
Thanks in advance
You can make use of the parent selector (&) like in the below snippet. Usage of parent selector would mean that the same rules apply for .ghost .secondary-content selector as well as its child label and i tags.
.ghost .secondary-content {
&, label, i {
background: #ffcc80;
color: white !important;
}
}
Of course the solution provide by #Harry works. When you are learning Less you should keep in mind that Less helps you to write your CSS code DRY and more efficient. Less does not help you to solve issues, that you can not solve in common CSS, Less compiles into CSS and does not add any feature to the compiled CSS.
To reduce the size of your CSS for selectors which share some properties you should consider the extend feature of Less: http://lesscss.org/features/#extend-feature-reducing-css-size:
.selector1 {
color: red;
}
.selector2:extend(.selector1) {}
outputs:
.selector1,
.selector2 {
color: red;
}
To solve your issue you should reconsider the desired CSS code instead of the Less code. You can not use extend due to the nesting of the label, i, but why should you nest them to set the color and background-color?
The default value for the background-color is transparent so when you set the background-color for the parent you do not have set the background-color for the child elements (when using the same value).
Possible you override the default transparent with an other style rule with a higher specificity, see also http://www.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/
An example which gives your nested label the wrong background-color:
label {
background-color:green;
}
.secondary-content {
background-color:red;
color: white;
}
The same for the color property which always inherit from its parent, unless applied in an anchor.
You are also using !important, see: https://css-tricks.com/when-using-important-is-the-right-choice/