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;
}
Related
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}");
}
On their site, they give an example of how to use #arguments:
.box-shadow (#x: 0, #y: 0, #blur: 1px, #color: #000) {
box-shadow: #arguments;
-moz-box-shadow: #arguments;
-webkit-box-shadow: #arguments;
}
.box-shadow(2px, 5px);
Which results in:
box-shadow: 2px 5px 1px #000;
-moz-box-shadow: 2px 5px 1px #000;
-webkit-box-shadow: 2px 5px 1px #000;
It appears it just takes all the arguments and separates them with spaces. I actually want the arguments separated by commas for use with linear-gradient:
background: linear-gradient(top, #arg1, #arg2, #arg3...);
Is this possible with less?
Inspired by #Allan's answer, I had to use the following to get #arguments passed to a linear gradient function:
.linear-gradient-multi( ... ) {
background-image: -webkit-linear-gradient( ~`"#{arguments}".slice(1,-1)` );
...
}
Only then could I call the mixin with percentages and variables:
.linear-gradient-multi(left, #CCC 0%, #DDD #percent, #FFF #percent + 1, #FFF 100%);
You can do something like this
.mixin(...) {
filter: gradient( ~`#{arguments}.join(",")` );
}
test {
.mixin("x1","x2","x3")
}
You should use back-ticks to be able to run some javascript. but that means that all elements inside the arguments array should be valid javascript variables, that's why when calling the mixin you should wrap all the arguments in quotes to make them javascript strings. the above code will be compiled to:
test {
filter: gradient(x1,2,3);
}
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 :)
I'm having a superbgimage/jw player background on my website in progress. When I apply a CSS box-shadow on the content divs above the background, the shadow does not mix (does not darken) with the background. It looks like a grey halo. Do box-shadows only work on white backgrounds?
Halo instead of shadow mixing with background image (darkening it)
CSS for superbgimage background and jQuery Isotope plugin divs
#background {
background: inherit;
}
#superbgimage {
display: none;
}
.item {
margin-bottom: 4px;
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
}
Divs for background
<fieldset id="background">
...
</fieldset>
<div id="superbgimage"></div>
Script for background
<script type="text/javascript">
$(document).ready(function () {
$.fn.superbgimage.options = {
preload: 1,
randomtransition: 0,
slideshow: 1,
slide_interval: 9000,
randomimage: 1,
speed: 3000,
transition: 1
};
$('#background').superbgimage().hide();
});
</script>
Make sure you are using a cross-browser solution like this:
.shadow {
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px #888;
box-shadow: 0 0 5px #888;
}
Use RGBA colors instead of HEX. RGBA will allow you to set an opacity for the color allowing the background to bleed through.
Example:
rgba(0,0,255,0.5)
On a side note, try using an online generator for CSS3 elements like box-shadow, it will take the guess work out of creating these more complex elements:
http://css3generator.com/
this is my code:
<style type='text/css'>
div {
width: 100px;
height: 100px;
text-align: center;
font-size: 22px;
background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0.40, #ff0),
color-stop(0.5, orange),
color-stop(0.60, rgb(255, 0, 0)));
-webkit-transform: rotate(180deg)
}
</style>
<div id="test">click me to play</div>
the div rotate 180 deg , and the font is also rotate 180 deg,
but , i don't want the font rotate ,
what can i do .
thanks
unfortunately there's no existing solution yet! You either rotate the whole block (content, font and background included) or you don't rotate it.
Sorry!
You can find documentation on these two websites:
http://onwebdev.blogspot.com/2011/01/css3-background-rotate-property.html
http://www.sitepoint.com/css3-transform-background-image/
The later one offers a 'trick' solution that maybe could help, creating a 'fake' block containing your background.
#myelement
{
position: relative;
overflow: hidden;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
#myelement:before
{
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: -1;
background: url(background.png) 0 0 repeat;
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
}
(source by sitepoint)
Why rotate it at all? Just describe your gradient the other way round:
background-image: -webkit-gradient(linear, left bottom, left top,
color-stop(0.40, #ff0),
color-stop(0.5, orange),
color-stop(0.60, rgb(255, 0, 0)));