All mixins

all_mixins.sass

/***  Usage 
	+clear
=clear
	&::after
		content: ''
		display: table
		clear: both
  
/***  Usage 
	+antialias
=antialias
	-webkit-font-smoothing: antialiased
	-moz-osx-font-smoothing: grayscale

/***  Usage 
	+appearance
=appearance($val: none)
	-webkit-appearance: $val
	-moz-appearance: $val
	appearance: $val

/***  Usage 
	+selection
	  color: #ffe
	  background: #000080
=selection
	&::-moz-selection 
        @content
	&::selection
        @content

/***  Usage 
	+unselectable
=unselectable
	-webkit-touch-callout: none
	user-select: none

/***  Usage 
	+size(400px)
=size($width,$height: $width)
  width: $width
  height: $height

/***  Usage 
	+placeholder
	  color: red
=placeholder
  $placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input"
  @each $placeholder in $placeholders
    &:#{$placeholder}-placeholder
	    @content

/***  Usage 
	+push-auto
=push-auto
  margin: 
    left: auto
    right: auto

/***  Usage 
	+pseudo
	top: -1rem 
	left: -1rem
=pseudo($display: block, $pos: absolute, $content: '')
  content: $content
  display: $display
  position: $pos

/***  Usage
	+font('Lato', 600, italic) 
=font($family, $weight: 400, $style: normal)
  font-family: $family
  font-weight: $weight
  font-style: $style

/***  Usage 
	+respond-to('small')
=respond-to($breakpoint)
    @if map-has-key($breakpoints, $breakpoint)
    @media #{inspect(map-get($breakpoints, $breakpoint))}
        @content

/***  Usage 
	+responsive-ratio(16,9) 16:9, 4:3, 1:2
=responsive-ratio($x,$y)
  $padding: unquote( ( $y / $x ) * 100 + '%' )
  position: relative
  height: 0
  overflow: hidden
  padding-bottom: $padding
  padding-top: 30px
  > *
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%

/***  Usage 
	+dynamic-text(16)
=dynamic-text($font-size, $window-size: $max-mq-size)
  $min-size-percent: $font-size / $base-font-size * 100 + '%'
  $max-size: $font-size * 2
  $min-width-px: #{$window-size}px
  $max-width: $window-size * 2
  font-size: #{$font-size}px
  @media only screen and (min-width: #{$window-size}px)
    font-size: calc(#{$min-size-percent} + (#{$max-size} - #{$font-size}) * (100vw - #{$min-width-px}) / (#{$max-width} - #{$window-size}))

/***  Usage 
	+triangle(red, left, 12px, 50%)
=triangle($color, $direction, $size: 8px, $position: 0)
    @include pseudo($pos: absolute)
    width: 0
    height: 0
    border: $size solid transparent
    @if $position < 50%
	    $position: $position
    @else if $position == 100%
	    $position: calc(#{$position} - #{$size}*2)
    @else
	    $position: calc(#{$position} - #{$size})
    @if $direction == down
        border-bottom-color: $color
        top: -$size*2
        left: $position
    @else if $direction == up
        border-top-color: $color
        bottom: -$size*2
        left: $position
    @else if $direction == right
        border-right-color: $color
        left: -$size*2
        top: $position
    @else if  $direction == left
        border-left-color: $color
        right: -$size*2
        top: $position

/***  Usage
	.site-header
	  padding: 2rem
	  font-size: 1.8rem
	  +mq('tablet-wide', max)
	    padding-top: 12rem
	    font-size: 2.4rem
=mq($width, $type: min)
    @if map_has_key($breakpoints, $width)
        $width: map_get($breakpoints, $width)
    @if $type == max
        $width: $width - 1px
    @if $type == min
        $width: $width + 1px

    @media only screen and (#{$type}-width: $width)
        @content

/***  Usage
	+truncate(100px)
=truncate($truncation-boundary)
    display: block
    max-width: $truncation-boundary
    white-space: nowrap
    overflow: hidden
    text-overflow: ellipsis

// Hide from both screenreaders and browsers
/***  Usage
	+hidden
=hidden
	display: none
	visibility: hidden

/***  Usage
	+visible('flex')
=visible($state: 'block')
	display: unquote($state)
	visibility: visible

// Hide only visually, but have it available for screenreaders
/***  Usage
	+visually-hidden
=vhidden($focusable: false)
	border: 0
	clip: rect(0 0 0 0)
	height: 1px
	margin: -1px
	overflow: hidden
	padding: 0
	position: absolute
	width: 1px

	@if $focusable
		@include vh-focusable

/***  Usage
	+vhidden-reset
=vhidden-reset
	clip: auto
	height: auto
	margin: 0
	overflow: visible
	position: static
	width: auto

// Allow the element to be focusable when navigated to via the keyboard
/***  Usage
	+vhidden-focusable
=vhidden-focusable
	&:active,
	&:focus
		clip: auto
		height: auto
		margin: 0
		overflow: visible
		position: static
		width: auto

// Hide visually and from screenreaders, but maintain layout
/***  Usage
	+invisible
=invisible
	visibility: hidden

/***  Usage
	+retina
=retina
	@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (-moz-min-device-pixel-ratio: 1.5),
	only screen and (-o-min-device-pixel-ratio: 3 / 2),
	only screen and (min-device-pixel-ratio: 1.5),
	only screen and (min-resolution: 1.5dppx)
		@content

// Top/bottom margins for removing first/last child margins
/*** Usage
    .element
	+tb-margins(true, false)

=tb-margins($first-child: true, $last-child: true)
    @if $first-child != false
        &:first-child 
            margin-top: 0
    @if $last-child != false
        &:last-child 
            margin-bottom: 0

// Left/right margins for removing first/last child margins
/*** Usage
    .element
	+lr-margins(true, false)

=lr-margins($first-child: true, $last-child: true)
    @if $first-child != false
        &:first-child 
            margin-left: 0
    @if $last-child != false
        &:last-child 
            margin-right: 0