From 21c3513d494724d7262c746836dd3258e225b44f Mon Sep 17 00:00:00 2001 From: Giteabot Date: Mon, 16 Oct 2023 16:15:15 +0800 Subject: [PATCH] Improve dropdown button alignment and fix hover bug (#27632) (#27637) 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 --- templates/devtest/gitea-ui.tmpl | 9 +++++++++ web_src/css/base.css | 2 +- web_src/css/modules/button.css | 2 ++ 3 files changed, 12 insertions(+), 1 deletion(-) 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"}} + +
+
+
Button align with ...
+ +
diff --git a/web_src/css/base.css b/web_src/css/base.css index 1a4e9d16a1..87912179a4 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -2194,7 +2194,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,