_retain.scss

/*  =========================================================================
    objects.retain
    Page-level constraining and wrapping elements.
    ========================================================================= */

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

$supple-retain-text-size: 40em !default;
$supple-retain-space: $supple-space !default;


/**
 * Sizes
 */
$supple-retain-sizes: (
  lap: 640px,
  desk: 960px,
  wall: $supple-static-breakpoint,
  text: $supple-retain-text-size
) !default;



/*  Functions/Mixins
    ========================================================================= */



/*  Module
    ========================================================================= */

.o-retain {
  --o-retain-max-width: 100%;
  max-width: var(--o-retain-max-width);
  @include supple-rem(padding-right, $supple-retain-space);
  @include supple-rem(padding-left, $supple-retain-space);
  margin-right: auto;
  margin-left: auto;
}


/**
 * Modifier: text
 */
.o-retain--text {
  --o-retain-max-width: #{$supple-retain-text-size};
  padding-right: 0;
  padding-left: 0;
  margin-left: 0;
  margin-right: 0;
}


/**
 * Modifier: no-padding
 */
.o-retain--no-padding {
  padding-right: 0;
  padding-left: 0;
}



/*  Common width modifiers, for use in browsers without
    custom-property support
    ========================================================================= */

@each $key, $value in $supple-retain-sizes {
  .o-retain--#{$key} {
    @include supple-rem(max-width, $value);
  }
}