femsci/forgejo
femsci/forgejo
1
0
Fork 0
forked from NYANDEV/forgejo
Code Pull requests Activity

Improve dropdown button alignment and fix hover bug (#27632) (#27637)

Browse source 
Backport #27632 by @wxiaoguang

1. fix #27631 , and add samples to devtest page
2. fix incorrect color for "ui dropdown button" when hover

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
Giteabot 2023-10-16 16:15:15 +08:00 committed by GitHub
parent 8cf7548a18
commit 21c3513d49
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 12 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
templates/devtest/gitea-ui.tmpl
View file

@ -250,6 +250,15 @@
{{svg "octicon-triangle-down" 14 "dropdown icon"}} {{svg "octicon-triangle-down" 14 "dropdown icon"}}
</div> </div>
</div> </div>
<div>
<hr>
<div class="ui tiny button">Button align with ...</div>
<div class="ui dropdown tiny button">
<span class="text">... Dropdown Button</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
</div>
</div>
</div> </div>
<div> <div>

2
web_src/css/base.css
View file

@ -2194,7 +2194,7 @@ table th[data-sortt-desc] .svg {
height: 15px; height: 15px;
} }
.ui.dropdown { .ui.dropdown:not(.button) {
line-height: var(--line-height-default); /* the dropdown doesn't have default line-height, use this to make the dropdown icon align with plain dropdown */ line-height: var(--line-height-default); /* the dropdown doesn't have default line-height, use this to make the dropdown icon align with plain dropdown */
} }

2
web_src/css/modules/button.css
View file

@ -128,11 +128,13 @@ It needs some tricks to tweak the left/right borders with active state */
.ui.primary.button:focus, .ui.primary.button:focus,
.ui.primary.buttons .button:focus { .ui.primary.buttons .button:focus {
background: var(--color-primary); background: var(--color-primary);
color: var(--color-primary-contrast);
} }
.ui.primary.button:hover, .ui.primary.button:hover,
.ui.primary.buttons .button:hover { .ui.primary.buttons .button:hover {
background: var(--color-primary-hover); background: var(--color-primary-hover);
color: var(--color-primary-contrast);
} }
.ui.primary.button:active, .ui.primary.button:active,