* Responsive design grid * Addressed PR feedback * Bump Quartz version 4.3.1 => 4.4.0 * Moved page-header into center * Updated docs with new layouts * Sync updated version number with package-lock * Table of Content scrollbar auto * Reset node_modules * Updated layout images * Fixed tablet layout * Finilazed layout images
		
			
				
	
	
		
			75 lines
		
	
	
		
			1.1 KiB
		
	
	
	
		
			SCSS
		
	
	
	
	
	
			
		
		
	
	
			75 lines
		
	
	
		
			1.1 KiB
		
	
	
	
		
			SCSS
		
	
	
	
	
	
.toc {
 | 
						|
  overflow-y: auto;
 | 
						|
}
 | 
						|
 | 
						|
button#toc {
 | 
						|
  background-color: transparent;
 | 
						|
  border: none;
 | 
						|
  text-align: left;
 | 
						|
  cursor: pointer;
 | 
						|
  padding: 0;
 | 
						|
  color: var(--dark);
 | 
						|
  display: flex;
 | 
						|
  align-items: center;
 | 
						|
 | 
						|
  & h3 {
 | 
						|
    font-size: 1rem;
 | 
						|
    display: inline-block;
 | 
						|
    margin: 0;
 | 
						|
  }
 | 
						|
 | 
						|
  & .fold {
 | 
						|
    margin-left: 0.5rem;
 | 
						|
    transition: transform 0.3s ease;
 | 
						|
    opacity: 0.8;
 | 
						|
  }
 | 
						|
 | 
						|
  &.collapsed .fold {
 | 
						|
    transform: rotateZ(-90deg);
 | 
						|
  }
 | 
						|
}
 | 
						|
 | 
						|
#toc-content {
 | 
						|
  list-style: none;
 | 
						|
  overflow: hidden;
 | 
						|
  max-height: none;
 | 
						|
  transition:
 | 
						|
    max-height 0.5s ease,
 | 
						|
    visibility 0s linear 0s;
 | 
						|
  position: relative;
 | 
						|
  visibility: visible;
 | 
						|
 | 
						|
  &.collapsed {
 | 
						|
    transition:
 | 
						|
      max-height 0.5s ease,
 | 
						|
      visibility 0s linear 0.5s;
 | 
						|
    visibility: hidden;
 | 
						|
  }
 | 
						|
 | 
						|
  &.collapsed > .overflow::after {
 | 
						|
    opacity: 0;
 | 
						|
  }
 | 
						|
 | 
						|
  & ul {
 | 
						|
    list-style: none;
 | 
						|
    margin: 0.5rem 0;
 | 
						|
    padding: 0;
 | 
						|
    & > li > a {
 | 
						|
      color: var(--dark);
 | 
						|
      opacity: 0.35;
 | 
						|
      transition:
 | 
						|
        0.5s ease opacity,
 | 
						|
        0.3s ease color;
 | 
						|
      &.in-view {
 | 
						|
        opacity: 0.75;
 | 
						|
      }
 | 
						|
    }
 | 
						|
  }
 | 
						|
 | 
						|
  @for $i from 0 through 6 {
 | 
						|
    & .depth-#{$i} {
 | 
						|
      padding-left: calc(1rem * #{$i});
 | 
						|
    }
 | 
						|
  }
 | 
						|
}
 |