47 lines
		
	
	
		
			1.0 KiB
		
	
	
	
		
			SCSS
		
	
	
	
	
	
			
		
		
	
	
			47 lines
		
	
	
		
			1.0 KiB
		
	
	
	
		
			SCSS
		
	
	
	
	
	
| @use "sass:map";
 | |
| @use "../settings" as *;
 | |
| 
 | |
| @if map.get($modules, "components/loading") {
 | |
|   /**
 | |
|    * Loading ([aria-busy=true])
 | |
|    */
 | |
| 
 | |
|   // Everything except form elements
 | |
|   #{$parent-selector} [aria-busy="true"]:not(input, select, textarea, html) {
 | |
|     white-space: nowrap;
 | |
| 
 | |
|     &::before {
 | |
|       display: inline-block;
 | |
|       width: 1em;
 | |
|       height: 1em;
 | |
|       background-image: var(#{$css-var-prefix}icon-loading);
 | |
|       background-size: 1em auto;
 | |
|       background-repeat: no-repeat;
 | |
|       content: "";
 | |
|       vertical-align: -0.125em; // Visual alignment
 | |
|     }
 | |
| 
 | |
|     &:not(:empty) {
 | |
|       &::before {
 | |
|         margin-inline-end: calc(var(#{$css-var-prefix}spacing) * 0.5);
 | |
|       }
 | |
|     }
 | |
| 
 | |
|     &:empty {
 | |
|       text-align: center;
 | |
|     }
 | |
|   }
 | |
| 
 | |
|   // Buttons and links
 | |
|   #{$parent-selector} button,
 | |
|   #{$parent-selector} [type="submit"],
 | |
|   #{$parent-selector} [type="button"],
 | |
|   #{$parent-selector} [type="reset"],
 | |
|   #{$parent-selector} [role="button"],
 | |
|   #{$parent-selector} a {
 | |
|     &[aria-busy="true"] {
 | |
|       pointer-events: none;
 | |
|     }
 | |
|   }
 | |
| }
 | 
