"Additive" property values with LESS mixin - less

I'm looking for a feature that may or may not be available in LESS.
I have a mixin that adds a "glow" with box-shadow, which I use on various elements - buttons, inputs etc.
.glow() {
box-shadow: 0 0 5px skyBlue;
}
What I'm looking for is a way to make the mixin add the box-shadow as a new comma-seperated value if the element already has a box-shadow.
So, I want this:
.button {
box-shadow: inset 0 5px 10px black;
.glow();
}
To compile to this:
.button {
box-shadow: inset 0 5px 10px black, 0 0 5px skyBlue;
}
I think I recall seeing a similar feature in SASS, but I can't find it anywhere now.
Does this feature exist in LESS, or is there some alternative way to achieve a similar result?

The feature you're looking for is merge. You'd do this:
.glow() {
box-shadow+: 0 0 5px skyBlue;
}
.button {
box-shadow+: inset 0 5px 10px black;
.glow();
}
Note that both rulesets need to use the + syntax for it to work.
Or, you could declare the glow rule as a variable:
#glow: 0 0 5px skyBlue;
.button {
box-shadow: inset 0 5px 10px black, #glow;
}

Related

Not able to change v-dialog style

I want to change the margin on the .v-dialog class and the max-height when it's not full screen.
The code from the console:
.v-dialog {
border-radius: 4px;
margin: 24px; <-------- want to change this
overflow-y: auto;
pointer-events: auto;
-webkit-transition: .3s cubic-bezier(.25,.8,.25,1);
transition: .3s cubic-bezier(.25,.8,.25,1);
width: 100%;
z-index: inherit;
-webkit-box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12);
box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,
}
and:
.v-dialog:not(.v-dialog--fullscreen) {
max-height: 90%; <--------- want to change this
}
It's not enough just to add a class to the v-dialog component somehow it dosen't register it.
It's always a good idea to use the docs for reference, if you haven't done so already.
https://dev.vuetifyjs.com/en/components/dialogs#dialogs
You have to use the content-class property, instead of the normal class, if you want to attach a class to the v-dialog
Applies a custom class to the detached element. This is useful because
the content is moved to the beginning of the v-app component (unless
the attach prop is provided) and is not targettable by classes passed
directly on the component.
In this class you can then override the margin and max-height:
.custom-dialog.v-dialog{
margin: 10px;
}
.custom-dialog.v-dialog:not(.v-dialog--fullscreen) {
max-height: 50%;
}

Pseudo elements in Sass variable?

Can I use a pseudo element to declare a variable in Sass? I want my variable to be the first letter of a given string inside a list item. My watcher throws an error and won't compile.
Sass:
$firstLetter: li::first-letter
=newItem ($firstLetter)
$m
#extend %liStyle
#if $firstLetter == "m"
background-color: #3a495c
color: white
box-shadow: 0 3px 0 #14bbb1
display: list-item
font-family: sans-serif
font-size: .889em
border: 1px solid #ebeaec
&:hover
box-shadow: 0 3px 0 #ffdc00
&:active
box-shadow: 0 3px 0 #d86969
Thanks!
Variables must be of a specific type (string, integer, length, color, etc.), there is no "selector" type. If you need to have a variable to contain a selector, then it needs to be quoted and treated as a string:
$firstLetter: "li::first-letter";
#{$firstLetter} {
color: red;
}

less #arguments with linear-gradients (commas)

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);
}

inheritance in lesscss, doesn't inherit sub classes

this is my style.less code:
.transition {
-ms-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.shadow {
padding: 10px 10px 10px 10px;
margin: 10px 10px 10px 10px;
-moz-box-shadow: 0px 0px 10px #808080;
-o-box-shadow: 0px 0px 10px #808080;
-webkit-box-shadow: 0px 0px 10px #808080;
box-shadow: 0px 0px 10px #808080;
}
.shadow:hover {
-moz-box-shadow: 0px 0px 10px #a5a5a5;
-o-box-shadow: 0px 0px 10px #a5a5a5;
-webkit-box-shadow: 0px 0px 10px #a5a5a5;
box-shadow: 0px 0px 10px #a5a5a5;
}
.radius {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#t1 {
.shadow;
.transition;
.radius;
}
but when I hover #t1 the shadow doesn't change. I want to know why it doesn't work and expect add #t1:hover and inherit the style is there any other way?
You need to change the .hover class to include the :hover state as part of the class definition:
.hover {
...styles...
&:hover {
...hover state styles...
}
}
.someOtherClass {
.hover;
}
Example
In order to have the :hover styles generated correctly you need to connect .shadow and .shadow:hover via the & operator so they belong together:
.shadow {
/*normal styles*/
&:hover{
/* hover styles */
}
}
The rest can stay the same, because
#t1{
.shadow;
}
will now automatically generate both, the normal and the hover rules.
You can try it out here: Online-Less-Converter
Every additional block you add to .shadow via the & operator will automatically be applied to #t1 as well, so if you add another:
.shadow{
&:hover{}
&.foo{
/* another set of rules*/
}
}
#t1{
.shadow; /* this will now generate 3 ruleblocks for #t1*/
}
the .foo ruleblock will be generated for #t1 as well:
#t1{...}
#t1:hover{...}
#t1.foo{/* another set of rules*/}

CSS box-shadow on divs over image/video background impossible?

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/