_layout.scss

/*  =========================================================================
    objects.layout
    Fluid and nestable layout system based on flexbox.
    ========================================================================= */

/*  Variables
    ========================================================================= */

/**
 * The default gutter
 */
$supple-layout-gutter: $supple-space !default;
$supple-layout-gutter-tiny: $supple-space-tiny !default;
$supple-layout-gutter-small: $supple-space-small !default;
$supple-layout-gutter-large: $supple-space-large !default;
$supple-layout-gutter-huge: $supple-space-huge !default;


/**
 * Define which namespaced breakpoints you would like to generate for `fit` & `fill`.
 * This is handy if you only need `fit` on, say, desk, or you only need `fill`
 * at mobile sizes. It allows you to only compile as much CSS as you need.
 * All are empty by default, but you can add breakpoints at will.
 *
 * $supple-breakpoint-has-layout-x: (lap, desk);
 *
 * Or
 *
 * $supple-breakpoint-has-layout-x: (
 *   from: lap,
 *   until: lap desk,
 * );
 *
 * Note: the name of the breakpoint must exist in the list of `$mq-breakpoints`
 *       in `settings/responsive`
 */
$supple-breakpoint-has-layout-fit: () !default;
$supple-breakpoint-has-layout-fill: () !default;



/*  Functions/Mixins
    Functions and/or mixins used in this module
    ========================================================================= */


/**
 * Modifier: Make a unit shrink wrap its content.
 */
@mixin supple-layout-fit () {
  flex-basis: auto;
}


/**
 * Modifier: Make a cell fill the remaining space.
 *
 * 1. Be explicit to work around IE10 bug with shorthand flex
 * 2. IE10 ignores previous `flex-basis` value. Setting again here fixes
 * 3. Fixes issue where a element doesn’t fill the remaining space when the
 *    container has no explicit width.
 */
@mixin supple-layout-fill () {
  flex: 1 1 auto; /* [1] */
  flex-basis: auto; /* [2] */
  width: 0%; /* [3] */
}



/*  Layout root
    ========================================================================= */

/**
 * All content must be contained within child `layout__cell` elements.
 *
 * 1. Account for browser defaults of elements that might be the root node of
 *    the component.
 */
.o-layout {
  --o-layout-columns: 12;
  --o-layout-colspan: var(--o-layout-columns);
  display: flex; /* [1] */
  flex-flow: row wrap;
  padding: 0; /* [1] */
  margin-left: 0; /* [1] */
  list-style: none; /* [1] */
}


/**
 * Modifier: center align all layout cells
 */
.o-layout--align-center {
  justify-content: center;
}


/**
 * Modifier: right align all layout cells
 */
.o-layout--align-right {
  justify-content: flex-end;
}


/**
 * Modifier: middle-align layout cells
 */
.o-layout--align-middle {
  align-items: center;
}


/**
 * Modifier: bottom-align layout cells
 */
.o-layout--align-bottom {
  align-items: flex-end;
}


/**
 * Modifier: reverse all cells
 */
.o-layout--reverse {
  flex-direction: row-reverse;
}


/**
 * Modifier: allow cells to equal distribute width
 *
 * 1. Provide all values to avoid IE10 bug with shorthand flex
 *    http://git.io/vllC7
 *
 *    Use `0%` to avoid bug in IE10/11 with unitless flex basis
 *    http://git.io/vllWx
 */
.o-layout--fit {
  > .o-layout__cell {
    flex: 1 1 0%; /* [1] */
  }
}


/**
 * Modifier: all cells match height of tallest cell in a row
 * 1. The direct child of the flexbox must be a single element when you want
 *    to use equalheight
 */
.o-layout--equalheight {
  > .o-layout__cell {
    display: flex;

    > * {
      width: 100%; /* [1] */
    }
  }
}


/**
 * Modifier: Gutter
 */
.o-layout--gutter {
  @include supple-rem(margin-left, -$supple-layout-gutter);

  > .o-layout__cell {
    @include supple-rem(padding-left, $supple-layout-gutter);
  }
}


/**
 * Modifier: Tiny gutter
 */
.o-layout--gutter-tiny {
  @include supple-rem(margin-left, -$supple-layout-gutter-tiny);

  > .o-layout__cell {
    @include supple-rem(padding-left, $supple-layout-gutter-tiny);
  }
}


/**
 * Modifier: Small gutter
 */
.o-layout--gutter-small {
  @include supple-rem(margin-left, -$supple-layout-gutter-small);

  > .o-layout__cell {
    @include supple-rem(padding-left, $supple-layout-gutter-small);
  }
}

/**
 * Modifier: Large gutter
 */
.o-layout--gutter-large {
  @include supple-rem(margin-left, -$supple-layout-gutter-large);

  > .o-layout__cell {
    @include supple-rem(padding-left, $supple-layout-gutter-large);
  }
}

/**
 * Modifier: Huge gutter
 */
.o-layout--gutter-huge {
  @include supple-rem(margin-left, -$supple-layout-gutter-huge);

  > .o-layout__cell {
    @include supple-rem(padding-left, $supple-layout-gutter-huge);
  }
}



/*  Layout cell
    ========================================================================= */

/**
 * No explicit width by default. Rely on combining `layout__cell` with a dimension
 * utility or a component class that extends 'layout'.
 *
 * 1. Set flex items to full width by default
 * 2. Fix issue where elements with overflow extend past the
 *    `layout__cell` container
 * 3. Fallback for browsers which do not support CSS custom properties
 */
.o-layout__cell {
  flex-basis: 100%; /* [3] */
  flex-basis: calc(100% / var(--o-layout-columns) * var(--o-layout-colspan)); /* [1] */
  min-width: 0; /* [2] */
}


/**
 * Modifier: horizontally center one unit
 * Set a specific unit to be horizontally centered. Doesn't affect
 * any other units. Can still contain a child `layout` object.
 */
.o-layout__cell--center {
  margin-left: auto;
  margin-right: auto;
}


/**
 * Modifier: Make a cell shrink wrap its content.
 */
.o-layout__cell--fit {
  @include supple-layout-fit;
}


/**
 * Modifier: Make a cell fill the remaining space.
 */
.o-layout__cell--fill {
  @include supple-layout-fill;
}



/*  Responsive fitters & fillers
    ========================================================================= */

@if (mixin-exists(supple-breakpoint-has)) {
  @include supple-breakpoint-has($supple-breakpoint-has-layout-fit, '.o-layout__cell--fit') {
    @include supple-layout-fit;
  }

  @include supple-breakpoint-has($supple-breakpoint-has-layout-fill, '.o-layout__cell--fill') {
    @include supple-layout-fill;
  }
} @else {
  @error 'The layout object relies on the `supple-breakpoint-has` mixin. Did you include supple’s mixin file?';
}