gridlex-new.scss

//************************
//    VARIABLES
//************************
$gl-gridName:  grid !default;
$gl-colName:   cell !default;
$gl-gutter:    30px !default; // Total
$gl-col-bottom: $gl-gutter !default;

$breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;

$gl-sm:        "screen and (min-width: 576px)" !default;
$gl-md:        "screen and (min-width: 768px)" !default;
$gl-lg:        "screen and (min-width: 992px)" !default;
$gl-xl:        "screen and (min-width: 1200px)" !default;

// margin and padding values array
$space-values : (
  0,
  1,
  2,
  3,
  4,
  5,
  10,
  15,
  20,
  25,
  30,
  35,
  40,
  45,
  50,
  60,
  70,
  80
) !default;

// margin and padding shorthands
$space-prefixes : (
  p  : padding,
  pt : padding-top,
  pr : padding-right,
  pb : padding-bottom,
  pl : padding-left,
  px : (padding-left, padding-right),
  py : (padding-top, padding-bottom),
  m  : margin,
  mt : margin-top,
  mr : margin-right,
  mb : margin-bottom,
  ml : margin-left,
  mx : (margin-left, margin-right),
  my : (margin-top, margin-bottom),
) !default;

$glp_col-1: (100%/12);
$glp_col-2: ($glp_col-1*2);
$glp_col-3: ($glp_col-1*3);
$glp_col-4: ($glp_col-1*4);
$glp_col-5: ($glp_col-1*5);
$glp_col-6: ($glp_col-1*6);
$glp_col-7: ($glp_col-1*7);
$glp_col-8: ($glp_col-1*8);
$glp_col-9: ($glp_col-1*9);
$glp_col-10: ($glp_col-1*10);
$glp_col-11: ($glp_col-1*11);
$glp_col-12: 100%;

$glp_col-5-12: (100%/5);
$glp_col-7-12: (100%/7);
$glp_col-8-12: (100%/8);
$glp_col-9-12: (100%/9);
$glp_col-10-12: (100%/10);
$glp_col-11-12: (100%/11);

// Function to generate the grid by number
@mixin makeGridByNumber($grid)
{
  [class*="#{$grid}-1"] > .#{$gl-colName}, [class*="#{$grid}-1"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-12; max-width: $glp_col-12; }
  [class*="#{$grid}-2"] > .#{$gl-colName}, [class*="#{$grid}-2"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-6; max-width: $glp_col-6; }
  [class*="#{$grid}-3"] > .#{$gl-colName}, [class*="#{$grid}-3"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-4; max-width: $glp_col-4; }
  [class*="#{$grid}-4"] > .#{$gl-colName}, [class*="#{$grid}-4"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-3; max-width: $glp_col-3; }
  [class*="#{$grid}-5"] > .#{$gl-colName}, [class*="#{$grid}-5"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-5-12; max-width: $glp_col-5-12; }
  [class*="#{$grid}-6"] > .#{$gl-colName}, [class*="#{$grid}-6"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-2; max-width: $glp_col-2; }
  [class*="#{$grid}-7"] > .#{$gl-colName}, [class*="#{$grid}-7"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-7-12; max-width: $glp_col-7-12; }
  [class*="#{$grid}-8"] > .#{$gl-colName}, [class*="#{$grid}-8"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-8-12; max-width: $glp_col-8-12; }
  [class*="#{$grid}-9"] > .#{$gl-colName}, [class*="#{$grid}-9"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-9-12; max-width: $glp_col-9-12; }
  [class*="#{$grid}-10"] > .#{$gl-colName}, [class*="#{$grid}-10"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-10-12; max-width: $glp_col-10-12; }
  [class*="#{$grid}-11"] > .#{$gl-colName}, [class*="#{$grid}-11"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-11-12; max-width: $glp_col-11-12; }
  [class*="#{$grid}-12"] > .#{$gl-colName}, [class*="#{$grid}-12"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-1; max-width: $glp_col-1; }
}

// Function to generate the grid by columns
@mixin makeCol($col)
{
    [class*='#{$gl-gridName}'] {
        > [class*="#{$col}-1"]{ flex-basis: $glp_col-1;max-width: $glp_col-1; }
        > [class*="#{$col}-2"]{ flex-basis: $glp_col-2;max-width: $glp_col-2; }
        > [class*="#{$col}-3"]{ flex-basis: $glp_col-3;max-width: $glp_col-3; }
        > [class*="#{$col}-4"]{ flex-basis: $glp_col-4;max-width: $glp_col-4;}
        > [class*="#{$col}-5"]{ flex-basis: $glp_col-5;max-width: $glp_col-5;}
        > [class*="#{$col}-6"]{ flex-basis: $glp_col-6;max-width: $glp_col-6;}
        > [class*="#{$col}-7"]{ flex-basis: $glp_col-7;max-width: $glp_col-7;}
        > [class*="#{$col}-8"]{ flex-basis: $glp_col-8;max-width: $glp_col-8;}
        > [class*="#{$col}-9"]{ flex-basis: $glp_col-9;max-width: $glp_col-9;}
        > [class*="#{$col}-10"]{ flex-basis: $glp_col-10;max-width: $glp_col-10;}
        > [class*="#{$col}-11"]{ flex-basis: $glp_col-11;max-width: $glp_col-11;}
        > [class*="#{$col}-12"]{ flex-basis: $glp_col-12;max-width: $glp_col-12;}
    }
}

// Function to generate the offset
@mixin makeOff($off)
{
    [class*="#{$gl-gridName}"]{
        > [data-left*="#{$off}-0"]{ margin-left: 0; }
        > [data-left*="#{$off}-1"]{ margin-left: $glp_col-1; }
        > [data-left*="#{$off}-2"]{ margin-left: $glp_col-2; }
        > [data-left*="#{$off}-3"]{ margin-left: $glp_col-3; }
        > [data-left*="#{$off}-4"]{ margin-left: $glp_col-4; }
        > [data-left*="#{$off}-5"]{ margin-left: $glp_col-5; }
        > [data-left*="#{$off}-6"]{ margin-left: $glp_col-6; }
        > [data-left*="#{$off}-7"]{ margin-left: $glp_col-7; }
        > [data-left*="#{$off}-8"]{ margin-left: $glp_col-8; }
        > [data-left*="#{$off}-9"]{ margin-left: $glp_col-9; }
        > [data-left*="#{$off}-10"]{ margin-left: $glp_col-10; }
        > [data-left*="#{$off}-11"]{ margin-left: $glp_col-11; }

        > [data-right*="#{$off}-0"]{ margin-right: 0; }
        > [data-right*="#{$off}-1"]{ margin-right: $glp_col-1; }
        > [data-right*="#{$off}-2"]{ margin-right: $glp_col-2; }
        > [data-right*="#{$off}-3"]{ margin-right: $glp_col-3; }
        > [data-right*="#{$off}-4"]{ margin-right: $glp_col-4; }
        > [data-right*="#{$off}-5"]{ margin-right: $glp_col-5; }
        > [data-right*="#{$off}-6"]{ margin-right: $glp_col-6; }
        > [data-right*="#{$off}-7"]{ margin-right: $glp_col-7; }
        > [data-right*="#{$off}-8"]{ margin-right: $glp_col-8; }
        > [data-right*="#{$off}-9"]{ margin-right: $glp_col-9; }
        > [data-right*="#{$off}-10"]{ margin-right: $glp_col-10; }
        > [data-right*="#{$off}-11"]{ margin-right: $glp_col-11; }
    }
}

[class*="#{$gl-gridName}"] {
  box-sizing: border-box;
  display: flex;
  flex-flow: row wrap;
  margin: 0 (-$gl-gutter/2);
}
.#{$gl-gridName} > .#{$gl-colName},
[class*="#{$gl-gridName}"] > [class*="#{$gl-colName}-"],
.#{$gl-gridName}.#{$gl-colName},
[class*="#{$gl-gridName}"][class*="#{$gl-colName}-"] {
  box-sizing: border-box;
  flex: 0 0 auto;
  padding: 0 ($gl-gutter/2) $gl-col-bottom;
  width: 100%;
  position: relative;
}

.#{$gl-colName},
.#{$gl-gridName} > .#{$gl-colName},
.#{$gl-gridName}.#{$gl-colName} {
  flex: 1 1 0%;
}

[class*="#{$gl-gridName}"].#{$gl-colName},
[class*="#{$gl-gridName}"][class*="#{$gl-colName}-"],
[class="#{$gl-colName}"] > [class*="#{$gl-colName}"], 
[class*="#{$gl-colName}-"] > [class*="#{$gl-colName}"]{
  margin: 0;
  padding: 0;
}

/************************
    HELPERS SUFFIXES
*************************/
// FOR GRID
[class*="#{$gl-gridName}-"] {
// No spacing between cols : noGutter
    > [class*="#{$gl-colName}"]{
      padding: 0;
    }
// Equal heights columns
  &[class*="-equalHeight"] > [class*="#{$gl-colName}"]{
    display: flex;
  }
// Removes the padding-bottom
  &[class*="-noBottom"] > [class*="#{$gl-colName}"]{
    padding-bottom: 0;
  }
  // No Wrapping
  &[class*="-noWrap"]{
    flex-wrap: nowrap;
  }
}

[class*="flex-"] {
  &[class*="-equalHeight"] {
    display: flex;
  }
}

[class*="flex-flex"] {
  box-sizing: border-box;
  display: flex;
}

[class*="flex-children"] > * {
    width: 100%;
}

[class*="#{$gl-gridName}-"], 
[class*="flex-"] {
  &[class*="-noGutter"]{
    margin: 0;
  }
// Horizontal alignment
  &[class*="-center"]{
    justify-content: center;
  }
  &[class*="-right"]{
    justify-content: flex-end;
    align-self: flex-end;
    margin-left: auto;
  }
// Vertical alignment
  &[class*="-top"]{
    align-items: flex-start;
  }
  &[class*="-middle"]{
    align-items: center;
  }
  &[class*="-bottom"]{
    align-items: flex-end;
  }

// Orders
  &[class*="-reverse"]{
    flex-direction: row-reverse;
  }
  &[class*="-column"] {
    flex-direction: column;
    > [class*="#{$gl-colName}-"] {
      flex-basis: auto;
    }
  }
  &[class*="-column-reverse"]{
    flex-direction: column-reverse;
  }

// Spaces between and around cols
  &[class*="-spaceBetween"]{
    justify-content: space-between;
  }
  &[class*="-spaceAround"]{
    justify-content: space-around;
  }
}

// FOR COL
[class*="#{$gl-colName}-"]{
  &[class*="-top"]{
    align-self: flex-start;
  }
  &[class*="-middle"]{
    align-self: center;
  }
  &[class*="-bottom"]{
    align-self: flex-end;
  }
  &[class*="-first"]{
    order: -1;
  }
  &[class*="-last"]{
    order: 1;
  }
}


/********************************************
    Responsive Alignment and Hidden
*********************************************/
@mixin responsiveDisplay($breakpoints) {
  @each $breakpoint-name, $breakpoint-value in $breakpoints {
    @if($breakpoint-value == 0) {
      [class*="#{$gl-colName}-"]:not([class*="#{$gl-colName}-0"]) {
        display: block;
      }
      [class*="#{$gl-gridName}"][class*="#{$gl-colName}-"]:not([class*="#{$gl-colName}-0"]) {
        display: flex;
      }
      [class*="#{$gl-colName}-0"] {
        display: none;
      }
      @content
    }
    @else {
      @media screen and (min-width: $breakpoint-value) {
        [class*="#{$gl-colName}-"]:not([class*="_#{$breakpoint-name}-0"]) {
          display: block;
        }
        [class*="#{$gl-gridName}"][class*="#{$gl-colName}-"]:not([class*="_#{$breakpoint-name}-0"])  {
          display: flex;
        }
        [class*="#{$gl-colName}-"][class*="_#{$breakpoint-name}-0"]{
          display: none;
        }
        @content
      }
    }
  }
}
@include responsiveDisplay($breakpoints);

/************************
    GRID BY NUMBER
*************************/
@include makeGridByNumber(#{$gl-gridName});

@media #{$gl-sm}{
  @include makeGridByNumber(_sm);
}
@media #{$gl-md}{
  @include makeGridByNumber(_md);
}
@media #{$gl-lg}{
  @include makeGridByNumber(_lg);
}
@media #{$gl-xl}{
  @include makeGridByNumber(_xl);
}

/************************
    COLS SIZES
*************************/
@include makeCol(#{$gl-colName});
@include makeOff(off);

@media #{$gl-sm}{
  @include makeCol(_sm);
  @include makeOff(_sm);
}
@media #{$gl-md}{
  @include makeCol(_md);
  @include makeOff(_md);
}
@media #{$gl-lg}{
  @include makeCol(_lg);
  @include makeOff(_lg);
}
@media #{$gl-xl}{
  @include makeCol(_xl);
  @include makeOff(_xl);
}

/************************
    SPACING
*************************/
@mixin print-values-xs($prefixes, $breakpoint-name, $values) {
  @each $attr-short, $attr-long in $prefixes {
    @each $value in $values {
      .#{$attr-short}-#{$value} {
        @if(length($attr-long)) {
          @each $a in $attr-long {
            #{$a}: #{$value}px;
          }
        } @else {
          #{$attr-long}: #{$value}px;
        }
      }
    }
  }
}

@mixin print-values($prefixes, $breakpoint-name, $values) {
  @each $attr-short, $attr-long in $prefixes {
    @each $value in $values {
      .#{$attr-short}-#{$breakpoint-name}-#{$value} {
        @if(length($attr-long)) {
          @each $a in $attr-long {
            #{$a}: #{$value}px;
          }
        } @else {
          #{$attr-long}: #{$value}px;
        }
      }
    }
  }
}

// main function definition
@mixin make-space($prefixes, $breakpoints, $values) {
  @each $breakpoint-name, $breakpoint-value in $breakpoints {
    // if xs value = 0, set it global without media queries
    @if($breakpoint-value == 0) {
      @include print-values-xs($prefixes, $breakpoint-name, $values);
    }
    // breakpoint values that not equal to 0
    @else {
      @media screen and (min-width: $breakpoint-value) {
        @include print-values($prefixes, $breakpoint-name, $values);
      }
    }
  }
}
@include make-space($space-prefixes, $breakpoints, $space-values );







  [class*="align-l"]  { text-align: left; }
  [class*="align-r"] { text-align: right; }
  [class*="align-c"]  { text-align: center; }
  [class*="align-j"]  { text-align: justify; }
  
  [class*="float-l"] { float: left; }
  [class*="float-r"] { float: right; }
  [class*="float-n"] { float: none; }


@media ( min-width: 576px ) {
  [class*="align-"][class*="_sm-align-l"] , [class*="mq_"][class*="_sm-align-l"]  { text-align: left; }
  [class*="align-"][class*="_sm-align-r"] , [class*="mq_"][class*="_sm-align-r"] { text-align: right; }
  [class*="align-"][class*="_sm-align-c"] , [class*="mq_"][class*="_sm-align-c"] { text-align: center; }
  [class*="align-"][class*="_sm-align-j"],  [class*="mq_"][class*="_sm-align-j"] { text-align: justify; }
  
  [class*="align-"][class*="_sm-float-l"] , [class*="mq_"][class*="_sm-float-l"] { float: left; }
  [class*="align-"][class*="_sm-float-l"] , [class*="mq_"][class*="_sm-float-r"] { float: right; }
  [class*="align-"][class*="_sm-float-l"] , [class*="mq_"][class*="_sm-float-n"] { float: none; }
}

@media ( min-width: 768px ) {
  [class*="align-"][class*="_md-align-l"] , [class*="mq_"][class*="_md-align-l"]  { text-align: left; }
  [class*="align-"][class*="_md-align-r"] , [class*="mq_"][class*="_md-align-r"] { text-align: right; }
  [class*="align-"][class*="_md-align-c"] , [class*="mq_"][class*="_md-align-c"] { text-align: center; }
  [class*="align-"][class*="_md-align-j"] , [class*="mq_"][class*="_md-align-j"] { text-align: justify; }
  
  [class*="align-"][class*="_md-align-l"] , [class*="mq_"][class*="_md-float-l"] { float: left; }
  [class*="align-"][class*="_md-align-r"] , [class*="mq_"][class*="_md-float-r"] { float: right; }
  [class*="align-"][class*="_md-align-n"] , [class*="mq_"][class*="_md-float-n"] { float: none; }
}
  
@media ( min-width: 992px ) {
  [class*="align-"][class*="_lg-align-l"] , [class*="mq_"][class*="_lg-align-l"]  { text-align: left; }
  [class*="align-"][class*="_lg-align-r"] , [class*="mq_"][class*="_lg-align-r"] { text-align: right; }
  [class*="align-"][class*="_lg-align-c"] , [class*="mq_"][class*="_lg-align-c"] { text-align: center; }
  [class*="align-"][class*="_lg-align-j"] , [class*="mq_"][class*="_lg-align-j"] { text-align: justify; }
  
  [class*="align-"][class*="_lg-float-l"] , [class*="mq_"][class*="_lg-float-l"] { float: left; }
  [class*="align-"][class*="_lg-float-r"] , [class*="mq_"][class*="_lg-float-r"] { float: right; }
  [class*="align-"][class*="_lg-float-n"] , [class*="mq_"][class*="_lg-float-n"] { float: none; }
}
  
@media ( min-width: 1200px ) {
  [class*="align-"][class*="_xl-align-l"] , [class*="mq_"][class*="_xl-align-l"]  { text-align: left; }
  [class*="align-"][class*="_xl-align-r"] , [class*="mq_"][class*="_xl-align-r"] { text-align: right; }
  [class*="align-"][class*="_lg-align-c"] , [class*="mq_"][class*="_xl-align-c"] { text-align: center; }
  [class*="align-"][class*="_xl-align-j"] , [class*="mq_"][class*="_xl-align-j"] { text-align: justify; }
  
  [class*="align-"][class*="_xl-float-l"] , [class*="mq_"][class*="_xl-float-l"] { float: left; }
  [class*="align-"][class*="_xl-float-r"] , [class*="mq_"][class*="_xl-float-r"] { float: right; }
  [class*="align-"][class*="_xl-float-n"] , [class*="mq_"][class*="_xl-float-n"] { float: none; }
}