Less & css
#white: rgba(255, 255, 255, 1);
.color {
color: #white;
}
Output
.color {
color: #ffffff;
}
For some reason I need to use RGBa in the LESS compiled output. How can I keep the RGBa in the output?
Use escaping to make Less to skip value parsing and evaluation:
#white: ~'rgba(255, 255, 255, 1)';
You can use interpolated strings instead of rgba function:
#alpha: 1;
#white: ~'rgba(255, 255, 255, #{alpha})';
.color {
color: #white;
}
Output:
.color {
color: rgba(255, 255, 255, 1);
}
Related
I am trying to get the background color to appear in safari and it is not working. it works in chrome and firefox but no luck in safari. serious answers only please. here is my code i have in css.
main {
background-color: rgb(254, 236, 89, 0.85);
width: 960px;
padding-top: 130px;
padding-bottom: 87px;
}
In order to set an opacity on a background color you need to set the alpha of your color. So your color should be an rgba value, not rgb:
main {
background-color: rgba(254, 236, 89, 0.85);
}
Instead of
background-color: rgb(254, 236, 89, 0.85);
please try to use:
background-color: rgb(254, 236, 89);
opacity: 0.85;
so the complete solution will look like:
.main { background-color: rgb(254, 236, 89); opacity: 0.85; width: 960px; padding-top: 130px; padding-bottom: 87px; }
Hope this is the solution you were looking for.
In-stead of defining multiple variables separately like:
$logo_text_color: $white
$menu_link_color: $white
$menu_icon_color: $white
Is there any way to define them together at a time; something like this?
$logo_text_color, $menu_icon_color, $menu_link_color: $white
Finally I have found a solution...
SASS:
=els($a: 1, $b: 2, $c: 3)
height: $a + px
width: #{$b}px
content: abc
.cool
+els
.things
+els($a: 100)
.stuff
+els($c: 29)
.other
+els($c: 29, $b: 54)
CSS:
.cool {
height: 1px;
width: 2px;
content: abc;
}
.things {
height: 100px;
width: 2px;
content: abc;
}
.stuff {
height: 1px;
width: 2px;
content: abc;
}
.other {
height: 1px;
width: 54px;
content: abc;
}
I'm investigating flexibility of comma merging in LESS, and here is a use case that currently seems to not have a solution. .foo class has 2 inner-shadows concatenated with + sign, provided by language.
I tried to create a mixin that could recreate inner shadow (here without vendor prefixes for brevity). I hoped that + sign could be applied also to mixins call, but this generate an error. Like in another question of mine for a similar topic, it seems that this kind of operation must be fronted manually and not using power of automation given by concatenation function.
Please provide any suggestion to continue using mixin call for this purpose.
.foo
{
box-shadow+: inset 12px 12px 15px rgba(255,255,255,0.8);
box-shadow+: inset -12px -12px 15px rgba(0,0,0,0.2);
}
.inner-shadow (#x: 0, #y: 1px, #blur: 2px, #spread: 0, #rgba-color: rgba(0, 0, 0, 0.25) )
{
box-shadow:inset #x #y #blur #spread #rgba-color;
}
.foo2
{
.inner-shadow+ (#x: 12px, #y: 12px, #blur: 15px, #spread: 0, #rgba-color: rgba(255,255,255,0.8) );
.inner-shadow+ (#x: -12px, #y: -12px, #blur: 15px, #spread: 0, #rgba-color: rgba(0,0,0,0.2) );
}
The easiest solution would be to put the +: for the property within the mixin like shown below.
This would mean that if the same mixin is called more than once within the same scope, the resulting value from each mixin call would be concatenated into one single one. This would not have any harmful effect when there is only one call of the mixin within a particular selector also.
.foo{
box-shadow+: inset 12px 12px 15px rgba(255,255,255,0.8);
box-shadow+: inset -12px -12px 15px rgba(0,0,0,0.2);
}
.inner-shadow (#x: 0, #y: 1px, #blur: 2px, #spread: 0, #rgba-color: rgba(0, 0, 0, 0.25) ){
-webkit-box-shadow+:inset #x #y #blur #spread #rgba-color;
box-shadow+:inset #x #y #blur #spread #rgba-color;
}
.foo2{
.inner-shadow(#x: 12px, #y: 12px, #blur: 15px, #spread: 0, #rgba-color: rgba(255,255,255,0.8) );
.inner-shadow(#x: -12px, #y: -12px, #blur: 15px, #spread: 0, #rgba-color: rgba(0,0,0,0.2) );
}
.foo3{
.inner-shadow(#x: 12px, #y: 12px, #blur: 15px, #spread: 0, #rgba-color: rgba(255,255,255,0.8) );
}
Note: The concatenation happens whenever the same property is specified more than once within the same selector scope and so the below selector rule
.foo2{
.inner-shadow(#x: 12px, #y: 12px, #blur: 15px, #spread: 0, #rgba-color: rgba(255,255,255,0.8) );
.inner-shadow(#x: -12px, #y: -12px, #blur: 15px, #spread: 0, #rgba-color: rgba(0,0,0,0.2) );
box-shadow+: 1px 1px 1px solid red;
}
would result in all three shadows getting concatenated together like below:
.foo2 {
box-shadow: inset 12px 12px 15px 0 rgba(255, 255, 255, 0.8), inset -12px -12px 15px 0 rgba(0, 0, 0, 0.2), 1px 1px 1px solid red;
}
I want to convert a base color in HEX (#color) to rgba and use that in a mixin like .box-shadow(x y b color);
I have seen a load of mixins to convert HEX to RGBA and set background-color, and I know I can create my own mixing for box-shadow. But is there a generic solution so we can use any existing mixin.
Tried/want something like this (doesn't work) :
/** Extend LESS functions like (lighten, darken, mix) **/
rgbaColorIn(#color, #opacity : 1){
return rgba( red(#color), green(#color), blue(#color), #opacity );
}
// ----- or ------
/** Passing in a reference to mixin and params **/
.rgbaColorIn(#selector, #params, #color, #opacity : 1){
#rgbaColor: rgba( red(#color), green(#color), blue(#color), #opacity );
#selector(#params #color);
}
There is no return keyword in less. If you want a mixin that returns a value, then you can define a variable inside it, for example:
.rgbaColorIn(#color, #opacity : 1){
#result: rgba( red(#color), green(#color), blue(#color), #opacity );
}
which you can access in the scope you call the mixin:
.section {
.rgbaColorIn(red, 50%);
background-color: #result;
}
But if you just want to generate a RGBA from a RGB color, you can use the fade function:
.section {
#result: fade(red, 50%);
background-color: #result;
}
which will render the same result in CSS:
.section {
background-color: rgba(255, 0, 0, 0.5);
}
A .box-shadow mixin to pass the RGB color and opacity/alpha separately could be something like this:
.box-shadow(#x; #y; #b; #color; #opacity) {
box-shadow: #x #y #b fade(#color, #opacity);
-moz-box-shadow: #x #y #b fade(#color, #opacity);
-webkit-box-shadow: #x #y #b fade(#color, #opacity);
}
Which you could use in a selector like this:
.section {
.box-shadow(2px; 2px; 1px; pink; 50%);
}
and obtain this CSS:
.section {
box-shadow: 2px 2px 1px rgba(255, 192, 203, 0.5);
-moz-box-shadow: 2px 2px 1px rgba(255, 192, 203, 0.5);
-webkit-box-shadow: 2px 2px 1px rgba(255, 192, 203, 0.5);
}
To get an rgba value (assuming you are giving it something other than 100% opacity, since LESS will just keep it as a hex value in that case), just use the fade() function. So...
LESS
#color: #ff0000;
.test {
box-shadow: 2px 2px 5px fade(#color, 99%);
}
CSS Output
.test {
box-shadow: 2px 2px 5px rgba(255, 0, 0, 0.99);
}
Good answers, I guess you also could do directly calling a box-shadow cross-browser function:
.toShadow(#color: red) {
#color-rgba: rgba(red(#color), green(#color), blue(#color), .6);
.box-shadow(~"inset 0 0 3px #{color-rgba}");
}
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Color legend for grid panel in ExtJS4
I have a requirement which states that each cell in the grid can take any color out of available 8 colors based on some criteria. To implement this I have used "renderer" function in column and set tdCls of meta property to css class, but its not working. Can someone help me to resolve this.
Please find sample code below.
/** View class which contains grid panel*/
Ext.define('xxx.xxx.TestView', {
extend:'Ext.grid.Panel',
columns:[{
header:'A',
dataIndex:'a',
flex:1,
//rendering function here
renderer:function(value, metaData, record, rowIndex, colIndex, store) {
var cssClass = 'norepl';
if(value != null && value != ' ') {
var t = record.get('xxx');
t = (t.substr(2,t.indexOf('-')-2))%8;
cssClass = "replgrp"+t;
}
metaData.tdCls += cssClass; //attaching css property to tdCls of meta
return value;
}
}
});
/** available 8 css classes for coloring*/
.replgrp0 .x-grid-cell {
background-color: #f0f6ff;
color: #09d6ff;
border-left: 1px dotted rgba(2, 3, 3, 0.27);
border-right: 1px dotted rgba(2, 3, 3, 0.27);
}
.replgrp1 .x-grid-cell {
background-color: rgba(255, 183, 189, 0.22);
color: #900;
border-left: 1px dotted rgba(2, 3, 3, 0.27);
border-right: 1px dotted rgba(2, 3, 3, 0.27);
}
.replgrp2 .x-grid-cell {
background-color: #e2ffe2;
color: #090;
border-left: 1px dotted rgba(2, 3, 3, 0.27);
border-right: 1px dotted rgba(2, 3, 3, 0.27);
}
.replgrp3 .x-grid-cell {
background-color: rgba(255, 233, 228, 0.12);
color: #99890e;
border-left: 1px dotted rgba(2, 3, 3, 0.27);
border-right: 1px dotted rgba(2, 3, 3, 0.27);
}
.replgrp4 .x-grid-cell {
background-color: rgba(186, 242, 250, 0.10);
color: #1a4f99;
border-left: 1px dotted rgba(2, 3, 3, 0.27);
border-right: 1px dotted rgba(2, 3, 3, 0.27);
}
.replgrp5 .x-grid-cell {
background-color: rgba(255, 242, 239, 0.23);
color: #ff7f00;
border-left: 1px dotted rgba(2, 3, 3, 0.27);
border-right: 1px dotted rgba(2, 3, 3, 0.27);
}
.replgrp6 .x-grid-cell {
background-color: rgba(228, 224, 255, 0.7);
color: rgba(29, 7, 255, 0.60);
border-left: 1px dotted rgba(2, 3, 3, 0.27);
border-right: 1px dotted rgba(2, 3, 3, 0.27);
}
.replgrp7 .x-grid-cell {
background-color: rgba(255, 233, 228, 0.32);
color: rgba(255, 22, 12, 0.65);
border-left: 1px dotted rgba(2, 3, 3, 0.27);
border-right: 1px dotted rgba(2, 3, 3, 0.27);
}
.norepl .x-grid-cell {
background-color: rgb(255, 255, 255);
color: rgb(255, 127, 0);
border-left: 1px dotted rgba(2, 3, 3, 0.27);
border-right: 1px dotted rgba(2, 3, 3, 0.27);
}
Thanks and Regards,
Nari
I seem to recall doing something like
renderer:function(value, metaData, record, rowIndex, colIndex, store){
if(value != null && value != ' ') {
var t = record.get('xxx');
t = (t.substr(2,t.indexOf('-')-2))%8;
cssClass = "replgrp"+t;
value="<div class="+cssClass+">"+value+"</div>
}
return value;
This is probably the wrong way to do it though :)