@mixin clearfix { 
 | 
  &:after { 
 | 
    content: ""; 
 | 
    display: table; 
 | 
    clear: both; 
 | 
  } 
 | 
} 
 | 
  
 | 
@mixin scrollBar { 
 | 
  &::-webkit-scrollbar-track-piece { 
 | 
    background: #d3dce6; 
 | 
  } 
 | 
  
 | 
  &::-webkit-scrollbar { 
 | 
    width: 6px; 
 | 
  } 
 | 
  
 | 
  &::-webkit-scrollbar-thumb { 
 | 
    background: #99a9bf; 
 | 
    border-radius: 20px; 
 | 
  } 
 | 
} 
 | 
  
 | 
@mixin relative { 
 | 
  position: relative; 
 | 
  width: 100%; 
 | 
  height: 100%; 
 | 
} 
 | 
  
 | 
@mixin pct($pct) { 
 | 
  width: #{$pct}; 
 | 
  position: relative; 
 | 
  margin: 0 auto; 
 | 
} 
 | 
  
 | 
@mixin triangle($width, $height, $color, $direction) { 
 | 
  $width: $width/2; 
 | 
  $color-border-style: $height solid $color; 
 | 
  $transparent-border-style: $width solid transparent; 
 | 
  height: 0; 
 | 
  width: 0; 
 | 
  
 | 
  @if $direction==up { 
 | 
    border-bottom: $color-border-style; 
 | 
    border-left: $transparent-border-style; 
 | 
    border-right: $transparent-border-style; 
 | 
  } 
 | 
  
 | 
  @else if $direction==right { 
 | 
    border-left: $color-border-style; 
 | 
    border-top: $transparent-border-style; 
 | 
    border-bottom: $transparent-border-style; 
 | 
  } 
 | 
  
 | 
  @else if $direction==down { 
 | 
    border-top: $color-border-style; 
 | 
    border-left: $transparent-border-style; 
 | 
    border-right: $transparent-border-style; 
 | 
  } 
 | 
  
 | 
  @else if $direction==left { 
 | 
    border-right: $color-border-style; 
 | 
    border-top: $transparent-border-style; 
 | 
    border-bottom: $transparent-border-style; 
 | 
  } 
 | 
} 
 |