diff options
| -rw-r--r-- | templates/devtest/flex-list.tmpl | 23 | ||||
| -rw-r--r-- | web_src/css/shared/flex-list.css | 15 |
2 files changed, 30 insertions, 8 deletions
diff --git a/templates/devtest/flex-list.tmpl b/templates/devtest/flex-list.tmpl index f9087a5714..cbc2632139 100644 --- a/templates/devtest/flex-list.tmpl +++ b/templates/devtest/flex-list.tmpl @@ -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" .}} 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; } |