Replace remaining fontawesome dropdown icons with SVG (#24455)

- Replace leftover dropdown triangles with SVG
- Replace remove icon with SVG and add styling for it:

<img width="817" alt="Screenshot 2023-05-01 at 00 40 05"
src="https://user-images.githubusercontent.com/115237/235379271-4674d4f7-b11e-4d6d-90f9-1478325443ca.png">
<img width="816" alt="Screenshot 2023-05-01 at 00 46 56"
src="https://user-images.githubusercontent.com/115237/235379451-b515afb3-9773-4f6f-a259-e7048235bcba.png">
This commit is contained in:
silverwind 2023-05-01 11:35:02 +02:00 committed by GitHub
parent 00d998a513
commit 1bd2772235
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 21 additions and 7 deletions

View file

@ -2051,6 +2051,13 @@ a.ui.label:hover {
color: var(--color-text);
}
.ui.labels a.active.label:hover,
a.ui.active.label:hover {
background: var(--color-active);
border-color: var(--color-active);
color: var(--color-text);
}
.ui.label > .detail .icons {
margin-right: 0.25em;
}
@ -2603,6 +2610,7 @@ table th[data-sortt-desc] .svg {
}
.ui.dropdown .svg.dropdown.icon,
.ui.dropdown .svg.remove.icon,
.svg.dropdown.icon {
margin-top: 0 !important; /* reset the "ui.selection.dropdown > .dropdown.icon {margin-top}", for the Issue Dependencies dropdown */
margin-right: -0.5rem !important; /* fix up SVG dropdown triangles because Fomantic thinks they are icon fonts */
@ -2615,6 +2623,16 @@ table th[data-sortt-desc] .svg {
top: 0 !important; /* reset the ".ui.selection.dropdown > .xxx.icon {top}" if the icon is svg instead of the fomantic icon */
}
.ui.selection.dropdown > .svg.remove.icon {
top: .5px;
right: 32px;
width: auto;
}
.ui.selection.dropdown > .svg.remove.icon:hover {
opacity: 1;
}
.ui.dropdown.no-text > .dropdown.icon {
margin-left: 0 !important;
margin-right: 0 !important;

View file

@ -46,10 +46,6 @@
white-space: nowrap;
}
#git-graph-container #flow-select-refs-dropdown .dropdown.icon {
display: none;
}
#git-graph-container #flow-select-refs-dropdown .default.text {
padding-top: 4px;
padding-bottom: 4px;