layout.styl

// Mixin: group
// Clearfix with a better name. Excellent for wrangling floats. Taken from
// https://www.cssmojo.com/latest_new_clearfix_so_far/
// Does not support IE 6 and 7 because you should not support them either.

group()
  &:after
    content: ""
    display: block
    clear: both

// Alias: clearfix
// Group with a worse name. If you need really can't break the habit.
clearfix()
  group()

// Function: pos
// Backs position helpers, found below
-pos(type, args)
  i = 0
  position: unquote(type)
  for j in (1..4)
    if length(args) > i
      {args[i]}: args[i + 1] is a 'unit' or 'auto' ? args[i += 1] : 0
    i += 1

// Mixin: Positions
// Syntax shortcuts for absolute, relative, and fixed positioning. Ported
// from nib: https://github.com/tj/nib/blob/master/lib/nib/positions.styl

fixed()
  -pos('fixed', arguments)

absolute()
  -pos('absolute', arguments)

relative()
  -pos('relative', arguments)

// Mixin: Size
// Shortcut for setting width and height quickly. If passed one value, sets this
// value as both width and height.
//
// ex. size: 10px 30px
// ex. size: 10px

size()
  if length(arguments) == 1
    width: arguments[0]
    height: arguments[0]
  else
    width: arguments[0]
    height: arguments[1]

// Mixin: Columns
//
// For css3 columns. Takes column count (int), column gap (px, em), column width
// (px, em), and a border-like declaration if you want a column rule. This
// follows exactly with the css3 spec, it's just quicker.
//
// ex. columns()
// ex. columns: 5
// ex. columns(8, 15px, 200px, '1px solid red')

columns($count = 3, $gap = 30px, $width = null, $rule = null)
  column-count: $count
  column-gap: $gap
  column-width: $width if $width
  column-rule: unquote($rule) if $rule

// Mixin: Avoid Column Break
//
// If you have a list that is broken into columns, this will make sure that the
// list item is not split across columns awkwardly. Works only in webkit at the
// moment.
//
// ex. avoid-column-break()

avoid-column-break()
  column-break-inside: avoid

// Mixin: Vertically Align
// Cross browser vertical align. Works down to IE9.
//
// ex. vertically-align() or reset it with vertically-align(false)

vertically-align($reset = null)
  if $reset != false
    position: relative
    top: 50%
    transform: translateY(-50%)
  else
    position: relative
    top: 0
    transform: translateY(0)

// Mixin: Media
//
// Based on Nicole Sullivan's media class, made famous by Facebook
// https://www.stubbornella.org/content/2010/06/25/the-media-object-saves-
// hundreds-of-lines-of-code
//
// Put this on a parent and it will split the first two children left and right,
// like you would with perhaps a comment with an avatar to the left. Pass it a
// margin between the two. Explained fully here:
// https://carrotblog.com/css-patterns-evolved/
//
// This mixin works right when the element you apply it to has two or three
// direct children. The first one will float to the left, the second one will be
// to the right of the first, and third will go farthest right.
//
// ex. media-object()
// ex. media-object: 15px
// ex. media-object: 15px 10px

media-object($margin = 10px)

  $left-margin = $margin
  $right-margin = $margin

  if length(arguments) > 1
    $left-margin = arguments[0]
    $right-margin = arguments[1]

  overflow: hidden
  zoom: 1

  & > *
    display: inline-block
    overflow: hidden
  & > *:first-child
    float: left
    margin-right: $right-margin
  & > *:nth-child(3)
    float: right
    margin-left: $left-margin

// Mixin: Ratio Box
// Set a specific width/height ratio. Useful on background images and iframes.

ratio-box($ratio = 1/1)
  $ratio = remove-unit($ratio)
  overflow: hidden
  position: relative

  &:before
    content: ''
    display: block
    height: 0
    padding-top: (1 / $ratio) * 100%

// Mixin: Horizontal Rule
//
// Clean reset for divider lines.
//
// ex: rule()
// ex rule(blue)

rule($color = rgba(#000, .15), $spacing = 1.5em)
  border: 0
  border-bottom: 1px solid $color
  height: 0
  padding: 0
  margin: $spacing 0

// Mixin: Table Layout
//
// Sometimes you just need a good old-fashioned table layout.
// Read more: https://colintoh.com/blog/display-table-anti-hero
//
// ex: tl()
// ex: tl(auto)

tl($layout-type = fixed)
  display: table
  table-layout: $layout-type  // "fixed" or "auto"
  margin: 0
  padding: 0
  width: 100%

  > *
    display: table-cell