azinasili

// Mixin to easily create triangles
// $direction accepts up, down, left, right, top-right, top-left, bottom-right, bottom-left
// $size accepts px, em, and rem values
// $color accepts hex, rgb(a), and hsl values
@mixin triangle($direction, $size, $color) {
  // Set css triangle borders
  // Each triangle direction overrides a border
  border: $size solid transparent;

  // displays triangle pointing down

azinasili

// Grab brightness of color
@function brightness($color) {
  @return ((red($color)) + (green($color)) + (blue($color))) / 255 * 100%;
}
 
// Compare bightness and print new text color
@function text-color($color) {
  @if $color == null {
    @return null;
  }

azinasili

// ----
// Sass (v3.4.0.rc.1)
// Create dynamic grids based on user input
// Currently grids max at 8 columns
// 
// Example HTML:
// <div class="container max-grid-6">
//   <div class="row">
//     <div class="column"></div>
//     <div class="column span-4"></div>

azinasili

// Functions and mixin to convert `px` values into `em` units
// 
// px-to-em can easily be changed to `rem` values
// Change any instance of `em` to `rem`
//
// EXAMPLE:
// .foo {
//   @include em(margin, 10px auto);
//   padding: em(1px 2 3px 4); 
// }

azinasili

/// File path short cut for media
/// @param {string} $img-name - Name of media to append to path
/// @return {url} url to display media
/// @warn Warning when $img-name has no extention
/// @example scss
///   .foo {
///      background: image-url('kitten.jpg') no-repeat 0 0;
///   }
/// @example css
///   .foo {

azinasili

/// Mixin to create material design ripple effect
/// @param {list} $bg-color - List of two colors for background and ripple
/// @param {string} $hover [null] - Turn effect on or off
/// @content Add more styles for when element is :active
/// @output Background color, size, and radial gradient for effect
/// @example scss
///  .foo {
///    @include ripple(#bada55 darken(#bada55, 10%)) {
///      border-color: darken(#b8d951, 10%);
///    };  

azinasili

function findAncestor(el, cls) {
  if (el === document) {      
    return false; 
  }
  if (el.classList.contains(cls)) {
    return true;
  }
  
  return el.parentNode && findAncestor(el.parentNode, cls);
} 

azinasili

// Fluid typography between a min & max font-size and molten leading
// calc(minSize + (maxSize - minSize) * ((100vw - minPort) / (maxPort - minPort)));
// Works best with `em` or `rem` units
$typography: (
  'font-min': 1em,
  'font-max': 1.5em,
  'lead-min': 1.3em,
  'lead-max': 1.7em,  
  'width-min': 20em,
  'width-max': 80em,  

azinasili

// Create the simplest grid possible using CSS Grid syntax
// Customize your grid with custom number of items, classnames, and gaps
//
// Example HTML
//    <div class="row row-3">
//      <div class="col-1"></div>
//      <div class="col-1"></div>
//      <div class="col-1"></div>
//    </div>
$SassGrid: (  

azinasili

body {
  filter: invert(1) hue-rotate(180deg);
}