51f6c3a059
Forbid [deprecated](https://drafts.csswg.org/css-text-3/#word-break-property) `break-word` and fix all occurences. Regarding `overflow-wrap: break-word` vs `overflow-wrap: anywhere`: Example of difference: https://jsfiddle.net/silverwind/1va6972r/ [Here](https://stackoverflow.com/questions/77651244) it says: > The differences between normal, break-word and anywhere are only clear if you are using width: min-content on the element containing the text, and you also set a max-width. A pretty rare scenario. I don't think this difference will make any practical impact as we are not hitting this rare scenario. (cherry picked from commit 5556782ebeb1ca4d17e2fff434b11651887b9899)
108 lines
2.4 KiB
CSS
108 lines
2.4 KiB
CSS
.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;
|
|
}
|