diff options
| author | wxiaoguang <wxiaoguang@gmail.com> | 2023-08-30 07:13:30 +0800 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-08-29 23:13:30 +0000 |
| commit | 1a9998ce916c69a50e9141a86ed8105dabea80ef (patch) | |
| tree | ae0589dcd9593272b04e873af77c03362d84fd6a /web_src | |
| parent | 4f5a2117c37f1bf89d1686f407dff600a8783a97 (diff) | |
| download | gitea-1a9998ce916c69a50e9141a86ed8105dabea80ef.tar.gz gitea-1a9998ce916c69a50e9141a86ed8105dabea80ef.zip | |
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.
Co-authored-by: Giteabot <teabot@gitea.io>
Diffstat (limited to 'web_src')
| -rw-r--r-- | web_src/css/shared/flex-list.css | 15 |
1 files changed, 10 insertions, 5 deletions
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; } |