improved dimming
This commit is contained in:
		
							parent
							
								
									f402ab01e6
								
							
						
					
					
						commit
						62b272c3b9
					
				
					 3 changed files with 7 additions and 5 deletions
				
			
		| 
						 | 
				
			
			@ -56,11 +56,11 @@ const NavComponent: Component<NavProps> = props => {
 | 
			
		|||
    if (open()) {
 | 
			
		||||
      window.addEventListener("click", handleClickOutside);
 | 
			
		||||
      document.body.style.overflow = "hidden";
 | 
			
		||||
      document.body.classList.add("dim-content");
 | 
			
		||||
      document.body.classList.add("dim-content-nav");
 | 
			
		||||
    } else {
 | 
			
		||||
      window.removeEventListener("click", handleClickOutside);
 | 
			
		||||
      document.body.style.overflow = "auto";
 | 
			
		||||
      document.body.classList.remove("dim-content");
 | 
			
		||||
      document.body.classList.remove("dim-content-nav");
 | 
			
		||||
    }
 | 
			
		||||
  });
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -51,11 +51,11 @@ const TableOfContents: Component<TOCProps> = props => {
 | 
			
		|||
    if (open()) {
 | 
			
		||||
      window.addEventListener("click", handleClickOutside);
 | 
			
		||||
      document.body.style.overflow = "hidden";
 | 
			
		||||
      document.body.classList.add("dim-content");
 | 
			
		||||
      document.body.classList.add("dim-content-toc");
 | 
			
		||||
    } else {
 | 
			
		||||
      window.removeEventListener("click", handleClickOutside);
 | 
			
		||||
      document.body.style.overflow = "auto";
 | 
			
		||||
      document.body.classList.remove("dim-content");
 | 
			
		||||
      document.body.classList.remove("dim-content-toc");
 | 
			
		||||
    }
 | 
			
		||||
  });
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -20,8 +20,10 @@
 | 
			
		|||
  flex-direction: row;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.dim-content .docslayout-root {
 | 
			
		||||
.dim-content-toc .docslayout-root,
 | 
			
		||||
.dim-content-nav .docslayout-root {
 | 
			
		||||
  filter: brightness(50%);
 | 
			
		||||
  pointer-events: none;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.docs-content {
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue