_mixin.scss

@import "util";

$_fx-layout-current-direction: null;

@mixin fx-layout($direction-wrap: row, $axis: null, $layout-gap-value: null) {
  $direction: row;
  $wrap: null;
  $main-axis-value: null;
  $cross-axis-value: null;

  @if type-of($direction-wrap) == string {
    $direction: $direction-wrap;
  } @else if type-of($direction-wrap) == list {
    $direction: nth($direction-wrap, 1);
    $wrap: nth($direction-wrap, 2);
  }

  @if $axis != null {
    @if type-of($axis) == list {
      $main-axis-value: nth($axis, 1);
      $cross-axis-value: nth($axis, 2);
    } @else if type-of($axis) == string {
      $main-axis-value: $axis;
      $cross-axis-value: stretch;
    }
  }

  @include _support-value($direction, (row, column, row-reverse, column-reverse));
  @include _support-value($wrap, (wrap, null));

  $max-cross: if($direction == column or $direction == column-reverse, width, height);
  $_fx-layout-current-direction: $direction !global;

  display: flex;
  box-sizing: border-box;
  flex-direction: $direction;
  @include _fx-layout-align-main-axis($main-axis-value);
  @include _fx-layout-align-cross-axis($cross-axis-value);
  @include _fx-wrap($wrap);
  @include _fx-layout-gap($layout-gap-value, $direction);
  @if $cross-axis-value != null {
    max-#{$max-cross}: 100%;
  }
}

@mixin fx-flex($params: '', $parent-direction: null) {
  $parent-direction: if($parent-direction != null, $parent-direction,
    if($_fx-layout-current-direction != null, $_fx-layout-current-direction, row));

  @include _support-value($parent-direction, (row, column, row-reverse, column-reverse));

  $grow: 1;
  $shrink: 1;
  $basis: 0%;
  $min-value: null;
  $max-value: null;
  $max-cross: if($parent-direction == column or $parent-direction == column-reverse, height, width);

  @if type-of($params) == string {
    @include _support-value($params, ('', none, nogrow, grow, initial, auto, noshrink));
    @if $params == '' {
      //  default 값 사용
    } @else if $params == none {
      $grow: 0;
      $shrink: 0;
      $basis: auto;
    } @else if $params == nogrow {
      $grow: 0;
      $shrink: 1;
      $basis: auto;
    } @else if $params == grow {
      $grow: 1;
      $shrink: 1;
      $basis: 100%;
      $max-value: 100%;
    } @else if $params == initial {
      $grow: 0;
      $shrink: 1;
      $basis: auto;
    } @else if $params == auto {
      $grow: 1;
      $shrink: 1;
      $basis: auto;
      $min-value: auto;
    } @else if $params == noshrink {
      $grow: 1;
      $shrink: 0;
      $basis: auto;
    }
  } @else if type-of($params) == number {
    @include _support-value(unit($params), ('', '%', px, vh, vw));
    @if $params != 0 {
      $params: if(unitless($params), $params + '%', $params);
      $basis: $params;
      $max-value: $basis;
      $min-value: if(unit($basis) == px, $basis, null);
    }
  } @else if type-of($params) == list {
    $grow: nth($params, 1);
    $shrink: nth($params, 2);
    $basis: nth($params, 3);
  }

  box-sizing: border-box;
  flex-grow: $grow;
  flex-shrink: $shrink;
  flex-basis: $basis;

  @if $max-value != null {
    max-#{$max-cross}: $max-value;
  }
  @if $min-value != null {
    min-#{$max-cross}: $min-value;
  }
}

@mixin fx-flex-order($order: 0) {
  @include _only-support-int($order);
  order: $order;
}

@mixin fx-flex-offset($offset, $parent-direction: null) {
  $parent-direction: if($parent-direction != null, $parent-direction,
    if($_fx-layout-current-direction != null, $_fx-layout-current-direction, row));

  @include _support-value(unit($offset), ('', '%', px, vh, vw));
  @include _support-value($parent-direction, (row, column, row-reverse, column-reverse));

  $offset: if(unitless($offset), $offset + '%', $offset);
  $margin-direction: if($parent-direction == column or $parent-direction == column-reverse, top, left);

  margin-#{$margin-direction}: $offset;
}

@mixin fx-flex-align($align) {
  @include _support-value($align, (start, center, end, baseline, stretch));
  $align: if($align == start or $align == end, flex-#{$align}, $align);
  align-self: $align;
}

@mixin fx-flex-fill {
  margin: 0;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
}

@mixin fx-fill {
  @include fx-flex-fill;
}