mirror of
				https://codeberg.org/forgejo/forgejo.git
				synced 2025-10-30 22:11:07 +00:00 
			
		
		
		
	Followup to PRs where the old switches were converted to this one. The main change here is to the switch with counter. It was missing a gap. Additionally, it removes tailwind helpers the other switches retained from before switch refactors, because they are now using gap. Preview: https://codeberg.org/attachments/6191f55e-0b61-49fa-ba8f-cd9c93ca7bd4 https://codeberg.org/attachments/a03fb681-45b7-40f5-929e-55154abeb20d No visual change to the ones with icons. Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/7581 Reviewed-by: Gusted <gusted@noreply.codeberg.org>
		
			
				
	
	
		
			35 lines
		
	
	
	
		
			670 B
		
	
	
	
		
			CSS
		
	
	
	
	
	
			
		
		
	
	
			35 lines
		
	
	
	
		
			670 B
		
	
	
	
		
			CSS
		
	
	
	
	
	
| .switch {
 | |
|   display: grid;
 | |
|   grid-auto-flow: column;
 | |
|   height: fit-content;
 | |
|   align-items: center;
 | |
|   align-self: center;
 | |
|   background: var(--color-menu);
 | |
|   border: 1px solid var(--color-input-border);
 | |
|   border-radius: var(--border-radius);
 | |
| }
 | |
| 
 | |
| .switch .item {
 | |
|   display: flex;
 | |
|   gap: 0.5rem;
 | |
|   align-items: center;
 | |
|   padding: .5em 1.125em;
 | |
|   color: var(--color-text);
 | |
|   border-radius: var(--border-radius);
 | |
|   text-wrap: nowrap;
 | |
| }
 | |
| 
 | |
| .switch .active.item {
 | |
|   background: var(--color-active);
 | |
|   outline: 1px solid var(--color-input-border);
 | |
| }
 | |
| 
 | |
| @media (pointer: coarse) {
 | |
|   .switch .item {
 | |
|     padding: .75em 1.125em;
 | |
|   }
 | |
| }
 | |
| 
 | |
| .switch button.item {
 | |
|   background: transparent;
 | |
| }
 |