Create new "box flap" component.

Description

We need some sort of overlay component for e.g. adding controls, like e.g. Bootstrap carousel controls. But it would be nice to overlay them on anything, and not just for controls.

Since these things usually cover some side of a block (e.g. right, top, etc.), they are placed sort of like a flap on a box, and since we have a box layout, a "box flap" seems like a natural way to describe it.

However since the implementation seems like we'll probably need to use absolute positioning, with some relative-positioned parent, and since we don't want to make all box elements with relative positioning, we'll probably need to introduce some intermediate structure, unfortunately, But we can name it "lid", and it will all seem natural; in fact, should be able to even use something like this:

That would position the flap (in LTR Western writing systems) at the bottom, with small footer-like size (whatever the CSS set up that size to be—like 20% or something).

The position would come from the CSS writing modes spec. We need to come up with a list of sizes that could be applied in various contexts; the one used here is marginal, which would mean the size of something like a header or footer. By default the flap would be 50% of the lid.

We'll also need to add an overlay style that makes the thing partially transparent. And of course all this should be configured by CSS "variables".

In light of frameworks like Bulma, there is an ambiguity of whether lid means has-lid or is-lid, but as it is a sort of additive property needed as a parent, it probably doesn't matter. One could think of it as lidded.

Environment

None

Assignee

Garret Wilson

Reporter

Garret Wilson

Labels

None

Components

Fix versions

Priority

Major
Configure