From 1a9998ce916c69a50e9141a86ed8105dabea80ef Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Wed, 30 Aug 2023 07:13:30 +0800 Subject: Improve flex list item padding (#26779) Replace #26761 It's better to keep children elements simple, and let parent containers layout the necessary padding/margin. The old `not(:last-child)` and `.flex-item + .flex-item` are not easy to maintain (for example, what if the developer would like to use a "tiny height" item?) The old approach also makes some UI look strange because the first item doesn't have proper padding-top. In this PR, we just simply use `.flex-item { padding: ... }`: * Developers could manually set the item height they want easily * It's easier to make it work with various containers -- with padding (`ui segment`) and without padding (`div`) And added more samples/examples. ![image](https://github.com/go-gitea/gitea/assets/2114189/719ea712-0241-4426-b67f-5723993c4ed7) Co-authored-by: Giteabot --- web_src/css/shared/flex-list.css | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) (limited to 'web_src') diff --git a/web_src/css/shared/flex-list.css b/web_src/css/shared/flex-list.css index c73f78ebfe..1489983cfd 100644 --- a/web_src/css/shared/flex-list.css +++ b/web_src/css/shared/flex-list.css @@ -6,10 +6,7 @@ display: flex; gap: 8px; align-items: flex-start; -} - -.flex-item:not(:last-child) { - padding-bottom: 8px; + padding: 1em 0; } .flex-item-baseline { @@ -92,5 +89,13 @@ .flex-list > .flex-item + .flex-item { border-top: 1px solid var(--color-secondary); - padding-top: 8px; +} + +/* Fomantic UI segment has default "padding: 1em", so here it removes the padding-top and padding-bottom accordingly */ +.ui.segment > .flex-list:first-child > .flex-item:first-child { + padding-top: 0; +} + +.ui.segment > .flex-list:last-child > .flex-item:last-child { + padding-bottom: 0; } -- cgit v1.2.3