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 <teabot@gitea.io>
This commit is contained in:
parent
4f5a2117c3
commit
1a9998ce91
2 changed files with 30 additions and 8 deletions
|
@ -1,8 +1,8 @@
|
|||
{{template "base/head" .}}
|
||||
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/devtest.css?v={{AssetVersion}}">
|
||||
<div class="page-content devtest ui container">
|
||||
<div>
|
||||
<h1>Flex List</h1>
|
||||
<div class="page-content devtest">
|
||||
<div class="ui container">
|
||||
<h1 class="gt-border-secondary-bottom">Flex List (standalone)</h1>
|
||||
<div class="flex-list">
|
||||
<div class="flex-item">
|
||||
<div class="flex-item-leading">
|
||||
|
@ -84,6 +84,23 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divider gt-my-0"></div>
|
||||
|
||||
<h1>Flex List (with "ui segment")</h1>
|
||||
<div class="ui attached segment">
|
||||
<div class="flex-list">
|
||||
<div class="flex-item">item 1</div>
|
||||
<div class="flex-item">item 2</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui attached segment">
|
||||
<h1>Flex List (with "ui segment")</h1>
|
||||
<div class="flex-list">
|
||||
<div class="flex-item">item 1</div>
|
||||
<div class="flex-item">item 2</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{template "base/footer" .}}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Add table
Reference in a new issue