From a12faa8837a021621175ec64a33c50d28f71fd9e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 20 Feb 2024 09:31:20 +0100 Subject: [PATCH] append flexbox solution to the project. --- .../umbraco-blockgridlayout-flexbox_css.txt | 35 +++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 src/Umbraco.Web.UI.Client/src/css/umbraco-blockgridlayout-flexbox_css.txt diff --git a/src/Umbraco.Web.UI.Client/src/css/umbraco-blockgridlayout-flexbox_css.txt b/src/Umbraco.Web.UI.Client/src/css/umbraco-blockgridlayout-flexbox_css.txt new file mode 100644 index 0000000000..3f921c0470 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/css/umbraco-blockgridlayout-flexbox_css.txt @@ -0,0 +1,35 @@ +/** Example of how a grid layout stylehseet could be done with Flex box: */ + +.umb-block-grid__layout-container { + position: relative; + display: flex; + flex-wrap: wrap; + gap: var(--umb-block-grid--row-gap, 0) var(--umb-block-grid--column-gap, 0); +} +.umb-block-grid__layout-item { + position: relative; + --umb-block-grid__layout-item-calc: calc(var(--umb-block-grid--item-column-span) / var(--umb-block-grid--grid-columns)); + width: calc(var(--umb-block-grid__layout-item-calc) * 100% - (1 - var(--umb-block-grid__layout-item-calc)) * var(--umb-block-grid--column-gap, 0px)); +} + + +.umb-block-grid__area-container, .umb-block-grid__block--view::part(area-container) { + position: relative; + display: flex; + flex-wrap: wrap; + width: 100%; + gap: var(--umb-block-grid--areas-row-gap, 0) var(--umb-block-grid--areas-column-gap, 0); +} +.umb-block-grid__area { + position: relative; + height: 100%; + display: flex; + flex-direction: column; + --umb-block-grid__area-calc: calc(var(--umb-block-grid--area-column-span) / var(--umb-block-grid--area-grid-columns, 1)); + width: calc(var(--umb-block-grid__area-calc) * 100% - (1 - var(--umb-block-grid__area-calc)) * var(--umb-block-grid--areas-column-gap, 0px)); +} + + +.umb-block-grid__actions { + clear: both; +}