diff options
Diffstat (limited to 'web_src/css/shared/flex-list.css')
-rw-r--r-- | web_src/css/shared/flex-list.css | 108 |
1 files changed, 108 insertions, 0 deletions
diff --git a/web_src/css/shared/flex-list.css b/web_src/css/shared/flex-list.css new file mode 100644 index 0000000..0f54779 --- /dev/null +++ b/web_src/css/shared/flex-list.css @@ -0,0 +1,108 @@ +.flex-list { + list-style: none; +} + +.flex-item { + display: flex; + gap: 8px; + align-items: flex-start; + padding: 10px 0; +} + +.flex-item .flex-item-leading { + display: flex; + align-items: flex-start; +} + +.flex-item .flex-item-main { + display: flex; + flex-direction: column; + flex-grow: 1; + flex-basis: 60%; /* avoid wrapping the "flex-item-trailing" too aggressively */ + min-width: 0; /* make the "text truncate" work, otherwise the flex axis is not limited and the text just overflows */ +} + +.flex-item-header { + display: flex; + gap: .25rem; + justify-content: space-between; + flex-wrap: wrap; +} + +.flex-item a:not(.label, .button):hover { + color: var(--color-primary) !important; +} + +.flex-item .flex-item-icon { + align-self: baseline; /* mainly used by the issue list, to align the leading icon with the title */ +} + +.flex-item .flex-item-icon + .flex-item-main { + align-self: baseline; +} + +.flex-item .flex-item-trailing { + display: flex; + gap: 0.5rem; + align-items: center; + flex-grow: 0; + flex-wrap: wrap; + justify-content: end; +} + +.flex-item .flex-item-title { + display: inline-flex; + flex-wrap: wrap; + align-items: center; + gap: .25rem; + max-width: 100%; + color: var(--color-text); + font-size: 16px; + font-weight: var(--font-weight-semibold); + overflow-wrap: anywhere; + min-width: 0; +} + +.flex-item .flex-item-title a { + color: var(--color-text); + overflow-wrap: anywhere; +} + +.flex-item .flex-item-body { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: .25rem; + color: var(--color-text-light-2); + overflow-wrap: anywhere; +} + +.flex-item .flex-item-body a { + color: inherit; + overflow-wrap: anywhere; +} + +.flex-list > .flex-item + .flex-item { + border-top: 1px solid var(--color-secondary); +} + +/* Fomantic UI segment has default "padding: 1em", so here it removes the padding-top and padding-bottom accordingly (there might also be some `tw-hidden` siblings). +Developers could also use "flex-space-fitted" class to remove the first item's padding-top and the last item's padding-bottom */ +.flex-list.flex-space-fitted > .flex-item:first-child, +.ui.segment > .flex-list > .flex-item:first-child { + padding-top: 0; +} + +.flex-list.flex-space-fitted > .flex-item:last-child, +.ui.segment > .flex-list > .flex-item:last-child { + padding-bottom: 0; +} + +/* If there is a divider besides the flex-list, some padding/margin are not needs */ +.divider + .flex-list > .flex-item:first-child { + padding-top: 0; +} + +.flex-list + .divider { + margin-top: 0; +} |