_objects.flexlayout.scss

/* ==========================================================================
   #FLEXBOX LAYOUT
   ---
   NOTICE: Adapted from https://github.com/inuitcss/inuitcss/blob/develop/objects/_objects.layout.scss
   ========================================================================== */

/**
 * Grid-like layout system.
 *
 * The layout object provides us with a column-style layout system. This file
 * contains the basic structural elements, but classes should be complemented
 * with width utilities, for example:
 *
 *   <div class="o-layout">
 *     <div class="o-layout__item  u-1/2">
 *     </div>
 *     <div class="o-layout__item  u-1/2">
 *     </div>
 *   </div>
 *
 * The above will create a two-column structure in which each column will
 * fluidly fill half of the width of the parent. We can have more complex
 * systems:
 *
 *   <div class="o-layout">
 *     <div class="o-layout__item  u-1/1  u-1/3@medium">
 *     </div>
 *     <div class="o-layout__item  u-1/2  u-1/3@medium">
 *     </div>
 *     <div class="o-layout__item  u-1/2  u-1/3@medium">
 *     </div>
 *   </div>
 *
 * The above will create a system in which the first item will be 100% width
 * until we enter our medium breakpoint, when it will become 33.333% width. The
 * second and third items will be 50% of their parent, until they also become
 * 33.333% width at the medium breakpoint.
 *
 * We can also manipulate entire layout systems by adding a series of modifiers
 * to the `.o-layout` block. For example:
 *
 *   <div class="o-layout  o-layout--reverse">
 *
 * This will reverse the displayed order of the system so that it runs in the
 * opposite order to our source, effectively flipping the system over.
 *
 *   <div class="o-layout  o-layout--[right|center]">
 *
 * This will cause the system to fill up from either the centre or the right
 * hand side. Default behaviour is to fill up the layout system from the left.
 *
 * There are plenty more options available to us: explore them below.
 */





/* Default/mandatory classes.
   ========================================================================== */

/**
 * 1. Allows us to use the layout object on any type of element.
 * 2. We need to defensively reset any box-model properties.
 * 3. Define flexbox settings to allow grid-like behaviour
 * 4. Use the negative margin trick for multi-row grids:
 */

.o-layout {
  display: flex; /* [3] */
  align-items: stretch; /* [3] */
  flex-wrap: wrap; /* [3] */
  margin:  0; /* [2] */
  padding: 0; /* [2] */
  list-style: none; /* [1] */
  margin: -$inuit-global-spacing-unit; /* [4] */
}


  /**
   * 1. By default, all layout items are full-width (mobile first).
   * 2. Gutters provided by padding:
   */

  .o-layout__item {
    width: 100%; /* [1] */
    padding: $inuit-global-spacing-unit
  }





/* Gutter size modifiers.
   ========================================================================== */

.o-layout--tiny {
  margin: -$inuit-global-spacing-unit-tiny;

  > .o-layout__item {
    padding: $inuit-global-spacing-unit-tiny;
  }

}


.o-layout--small {
  margin: -$inuit-global-spacing-unit-small;

  > .o-layout__item {
    padding: $inuit-global-spacing-unit-small;
  }

}


.o-layout--large {
  margin: -$inuit-global-spacing-unit-large;

  > .o-layout__item {
    padding: $inuit-global-spacing-unit-large;
  }

}


.o-layout--huge {
  margin: -$inuit-global-spacing-unit-huge;

  > .o-layout__item {
    padding: $inuit-global-spacing-unit-huge;
  }

}


.o-layout--flush {
  margin: 0;

  > .o-layout__item {
    padding: 0;
  }

}





/* Vertical alignment modifiers.
   ========================================================================== */

/**
 * Align all grid items to the middles of each other.
 */

.o-layout--middle {

  > .o-layout__item {
    align-self: center;
  }

}


/**
 * Align all grid items to the bottoms of each other.
 */

.o-layout--bottom {

  > .o-layout__item {
    align-self: flex-end;
  }

}





/* Fill order modifiers.
   ========================================================================== */

/**
 * Fill up the layout system from the centre.
 */

.o-layout--center {
  justify-content: center;
}


/**
 * Fill up the layout system from the right-hand side.
 */

.o-layout--right {
  justify-content: flex-end;
}


/**
 * Reverse the rendered order of the grid system.
 */

.o-layout--reverse {
  flex-direction: row-reverse;
}