_index.scss

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

/**
 * Forward the variables to the parent stylesheet
 */
@forward './variables';

/**
 * Use the settings & tools in this sheet
 */
@use './variables';
@use '../../settings/defaults';
@use '../../tools/space';
@use '../../tools/responsive';

/* --------------------------------------------------------------------------
    Internal variables
/ --------------------------------------------------------------------------- */

$selector: '> *';
@if defaults.$css-modules {
  $selector: ':global(#{$selector})';
}

/* --------------------------------------------------------------------------
    Module code
/ --------------------------------------------------------------------------- */

/**
 * Block: layout
 *
 * 1. Account for browser defaults of elements that might be the root node of
 *    the component.
 * 2. Negative margin for the gap
 */
.o-layout {
  --columns: #{variables.$columns};
  --gap: 0px; // stylelint-disable-line
  --layout-gap: var(--gap);
  --layout-block-gap: var(--layout-gap);
  --layout-inline-gap: var(--layout-gap);
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  padding: 0; /* [1] */
  row-gap: var(--layout-block-gap);
  column-gap: var(--layout-inline-gap);
  list-style: none; /* [1] */

  /**
	 * Flex item
	 * No explicit width by default. Rely on combining the item with a
	 * dimension utility or a component class that extends 'layout'.
	 *
	 * 1. Set flex items to full width by default, minus the gap
	 * 2. Fix issue where elements with overflow extend past the
	 *    item's container. As per:
	 *    http://weblog.west-wind.com/posts/2016/Feb/15/Flexbox-Containers-PRE-tags-and-managing-Overflow
   * 3. To fix the "percentage-based flex-basis & gap" based issues we need to
   *    set a max-width with a ratio to negate the `gap`.
   * 4. Calculate offset
	 */
  #{$selector} {
    --colspan: var(--columns);
    --offset: 0;
    flex-basis: calc(
      (100% / var(--columns) * var(--colspan)) - var(--layout-inline-gap)
    ); /* [1] */
    flex-grow: 1;
    min-inline-size: 0; /* [2] */
    // stylelint-disable
    max-inline-size: calc(
      (100% / var(--columns) * var(--colspan)) - var(--layout-inline-gap) *
        (100 - 100 / var(--columns) * var(--colspan)) / 100
    ); /* [3] */
    // stylelint-enable
    margin-inline-start: calc(100% / var(--columns) * var(--offset)); /* [4] */
  }
}

/**
 * Modifier: inline-center
 * center align all layout items over the inline axis
 */
.o-layout--align-inline-center {
  justify-content: center;
}

/**
 * Modifier: align-inline-end
 * align all layout items to the end of the inline axis
 */
.o-layout--align-inline-end {
  justify-content: flex-end;
}

/**
 * Modifier: align-inline-between
 * align layout items by creating an even space between
 */
.o-layout--align-inline-between {
  justify-content: space-between;
}

/**
 * Modifier: align-block-center
 * center-align layout items on the block axis
 */
.o-layout--align-block-center {
  align-items: center;
}

/**
 * Modifier: align-block-end
 * end-align layout items on the block axis
 */
.o-layout--align-block-end {
  align-items: flex-end;
}

/**
 * Modifier: stretch
 * All items match the size of tallest item in a row
 */
.o-layout--stretch {
  align-items: stretch;
}

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

/**
 * Modifier: fill
 * allow items to equal distribute width
 */
.o-layout--fill {
  #{$selector} {
    flex: 1;
    max-inline-size: none;
  }
}

/**
 * Modifier: fit
 * fit all items to their content
 */
.o-layout--fit {
  #{$selector} {
    flex-basis: auto;
    flex-grow: 0;
    max-inline-size: none;
  }
}

/**
 * Modifier: gap-X
 */
@each $gap in variables.$gaps {
  .o-layout--gap-#{$gap} {
    --layout-gap: #{space.get($gap)};
  }
}

/**
 * Modifier: gap-block-X
 */
@each $gap in variables.$gaps {
  .o-layout--gap-block-#{$gap} {
    --layout-block-gap: #{space.get($gap)};
  }
}

/**
 * Modifier: gap-inline-X
 */
@each $gap in variables.$gaps {
  .o-layout--gap-inline-#{$gap} {
    --layout-inline-gap: #{space.get($gap)};
  }
}

/* --------------------------------------------------------------------------
    Elements
/ --------------------------------------------------------------------------- */

/**
 * Element: fill
 * Make an item fill the remaining space.
 *
 * 1. Fixes issue where a element doesn’t fill the remaining space when the
 *    container has no explicit width.
 */
.o-layout__fill {
  @include responsive.in-query(variables.$fill-in-query) {
    flex: auto;
    inline-size: 0%; /* [1] */
    max-inline-size: none;
  }
}

/**
 * Element: fit
 * Make an item shrink wrap its content.
 */
.o-layout__fit {
  @include responsive.in-query(variables.$fit-in-query) {
    flex-basis: auto;
    flex-grow: 0;
    max-inline-size: none;
  }
}

/**
 * Element: align-inline-center
 * Center one flex item on the inline axis
 */
.o-layout__align-inline-center {
  margin-inline-start: auto;
  margin-inline-end: auto;
}