Support nested featherlight (up to 4)

[marcandre]

Easy CSS solution to allow nested dialogs.

[marcandre]

@noelboss This solution is kind of a hack, but it works pretty well. Are you ok with it, or would it be better to do this in JS?

[noelboss]

I am not a fan of z-indexes (especial high ones). If the ligthboxes are placed correctly at the bottom (which I think they are not) of the page its generally not necessary to set an index. I would rather not do this this since I want the author to understand the z-index structure of his page and make specific changes if needed. Also, not everyone needs that feature and it can easily be documented in the wiki.

[marcandre]

If the ligthboxes are placed correctly at the bottom (which I think they are not) of the page its generally not necessary to set an index

I don't think that's true.

How about we support 2 levels out of the box, wiki if anyone needs more?

[noelboss]

Not true what I said. uses z-index :) sorry

[noelboss]

Can you test this with your nested setup?

[marcandre]

Oh, that works, nice. I still have to learn stuff about CSS. In my project I'll still use a z-index to insure that they float above anything else.

To be nicer, only the last .featherlight should have a background. Only CSS way is to use :last-of-type, but that's not supported on IE8- so the black background wouldn't show...

@noelboss Do we have an officially supported browser list?

It would probably be nicer to support IE8-, so a oneliner in jQuery can handle that I guess

[noelboss]

@marcandre no list yet. I think it works at least ie8+ (don't have my vm's with me to test right now)
Since the box is now appended, wouldn't a simple :last-child do the trick?

(Edit: Have my IE8 VM... Generally works, but Icons look shitty (close, next, previous – not supported charakters, at least on my machine) and rgba for backgrounds in the gallery doesn't work either.)

[noelboss]

BTW, IE8 should work anyways since the background is not transparent there...

[marcandre]

Right, :last-child works (glad you're in charge of the CSS 😄 ). It's still IE9+ though.

What I'm proposing is to remove the background color from the general .featherlight and move it to .featherlight:last-child. So I think IE8 would ignore that rule and not show it, right?

I think there are JS libs to add support for that in IE8, so maybe we could decide they are needed for IE8-?

[marcandre]

Nice.

[marcandre]

I didn't think of this, but if any JS adds anything in the dom after the dialog has opened, even hidden things, then the background disappears altogether 😦

I have such a case here and can probably work around it, but I was thinking maybe we could bunch all .featherlight inside a .featherlight-layer so last-child would always work?