<commit_before>/*---------------------
- GRID SETTINGS
----------------------*/
$responsive:true;
$container-width:1200px;
$gap-colum:10px;
$width-breakpoints: (
  D: null, //Desktop
  L: 1200, //Laptop
  T: 992,  //Tablet
  M: 768,  //Mobile
  SM: 568  //Small Mobile
  // Other: xxx
);
/*--------------------
- GRID SYSTEM
---------------------*/
.grid-style{
  position:relative;
  display: inline-block;
  letter-spacing: normal;
  min-height: 1px;
  padding-left: $gap-colum;
  padding-right: $gap-colum;
  vertical-align: top;
}
.container {
  @if $responsive == true { width: 100%; }
  @else { width: $container-width; }
  max-width: $container-width;
  margin-right: auto;
  margin-left: auto;
  padding-left: $gap-colum;
  padding-right: $gap-colum;
}
.container-fluid {
  margin-right: auto;
  margin-left: auto;
  padding-left: $gap-colum;
  padding-right: $gap-colum;
}
.row {margin-left: -$gap-colum;margin-right: -$gap-colum;letter-spacing: -0.33em;}
.row:before, .row:after{ content: " "; /*display: table;*/ }
.row:after{clear: both;}
.row-fluid {margin-left: 0px;margin-right: 0px;letter-spacing: -0.33em;}
.row-fluid:before, .row-fluid:after{ content: " "; /*display: table;*/ }
.row-fluid:after{clear: both;}

@mixin grid-layout($grid-name){
  @for $i from 0 through 12 {
      .#{$grid-name}-#{$i}{
        width: percentage($i/12);
      }
      .#{$grid-name}-offset-#{$i}{
        margin-left: percentage($i/12);
      }
      .#{$grid-name}-left-#{$i}{
        left: percentage($i/12);
      }
      .#{$grid-name}-right-#{$i}{
        right: percentage($i/12);
      }
  }
}

@mixin breakpoint($breakpoint){
  $width: map-get($width-breakpoints, $breakpoint);
  @if $width != null {
    @media screen and (max-width: $width+px) {
      @content;
    }
  } @else {
    @media screen and (max-width: $breakpoint) {
      @content;
    }
  }
}

@each $grid-name, $breakpoint in $width-breakpoints {
  @for $i from 0 through 12 {
      .#{$grid-name}-#{$i}{
        @extend .grid-style;
    }
  }
  @if $breakpoint == null {
    .hidden-#{$grid-name}{display: none;}
    @include grid-layout($grid-name);
  }
  @else {
    @include breakpoint($grid-name) {
      @if $responsive == true{
        @if $breakpoint <= 568 { .container{ max-width: 100%; } }
        @else if $breakpoint <= 768 { .container{ max-width: 100%; } }
        @else if $breakpoint <= 992 { .container{ max-width: 100%; } }
        @else if $breakpoint <= 1200 { .container{ max-width: 100%; } }
      }
      .hidden-#{$grid-name}{display: none;}
      @include grid-layout($grid-name);
    }
  }
}
.no-gap{padding-left: 0;padding-right: 0;}<commit_msg>Change varialbles and mixin's name<commit_after>/*---------------------
- GRID SETTINGS
----------------------*/
$responsive:true;
$container-width:1200px;
$grid-gutter:10px;
$width-breakpoints: (
  D: null, //Desktop
  L: 1200px, //Laptop
  T: 992px,  //Tablet
  M: 768px,  //Mobile
  SM: 568px  //Small Mobile
  // Other: xxx
);
/*--------------------
- GRID SYSTEM
---------------------*/
.grid-style{
  position:relative;
  display: inline-block;
  letter-spacing: normal;
  min-height: 1px;
  padding-left: $grid-gutter;
  padding-right: $grid-gutter;
  vertical-align: top;
}
.container {
  @if $responsive == true { width: 100%; }
  @else { width: $container-width; }
  max-width: $container-width;
  margin-right: auto;
  margin-left: auto;
  padding-left: $grid-gutter;
  padding-right: $grid-gutter;
}
.container-fluid {
  margin-right: auto;
  margin-left: auto;
  padding-left: $grid-gutter;
  padding-right: $grid-gutter;
}
.row {margin-left: -$grid-gutter;margin-right: -$grid-gutter;letter-spacing: -0.33em;}
.row:before, .row:after{ content: " "; /*display: table;*/ }
.row:after{clear: both;}
.row-fluid {margin-left: 0px;margin-right: 0px;letter-spacing: -0.33em;}
.row-fluid:before, .row-fluid:after{ content: " "; /*display: table;*/ }
.row-fluid:after{clear: both;}

@mixin grid-layout($grid-name){
  @for $i from 0 through 12 {
      .#{$grid-name}-#{$i}{
        width: percentage($i/12);
      }
      .#{$grid-name}-offset-#{$i}{
        margin-left: percentage($i/12);
      }
      .#{$grid-name}-left-#{$i}{
        left: percentage($i/12);
      }
      .#{$grid-name}-right-#{$i}{
        right: percentage($i/12);
      }
  }
}

@mixin BREAKPOINT($breakpoint){
  $width: map-get($width-breakpoints, $breakpoint);
  @if $width != null {
    @media screen and (max-width: $width) {
      @content;
    }
  } @else {
    @media screen and (max-width: $breakpoint) {
      @content;
    }
  }
}

@each $grid-name, $breakpoint in $width-breakpoints {
  @for $i from 0 through 12 {
      .#{$grid-name}-#{$i}{
        @extend .grid-style;
    }
  }
  @if $breakpoint == null {
    .hidden-#{$grid-name}{display: none;}
    @include grid-layout($grid-name);
  }
  @else {
    @include BREAKPOINT($grid-name) {
      @if $responsive == true{
        @if $breakpoint <= 568 { .container{ max-width: 100%; } }
        @else if $breakpoint <= 768 { .container{ max-width: 100%; } }
        @else if $breakpoint <= 992 { .container{ max-width: 100%; } }
        @else if $breakpoint <= 1200 { .container{ max-width: 100%; } }
      }
      .hidden-#{$grid-name}{display: none;}
      @include grid-layout($grid-name);
    }
  }
}
.no-gap{padding-left: 0;padding-right: 0;}
{'fraction_non_alphanumeric': 0.22330460846759087, 'fraction_numerical': 0.026976395653802922, 'mean_word_length': 2.500983606557377, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '395568', 'n_tokens_mistral': 2105, 'n_tokens_neox': 1916, 'n_words': 393}