Skip to content

LESS support #204

Open
marcoraddatz opened this Issue Mar 27, 2012 · 12 comments

7 participants

@marcoraddatz

It would be nice to have a LESS and / or SASS file where you can create the CSS from. This would make development much easier.

As as example: I use fancyBox with Twitter Bootstrap. The z-Index of fancyBox is too low for the z-Index of Bootstrap. If that would be a variable, it could be set easily via a config file.

http://lesscss.org/

@ghost
ghost commented Apr 4, 2012

have you tried working whit http://wearekiss.com/simpless

or you want the LESS instead of CSS, I might have LESS files of fancyBox css from a project I worked on... have to see about that ..

@marcoraddatz

I tried some tools but they failed with bootstrap due to the large amount of files. For development I use either the JS compiler of http://lesscss.org or lessphp (http://leafo.net/lessphp).

My suggestion was to include the less files into the fancyBox source, so the developer can choose between compiled CSS or LESS. LESS would make development easier and is less code! ;)

Thanks for reply!

@StudioJunkyard

I've successfully integrated the FontAwesome icons, which uses LESS as well. thought I've done it without the LESS implementation, just with the CSS using :before to render the font icons in place of the images.

just include the FontAwesome CSS first:

@keyframes gnuLoad{
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}
@-webkit-keyframes gnuLoad{
from{-webkit-transform:rotate(0deg);}
to{-webkit-transform:rotate(360deg);}
}
@-moz-keyframes gnuLoad{
from{-moz-transform:rotate(0deg);}
to{-moz-transform:rotate(360deg);}
}
@-o-keyframes gnuLoad{
from{-o-transform:rotate(0deg);}
to{-o-transform:rotate(360deg);}
}
@-khtml-keyframes gnuLoad{
from{-khtml-transform:rotate(0deg);}
to{-khtml-transform:rotate(360deg);}
}

#fancybox-loading{
z-index:1010;
position:fixed;
top:50%;left:50%;
margin-top:-22px;margin-left:-22px;
background-position:0 -108px;
opacity:.8;-webkit-opacity:.8;-moz-opacity:.8;-o-opacity:.8;-khtml-opacity:.8;
cursor:pointer;
}
#fancybox-loading div{
z-index:3;
position:absolute;
top:50%;
width:44px;height:44px;
left:50%;
overflow:hidden;
margin:-18px 0 0 -18px;
animation-name:gnuLoad;-webkit-animation-name:gnuLoad;-moz-animation-name:gnuLoad;-o-animation-name:gnuLoad;-khtml-animation-name:gnuLoad;
animation-duration:2s;-webkit-animation-duration:2s;-moz-animation-duration:2s;-o-animation-duration:2s;-khtml-animation-duration:2s;
animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;-moz-animation-iteration-count:infinite;-o-animation-iteration-count:infinite;-khtml-animation-iteration-count:infinite;
animation-timing-function:linear;-webkit-animation-timing-function:linear;-moz-animation-timing-function:linear;-o-animation-timing-function:linear;-khtml-animation-timing-function:linear;
}
#fancybox-loading div:before{
content:'\f01e';
position:absolute;
top:6px;left:6px;
font-family:fontAwesome;font-size:30px;
color:#fff;
text-shadow:0 0 5px #000;
}
.fancybox-close{
z-index:1004;
position:absolute;
top:-18px;right:-18px;
width:36px;height:36px;
cursor:pointer;
}
.fancybox-close:before{
content:'\f057';
position:absolute;
top:6px;left:6px;
font-family:fontAwesome;font-size:30px;
color:#fff;
text-shadow:0 0 30px #ccc,0 0 20px #888,0 0 5px #000;
}
.fancybox-prev{
z-index:1010;
left:-20px;
}
.fancybox-next{
z-index:1010;
right:0;
}
.fancybox-nav span{
z-index:1003;
position:absolute;
top:50%;
width:36px;height:36px;
margin-top:-18px;
visibility:hidden;
cursor:pointer;
}
.fancybox-prev span{
left:20px;
}
.fancybox-prev span:before{
content:'\f060';
position:absolute;
top:6px;left:6px;
font-family:FontAwesome;font-size:30px;
color:#fff;
text-shadow:0 0 30px #ccc,0 0 20px #888,0 0 5px #000;
}
.fancybox-next span{
right:20px;
}
.fancybox-next span:before{
content:'\f061';
position:absolute;
top:6px;left:6px;
font-family:FontAwesome;font-size:30px;
color:#fff;
text-shadow:0 0 30px #ccc,0 0 20px #888,0 0 5px #000;
}

@marcoraddatz

Yes, but the main problem is, that other CSS might be incompatible with the fancyBox CSS. I just provided an example, that the navbar of Bootstrap has a higher Z-Index than fancyBox, so the closing button and the top of the image are hidden by the bar.

If that would be variables, you could easily set them higher! (And set image paths, background color etc. too). I've opened another issue fpr base64 support. If that would be used, you could also provide the buttons as a variable.

I think, I just should spend some time and create that LESS file... :)

@StudioJunkyard

Fair point. As I stated, I'm only using the font portion, and referencing the icons in CSS, so the z-index doesn't come into play.

@krnlde
krnlde commented Aug 21, 2012

Bump. I'm using bootstrap together with fancybox and my problem is the relative paths to the images, which cannot be modified. I'd love to see a less version with @fancyboxRootPath-like stuff in it.

@macler
macler commented Sep 19, 2013

marcoraddatz please tell what is correct z-index for fancyBox with bootstrap and how to set it up?

@dennis-f
dennis-f commented Apr 9, 2015

I totally second that topic!!

@SalahAdDin

👍 for sass support in bower fancy release :D

@christianmagill

Please add Sass support. It would be awesome to set configurations such as asset path without altering the component.

@SalahAdDin

I can't, i have problem with github.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.