index.css

/**
 * TICKETFLY CSS GRID SYSTEM
 */

@import "ticketfly-css-spacing-variables";

/**
 * ----------------------------------------------------------------------------
 * Containing grid element
 *
 * DO NOT apply dimension or offset utilities to the `o-grid` element. All cell
 * widths and offsets should be applied to child grid cells.
 *
 * 1. Account for browser defaults of elements that might be the root node of
 *    the component.
 * ----------------------------------------------------------------------------
 */

.o-grid {
  box-sizing: border-box;
  display: flex; /* 1 */
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0; /* 1 */
  padding: 0; /* 1 */
}

/**
 * Modifier: All grid cells are evenly spaced AND the
 * main-start edge and main-end edge are flushed with respectively
 * first and last flex item edges.
 */

.o-grid.o-grid--space-between {
  justify-content: space-between;
}

/**
 * Modifier: All grid cells are evenly spaced AND the
 * empty space before the first and after the last items equals
 * half of the space between two adjacent items.
 */

.o-grid.o-grid--space-around {
  justify-content: space-around;
}

/**
 * Modifier: center-align all grid cells
 */

.o-grid.o-grid--align-center {
  justify-content: center;
}

/**
 * Modifier: right-align all grid cells
 */

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

/**
 * Modifier: left-align all grid cells
 *
 * NOTE: This is already the default for grid containers, so this
 * helper usually won't be necessary, but is provided for completeness
 */

.o-grid.o-grid--align-left {
  justify-content: flex-start;
}

/**
 * Modifier: middle-align all grid cells
 */

.o-grid.o-grid--align-middle {
  align-items: center;
}

/**
 * Modifier: bottom-align all grid cells
 */

.o-grid.o-grid--align-bottom {
  align-items: flex-end;
}

/**
 * Modifier: top-align all grid cells
 *
 * NOTE: This is already the default for grid containers, so this
 * helper usually won't be necessary, but is provided for completeness
 */

.o-grid.o-grid--align-top {
  align-items: flex-start;
}

/**
 * Modifier: Prevent grid cells from wrapping to the next line
 */

.o-grid.o-grid--nowrap {
  flex-wrap: nowrap;
}

/**
 * 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-grid.o-grid--fit > .o-grid-cell {
  flex: 1 1 0%; /* 1 */
}

/**
 * Modifier: allow cells to fill the entire width of their grid container
 */

.o-grid.o-grid--fill > .o-grid-cell {
  flex: 1 0 100%;
}


/**
 * Modifier: all cells match height of tallest cell in a row
 */

.o-grid.o-grid--equal-height > .o-grid-cell {
  display: flex;
}

/**
 * Modifier: gutters
 */

.o-grid.o-grid--guttered {
  margin: 0 calc(-0.5 * var(--spacing-md));
}
.o-grid.o-grid--guttered > .o-grid-cell {
  padding: 0 calc(0.5 * var(--spacing-md));
}

.o-grid.o-grid--guttered-sm {
  margin: 0 calc(-0.5 * var(--spacing-sm));
}
.o-grid.o-grid--guttered-sm> .o-grid-cell {
  padding: 0 calc(0.5 * var(--spacing-sm));
}

.o-grid.o-grid--guttered-lg {
  margin: 0 calc(-0.5 * var(--spacing-lg));
}
.o-grid.o-grid--guttered-lg > .o-grid-cell {
  padding: 0 calc(0.5 * var(--spacing-lg));
}


/**
 * ----------------------------------------------------------------------------
 * Child grid cells
 *
 * 1. Fix issue where elements with overflow extend past the
 *    `Grid-cell` container - https://git.io/vw5oF
 *
 * ----------------------------------------------------------------------------
 */

.o-grid-cell {
  box-sizing: inherit;
  flex: 0 0 auto;
  min-width: 0; /* 1 */
  max-width: 100%;
}

/**
 * Cell Sizing: 1/12
 */

.o-grid-cell.o-grid-cell-1 {
  flex-basis: 8.33333333%;
  max-width: 8.33333333%;
}

/**
 * Cell Sizing: 2/12
 */

.o-grid-cell.o-grid-cell-2 {
  flex-basis: 16.66666667%;
  max-width: 16.66666667%;
}

/**
 * Cell Sizing: 3/12
 */

.o-grid-cell.o-grid-cell-3 {
  flex-basis: 25%;
  max-width: 25%;
}

/**
 * Cell Sizing: 4/12
 */

.o-grid-cell.o-grid-cell-4 {
  flex-basis: 33.33333333%;
  max-width: 33.33333333%;
}

/**
 * Cell Sizing: 5/12
 */

.o-grid-cell.o-grid-cell-5 {
  flex-basis: 41.66666667%;
  max-width: 41.66666667%;
}

/**
 * Cell Sizing: 6/12
 */

.o-grid-cell.o-grid-cell-6 {
  flex-basis: 50%;
  max-width: 50%;
}

/**
 * Cell Sizing: 7/12
 */

.o-grid-cell.o-grid-cell-7 {
  flex-basis: 58.33333333%;
  max-width: 58.33333333%;
}

/**
 * Cell Sizing: 8/12
 */

.o-grid-cell.o-grid-cell-8 {
  flex-basis: 66.66666667%;
  max-width: 66.66666667%;
}

/**
 * Cell Sizing: 9/12
 */

.o-grid-cell.o-grid-cell-9 {
  flex-basis: 75%;
  max-width: 75%;
}

/**
 * Cell Sizing: 10/12
 */

.o-grid-cell.o-grid-cell-10 {
  flex-basis: 83.33333333%;
  max-width: 83.33333333%;
}

/**
 * Cell Sizing: 11/12
 */

.o-grid-cell.o-grid-cell-11 {
  flex-basis: 91.66666667%;
  max-width: 91.66666667%;
}

/**
 * Cell Sizing: 12/12
 */

.o-grid-cell.o-grid-cell-12 {
  flex-basis: 100%;
  max-width: 100%;
}

/**
 * Cell Offset From Left: 1 /12
 */

.o-grid-cell.o-grid-cell-offset-1 {
  margin-left: 8.33333333%;
}

/**
 * Cell Offset From Left: 2 /12
 */

.o-grid-cell.o-grid-cell-offset-2 {
  margin-left: 16.66666667%;
}

/**
 * Cell Offset From Left: 3 /12
 */

.o-grid-cell.o-grid-cell-offset-3 {
  margin-left: 25%;
}

/**
 * Cell Offset From Left: 4 /12
 */

.o-grid-cell.o-grid-cell-offset-4 {
  margin-left: 33.33333333%;
}

/**
 * Cell Offset From Left: 5 /12
 */

.o-grid-cell.o-grid-cell-offset-5 {
  margin-left: 41.66666667%;
}

/**
 * Cell Offset From Left: 6 /12
 */

.o-grid-cell.o-grid-cell-offset-6 {
  margin-left: 50%;
}

/**
 * Cell Offset From Left: 7 /12
 */

.o-grid-cell.o-grid-cell-offset-7 {
  margin-left: 58.33333333%;
}

/**
 * Cell Offset From Left: 8 /12
 */

.o-grid-cell.o-grid-cell-offset-8 {
  margin-left: 66.66666667%;
}

/**
 * Cell Offset From Left: 9 /12
 */

.o-grid-cell.o-grid-cell-offset-9 {
  margin-left: 75%;
}

/**
 * Cell Offset From Left: 10/12
 */

.o-grid-cell.o-grid-cell-offset-10 {
  margin-left: 83.33333333%;
}

/**
 * Cell Offset From Left: 11/12
 */

.o-grid-cell.o-grid-cell-offset-11 {
  margin-left: 91.66666667%;
}

/**
 * Modifier: Individual cell alignment to the center
 * along the flex-container's cross-axis.
 */
.o-grid-cell.o-grid-cell--middle {
  align-self: center;
}

/**
 * Modifier: Individual cell alignment to the top
 * along the flex-container's cross-axis.
 */
.o-grid-cell.o-grid-cell--top {
  align-self: flex-start;
}

/**
 * Modifier: Individual cell alignment to the bottom
 * along the flex-container's cross-axis.
 */
.o-grid-cell.o-grid-cell--bottom {
  align-self: flex-end;
}