node_modules/@covalent/core/common/styles/_layout.scss

/* stylelint-disable function-url-quotes, no-duplicate-selectors */

/*
*
*  Responsive attributes
*
*  References:
*  1) https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties#flex
*  2) https://css-tricks.com/almanac/properties/f/flex/
*  3) https://css-tricks.com/snippets/css/a-guide-to-flexbox/
*  4) https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items
*  5) http://godban.com.ua/projects/flexgrid
*
*/

// Layout
// ------------------------------

$baseline-grid: 8px !default;
$layout-gutter-width: ($baseline-grid * 2) !default;

$layout-breakpoint-xs: 600px !default;
$layout-breakpoint-sm: 960px !default;
$layout-breakpoint-md: 1280px !default;
$layout-breakpoint-lg: 1920px !default;

@-moz-document url-prefix() {
  [layout-fill] {
    margin: 0;
    width: 100%;
    min-height: 100%;
    height: 100%;
  }
}

@mixin flex-order-for-name($sizes: null) {
  @if $sizes == null {
    $sizes: '';

    [flex-order] {
      order: 0;
    }
  }

  @for $i from -20 through 20 {
    $order: '';
    $suffix: '';

    @each $s in $sizes {
      @if $s != '' {
        $suffix: '-#{$s}="#{$i}"';
      } @else {
        $suffix: '="#{$i}"';
      }

      $order: '[flex-order#{$suffix}]';
    }

    #{$order} {
      order: #{$i};
    }
  }
}

@mixin offset-for-name($sizes: null) {
  @if $sizes == null {
    $sizes: '';
  }

  @for $i from 0 through 19 {
    $offsets: '';
    $suffix: '';

    @each $s in $sizes {
      @if $s != '' {
        $suffix: '-#{$s}="#{$i * 5}"';
      } @else {
        $suffix: '="#{$i * 5}"';
      }

      $offsets: $offsets + '[flex-offset#{$suffix}], ';
    }

    #{$offsets} {
      margin-left: #{$i * 5 + '%'};
    }
  }

  @each $i in 33 {
    $offsets: '';
    $suffix: '';

    @each $s in $sizes {
      @if $s != '' {
        $suffix: '-#{$s}="#{$i}"';
      } @else {
        $suffix: '="#{$i}"';
      }

      $offsets: '[flex-offset#{$suffix}], ';
    }

    #{$offsets} {
      margin-left: calc(100% / 3);
    }
  }

  @each $i in 66 {
    $offsets: '';
    $suffix: '';

    @each $s in $sizes {
      @if $s != '' {
        $suffix: '-#{$s}="#{$i}"';
      } @else {
        $suffix: '="#{$i}"';
      }

      $offsets: '[flex-offset#{$suffix}]';
    }

    #{$offsets} {
      margin-left: calc(200% / 3);
    }
  }
}

@mixin layout-for-name($name: null) {
  @if $name == null {
    $name: '';
  }
  @if $name != '' {
    $name: '-#{$name}';
  }

  [layout#{$name}],
  [layout#{$name}='column'],
  [layout#{$name}='row'] {
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
  }
  [layout#{$name}='column'] {
    flex-direction: column;
  }
  [layout#{$name}='row'] {
    flex-direction: row;
  }
}

@mixin flex-properties-for-name($name: null) {
  $flexName: 'flex';
  @if $name != null {
    $flexName: 'flex-#{$name}';
    $name: '-#{$name}';
  } @else {
    $name: '';
  }

  [#{$flexName}] {
    flex: 1;
    box-sizing: border-box;
  }
  // === flex: 1 1 0%;

  // IE mediaQuery hack for 8,9,10 to set the flex-basis properly for 'flex' values
  // Details:
  // Do not use unitless flex-basis values in the flex shorthand because IE 10-11 will error.
  // Also use 0% instead of 0px since minifiers will often convert 0px to 0 (which is unitless and will have the same problem).
  // Safari, however, fails with flex-basis : 0% and requires flex-basis : 0px
  @media screen\0 {
    [#{$flexName}] {
      flex: 1 1 0%;
    }
  }

  [#{$flexName}='grow'],
  [#{$flexName}-grow] {
    flex: 1 1 100%;
    box-sizing: border-box;
  }
  [#{$flexName}='initial'],
  [#{$flexName}-initial] {
    flex: 0 1 auto;
    box-sizing: border-box;
  }
  [#{$flexName}='auto'],
  [#{$flexName}-auto] {
    flex: 1 1 auto;
    box-sizing: border-box;
  }
  [#{$flexName}='none'],
  [#{$flexName}-none] {
    flex: 0 0 auto;
    box-sizing: border-box;
  }
  [#{$flexName}='noshrink'],
  [#{$flexName}-noshrink] {
    flex: 1 0 auto;
    box-sizing: border-box;
  }
  [#{$flexName}='nogrow'],
  [#{$flexName}-nogrow] {
    flex: 0 1 auto;
    box-sizing: border-box;
  }

  // (1-20) * 5 = 0-100%
  @for $i from 0 through 20 {
    $value: #{$i * 5 + '%'};

    [#{$flexName}='#{$i * 5}'] {
      flex: 1 1 #{$value};
      max-width: #{$value};
      max-height: 100%;
      box-sizing: border-box;
    }

    [layout='row'] > [#{$flexName}='#{$i * 5}'],
    [layout#{$name}='row'] > [#{$flexName}='#{$i * 5}'] {
      flex: 1 1 #{$value};
      max-width: #{$value};
      max-height: 100%;
      box-sizing: border-box;
    }

    [layout='column'] > [#{$flexName}='#{$i * 5}'],
    [layout#{$name}='column'] > [#{$flexName}='#{$i * 5}'] {
      flex: 1 1 #{$value};
      max-width: 100%;
      max-height: #{$value};
      box-sizing: border-box;
    }
  }

  [layout='row'],
  [layout#{$name}='row'] {
    > [#{$flexName}='33'],
    > [#{$flexName}='33'] {
      flex: 1 1 33%;
      max-width: calc(100% / 3);
      max-height: 100%;
      box-sizing: border-box;
    }
    > [#{$flexName}='34'],
    > [#{$flexName}='34'] {
      flex: 1 1 34%;
      max-width: 34%;
      max-height: 100%;
      box-sizing: border-box;
    }
    > [#{$flexName}='66'],
    > [#{$flexName}='66'] {
      flex: 1 1 66%;
      max-width: calc(200% / 3);
      max-height: 100%;
      box-sizing: border-box;
    }
    > [#{$flexName}='67'],
    > [#{$flexName}='67'] {
      flex: 1 1 67%;
      max-width: 67%;
      max-height: 100%;
      box-sizing: border-box;
    }
  }
  [layout='column'],
  [layout#{$name}='column'] {
    > [#{$flexName}='33'],
    > [#{$flexName}='33'] {
      flex: 1 1 33%;
      max-width: 100%;
      max-height: calc(100% / 3);
      box-sizing: border-box;
    }
    > [#{$flexName}='34'],
    > [#{$flexName}='34'] {
      flex: 1 1 34%;
      max-width: 100%;
      max-height: 34%;
      box-sizing: border-box;
    }
    > [#{$flexName}='66'],
    > [#{$flexName}='66'] {
      flex: 1 1 66%;
      max-width: 100%;
      max-height: calc(200% / 3);
      box-sizing: border-box;
    }
    > [#{$flexName}='67'],
    > [#{$flexName}='67'] {
      flex: 1 1 67%;
      max-width: 100%;
      max-height: 67%;
      box-sizing: border-box;
    }
  }
}

@mixin layout-align-for-name($suffix: null) {
  // Alignment attributes for layout containers' children
  // Arrange on the Main Axis
  // center, start, end, space-between, space-around
  // flex-start is the default for justify-content
  // ------------------------------

  $name: 'layout-align';
  @if $suffix != null {
    $name: 'layout-align-#{$suffix}';
  }

  [#{$name}],
  [#{$name}="start stretch"] // defaults
  {
    justify-content: flex-start;
    align-content: stretch;
    align-items: stretch;
  }
  // Main Axis Center
  [#{$name}='start'],
  [#{$name}='start start'],
  [#{$name}='start center'],
  [#{$name}='start end'],
  [#{$name}='start stretch'] {
    justify-content: flex-start;
  }

  // Main Axis Center
  [#{$name}='center'],
  [#{$name}='center start'],
  [#{$name}='center center'],
  [#{$name}='center end'],
  [#{$name}='center stretch'] {
    justify-content: center;
  }

  // Main Axis End
  [#{$name}="end"], //stretch
  [#{$name}="end center"],
  [#{$name}="end start"],
  [#{$name}="end end"],
  [#{$name}="end stretch"] {
    justify-content: flex-end;
  }

  // Main Axis Space Around
  [#{$name}="space-around"], //stretch
  [#{$name}="space-around center"],
  [#{$name}="space-around start"],
  [#{$name}="space-around end"],
  [#{$name}="space-around stretch"] {
    justify-content: space-around;
  }

  // Main Axis Space Between
  [#{$name}="space-between"], //stretch
  [#{$name}="space-between center"],
  [#{$name}="space-between start"],
  [#{$name}="space-between end"],
  [#{$name}="space-between stretch"] {
    justify-content: space-between;
  }

  // Arrange on the Cross Axis
  // center, start, end
  // stretch is the default for align-items
  // ------------------------------

  // Cross Axis Start
  [#{$name}='start start'],
  [#{$name}='center start'],
  [#{$name}='end start'],
  [#{$name}='space-between start'],
  [#{$name}='space-around start'] {
    align-items: flex-start;
    align-content: flex-start;
  }

  // Cross Axis Center
  [#{$name}='start center'],
  [#{$name}='center center'],
  [#{$name}='end center'],
  [#{$name}='space-between center'],
  [#{$name}='space-around center'] {
    align-items: center;
    align-content: center;
    max-width: 100%;

    // IE11 overflow https://github.com/philipwalton/flexbugs#2-column-flex-items-set-to-align-itemscenter-overflow-their-container
    & > * {
      max-width: 100%;
      box-sizing: border-box;
    }
  }

  // Cross Axis Center IE overflow fix
  [#{$name}='start center'] > *,
  [#{$name}='center center'] > *,
  [#{$name}='end center'] > *,
  [#{$name}='space-between center'] > *,
  [#{$name}='space-around center'] > * {
    max-width: 100%;
    box-sizing: border-box;
  }

  // Cross Axis End
  [#{$name}='start end'],
  [#{$name}='center end'],
  [#{$name}='end end'],
  [#{$name}='space-between end'],
  [#{$name}='space-around end'] {
    align-items: flex-end;
    align-content: flex-end;
  }

  // Cross Axis  stretch
  [#{$name}='start stretch'],
  [#{$name}='center stretch'],
  [#{$name}='end stretch'],
  [#{$name}='space-between stretch'],
  [#{$name}='space-around stretch'] {
    align-items: stretch;
    align-content: stretch;
  }
}

@mixin layout-padding-margin() {
  [layout-padding] > [flex-sm],
  [layout-padding] > [flex-lt-md] {
    padding: $layout-gutter-width / 4;
  }
  [layout-padding],
  [layout-padding] > [flex],
  [layout-padding] > [flex-gt-sm],
  [layout-padding] > [flex-md],
  [layout-padding] > [flex-lt-lg] {
    padding: $layout-gutter-width / 2;
  }
  [layout-padding] > [flex-gt-md],
  [layout-padding] > [flex-lg] {
    padding: $layout-gutter-width / 1;
  }

  [layout-margin] > [flex-sm],
  [layout-margin] > [flex-lt-md] {
    margin: $layout-gutter-width / 4;
  }

  [layout-margin],
  [layout-margin] > [flex],
  [layout-margin] > [flex-gt-sm],
  [layout-margin] > [flex-md],
  [layout-margin] > [flex-lt-lg] {
    margin: $layout-gutter-width / 2;
  }

  [layout-margin] > [flex-gt-md],
  [layout-margin] > [flex-lg] {
    margin: $layout-gutter-width / 1;
  }

  [layout-wrap] {
    flex-wrap: wrap;
  }

  [layout-nowrap] {
    flex-wrap: nowrap;
  }

  [layout-fill] {
    margin: 0;
    width: 100%;
    min-height: 100%;
    height: 100%;
  }
}

@mixin layouts_for_breakpoint($name: null) {
  @include flex-order-for-name($name);
  @include offset-for-name($name);
  @include layout-align-for-name($name);

  @include flex-properties-for-name($name);
  @include layout-for-name($name);
}

@mixin covalent-layout() {
  /*
  *  Apply Mixins to create Layout/Flexbox styles
  *
  */

  @include layouts_for_breakpoint();
  @include layout-padding-margin();

  /**
  * `hide-gt-sm show-gt-lg` should hide from 600px to 1200px
  * `show-md hide-gt-sm` should show from 0px to 960px and hide at >960px
  * `hide-gt-md show-gt-sm` should show everywhere (show overrides hide)`
  *
  *  hide means hide everywhere
  *  Sizes:
  *         $layout-breakpoint-xs:     600px !default;
  *         $layout-breakpoint-sm:     960px !default;
  *         $layout-breakpoint-md:     1280px !default;
  *         $layout-breakpoint-lg:     1920px !default;
  */

  @media (max-width: $layout-breakpoint-xs - 1) {
    // Xtra-SMALL  SCREEN
    [hide-xs],
    [hide] {
      &:not([show-xs]):not([show]) {
        display: none;
      }
    }
    @include layouts_for_breakpoint(xs);
  }

  @media (min-width: $layout-breakpoint-xs) {
    // BIGGER THAN Xtra-SMALL SCREEN
    @include layouts_for_breakpoint(gt-xs);
  }

  @media (min-width: $layout-breakpoint-xs) and (max-width: $layout-breakpoint-sm - 1) {
    // SMALL SCREEN
    [hide-sm],
    [hide-gt-xs] {
      &:not([show-gt-xs]):not([show-sm]):not([show]) {
        display: none;
      }
    }
    [hide-sm]:not([show-sm]):not([show]) {
      display: none;
    }
    @include layouts_for_breakpoint(sm);
  }

  @media (min-width: $layout-breakpoint-sm) {
    // BIGGER THAN SMALL SCREEN
    @include layouts_for_breakpoint(gt-sm);
  }

  @media (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md - 1) {
    // MEDIUM SCREEN
    [hide],
    [hide-gt-xs],
    [hide-gt-sm] {
      &:not([show-gt-xs]):not([show-gt-sm]):not([show-md]):not([show]) {
        display: none;
      }
    }
    [hide-md]:not([show-md]):not([show]) {
      display: none;
    }
    @include layouts_for_breakpoint(md);
  }

  @media (min-width: $layout-breakpoint-md) {
    // BIGGER THAN MEDIUM SCREEN
    @include layouts_for_breakpoint(gt-md);
  }

  @media (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg - 1) {
    // LARGE SCREEN
    [hide],
    [hide-gt-xs],
    [hide-gt-sm],
    [hide-gt-md] {
      &:not([show-gt-xs]):not([show-gt-sm]):not([show-gt-md]):not([show-lg]):not([show]) {
        display: none;
      }
    }
    [hide-lg]:not([show-lg]):not([show]) {
      display: none;
    }

    @include layouts_for_breakpoint(lg);
  }

  @media (min-width: $layout-breakpoint-lg) {
    // BIGGER THAN LARGE SCREEN
    @include layouts_for_breakpoint(gt-lg);
    @include layouts_for_breakpoint(xl);

    // BIGGER THAN LARGE SCREEN
    [hide],
    [hide-gt-xs],
    [hide-gt-sm],
    [hide-gt-md],
    [hide-gt-lg] {
      &:not([show-gt-xs]):not([show-gt-sm]):not([show-gt-md]):not([show-gt-lg]):not([show-xl]):not([show]) {
        display: none;
      }
    }
    [hide-xl]:not([show-xl]):not([show-gt-lg]):not([show]) {
      display: none;
    }
  }
}