Use flex to align SVG and text (#25163)
The code can be as simple as:
```html
<div class="flex-text-block">{{svg "octicon-alert"}} {{svg "octicon-x"}} text (block)</div>
<div><div class="flex-text-inline">{{svg "octicon-alert"}} {{svg "octicon-x"}} text</div> (inline)</div>
<div><button class="ui red button">{{svg "octicon-alert" 24}} {{svg "octicon-x" 24}} text</button></div>
```
---------
Co-authored-by: Giteabot <teabot@gitea.io>
This commit is contained in:
wxiaoguang
GitHub
parent
4c290e9209
commit
46c17c8029
17 changed files with 247 additions and 131 deletions
|
|
@ -1031,10 +1031,6 @@ img.ui.avatar,
|
|||
background: var(--color-active);
|
||||
}
|
||||
|
||||
.ui.form .field > .selection.dropdown > .dropdown.icon {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.ui.loading.segment::before,
|
||||
.ui.loading.form::before {
|
||||
background: none;
|
||||
|
|
@ -2124,35 +2120,6 @@ table th[data-sortt-desc] .svg {
|
|||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
.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 */
|
||||
height: auto; /* reset the ".ui.dropdown > .dropdown.icon {height}", otherwise the icon would be too small */
|
||||
}
|
||||
|
||||
.ui.selection.dropdown > .svg.search.icon,
|
||||
.ui.selection.dropdown > .svg.delete.icon,
|
||||
.ui.selection.dropdown > .svg.dropdown.icon {
|
||||
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;
|
||||
}
|
||||
|
||||
.ui.dropdown .menu .item {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
|
@ -2304,3 +2271,78 @@ table th[data-sortt-desc] .svg {
|
|||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.ui.dropdown {
|
||||
line-height: 1em; /* the dropdown doesn't have default line-height, use this to make the dropdown icon align with plain dropdown */
|
||||
}
|
||||
|
||||
/* dropdown has some kinds of icons:
|
||||
- "> .dropdown.icon": the arrow for opening the dropdown
|
||||
- "> .remove.icon": the "x" icon for clearing the dropdown, only used in selection dropdown
|
||||
- "> .ui.label > .delete.icon": the "x" icon for removing a label item in multiple selection dropdown
|
||||
*/
|
||||
|
||||
/* Gitea uses SVG images instead of Fomantic builtin "<i>" font icons, so we need to reset the icon styles */
|
||||
.ui.ui.dropdown > .icon.icon {
|
||||
position: initial; /* plain dropdown and button dropdown use flex layout for icons */
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.ui.ui.dropdown > .icon.icon:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ui.ui.button.dropdown > .icon.icon,
|
||||
.ui.ui.selection.dropdown > .icon.icon {
|
||||
position: absolute; /* selection dropdown uses absolute layout for icons */
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.ui.ui.dropdown > .dropdown.icon {
|
||||
right: 0.5em;
|
||||
}
|
||||
|
||||
.ui.ui.dropdown > .remove.icon {
|
||||
right: 2em;
|
||||
}
|
||||
|
||||
.ui.ui.button,
|
||||
.ui.ui.dropdown,
|
||||
.flex-items-inline > .item,
|
||||
.flex-text-inline {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: .25rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.ui.ui.button {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ui.dropdown .ui.label .svg {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.ui.ui.labeled.button {
|
||||
gap: 0;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.ui.ui.icon.input .icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.flex-items-block > .item,
|
||||
.flex-text-block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: .25rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,10 +24,6 @@
|
|||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.ui.button.no-text .icon {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.delete-button,
|
||||
.delete-button:hover {
|
||||
color: var(--color-red);
|
||||
|
|
|
|||
|
|
@ -20,15 +20,6 @@
|
|||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.repository .repo-header .repo-buttons .svg {
|
||||
margin: 0 0.42857143em 0 -0.21428571em;
|
||||
}
|
||||
|
||||
.repository .repo-header .button {
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.repository .tabs .navbar {
|
||||
justify-content: initial;
|
||||
}
|
||||
|
|
@ -850,6 +841,11 @@
|
|||
padding-top: 0;
|
||||
}
|
||||
|
||||
.repository.view.issue .comment-list .timeline-item.commits-list .ui.avatar,
|
||||
.repository.view.issue .comment-list .timeline-item.event .ui.avatar {
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
|
||||
.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit {
|
||||
line-height: 34px; /* this must be same as .badge height, to avoid overflow */
|
||||
clear: both; /* reset the "float right shabox", in the future, use flexbox instead */
|
||||
|
|
@ -2537,11 +2533,6 @@
|
|||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
.content-history-menu .octicon-triangle-down {
|
||||
position: relative;
|
||||
top: 1.5px;
|
||||
}
|
||||
|
||||
.comment-body {
|
||||
background: var(--color-box-body);
|
||||
border: none !important;
|
||||
|
|
@ -2874,6 +2865,7 @@ tbody.commit-list {
|
|||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
word-break: keep-all;
|
||||
gap: 0.25em;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
|
|
@ -2897,15 +2889,6 @@ tbody.commit-list {
|
|||
color: var(--color-primary-dark-1);
|
||||
}
|
||||
|
||||
.repo-buttons .ui.labeled.button {
|
||||
cursor: initial;
|
||||
}
|
||||
|
||||
.repo-buttons .ui.labeled.button > .label {
|
||||
border-left: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.repo-buttons .ui.labeled.button.disabled {
|
||||
pointer-events: inherit !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
<input @input="changeReposFilter(reposFilter)" v-model="searchQuery" ref="search" @keydown="reposFilterKeyControl" :placeholder="textSearchRepos">
|
||||
<i class="icon gt-df gt-ac gt-jc"><svg-icon name="octicon-search" :size="16"/></i>
|
||||
<div class="ui dropdown icon button" :title="textFilter">
|
||||
<i class="icon gt-df gt-ac gt-jc gt-m-0"><svg-icon name="octicon-filter" :size="16"/></i>
|
||||
<svg-icon name="octicon-filter" :size="16"/>
|
||||
<div class="menu">
|
||||
<a class="item" @click="toggleArchivedFilter()">
|
||||
<div class="ui checkbox" ref="checkboxArchivedFilter" :title="checkboxArchivedFilterTitle">
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@
|
|||
</template>
|
||||
</span>
|
||||
</button>
|
||||
<div class="ui dropdown icon button no-text" @click.stop="showMergeStyleMenu = !showMergeStyleMenu" v-if="mergeStyleAllowedCount>1">
|
||||
<div class="ui dropdown icon button" @click.stop="showMergeStyleMenu = !showMergeStyleMenu" v-if="mergeStyleAllowedCount>1">
|
||||
<svg-icon name="octicon-triangle-down" :size="14"/>
|
||||
<div class="menu" :class="{'show':showMergeStyleMenu}">
|
||||
<template v-for="msd in mergeForm.mergeStyles">
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
</button>
|
||||
<div class="menu transition" :class="{visible: menuVisible}" v-if="menuVisible" v-cloak>
|
||||
<div class="ui icon search input">
|
||||
<i class="icon gt-df gt-ac gt-jc gt-m-0"><svg-icon name="octicon-filter" :size="16"/></i>
|
||||
<i class="icon"><svg-icon name="octicon-filter" :size="16"/></i>
|
||||
<input name="search" ref="searchField" autocomplete="off" v-model="searchTerm" @keydown="keydown($event)" :placeholder="searchFieldPlaceholder">
|
||||
</div>
|
||||
<template v-if="showBranchesInDropdown">
|
||||
|
|
|
|||
|
|
@ -75,8 +75,8 @@ function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleH
|
|||
function showContentHistoryMenu(issueBaseUrl, $item, commentId) {
|
||||
const $headerLeft = $item.find('.comment-header-left');
|
||||
const menuHtml = `
|
||||
<div class="ui pointing dropdown top left content-history-menu" data-comment-id="${commentId}">
|
||||
• <a class="muted">${i18nTextEdited}${svg('octicon-triangle-down', 14, 'dropdown icon gt-ml-1 gt-mt-1')}</a>
|
||||
<div class="ui dropdown interact-fg content-history-menu" data-comment-id="${commentId}">
|
||||
• ${i18nTextEdited}${svg('octicon-triangle-down', 14, 'dropdown icon')}
|
||||
<div class="menu">
|
||||
</div>
|
||||
</div>`;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue