mirror of
				https://github.com/go-gitea/gitea
				synced 2025-11-04 05:18:25 +00: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:
		@@ -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,
 | 
				
			||||||
 
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user