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>tags/v1.21.0-rc2
@@ -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> |
@@ -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 */ | |||
} | |||
@@ -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, |