zhdk/madek

/**
 * Grid - The grid is based on the OOCSS grid (http://oocss.org) by Nicole Sullivan.
 * It provides several grid classes that can be mixed and matched and if necessary
 * can be wrapped in a row class to prevent columns from bumping into each other.
 *
 * .col1of1  - Full width
 * .col1of2  - Half width
 * .col1of3  - Third width
 * .col2of3  - Two thirds width
 * .col1of4  - Fourth width
 * .col3of4  - Three fourths width
 * .col1of5  - Fifth width
 * .col2of5  - Two fifths width
 * .col3of5  - Three fifths width
 * .col4of5  - Four fifths width
 *
 * Styleguide 1.1

.row
  +micro-clearfix
  clear: both

.col1of2,
.col1of3, .col2of3,
.col1of4, .col2of4, .col3of4,
.col1of5, .col2of5, .col3of5, .col4of5,
.col1of6, .col2of6, .col3of6, .col4of6, .col5of6
  +float-left

.col1of1
  float: none
  width: 100%

.col1of2
  width: 50%

.col1of3
  width: 33.333%

.col2of3
  width: 66.667%

.col1of4
  width: 25%

.col3of4
  width: 75%

.col1of5
  width: 20%

.col2of5
  width: 40%

.col3of5
  width: 60%

.col4of5
  width: 80%

.col1of6
  width: 16.667%

.col2of6
  width: 33.333%

.col3of6
  width: 50%

.col4of6
  width: 66.667%

.col5of6
  width: 83.333%

.right
  +float-right

.left
  +float-left

.center
  margin-left: auto
  margin-right: auto

.hidden
  display: none
  &:not([style])
    display: none !important

.by-left
  text-align: left

.by-right
  text-align: right

.by-center
  text-align: center

.table
  table-layout: fixed
  &.auto
    table-layout: auto

.table-side
  width: 190px

.table-substance
  width: 100%

/**
 * Clearfix
 *
 * Styleguide 1.1.1

.clearfix
  +micro-clearfix

/**
 * ## Stand-alone horizontal separators `.separator`
 *
 * .mini   - Short separator
 * .light  - Light separator
 *
 * Styleguide 1.3

.separator
  border-color: $mono-light $white $white
  border-style: solid
  border-width: 1px 0
  clear: both
  display: block
  margin: 0
  padding: 0
  width: 100%

.separator.mini
  width: $space-m

.separator.light
  border-color: $mono-weak $lighten-less $lighten-less

/**
 * ## Elements with bottom border and some extra bottom spacing `.separated`
 *
 * .light  - Light separator
 *
 * Styleguide 1.4

.separated
  +box-shadow(0 1px 0 $white)
  border-bottom: 1px solid $mono-light

.separated.light
  +box-shadow(0 1px 0 $lighten-less)
  border-bottom: 1px solid $mono-weak