mirror of
https://github.com/go-gitea/gitea
synced 2024-09-10 11:21:56 +02:00
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
This commit is contained in:
parent
d1f85525d0
commit
6c501b1498
3 changed files with 12 additions and 1 deletions
|
@ -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>
|
||||||
|
|
|
@ -1952,7 +1952,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 */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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,
|
||||||
|
|
Loading…
Reference in a new issue