Friday, April 24, 2015

GSS mixin restricted ?

I don't like repeating myself, but I do with a certain slide-in effect that I use a lot for different css class selector.
Below the css snippet for the effect. 

How to use this in a kind of mixin method with the class name as parameter ?
Or is there some other way to not repeat myself too much..

I tried it as mixin but didn't work. I think it's because mixin can only insert style rules (in a class selector), and not complete style class snippets.

Any idea's ?




@if is("browser.engine",  "webkit") {
.SuccessSelect {
-webkit-transform: translate(-40%, 0);
-webkit-transition: transform 1s, opacity 2s;
}

.SuccessSelect.On-On { 
-webkit-transform: translate(0, 0);
}
}
@elseif is("browser.engine",  "gecko") {
.SuccessSelect {
-moz-transform: translate(-40%, 0);
-moz-transition: transform 1s, opacity 2s;
}

.SuccessSelect.On-On { 
-moz-transform: translate(0, 0);
}
}
@elseif is("browser.engine",  "trident") {
.SuccessSelect {
-ms-transform: translate(-40%, 0);
-ms-transition: transform 1s, opacity 2s;
}

.SuccessSelect.On-On { 
-ms-transform: translate(0, 0);
}
}
@elseif is("browser.engine",  "presto") {
.SuccessSelect {
-o-transform: translate(-40%, 0);
-o-transition: transform 1s, opacity 2s;
}

.SuccessSelect.On-On { 
-o-transform: translate(0, 0);
}
}
@else {
.SuccessSelect {
transform: translate(-40%, 0);
transition: transform 1s, opacity 2s;
}

.SuccessSelect.On-On{ 
transform: translate(0, 0);
}
}


--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.

No comments:

Post a Comment