diff options
| author | wxiaoguang <wxiaoguang@gmail.com> | 2023-10-16 15:26:08 +0800 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-10-16 07:26:08 +0000 |
| commit | 6c501b149809a7015e58d9627e84bfd593702f95 (patch) | |
| tree | c10d800c6463fc8dad7eb17592283a33191bf661 | |
| parent | d1f85525d092dae5091e21a9fae142afdcc7d15e (diff) | |
| download | gitea-6c501b149809a7015e58d9627e84bfd593702f95.tar.gz gitea-6c501b149809a7015e58d9627e84bfd593702f95.zip | |
Improve dropdown button alignment and fix hover bug (#27632)
1. fix #27631 , and add samples to devtest page
2. fix incorrect color for "ui dropdown button" when hover
| -rw-r--r-- | templates/devtest/gitea-ui.tmpl | 9 | ||||
| -rw-r--r-- | web_src/css/base.css | 2 | ||||
| -rw-r--r-- | web_src/css/modules/button.css | 2 |
3 files changed, 12 insertions, 1 deletions
diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl index fa74ed7ce6..73293ddf48 100644 --- a/templates/devtest/gitea-ui.tmpl +++ b/templates/devtest/gitea-ui.tmpl @@ -250,6 +250,15 @@ {{svg "octicon-triangle-down" 14 "dropdown icon"}} </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> diff --git a/web_src/css/base.css b/web_src/css/base.css index 9661cdecad..0cfd311158 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -1952,7 +1952,7 @@ table th[data-sortt-desc] .svg { 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 */ } diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css index 0d30249c9c..36cb499aeb 100644 --- a/web_src/css/modules/button.css +++ b/web_src/css/modules/button.css @@ -128,11 +128,13 @@ It needs some tricks to tweak the left/right borders with active state */ .ui.primary.button:focus, .ui.primary.buttons .button:focus { background: var(--color-primary); + color: var(--color-primary-contrast); } .ui.primary.button:hover, .ui.primary.buttons .button:hover { background: var(--color-primary-hover); + color: var(--color-primary-contrast); } .ui.primary.button:active, |