@bedrock-layout/css/lib/components/cover.css

bedrock-layout css version

/*
  cover.css
*/

[data-br-cover] {
  --gap: initial;
  --min-height: initial;
  display: flex;
  flex-direction: column;
  gap: var(--gap, 0px);

  min-block-size: var(--min-height, 100%);
}

[data-br-cover] > * {
  margin: 0;
}

[data-br-cover] > [data-br-cover-centered] {
  margin-block-start: auto;
  margin-block-end: auto;
}

[data-br-cover~="stretch-content"] > [data-br-cover-centered] {
  flex: 1;
  display: flex;
  flex-direction: column;
}

[data-br-cover~="stretch-content"] > [data-br-cover-centered] > * {
  flex: 1;
}

/* Gutter Sizes */

/* gap sizes */
[data-br-cover~="gap:size000"] {
  --gap: -0.5rem;
}
[data-br-cover~="gap:size00"] {
  --gap: -0.25rem;
}
[data-br-cover~="gap:size1"] {
  --gap: 0.25rem;
}
[data-br-cover~="gap:size2"] {
  --gap: 0.5rem;
}
[data-br-cover~="gap:size3"] {
  --gap: 1rem;
}
[data-br-cover~="gap:size4"] {
  --gap: 1.25rem;
}
[data-br-cover~="gap:size5"] {
  --gap: 1.5rem;
}
[data-br-cover~="gap:size6"] {
  --gap: 1.75rem;
}
[data-br-cover~="gap:size7"] {
  --gap: 2rem;
}
[data-br-cover~="gap:size8"] {
  --gap: 3rem;
}
[data-br-cover~="gap:size9"] {
  --gap: 4rem;
}
[data-br-cover~="gap:size10"] {
  --gap: 5rem;
}
[data-br-cover~="gap:size11"] {
  --gap: 7.5rem;
}
[data-br-cover~="gap:size12"] {
  --gap: 10rem;
}
[data-br-cover~="gap:size13"] {
  --gap: 15rem;
}
[data-br-cover~="gap:size14"] {
  --gap: 20rem;
}
[data-br-cover~="gap:size15"] {
  --gap: 30rem;
}

/* Padding styles from padbox.css */
:is(
  [data-br-cover~="padding:size000"],
  [data-br-cover-centered~="padding:size000"]
) {
  padding: 0;
}
:is(
  [data-br-cover~="padding:size00"],
  [data-br-cover-centered~="padding:size00"]
) {
  padding: 0;
}
:is(
  [data-br-cover~="padding:size1"],
  [data-br-cover-centered~="padding:size1"]
) {
  padding: 0.25rem;
}
:is(
  [data-br-cover~="padding:size2"],
  [data-br-cover-centered~="padding:size2"]
) {
  padding: 0.5rem;
}
:is(
  [data-br-cover~="padding:size3"],
  [data-br-cover-centered~="padding:size3"]
) {
  padding: 1rem;
}
:is(
  [data-br-cover~="padding:size4"],
  [data-br-cover-centered~="padding:size4"]
) {
  padding: 1.25rem;
}
:is(
  [data-br-cover~="padding:size5"],
  [data-br-cover-centered~="padding:size5"]
) {
  padding: 1.5rem;
}
:is(
  [data-br-cover~="padding:size6"],
  [data-br-cover-centered~="padding:size6"]
) {
  padding: 1.75rem;
}
:is(
  [data-br-cover~="padding:size7"],
  [data-br-cover-centered~="padding:size7"]
) {
  padding: 2rem;
}
:is(
  [data-br-cover~="padding:size8"],
  [data-br-cover-centered~="padding:size8"]
) {
  padding: 3rem;
}
:is(
  [data-br-cover~="padding:size9"],
  [data-br-cover-centered~="padding:size9"]
) {
  padding: 4rem;
}
:is(
  [data-br-cover~="padding:size10"],
  [data-br-cover-centered~="padding:size10"]
) {
  padding: 5rem;
}
:is(
  [data-br-cover~="padding:size11"],
  [data-br-cover-centered~="padding:size11"]
) {
  padding: 7.5rem;
}
:is(
  [data-br-cover~="padding:size12"],
  [data-br-cover-centered~="padding:size12"]
) {
  padding: 10rem;
}
:is(
  [data-br-cover~="padding:size13"],
  [data-br-cover-centered~="padding:size13"]
) {
  padding: 15rem;
}
:is(
  [data-br-cover~="padding:size14"],
  [data-br-cover-centered~="padding:size14"]
) {
  padding: 20rem;
}
:is(
  [data-br-cover~="padding:size15"],
  [data-br-cover-centered~="padding:size15"]
) {
  padding: 30rem;
}
:is(
  [data-br-cover~="paddingInline:size000"],
  [data-br-cover-centered~="paddingInline:size000"]
) {
  padding-inline: 0;
}
:is(
  [data-br-cover~="paddingInline:size00"],
  [data-br-cover-centered~="paddingInline:size00"]
) {
  padding-inline: 0;
}
:is(
  [data-br-cover~="paddingInline:size1"],
  [data-br-cover-centered~="paddingInline:size1"]
) {
  padding-inline: 0.25rem;
}
:is(
  [data-br-cover~="paddingInline:size2"],
  [data-br-cover-centered~="paddingInline:size2"]
) {
  padding-inline: 0.5rem;
}
:is(
  [data-br-cover~="paddingInline:size3"],
  [data-br-cover-centered~="paddingInline:size3"]
) {
  padding-inline: 1rem;
}
:is(
  [data-br-cover~="paddingInline:size4"],
  [data-br-cover-centered~="paddingInline:size4"]
) {
  padding-inline: 1.25rem;
}
:is(
  [data-br-cover~="paddingInline:size5"],
  [data-br-cover-centered~="paddingInline:size5"]
) {
  padding-inline: 1.5rem;
}
:is(
  [data-br-cover~="paddingInline:size6"],
  [data-br-cover-centered~="paddingInline:size6"]
) {
  padding-inline: 1.75rem;
}
:is(
  [data-br-cover~="paddingInline:size7"],
  [data-br-cover-centered~="paddingInline:size7"]
) {
  padding-inline: 2rem;
}
:is(
  [data-br-cover~="paddingInline:size8"],
  [data-br-cover-centered~="paddingInline:size8"]
) {
  padding-inline: 3rem;
}
:is(
  [data-br-cover~="paddingInline:size9"],
  [data-br-cover-centered~="paddingInline:size9"]
) {
  padding-inline: 4rem;
}
:is(
  [data-br-cover~="paddingInline:size10"],
  [data-br-cover-centered~="paddingInline:size10"]
) {
  padding-inline: 5rem;
}
:is(
  [data-br-cover~="paddingInline:size11"],
  [data-br-cover-centered~="paddingInline:size11"]
) {
  padding-inline: 7.5rem;
}
:is(
  [data-br-cover~="paddingInline:size12"],
  [data-br-cover-centered~="paddingInline:size12"]
) {
  padding-inline: 10rem;
}
:is(
  [data-br-cover~="paddingInline:size13"],
  [data-br-cover-centered~="paddingInline:size13"]
) {
  padding-inline: 15rem;
}
:is(
  [data-br-cover~="paddingInline:size14"],
  [data-br-cover-centered~="paddingInline:size14"]
) {
  padding-inline: 20rem;
}
:is(
  [data-br-cover~="paddingInline:size15"],
  [data-br-cover-centered~="paddingInline:size15"]
) {
  padding-inline: 30rem;
}
:is(
  [data-br-cover~="paddingInlineStart:size000"],
  [data-br-cover-centered~="paddingInlineStart:size000"]
) {
  padding-inline-start: 0;
}
:is(
  [data-br-cover~="paddingInlineStart:size00"],
  [data-br-cover-centered~="paddingInlineStart:size00"]
) {
  padding-inline-start: 0;
}
:is(
  [data-br-cover~="paddingInlineStart:size1"],
  [data-br-cover-centered~="paddingInlineStart:size1"]
) {
  padding-inline-start: 0.25rem;
}
:is(
  [data-br-cover~="paddingInlineStart:size2"],
  [data-br-cover-centered~="paddingInlineStart:size2"]
) {
  padding-inline-start: 0.5rem;
}
:is(
  [data-br-cover~="paddingInlineStart:size3"],
  [data-br-cover-centered~="paddingInlineStart:size3"]
) {
  padding-inline-start: 1rem;
}
:is(
  [data-br-cover~="paddingInlineStart:size4"],
  [data-br-cover-centered~="paddingInlineStart:size4"]
) {
  padding-inline-start: 1.25rem;
}
:is(
  [data-br-cover~="paddingInlineStart:size5"],
  [data-br-cover-centered~="paddingInlineStart:size5"]
) {
  padding-inline-start: 1.5rem;
}
:is(
  [data-br-cover~="paddingInlineStart:size6"],
  [data-br-cover-centered~="paddingInlineStart:size6"]
) {
  padding-inline-start: 1.75rem;
}
:is(
  [data-br-cover~="paddingInlineStart:size7"],
  [data-br-cover-centered~="paddingInlineStart:size7"]
) {
  padding-inline-start: 2rem;
}
:is(
  [data-br-cover~="paddingInlineStart:size8"],
  [data-br-cover-centered~="paddingInlineStart:size8"]
) {
  padding-inline-start: 3rem;
}
:is(
  [data-br-cover~="paddingInlineStart:size9"],
  [data-br-cover-centered~="paddingInlineStart:size9"]
) {
  padding-inline-start: 4rem;
}
:is(
  [data-br-cover~="paddingInlineStart:size10"],
  [data-br-cover-centered~="paddingInlineStart:size10"]
) {
  padding-inline-start: 5rem;
}
:is(
  [data-br-cover~="paddingInlineStart:size11"],
  [data-br-cover-centered~="paddingInlineStart:size11"]
) {
  padding-inline-start: 7.5rem;
}
:is(
  [data-br-cover~="paddingInlineStart:size12"],
  [data-br-cover-centered~="paddingInlineStart:size12"]
) {
  padding-inline-start: 10rem;
}
:is(
  [data-br-cover~="paddingInlineStart:size13"],
  [data-br-cover-centered~="paddingInlineStart:size13"]
) {
  padding-inline-start: 15rem;
}
:is(
  [data-br-cover~="paddingInlineStart:size14"],
  [data-br-cover-centered~="paddingInlineStart:size14"]
) {
  padding-inline-start: 20rem;
}
:is(
  [data-br-cover~="paddingInlineStart:size15"],
  [data-br-cover-centered~="paddingInlineStart:size15"]
) {
  padding-inline-start: 30rem;
}
:is(
  [data-br-cover~="paddingInlineEnd:size000"],
  [data-br-cover-centered~="paddingInlineEnd:size000"]
) {
  padding-inline-end: 0;
}
:is(
  [data-br-cover~="paddingInlineEnd:size00"],
  [data-br-cover-centered~="paddingInlineEnd:size00"]
) {
  padding-inline-end: 0;
}
:is(
  [data-br-cover~="paddingInlineEnd:size1"],
  [data-br-cover-centered~="paddingInlineEnd:size1"]
) {
  padding-inline-end: 0.25rem;
}
:is(
  [data-br-cover~="paddingInlineEnd:size2"],
  [data-br-cover-centered~="paddingInlineEnd:size2"]
) {
  padding-inline-end: 0.5rem;
}
:is(
  [data-br-cover~="paddingInlineEnd:size3"],
  [data-br-cover-centered~="paddingInlineEnd:size3"]
) {
  padding-inline-end: 1rem;
}
:is(
  [data-br-cover~="paddingInlineEnd:size4"],
  [data-br-cover-centered~="paddingInlineEnd:size4"]
) {
  padding-inline-end: 1.25rem;
}
:is(
  [data-br-cover~="paddingInlineEnd:size5"],
  [data-br-cover-centered~="paddingInlineEnd:size5"]
) {
  padding-inline-end: 1.5rem;
}
:is(
  [data-br-cover~="paddingInlineEnd:size6"],
  [data-br-cover-centered~="paddingInlineEnd:size6"]
) {
  padding-inline-end: 1.75rem;
}
:is(
  [data-br-cover~="paddingInlineEnd:size7"],
  [data-br-cover-centered~="paddingInlineEnd:size7"]
) {
  padding-inline-end: 2rem;
}
:is(
  [data-br-cover~="paddingInlineEnd:size8"],
  [data-br-cover-centered~="paddingInlineEnd:size8"]
) {
  padding-inline-end: 3rem;
}
:is(
  [data-br-cover~="paddingInlineEnd:size9"],
  [data-br-cover-centered~="paddingInlineEnd:size9"]
) {
  padding-inline-end: 4rem;
}
:is(
  [data-br-cover~="paddingInlineEnd:size10"],
  [data-br-cover-centered~="paddingInlineEnd:size10"]
) {
  padding-inline-end: 5rem;
}
:is(
  [data-br-cover~="paddingInlineEnd:size11"],
  [data-br-cover-centered~="paddingInlineEnd:size11"]
) {
  padding-inline-end: 7.5rem;
}
:is(
  [data-br-cover~="paddingInlineEnd:size12"],
  [data-br-cover-centered~="paddingInlineEnd:size12"]
) {
  padding-inline-end: 10rem;
}
:is(
  [data-br-cover~="paddingInlineEnd:size13"],
  [data-br-cover-centered~="paddingInlineEnd:size13"]
) {
  padding-inline-end: 15rem;
}
:is(
  [data-br-cover~="paddingInlineEnd:size14"],
  [data-br-cover-centered~="paddingInlineEnd:size14"]
) {
  padding-inline-end: 20rem;
}
:is(
  [data-br-cover~="paddingInlineEnd:size15"],
  [data-br-cover-centered~="paddingInlineEnd:size15"]
) {
  padding-inline-end: 30rem;
}
:is(
  [data-br-cover~="paddingBlock:size000"],
  [data-br-cover-centered~="paddingBlock:size000"]
) {
  padding-block: 0;
}
:is(
  [data-br-cover~="paddingBlock:size00"],
  [data-br-cover-centered~="paddingBlock:size00"]
) {
  padding-block: 0;
}
:is(
  [data-br-cover~="paddingBlock:size1"],
  [data-br-cover-centered~="paddingBlock:size1"]
) {
  padding-block: 0.25rem;
}
:is(
  [data-br-cover~="paddingBlock:size2"],
  [data-br-cover-centered~="paddingBlock:size2"]
) {
  padding-block: 0.5rem;
}
:is(
  [data-br-cover~="paddingBlock:size3"],
  [data-br-cover-centered~="paddingBlock:size3"]
) {
  padding-block: 1rem;
}
:is(
  [data-br-cover~="paddingBlock:size4"],
  [data-br-cover-centered~="paddingBlock:size4"]
) {
  padding-block: 1.25rem;
}
:is(
  [data-br-cover~="paddingBlock:size5"],
  [data-br-cover-centered~="paddingBlock:size5"]
) {
  padding-block: 1.5rem;
}
:is(
  [data-br-cover~="paddingBlock:size6"],
  [data-br-cover-centered~="paddingBlock:size6"]
) {
  padding-block: 1.75rem;
}
:is(
  [data-br-cover~="paddingBlock:size7"],
  [data-br-cover-centered~="paddingBlock:size7"]
) {
  padding-block: 2rem;
}
:is(
  [data-br-cover~="paddingBlock:size8"],
  [data-br-cover-centered~="paddingBlock:size8"]
) {
  padding-block: 3rem;
}
:is(
  [data-br-cover~="paddingBlock:size9"],
  [data-br-cover-centered~="paddingBlock:size9"]
) {
  padding-block: 4rem;
}
:is(
  [data-br-cover~="paddingBlock:size10"],
  [data-br-cover-centered~="paddingBlock:size10"]
) {
  padding-block: 5rem;
}
:is(
  [data-br-cover~="paddingBlock:size11"],
  [data-br-cover-centered~="paddingBlock:size11"]
) {
  padding-block: 7.5rem;
}
:is(
  [data-br-cover~="paddingBlock:size12"],
  [data-br-cover-centered~="paddingBlock:size12"]
) {
  padding-block: 10rem;
}
:is(
  [data-br-cover~="paddingBlock:size13"],
  [data-br-cover-centered~="paddingBlock:size13"]
) {
  padding-block: 15rem;
}
:is(
  [data-br-cover~="paddingBlock:size14"],
  [data-br-cover-centered~="paddingBlock:size14"]
) {
  padding-block: 20rem;
}
:is(
  [data-br-cover~="paddingBlock:size15"],
  [data-br-cover-centered~="paddingBlock:size15"]
) {
  padding-block: 30rem;
}
:is(
  [data-br-cover~="paddingBlockStart:size000"],
  [data-br-cover-centered~="paddingBlockStart:size000"]
) {
  padding-block-start: 0;
}
:is(
  [data-br-cover~="paddingBlockStart:size00"],
  [data-br-cover-centered~="paddingBlockStart:size00"]
) {
  padding-block-start: 0;
}
:is(
  [data-br-cover~="paddingBlockStart:size1"],
  [data-br-cover-centered~="paddingBlockStart:size1"]
) {
  padding-block-start: 0.25rem;
}
:is(
  [data-br-cover~="paddingBlockStart:size2"],
  [data-br-cover-centered~="paddingBlockStart:size2"]
) {
  padding-block-start: 0.5rem;
}
:is(
  [data-br-cover~="paddingBlockStart:size3"],
  [data-br-cover-centered~="paddingBlockStart:size3"]
) {
  padding-block-start: 1rem;
}
:is(
  [data-br-cover~="paddingBlockStart:size4"],
  [data-br-cover-centered~="paddingBlockStart:size4"]
) {
  padding-block-start: 1.25rem;
}
:is(
  [data-br-cover~="paddingBlockStart:size5"],
  [data-br-cover-centered~="paddingBlockStart:size5"]
) {
  padding-block-start: 1.5rem;
}
:is(
  [data-br-cover~="paddingBlockStart:size6"],
  [data-br-cover-centered~="paddingBlockStart:size6"]
) {
  padding-block-start: 1.75rem;
}
:is(
  [data-br-cover~="paddingBlockStart:size7"],
  [data-br-cover-centered~="paddingBlockStart:size7"]
) {
  padding-block-start: 2rem;
}
:is(
  [data-br-cover~="paddingBlockStart:size8"],
  [data-br-cover-centered~="paddingBlockStart:size8"]
) {
  padding-block-start: 3rem;
}
:is(
  [data-br-cover~="paddingBlockStart:size9"],
  [data-br-cover-centered~="paddingBlockStart:size9"]
) {
  padding-block-start: 4rem;
}
:is(
  [data-br-cover~="paddingBlockStart:size10"],
  [data-br-cover-centered~="paddingBlockStart:size10"]
) {
  padding-block-start: 5rem;
}
:is(
  [data-br-cover~="paddingBlockStart:size11"],
  [data-br-cover-centered~="paddingBlockStart:size11"]
) {
  padding-block-start: 7.5rem;
}
:is(
  [data-br-cover~="paddingBlockStart:size12"],
  [data-br-cover-centered~="paddingBlockStart:size12"]
) {
  padding-block-start: 10rem;
}
:is(
  [data-br-cover~="paddingBlockStart:size13"],
  [data-br-cover-centered~="paddingBlockStart:size13"]
) {
  padding-block-start: 15rem;
}
:is(
  [data-br-cover~="paddingBlockStart:size14"],
  [data-br-cover-centered~="paddingBlockStart:size14"]
) {
  padding-block-start: 20rem;
}
:is(
  [data-br-cover~="paddingBlockStart:size15"],
  [data-br-cover-centered~="paddingBlockStart:size15"]
) {
  padding-block-start: 30rem;
}
:is(
  [data-br-cover~="paddingBlockEnd:size000"],
  [data-br-cover-centered~="paddingBlockEnd:size000"]
) {
  padding-block-end: 0;
}
:is(
  [data-br-cover~="paddingBlockEnd:size00"],
  [data-br-cover-centered~="paddingBlockEnd:size00"]
) {
  padding-block-end: 0;
}
:is(
  [data-br-cover~="paddingBlockEnd:size1"],
  [data-br-cover-centered~="paddingBlockEnd:size1"]
) {
  padding-block-end: 0.25rem;
}
:is(
  [data-br-cover~="paddingBlockEnd:size2"],
  [data-br-cover-centered~="paddingBlockEnd:size2"]
) {
  padding-block-end: 0.5rem;
}
:is(
  [data-br-cover~="paddingBlockEnd:size3"],
  [data-br-cover-centered~="paddingBlockEnd:size3"]
) {
  padding-block-end: 1rem;
}
:is(
  [data-br-cover~="paddingBlockEnd:size4"],
  [data-br-cover-centered~="paddingBlockEnd:size4"]
) {
  padding-block-end: 1.25rem;
}
:is(
  [data-br-cover~="paddingBlockEnd:size5"],
  [data-br-cover-centered~="paddingBlockEnd:size5"]
) {
  padding-block-end: 1.5rem;
}
:is(
  [data-br-cover~="paddingBlockEnd:size6"],
  [data-br-cover-centered~="paddingBlockEnd:size6"]
) {
  padding-block-end: 1.75rem;
}
:is(
  [data-br-cover~="paddingBlockEnd:size7"],
  [data-br-cover-centered~="paddingBlockEnd:size7"]
) {
  padding-block-end: 2rem;
}
:is(
  [data-br-cover~="paddingBlockEnd:size8"],
  [data-br-cover-centered~="paddingBlockEnd:size8"]
) {
  padding-block-end: 3rem;
}
:is(
  [data-br-cover~="paddingBlockEnd:size9"],
  [data-br-cover-centered~="paddingBlockEnd:size9"]
) {
  padding-block-end: 4rem;
}
:is(
  [data-br-cover~="paddingBlockEnd:size10"],
  [data-br-cover-centered~="paddingBlockEnd:size10"]
) {
  padding-block-end: 5rem;
}
:is(
  [data-br-cover~="paddingBlockEnd:size11"],
  [data-br-cover-centered~="paddingBlockEnd:size11"]
) {
  padding-block-end: 7.5rem;
}
:is(
  [data-br-cover~="paddingBlockEnd:size12"],
  [data-br-cover-centered~="paddingBlockEnd:size12"]
) {
  padding-block-end: 10rem;
}
:is(
  [data-br-cover~="paddingBlockEnd:size13"],
  [data-br-cover-centered~="paddingBlockEnd:size13"]
) {
  padding-block-end: 15rem;
}
:is(
  [data-br-cover~="paddingBlockEnd:size14"],
  [data-br-cover-centered~="paddingBlockEnd:size14"]
) {
  padding-block-end: 20rem;
}
:is(
  [data-br-cover~="paddingBlockEnd:size15"],
  [data-br-cover-centered~="paddingBlockEnd:size15"]
) {
  padding-block-end: 30rem;
}