From 4362b2bd1cc0c893a8f282716e0f0785933a8b56 Mon Sep 17 00:00:00 2001 From: Kinneyzhang Date: Wed, 26 Aug 2026 18:42:19 +0800 Subject: [PATCH] refactor: express side border overrides canonically --- examples/flex-reference.ebox | 130 ++++++++++++++-------------- examples/grid-reference.ebox | 20 ++--- examples/public-layout-gallery.ebox | 6 +- examples/responsive-reference.ebox | 4 +- 4 files changed, 80 insertions(+), 80 deletions(-) diff --git a/examples/flex-reference.ebox b/examples/flex-reference.ebox index 760d3d8..485a87c 100644 --- a/examples/flex-reference.ebox +++ b/examples/flex-reference.ebox @@ -11,13 +11,13 @@ :padding '(0 (18)) :border "#D97757" :bgcolor "#FFF5ED" :color "#3D2B1F") (box :layout 'flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) :padding '(0 (12)) - :border "#D97757" :border-top-p nil + :border "#D97757" :border-top 'none :bgcolor "#FFF8F2" (box :layout 'column (box :content "row" :width '(220) :padding '(0 (10)) :border "#D97757" :bgcolor "#FFFDF8" :color "#3D3A35" :text-align 'center) (box :layout 'flex :width '(220) :height 4 :padding '(0 (8)) :border "#D97757" - :border-top-p nil + :border-top 'none :bgcolor "#FFF8F2" :flex-direction 'row :column-gap '(10) :align-items 'center (box :content "A" :width '(42) :height 1 :bgcolor "#F7C8B3" :color "#1F2328" :text-align 'center) (box :content "B" :width '(42) :height 1 :bgcolor "#F0A88F" :color "#1F2328" :text-align 'center) @@ -26,7 +26,7 @@ (box :content "row-reverse" :width '(220) :padding '(0 (10)) :border "#D97757" :bgcolor "#FFFDF8" :color "#3D3A35" :text-align 'center) (box :layout 'flex :width '(220) :height 4 :padding '(0 (8)) :border "#D97757" - :border-top-p nil + :border-top 'none :bgcolor "#FFF8F2" :flex-direction 'row-reverse :column-gap '(10) :align-items 'center (box :content "A" :width '(42) :height 1 :bgcolor "#F7C8B3" :color "#1F2328" :text-align 'center) (box :content "B" :width '(42) :height 1 :bgcolor "#F0A88F" :color "#1F2328" :text-align 'center) @@ -35,7 +35,7 @@ (box :content "column" :width '(220) :padding '(0 (10)) :border "#D97757" :bgcolor "#FFFDF8" :color "#3D3A35" :text-align 'center) (box :layout 'flex :width '(220) :height 6 :padding '(0 (8)) :border "#D97757" - :border-top-p nil + :border-top 'none :bgcolor "#FFF8F2" :flex-direction 'column :row-gap 1 :align-items 'stretch (box :content "A" :height 1 :bgcolor "#F7C8B3" :color "#1F2328" :text-align 'center) (box :content "B" :height 1 :bgcolor "#F0A88F" :color "#1F2328" :text-align 'center) @@ -44,7 +44,7 @@ (box :content "column-reverse" :width '(220) :padding '(0 (10)) :border "#D97757" :bgcolor "#FFFDF8" :color "#3D3A35" :text-align 'center) (box :layout 'flex :width '(220) :height 6 :padding '(0 (8)) :border "#D97757" - :border-top-p nil + :border-top 'none :bgcolor "#FFF8F2" :flex-direction 'column-reverse :row-gap 1 :align-items 'stretch (box :content "A" :height 1 :bgcolor "#F7C8B3" :color "#1F2328" :text-align 'center) (box :content "B" :height 1 :bgcolor "#F0A88F" :color "#1F2328" :text-align 'center) @@ -56,13 +56,13 @@ :padding '(0 (18)) :border "#5E7F6A" :bgcolor "#F3FAF4" :color "#24352A") (box :layout 'flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) :padding '(0 (12)) - :border "#5E7F6A" :border-top-p nil + :border "#5E7F6A" :border-top 'none :bgcolor "#F8FCF8" (box :layout 'column (box :content "nowrap" :max-width '(293) :padding '(0 (10)) :border "#5E7F6A" :bgcolor "#FFFDF8" :color "#3D3A35" :text-align 'center) (box :layout 'flex :max-width '(293) :padding '(0 (8)) :border "#5E7F6A" - :border-top-p nil + :border-top 'none :bgcolor "#F8FCF8" :flex-wrap 'nowrap :column-gap '(8) :align-items 'center (box :flex-shrink 1 :content "A" :width '(92) :height 1 :bgcolor "#DCEBDD" :color "#1F2328" :text-align 'center) (box :flex-shrink 1 :content "B" :width '(92) :height 1 :bgcolor "#BFD6C2" :color "#1F2328" :text-align 'center) @@ -71,7 +71,7 @@ (box :content "wrap" :max-width '(293) :padding '(0 (10)) :border "#5E7F6A" :bgcolor "#FFFDF8" :color "#3D3A35" :text-align 'center) (box :layout 'flex :max-width '(293) :padding '(0 (8)) :border "#5E7F6A" - :border-top-p nil + :border-top 'none :bgcolor "#F8FCF8" :flex-wrap 'wrap :column-gap '(8) :row-gap 1 (box :flex-shrink 0 :content "A 118" :width '(118) :height 1 :bgcolor "#DCEBDD" :color "#1F2328" :text-align 'center) (box :flex-shrink 0 :content "B 118" :width '(118) :height 1 :bgcolor "#BFD6C2" :color "#1F2328" :text-align 'center) @@ -80,7 +80,7 @@ (box :content "wrap-reverse" :max-width '(293) :padding '(0 (10)) :border "#5E7F6A" :bgcolor "#FFFDF8" :color "#3D3A35" :text-align 'center) (box :layout 'flex :max-width '(293) :padding '(0 (8)) :border "#5E7F6A" - :border-top-p nil + :border-top 'none :bgcolor "#F8FCF8" :flex-wrap 'wrap-reverse :column-gap '(8) :row-gap 1 (box :flex-shrink 0 :content "A 118" :width '(118) :height 1 :bgcolor "#DCEBDD" :color "#1F2328" :text-align 'center) (box :flex-shrink 0 :content "B 118" :width '(118) :height 1 :bgcolor "#BFD6C2" :color "#1F2328" :text-align 'center) @@ -92,13 +92,13 @@ :padding '(0 (18)) :border "#6F6A95" :bgcolor "#F7F4FC" :color "#2F2B45") (box :layout 'flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) :padding '(0 (12)) - :border "#6F6A95" :border-top-p nil + :border "#6F6A95" :border-top 'none :bgcolor "#FBF9FF" (box :layout 'column (box :content ":flex-flow (row wrap)" :max-width '(440) :padding '(0 (10)) :border "#6F6A95" :bgcolor "#FFFDF8" :color "#3D3A35" :text-align 'center) (box :layout 'flex :max-width '(440) :padding '(0 (8)) :border "#6F6A95" - :border-top-p nil + :border-top 'none :bgcolor "#FBF9FF" :flex-flow '(row wrap) :gap '(1 (12)) (box :content "A" :width '(170) :height 1 :bgcolor "#E4DEF4" :color "#1F2328" :text-align 'center) (box :content "B" :width '(170) :height 1 :bgcolor "#CBC2E3" :color "#1F2328" :text-align 'center) @@ -107,7 +107,7 @@ (box :content ":flex-flow (column wrap)" :max-width '(440) :padding '(0 (10)) :border "#6F6A95" :bgcolor "#FFFDF8" :color "#3D3A35" :text-align 'center) (box :layout 'flex :max-width '(440) :padding '(0 (8)) :border "#6F6A95" - :border-top-p nil + :border-top 'none :bgcolor "#FBF9FF" :flex-flow '(column wrap) :gap '(1 (12)) (box :content "A" :width '(140) :height 1 :bgcolor "#E4DEF4" :color "#1F2328" :text-align 'center) (box :content "B" :width '(140) :height 1 :bgcolor "#CBC2E3" :color "#1F2328" :text-align 'center) @@ -119,57 +119,57 @@ :padding '(0 (18)) :border "#3F6D88" :bgcolor "#F1F8FB" :color "#20313A") (box :layout 'flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) :padding '(0 (12)) - :border "#3F6D88" :border-top-p nil + :border "#3F6D88" :border-top 'none :bgcolor "#F6FBFD" (box :layout 'column (box :content "flex-start" :width '(146) :padding '(0 (4)) :border "#3F6D88" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (box :layout 'flex :width '(146) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'flex-start + (box :layout 'flex :width '(146) :border "#3F6D88" :border-top 'none :bgcolor "#F6FBFD" :justify-content 'flex-start (box :content "A" :width '(28) :height 1 :bgcolor "#CAE6F0" :color "#1F2328" :text-align 'center) (box :content "B" :width '(28) :height 1 :bgcolor "#A8D2E2" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "center" :width '(146) :padding '(0 (4)) :border "#3F6D88" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (box :layout 'flex :width '(146) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'center + (box :layout 'flex :width '(146) :border "#3F6D88" :border-top 'none :bgcolor "#F6FBFD" :justify-content 'center (box :content "A" :width '(28) :height 1 :bgcolor "#CAE6F0" :color "#1F2328" :text-align 'center) (box :content "B" :width '(28) :height 1 :bgcolor "#A8D2E2" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "flex-end" :width '(146) :padding '(0 (4)) :border "#3F6D88" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (box :layout 'flex :width '(146) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'flex-end + (box :layout 'flex :width '(146) :border "#3F6D88" :border-top 'none :bgcolor "#F6FBFD" :justify-content 'flex-end (box :content "A" :width '(28) :height 1 :bgcolor "#CAE6F0" :color "#1F2328" :text-align 'center) (box :content "B" :width '(28) :height 1 :bgcolor "#A8D2E2" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "space-between" :width '(146) :padding '(0 (4)) :border "#3F6D88" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (box :layout 'flex :width '(146) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'space-between + (box :layout 'flex :width '(146) :border "#3F6D88" :border-top 'none :bgcolor "#F6FBFD" :justify-content 'space-between (box :content "A" :width '(28) :height 1 :bgcolor "#CAE6F0" :color "#1F2328" :text-align 'center) (box :content "B" :width '(28) :height 1 :bgcolor "#A8D2E2" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "space-around" :width '(146) :padding '(0 (4)) :border "#3F6D88" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (box :layout 'flex :width '(146) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'space-around + (box :layout 'flex :width '(146) :border "#3F6D88" :border-top 'none :bgcolor "#F6FBFD" :justify-content 'space-around (box :content "A" :width '(28) :height 1 :bgcolor "#CAE6F0" :color "#1F2328" :text-align 'center) (box :content "B" :width '(28) :height 1 :bgcolor "#A8D2E2" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "space-evenly" :width '(146) :padding '(0 (4)) :border "#3F6D88" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (box :layout 'flex :width '(146) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'space-evenly + (box :layout 'flex :width '(146) :border "#3F6D88" :border-top 'none :bgcolor "#F6FBFD" :justify-content 'space-evenly (box :content "A" :width '(28) :height 1 :bgcolor "#CAE6F0" :color "#1F2328" :text-align 'center) (box :content "B" :width '(28) :height 1 :bgcolor "#A8D2E2" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "start" :width '(176) :padding '(0 (4)) :border "#3F6D88" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (box :layout 'flex :width '(176) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'start + (box :layout 'flex :width '(176) :border "#3F6D88" :border-top 'none :bgcolor "#F6FBFD" :justify-content 'start (box :content "start" :width '(70) :height 1 :bgcolor "#CAE6F0" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "end" :width '(176) :padding '(0 (4)) :border "#3F6D88" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (box :layout 'flex :width '(176) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'end + (box :layout 'flex :width '(176) :border "#3F6D88" :border-top 'none :bgcolor "#F6FBFD" :justify-content 'end (box :content "end" :width '(70) :height 1 :bgcolor "#A8D2E2" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "left" :width '(176) :padding '(0 (4)) :border "#3F6D88" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (box :layout 'flex :width '(176) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'left + (box :layout 'flex :width '(176) :border "#3F6D88" :border-top 'none :bgcolor "#F6FBFD" :justify-content 'left (box :content "left" :width '(70) :height 1 :bgcolor "#7DB8CE" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "right" :width '(176) :padding '(0 (4)) :border "#3F6D88" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (box :layout 'flex :width '(176) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'right + (box :layout 'flex :width '(176) :border "#3F6D88" :border-top 'none :bgcolor "#F6FBFD" :justify-content 'right (box :content "right" :width '(70) :height 1 :bgcolor "#5F9CB5" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "normal" :width '(176) :padding '(0 (4)) :border "#3F6D88" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (box :layout 'flex :width '(176) :border "#3F6D88" :border-top-p nil :bgcolor "#F6FBFD" :justify-content 'normal + (box :layout 'flex :width '(176) :border "#3F6D88" :border-top 'none :bgcolor "#F6FBFD" :justify-content 'normal (box :content "normal" :width '(70) :height 1 :bgcolor "#3F6D88" :color "#FFFFFF" :text-align 'center)))) (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") @@ -178,56 +178,56 @@ :padding '(0 (18)) :border "#9A6B43" :bgcolor "#FFF7EE" :color "#3A2A1D") (box :layout 'flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) :padding '(0 (12)) - :border "#9A6B43" :border-top-p nil + :border "#9A6B43" :border-top 'none :bgcolor "#FFFAF5" (box :layout 'column (box :content "flex-start" :width '(176) :padding '(0 (4)) :border "#9A6B43" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (box :layout 'flex :width '(176) :height 5 :border "#9A6B43" :border-top-p nil :bgcolor "#FFFAF5" :align-items 'flex-start + (box :layout 'flex :width '(176) :height 5 :border "#9A6B43" :border-top 'none :bgcolor "#FFFAF5" :align-items 'flex-start (box :content "short" :width '(68) :height 1 :bgcolor "#F1D0AF" :color "#1F2328" :text-align 'center) (box :content "tall\nitem\nsets line" :width '(78) :height 3 :bgcolor "#D9AD83" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "center" :width '(176) :padding '(0 (4)) :border "#9A6B43" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (box :layout 'flex :width '(176) :height 5 :border "#9A6B43" :border-top-p nil :bgcolor "#FFFAF5" :align-items 'center + (box :layout 'flex :width '(176) :height 5 :border "#9A6B43" :border-top 'none :bgcolor "#FFFAF5" :align-items 'center (box :content "short" :width '(68) :height 1 :bgcolor "#F1D0AF" :color "#1F2328" :text-align 'center) (box :content "tall\nitem\nsets line" :width '(78) :height 3 :bgcolor "#D9AD83" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "flex-end" :width '(176) :padding '(0 (4)) :border "#9A6B43" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (box :layout 'flex :width '(176) :height 5 :border "#9A6B43" :border-top-p nil :bgcolor "#FFFAF5" :align-items 'flex-end + (box :layout 'flex :width '(176) :height 5 :border "#9A6B43" :border-top 'none :bgcolor "#FFFAF5" :align-items 'flex-end (box :content "short" :width '(68) :height 1 :bgcolor "#F1D0AF" :color "#1F2328" :text-align 'center) (box :content "tall\nitem\nsets line" :width '(78) :height 3 :bgcolor "#D9AD83" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "stretch" :width '(176) :padding '(0 (4)) :border "#9A6B43" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (box :layout 'flex :width '(176) :height 5 :border "#9A6B43" :border-top-p nil :bgcolor "#FFFAF5" :align-items 'stretch + (box :layout 'flex :width '(176) :height 5 :border "#9A6B43" :border-top 'none :bgcolor "#FFFAF5" :align-items 'stretch (box :content "auto height stretches" :width '(72) :bgcolor "#F1D0AF" :color "#1F2328" :text-align 'center) (box :content "line height" :width '(78) :height 3 :bgcolor "#D9AD83" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "baseline" :width '(176) :padding '(0 (4)) :border "#9A6B43" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (box :layout 'flex :width '(176) :height 5 :border "#9A6B43" :border-top-p nil :bgcolor "#FFFAF5" :align-items 'baseline + (box :layout 'flex :width '(176) :height 5 :border "#9A6B43" :border-top 'none :bgcolor "#FFFAF5" :align-items 'baseline (box :content "baseline" :width '(90) :height 1 :bgcolor "#BA8456" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "start" :width '(146) :padding '(0 (4)) :border "#9A6B43" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (box :layout 'flex :width '(146) :height 4 :border "#9A6B43" :border-top-p nil :bgcolor "#FFFAF5" :align-items 'start + (box :layout 'flex :width '(146) :height 4 :border "#9A6B43" :border-top 'none :bgcolor "#FFFAF5" :align-items 'start (box :content "start" :width '(62) :height 1 :bgcolor "#F1D0AF" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "end" :width '(146) :padding '(0 (4)) :border "#9A6B43" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (box :layout 'flex :width '(146) :height 4 :border "#9A6B43" :border-top-p nil :bgcolor "#FFFAF5" :align-items 'end + (box :layout 'flex :width '(146) :height 4 :border "#9A6B43" :border-top 'none :bgcolor "#FFFAF5" :align-items 'end (box :content "end" :width '(62) :height 1 :bgcolor "#D9AD83" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "self-start" :width '(146) :padding '(0 (4)) :border "#9A6B43" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (box :layout 'flex :width '(146) :height 4 :border "#9A6B43" :border-top-p nil :bgcolor "#FFFAF5" :align-items 'self-start + (box :layout 'flex :width '(146) :height 4 :border "#9A6B43" :border-top 'none :bgcolor "#FFFAF5" :align-items 'self-start (box :content "self-start" :width '(78) :height 1 :bgcolor "#BA8456" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "self-end" :width '(146) :padding '(0 (4)) :border "#9A6B43" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (box :layout 'flex :width '(146) :height 4 :border "#9A6B43" :border-top-p nil :bgcolor "#FFFAF5" :align-items 'self-end + (box :layout 'flex :width '(146) :height 4 :border "#9A6B43" :border-top 'none :bgcolor "#FFFAF5" :align-items 'self-end (box :content "self-end" :width '(70) :height 1 :bgcolor "#9A6B43" :color "#FFFFFF" :text-align 'center))) (box :layout 'column (box :content "normal" :width '(146) :padding '(0 (4)) :border "#9A6B43" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (box :layout 'flex :width '(146) :height 4 :border "#9A6B43" :border-top-p nil :bgcolor "#FFFAF5" :align-items 'normal + (box :layout 'flex :width '(146) :height 4 :border "#9A6B43" :border-top 'none :bgcolor "#FFFAF5" :align-items 'normal (box :content "normal" :width '(62) :bgcolor "#7A5132" :color "#FFFFFF" :text-align 'center))) (box :layout 'column (box :content "stretch note" :width '(146) :padding '(0 (4)) :border "#9A6B43" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) (box :content "normal behaves stretch-like for auto cross size in this DSL." :width '(146) - :height 4 :padding '(0 (8)) :border "#9A6B43" :border-top-p nil + :height 4 :padding '(0 (8)) :border "#9A6B43" :border-top 'none :bgcolor "#FFFAF5" :color "#3A2A1D"))) (box :width '(viewport) :height 1 :bgcolor "#FAF7F0") @@ -236,88 +236,88 @@ :padding '(0 (18)) :border "#7C6A2F" :bgcolor "#FBF8E8" :color "#362F16") (box :layout 'flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) :padding '(0 (12)) - :border "#7C6A2F" :border-top-p nil + :border "#7C6A2F" :border-top 'none :bgcolor "#FFFDF0" (box :layout 'column (box :content "flex-start" :width '(176) :padding '(0 (4)) :border "#7C6A2F" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (box :layout 'flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0" + (box :layout 'flex :width '(176) :height 7 :border "#7C6A2F" :border-top 'none :bgcolor "#FFFDF0" :flex-wrap 'wrap :align-content 'flex-start :row-gap 1 :column-gap '(8) (box :content "A" :width '(78) :height 1 :bgcolor "#EEE1A8" :color "#1F2328" :text-align 'center) (box :content "B" :width '(78) :height 1 :bgcolor "#D9C46D" :color "#1F2328" :text-align 'center) (box :content "C" :width '(78) :height 1 :bgcolor "#B89B3D" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "center" :width '(176) :padding '(0 (4)) :border "#7C6A2F" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (box :layout 'flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0" + (box :layout 'flex :width '(176) :height 7 :border "#7C6A2F" :border-top 'none :bgcolor "#FFFDF0" :flex-wrap 'wrap :align-content 'center :row-gap 1 :column-gap '(8) (box :content "A" :width '(78) :height 1 :bgcolor "#EEE1A8" :color "#1F2328" :text-align 'center) (box :content "B" :width '(78) :height 1 :bgcolor "#D9C46D" :color "#1F2328" :text-align 'center) (box :content "C" :width '(78) :height 1 :bgcolor "#B89B3D" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "flex-end" :width '(176) :padding '(0 (4)) :border "#7C6A2F" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (box :layout 'flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0" + (box :layout 'flex :width '(176) :height 7 :border "#7C6A2F" :border-top 'none :bgcolor "#FFFDF0" :flex-wrap 'wrap :align-content 'flex-end :row-gap 1 :column-gap '(8) (box :content "A" :width '(78) :height 1 :bgcolor "#EEE1A8" :color "#1F2328" :text-align 'center) (box :content "B" :width '(78) :height 1 :bgcolor "#D9C46D" :color "#1F2328" :text-align 'center) (box :content "C" :width '(78) :height 1 :bgcolor "#B89B3D" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "space-between" :width '(176) :padding '(0 (4)) :border "#7C6A2F" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (box :layout 'flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0" + (box :layout 'flex :width '(176) :height 7 :border "#7C6A2F" :border-top 'none :bgcolor "#FFFDF0" :flex-wrap 'wrap :align-content 'space-between :row-gap 1 :column-gap '(8) (box :content "A" :width '(78) :height 1 :bgcolor "#EEE1A8" :color "#1F2328" :text-align 'center) (box :content "B" :width '(78) :height 1 :bgcolor "#D9C46D" :color "#1F2328" :text-align 'center) (box :content "C" :width '(78) :height 1 :bgcolor "#B89B3D" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "space-around" :width '(176) :padding '(0 (4)) :border "#7C6A2F" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (box :layout 'flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0" + (box :layout 'flex :width '(176) :height 7 :border "#7C6A2F" :border-top 'none :bgcolor "#FFFDF0" :flex-wrap 'wrap :align-content 'space-around :row-gap 1 :column-gap '(8) (box :content "A" :width '(78) :height 1 :bgcolor "#EEE1A8" :color "#1F2328" :text-align 'center) (box :content "B" :width '(78) :height 1 :bgcolor "#D9C46D" :color "#1F2328" :text-align 'center) (box :content "C" :width '(78) :height 1 :bgcolor "#B89B3D" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "space-evenly" :width '(176) :padding '(0 (4)) :border "#7C6A2F" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (box :layout 'flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0" + (box :layout 'flex :width '(176) :height 7 :border "#7C6A2F" :border-top 'none :bgcolor "#FFFDF0" :flex-wrap 'wrap :align-content 'space-evenly :row-gap 1 :column-gap '(8) (box :content "A" :width '(78) :height 1 :bgcolor "#EEE1A8" :color "#1F2328" :text-align 'center) (box :content "B" :width '(78) :height 1 :bgcolor "#D9C46D" :color "#1F2328" :text-align 'center) (box :content "C" :width '(78) :height 1 :bgcolor "#B89B3D" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "stretch" :width '(176) :padding '(0 (4)) :border "#7C6A2F" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (box :layout 'flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0" + (box :layout 'flex :width '(176) :height 7 :border "#7C6A2F" :border-top 'none :bgcolor "#FFFDF0" :flex-wrap 'wrap :align-content 'stretch :row-gap 1 :column-gap '(8) (box :content "A" :width '(78) :height 1 :bgcolor "#EEE1A8" :color "#1F2328" :text-align 'center) (box :content "B" :width '(78) :height 1 :bgcolor "#D9C46D" :color "#1F2328" :text-align 'center) (box :content "C" :width '(78) :height 1 :bgcolor "#B89B3D" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "start" :width '(176) :padding '(0 (4)) :border "#7C6A2F" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (box :layout 'flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0" + (box :layout 'flex :width '(176) :height 7 :border "#7C6A2F" :border-top 'none :bgcolor "#FFFDF0" :flex-wrap 'wrap :align-content 'start :row-gap 1 :column-gap '(8) (box :content "A" :width '(78) :height 1 :bgcolor "#EEE1A8" :color "#1F2328" :text-align 'center) (box :content "B" :width '(78) :height 1 :bgcolor "#D9C46D" :color "#1F2328" :text-align 'center) (box :content "C" :width '(78) :height 1 :bgcolor "#B89B3D" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "end" :width '(176) :padding '(0 (4)) :border "#7C6A2F" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (box :layout 'flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0" + (box :layout 'flex :width '(176) :height 7 :border "#7C6A2F" :border-top 'none :bgcolor "#FFFDF0" :flex-wrap 'wrap :align-content 'end :row-gap 1 :column-gap '(8) (box :content "A" :width '(78) :height 1 :bgcolor "#EEE1A8" :color "#1F2328" :text-align 'center) (box :content "B" :width '(78) :height 1 :bgcolor "#D9C46D" :color "#1F2328" :text-align 'center) (box :content "C" :width '(78) :height 1 :bgcolor "#B89B3D" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "baseline" :width '(176) :padding '(0 (4)) :border "#7C6A2F" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (box :layout 'flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0" + (box :layout 'flex :width '(176) :height 7 :border "#7C6A2F" :border-top 'none :bgcolor "#FFFDF0" :flex-wrap 'wrap :align-content 'baseline :row-gap 1 :column-gap '(8) (box :content "A" :width '(78) :height 1 :bgcolor "#EEE1A8" :color "#1F2328" :text-align 'center) (box :content "B" :width '(78) :height 1 :bgcolor "#D9C46D" :color "#1F2328" :text-align 'center) (box :content "C" :width '(78) :height 1 :bgcolor "#B89B3D" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "normal" :width '(176) :padding '(0 (4)) :border "#7C6A2F" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (box :layout 'flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0" + (box :layout 'flex :width '(176) :height 7 :border "#7C6A2F" :border-top 'none :bgcolor "#FFFDF0" :flex-wrap 'wrap :align-content 'normal :row-gap 1 :column-gap '(8) (box :content "A" :width '(78) :height 1 :bgcolor "#EEE1A8" :color "#1F2328" :text-align 'center) (box :content "B" :width '(78) :height 1 :bgcolor "#D9C46D" :color "#1F2328" :text-align 'center) (box :content "C" :width '(78) :height 1 :bgcolor "#B89B3D" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "nowrap note" :width '(176) :padding '(0 (4)) :border "#7C6A2F" :bgcolor "#FFFDF8" :color "#1F2328" :text-align 'center) - (box :layout 'flex :width '(176) :height 7 :border "#7C6A2F" :border-top-p nil :bgcolor "#FFFDF0" + (box :layout 'flex :width '(176) :height 7 :border "#7C6A2F" :border-top 'none :bgcolor "#FFFDF0" :flex-wrap 'nowrap :align-content 'normal :row-gap 1 :column-gap '(8) (box :content "single line" :width '(96) :height 1 :bgcolor "#EEE1A8" :color "#1F2328" :text-align 'center)))) @@ -327,13 +327,13 @@ :padding '(0 (18)) :border "#3D7068" :bgcolor "#F1FAF8" :color "#1D3935") (box :layout 'flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) :padding '(0 (12)) - :border "#3D7068" :border-top-p nil + :border "#3D7068" :border-top 'none :bgcolor "#F7FCFB" (box :layout 'column (box :content ":gap (1 (14))" :max-width '(293) :padding '(0 (10)) :border "#3D7068" :bgcolor "#FFFDF8" :color "#3D3A35" :text-align 'center) (box :layout 'flex :max-width '(293) - :border "#3D7068" :border-top-p nil :bgcolor "#F7FCFB" + :border "#3D7068" :border-top 'none :bgcolor "#F7FCFB" :flex-wrap 'wrap :gap '(1 (14)) (box :content "A" :width '(104) :height 1 :bgcolor "#CDEBE5" :color "#1F2328" :text-align 'center) (box :content "B" :width '(104) :height 1 :bgcolor "#9FD5CB" :color "#1F2328" :text-align 'center) @@ -341,7 +341,7 @@ (box :layout 'column (box :content ":row-gap 2" :max-width '(293) :padding '(0 (10)) :border "#3D7068" :bgcolor "#FFFDF8" :color "#3D3A35" :text-align 'center) - (box :layout 'flex :max-width '(293) :border "#3D7068" :border-top-p nil :bgcolor "#F7FCFB" + (box :layout 'flex :max-width '(293) :border "#3D7068" :border-top 'none :bgcolor "#F7FCFB" :flex-wrap 'wrap :row-gap 2 :column-gap '(8) (box :content "A" :width '(104) :height 1 :bgcolor "#CDEBE5" :color "#1F2328" :text-align 'center) (box :content "B" :width '(104) :height 1 :bgcolor "#9FD5CB" :color "#1F2328" :text-align 'center) @@ -349,7 +349,7 @@ (box :layout 'column (box :content ":column-gap (32)" :max-width '(293) :padding '(0 (10)) :border "#3D7068" :bgcolor "#FFFDF8" :color "#3D3A35" :text-align 'center) - (box :layout 'flex :max-width '(293) :border "#3D7068" :border-top-p nil :bgcolor "#F7FCFB" + (box :layout 'flex :max-width '(293) :border "#3D7068" :border-top 'none :bgcolor "#F7FCFB" :flex-wrap 'wrap :row-gap 1 :column-gap '(32) (box :content "A" :width '(104) :height 1 :bgcolor "#CDEBE5" :color "#1F2328" :text-align 'center) (box :content "B" :width '(104) :height 1 :bgcolor "#9FD5CB" :color "#1F2328" :text-align 'center) @@ -361,7 +361,7 @@ :padding '(0 (18)) :border "#8E4A63" :bgcolor "#FFF4F7" :color "#3A1F2A") (box :layout 'flex :height 5 :padding '(0 (12)) :border "#8E4A63" - :border-top-p nil + :border-top 'none :bgcolor "#FFF8FA" :column-gap '(12) :align-items 'center (box :order 3 :content "source 1\n:order 3" :width '(150) :height 2 :bgcolor "#F2C4D2" :color "#1F2328" :text-align 'center) (box :order 1 :content "source 2\n:order 1" :width '(150) :height 2 :bgcolor "#DEA4B7" :color "#1F2328" :text-align 'center) @@ -375,40 +375,40 @@ :bgcolor "#F1F8FC" :color "#1C303D") (box :layout 'column (box :content "Grow factors: same basis, different growth weights." - :padding '(0 (12)) :border "#2F5F7C" :border-top-p nil + :padding '(0 (12)) :border "#2F5F7C" :border-top 'none :bgcolor "#FFFDF8" :color "#3D3A35") (box :layout 'flex :padding '(0 (12)) :border "#2F5F7C" - :border-top-p nil + :border-top 'none :bgcolor "#F8FCFE" :column-gap '(10) (box :flex-grow 1 :flex-basis '(120) :content "grow 1\nbasis 120" :height 2 :bgcolor "#C7E3F0" :color "#1F2328" :text-align 'center) (box :flex-grow 2 :flex-basis '(120) :content "grow 2\nbasis 120" :height 2 :bgcolor "#96C7DD" :color "#1F2328" :text-align 'center) (box :flex-grow 3 :flex-basis '(120) :content "grow 3\nbasis 120" :height 2 :bgcolor "#5FA4C2" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "Shrink factors: overflowing bases lose space by weighted shrink." - :padding '(0 (12)) :border "#2F5F7C" :border-top-p nil + :padding '(0 (12)) :border "#2F5F7C" :border-top 'none :bgcolor "#FFFDF8" :color "#3D3A35") (box :layout 'flex :padding '(0 (12)) :border "#2F5F7C" - :border-top-p nil + :border-top 'none :bgcolor "#F8FCFE" :column-gap '(10) (box :flex-shrink 1 :flex-basis '(320) :content "shrink 1\nbasis 320" :height 2 :bgcolor "#C7E3F0" :color "#1F2328" :text-align 'center) (box :flex-shrink 3 :flex-basis '(320) :content "shrink 3\nbasis 320" :height 2 :bgcolor "#96C7DD" :color "#1F2328" :text-align 'center) (box :flex-shrink 5 :flex-basis '(320) :content "shrink 5\nbasis 320" :height 2 :bgcolor "#5FA4C2" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "Basis versus width: explicit basis overrides width; auto basis uses width/content." - :padding '(0 (12)) :border "#2F5F7C" :border-top-p nil + :padding '(0 (12)) :border "#2F5F7C" :border-top 'none :bgcolor "#FFFDF8" :color "#3D3A35") (box :layout 'flex :padding '(0 (12)) :border "#2F5F7C" - :border-top-p nil + :border-top 'none :bgcolor "#F8FCFE" :column-gap '(10) (box :flex-basis '(120) :content "basis 120\nwidth 240" :width '(240) :height 2 :bgcolor "#C7E3F0" :color "#1F2328" :text-align 'center) (box :flex-basis 'auto :content "basis auto\nwidth 240" :width '(240) :height 2 :bgcolor "#96C7DD" :color "#1F2328" :text-align 'center) (box :flex '(1 1 (160)) :content "flex tuple\nbasis 160" :width '(240) :height 2 :bgcolor "#5FA4C2" :color "#1F2328" :text-align 'center))) (box :layout 'column (box :content "Intrinsic basis keywords: content, min-content, and max-content derive size from text." - :padding '(0 (12)) :border "#2F5F7C" :border-top-p nil + :padding '(0 (12)) :border "#2F5F7C" :border-top 'none :bgcolor "#FFFDF8" :color "#3D3A35") (box :layout 'flex :padding '(0 (12)) :border "#2F5F7C" - :border-top-p nil + :border-top 'none :bgcolor "#F8FCFE" :flex-wrap 'wrap :row-gap 1 :column-gap '(10) (box :flex-shrink 0 :flex-basis 'content :content "content\nnatural text" :width '(180) :height 2 :bgcolor "#C7E3F0" :color "#1F2328" :text-align 'center) @@ -423,7 +423,7 @@ :padding '(0 (18)) :border "#52612F" :bgcolor "#F8FAEF" :color "#293116") (box :layout 'flex :height 7 :padding '(0 (12)) :border "#52612F" - :border-top-p nil + :border-top 'none :bgcolor "#FCFDF6" :flex-wrap 'wrap :row-gap 1 :column-gap '(8) :align-items 'center (box :flex 1 :content ":flex 1\n= 1 1 0" :bgcolor "#DDE8B2" :color "#1F2328" :text-align 'center) (box :flex 'none :content ":flex none\n= 0 0 auto" :width '(140) :bgcolor "#C5D681" :color "#1F2328" :text-align 'center) @@ -438,7 +438,7 @@ :padding '(0 (18)) :border "#7B4D38" :bgcolor "#FFF6F0" :color "#392319") (box :layout 'flex :height 7 :padding '(0 (12)) :border "#7B4D38" - :border-top-p nil + :border-top 'none :bgcolor "#FFFAF7" :align-items 'flex-start :flex-wrap 'wrap :row-gap 1 :column-gap '(10) (box :align-self 'auto :content "auto\ninherits start" :width '(118) :height 2 :bgcolor "#EFC7B6" :color "#1F2328" :text-align 'center) @@ -448,7 +448,7 @@ (box :align-self 'stretch :content "stretch\nauto cross" :width '(118) :bgcolor "#7B4D38" :color "#FFFFFF" :text-align 'center) (box :align-self 'normal :content "normal\nstretch-like" :width '(118) :bgcolor "#5D3929" :color "#FFFFFF" :text-align 'center)) (box :layout 'flex :height 6 :padding '(0 (12)) :border "#7B4D38" - :border-top-p nil + :border-top 'none :bgcolor "#FFFAF7" :align-items 'flex-start :flex-wrap 'wrap :row-gap 1 :column-gap '(10) (box :align-self 'start :content "start" :width '(118) :height 2 :bgcolor "#EFC7B6" :color "#1F2328" :text-align 'center) diff --git a/examples/grid-reference.ebox b/examples/grid-reference.ebox index bc58383..a106992 100644 --- a/examples/grid-reference.ebox +++ b/examples/grid-reference.ebox @@ -13,7 +13,7 @@ :bgcolor "#F1D4C9" :color "#4C271D" :wrap-mode 'word) (box :layout 'grid :grid-template-columns '((206) (206) (206)) :grid-auto-rows 'auto :gap '(1 (10)) :justify-content 'space-between - :padding '(0 (12)) :border "#B85C3C" :border-top-p nil + :padding '(0 (12)) :border "#B85C3C" :border-top 'none :bgcolor "#FFF9F4" (box :layout 'column :width '(206) (box :content "fixed\n:((120) (74))" :padding '(0 (6)) @@ -74,7 +74,7 @@ :bgcolor "#DCEBDD" :color "#26402F" :wrap-mode 'word) (box :layout 'grid :grid-template-columns '((206) (206) (206)) :grid-auto-rows 'auto :gap '(1 (10)) :justify-content 'space-between - :padding '(0 (12)) :border "#537A63" :border-top-p nil + :padding '(0 (12)) :border "#537A63" :border-top 'none :bgcolor "#F7FBF7" (box :layout 'column :width '(206) (box :content "fixed rows\n(1 2)" :padding '(0 (6)) @@ -135,7 +135,7 @@ :bgcolor "#D9EAF2" :color "#203A4A" :wrap-mode 'word) (box :layout 'grid :grid-template-columns '((206) (206) (206)) :grid-auto-rows 'auto :gap '(1 (10)) :justify-content 'space-between - :padding '(0 (12)) :border "#416E8A" :border-top-p nil + :padding '(0 (12)) :border "#416E8A" :border-top 'none :bgcolor "#F6FBFD" (box :layout 'column :width '(206) (box :content "auto-columns ยท fixed\n:grid-auto-columns ((64))" :padding '(0 (6)) @@ -223,7 +223,7 @@ :bgcolor "#D9EAF2" :color "#203A4A" :wrap-mode 'word) (box :layout 'grid :grid-template-columns '((206) (206)) :grid-auto-rows 'auto :gap '(1 (10)) :justify-content 'space-between - :padding '(0 (12)) :border "#416E8A" :border-top-p nil + :padding '(0 (12)) :border "#416E8A" :border-top 'none :bgcolor "#F6FBFD" (box :layout 'column :width '(206) (box :content "row\nfills each row before creating the next" :padding '(0 (6)) @@ -254,7 +254,7 @@ :bgcolor "#CDEBE5" :color "#1D3935" :wrap-mode 'word) (box :layout 'grid :grid-template-columns '((206) (206) (206)) :grid-auto-rows 'auto :gap '(1 (10)) :justify-content 'space-between - :padding '(0 (12)) :border "#3D7068" :border-top-p nil + :padding '(0 (12)) :border "#3D7068" :border-top 'none :bgcolor "#F7FCFB" (box :layout 'column :width '(206) (box :content "gap scalar\n:gap 1" :padding '(0 (6)) @@ -319,7 +319,7 @@ :bgcolor "#E7E2F1" :color "#332B4B" :wrap-mode 'word) (box :layout 'grid :grid-template-columns '((206) (206) (206)) :grid-auto-rows 'auto :gap '(1 (10)) :justify-content 'space-between - :padding '(0 (12)) :border "#6A5C8B" :border-top-p nil + :padding '(0 (12)) :border "#6A5C8B" :border-top 'none :bgcolor "#FBF9FF" (box :layout 'column :width '(206) (box :content "automatic placement\nno item coordinates" :padding '(0 (6)) @@ -419,7 +419,7 @@ :bgcolor "#F3E4C7" :color "#513718" :wrap-mode 'word) (box :layout 'grid :grid-template-columns '((206) (206) (206)) :grid-auto-rows 'auto :gap '(1 (10)) :justify-content 'space-between - :padding '(0 (12)) :border "#B07836" :border-top-p nil + :padding '(0 (12)) :border "#B07836" :border-top 'none :bgcolor "#FFF9ED" (box :layout 'column :width '(206) (box :content "start" :padding '(0 (6)) @@ -464,7 +464,7 @@ :bgcolor "#F3E4C7" :color "#513718" :wrap-mode 'word) (box :layout 'grid :grid-template-columns '((206) (206) (206)) :grid-auto-rows 'auto :gap '(1 (10)) :justify-content 'space-between - :padding '(0 (12)) :border "#B07836" :border-top-p nil + :padding '(0 (12)) :border "#B07836" :border-top 'none :bgcolor "#FFF9ED" (box :layout 'column :width '(206) (box :content "start" :padding '(0 (6)) @@ -509,7 +509,7 @@ :bgcolor "#CFE8EA" :color "#1E4148" :wrap-mode 'word) (box :layout 'grid :grid-template-columns '((206) (206) (206)) :grid-auto-rows 'auto :gap '(1 (10)) :justify-content 'space-between - :padding '(0 (12)) :border "#2F7180" :border-top-p nil + :padding '(0 (12)) :border "#2F7180" :border-top 'none :bgcolor "#F6FCFC" (box :layout 'column :width '(206) (box :content "start" :padding '(0 (6)) @@ -591,7 +591,7 @@ :bgcolor "#CFE8EA" :color "#1E4148" :wrap-mode 'word) (box :layout 'grid :grid-template-columns '((206) (206) (206)) :grid-auto-rows 'auto :gap '(1 (10)) :justify-content 'space-between - :padding '(0 (12)) :border "#2F7180" :border-top-p nil + :padding '(0 (12)) :border "#2F7180" :border-top 'none :bgcolor "#F6FCFC" (box :layout 'column :width '(206) (box :content "start" :padding '(0 (6)) diff --git a/examples/public-layout-gallery.ebox b/examples/public-layout-gallery.ebox index 66888fb..9158e86 100644 --- a/examples/public-layout-gallery.ebox +++ b/examples/public-layout-gallery.ebox @@ -12,7 +12,7 @@ :width '(720) :padding '(0 (16)) :border "#C97252" - :border-bottom-p nil + :border-bottom 'none :color "#252A2E" :bgcolor "#F1D4C9" :wrap-mode 'word) @@ -37,7 +37,7 @@ :width '(720) :padding '(0 (16)) :border "#6D8A73" - :border-bottom-p nil + :border-bottom 'none :color "#252A2E" :bgcolor "#DCEBDD" :wrap-mode 'word) @@ -65,7 +65,7 @@ :width '(720) :padding '(0 (16)) :border "#4E7890" - :border-bottom-p nil + :border-bottom 'none :color "#252A2E" :bgcolor "#D9EAF2" :wrap-mode 'word) diff --git a/examples/responsive-reference.ebox b/examples/responsive-reference.ebox index 317c390..6cd0c85 100644 --- a/examples/responsive-reference.ebox +++ b/examples/responsive-reference.ebox @@ -11,7 +11,7 @@ (box :height 1) (box :content "Adaptive toolbar\nButtons below keep stable sizes. The row packs as many as fit and then wraps." - :padding '(0 (16)) :border "#EA580C" :border-bottom-p nil + :padding '(0 (16)) :border "#EA580C" :border-bottom 'none :bgcolor "#FFF7ED" :color "#431407" :wrap-mode 'word) (box :layout 'flex :flex-flow '(row wrap) :column-gap '(8) :row-gap 1 :padding '(1 (8)) :border "#FDBA74" :bgcolor "#FFFBF5" @@ -33,7 +33,7 @@ (box :height 1) (box :content "Responsive cards\nEach card starts from a flex-basis, grows when space is available, and wraps to new rows when the preview becomes narrow." - :padding '(0 (16)) :border "#2563EB" :border-bottom-p nil + :padding '(0 (16)) :border "#2563EB" :border-bottom 'none :bgcolor "#EFF6FF" :color "#1E3A8A" :wrap-mode 'word) (box :layout 'flex :flex-flow '(row wrap) :column-gap '(12) :row-gap 1 :padding '(1 (8)) :border "#93C5FD" :bgcolor "#F8FBFF"