Categories
blog css scss

cheat.css

 font-family: fontFamily("headingSans"); 
 
 font-weight: fontWeight("bold");
 
 
 font-size: fontSize("largest");
 
 container("border");
 
  
 filter: blur(20px);
 -webkit-transition: all 2s ease;
 transition: all 2s ease;
 
 
 backdrop-filter: blur(10px);
 
 background: rgba( $header-bg,0.8); 
 
 
 @include breakpoint("medium") 
 
 
 $screen-small: 801px;
 $screen-medium: 1261px;
 $screen-large: 1600px;
 
 
 
 stencilColor('button--primary-backgroundColor');
 stencilColor('button--primary-color');
 

 
 display: flex;
 justify-content: center;
 align-items: center;
 
 
 overflow: auto;
 white-space: nowrap;
 
 
 &::after {
     content: '';
     position: absolute;
     width: 100%;
     transform: scaleX(0);
     height: 1px;
     bottom: 0;
     left: 0;
     background-color: stencilColor("navUser-color-hover");
     transform-origin: bottom right;
     transition: transform 0.25s ease-out;
 }
 
 &:hover::after {
     transform: scaleX(1);
     transform-origin: bottom left;
 }
 


    overflow: auto;                 
    scrollbar-width: none;        
    -ms-overflow-style: none;     
 
    &::-webkit-scrollbar {
        display: none;                  
    }
    
    
    
    
    
    #product-listing-container,#tab-related {
	 display: flex;
	 flex-wrap: wrap;
	 padding: 0;
	 margin: 0;
	 list-style: none;
	 align-items: stretch;
	 justify-content: flex-start;
	 width: 100%;
}
 ul.productGrid, ul.product-list {
	 width: 100%;
	 display: flex;
	 flex-wrap: wrap;
	 li {
		 flex: 0 0 50%;
		 display: flex;
		 padding: 0px !important;
		 @include breakpoint("medium") {
			 flex: 0 0 25%; 
		}
		 .card {
			 display: flex;
			 flex-direction: column;
			 flex: 1;
			 box-sizing: border-box;
			 height: 100%;
			 margin-bottom: 1rem;
			 .call-button {
				 margin-top: auto;
				 .button {
					 background: stencilColor('button--primary-backgroundColor');
					 color: stencilColor('button--primary-color');
				}
			}
		}
	}
}