mirror of
https://github.com/go-gitea/gitea
synced 2024-12-24 17:44:27 +00:00
Backport #26870 by @rafh Currently, checkboxes are positioned as absolute. This positioning causes the input to overlay an element that has been floated within the editor. Floated elements are useful if you want your text to wrap around this element. This PR fixes the overlaying of checkboxes by removing the absolute positioning, updating the `ul` padding, and displaying`.task-list-item` `flex` to ensure inputs and the associated label are on the same line. Screenshots: Before: <img width="762" alt="Screenshot 2023-09-01 at 3 40 59 PM" src="https://github.com/go-gitea/gitea/assets/6152817/570247c7-7f5c-4697-bfc9-ad4655e37991"> After: <img width="762" alt="Screenshot 2023-09-01 at 3 42 20 PM" src="https://github.com/go-gitea/gitea/assets/6152817/db53df45-1294-4eee-84c0-b21ac4fdf805"> Co-authored-by: Rafael Heard <rafael.heard@gmail.com> Co-authored-by: rafh <rafaelheard@gmail.com>
This commit is contained in:
parent
006c15fb5f
commit
79c17d8b6a
@ -155,23 +155,29 @@
|
||||
|
||||
.markup .task-list-item {
|
||||
list-style-type: none;
|
||||
position: relative;
|
||||
line-height: 1.5rem;
|
||||
min-height: 1.5rem; /* // to render a checkbox list without content `- [ ]`, we need this min-height to make sure the <li> can be visible */
|
||||
}
|
||||
|
||||
.markup .task-list-item p + ul {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.markup .task-list-item input[type="checkbox"] {
|
||||
position: absolute;
|
||||
top: 0.25em;
|
||||
left: -1.6em;
|
||||
margin: 0 .3em .25em -1.4em;
|
||||
vertical-align: middle;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.markup .task-list-item p {
|
||||
line-height: 1.5rem;
|
||||
.markup .task-list-item input[type="checkbox"] + p {
|
||||
margin-left: -0.2em;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.markup .task-list-item > p {
|
||||
margin-inline: 16px;
|
||||
}
|
||||
|
||||
.markup .task-list-item + .task-list-item {
|
||||
margin-top: 3px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.markup input[type="checkbox"] {
|
||||
@ -327,7 +333,7 @@
|
||||
|
||||
.markup img[align="left"],
|
||||
.markup video[align="left"] {
|
||||
padding-right: 20px;
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.markup .emoji {
|
||||
|
Loading…
Reference in New Issue
Block a user