<commit_before>/**
 * The Kickoff Flexbox Grid
 * =================================
 * Default grid classes
 * Grid gutter options
 * Modifier Classes (column height and cell alignment)
 * Legacy fallbacks for flexbox
 * Grid span classes
 * Breakpoint stacking
 */

/* Import Grid helpers and mixins */
@import '../mixins/grid-helpers';


/**
 * Basic Usage:
 * =================================
  <div class="g">
    <div class="g-col g-span4 g-span6--mid"></div>
    <div class="g-col g-span8 g-span6--mid"></div>
  </div>
 */
.g {
  display: flex !important; // force display: flex, as otherwise may clash with other components display properties (and the grid won’t work)
  flex-wrap: wrap;
  flex-direction: row;
}

  .g-col {
    display: block;

    // By default, evenly distribute columns
    // n.b. to support non-flexbox browsers, you should always add .g-spanx
    flex: 1 0 0;
    min-width: 0; // this is to make sure that long words don’t get cut off, but wrap as expected
  }

/**
 * Gutter calcs – applied to grid columns in our grid (direct descendants only)
 * Default: pixels (can look at changing to percentage)
 * Usage: gutterCalc() or gutterCalc(false)
 */

// Two types of gutter
// -------------------
// .g--gutter
// Uses padding and fixed gutter px values.
// Pros = Margins will be equal to your $grid-gutter-width (even at larger/smaller container sizes), if that’s what you require
// Cons = Can’t set a border directly to grid containers, as uses negative margins.  Need extra element to get the desired effect

$g-gutter-half: ($grid-gutter-width / 2) + px;

.g--gutter {
  margin-left: -$g-gutter-half;
  margin-right: -$g-gutter-half;

  & > .g-col {
    padding-left: $g-gutter-half;
    padding-right: $g-gutter-half;
  }
}

// .g--gutter--scaled
// Uses margin and percentage values.  Scales the margin as the viewport gets smaller (for RWD)
// Pro = Good for when your container is always the $layout-max-width.  Means can apply borders to grid elements without more markup
// Cons = If container isn’t same size as $layout-max-width, the gutters will also scale (so larger container width === larger gutters and vice versa)

.g--gutter--scaled {
  & > .g-col {
    margin-left: gutterCalc();
    margin-right: 0;

    &:first-child {
      margin-left: 0;
    }
  }
}

.g--stacked {
  & > .g-col {
    flex-basis: 100%;
    max-width: 100%;
    margin-left: 0;
  }
}


/**
 * .g--equalHeight – Equal Height Child Elements
 */
.g--equalHeight {
  > .g-col {
    display: flex;

    & > * {
      flex-basis: 100%;
    }
  }
}


/**
 * Alignment
 * Modifier classes to move our grid elements around
 */
.g--alignTop       { align-items: flex-start; }
.g--alignBottom    { align-items: flex-end; }
.g--alignRight     { justify-content: flex-end; }
.g--alignCenter    { justify-content: center; }
.g--alignCenter--v { align-items: center; }


/**
 * Centering
 * Centers an individual column, rather than the entire grid
 */
.g-col--centered {
  margin: 0 auto;
}

/**
 * Shrinking Content
 * Shrink a .g-col down to only the space it needs (flexbox only)
 */
.g-col--shrink {
  flex-grow: 0;
}


/**
 * Add fallbacks for non-flexbox supporting browsers (for example, IE8/9)
 */
@if $use-legacy-grid {
  .no-flexbox {
    .g {
      display: block !important; // need this for old Safari, as it thinks it understands flexbox but doesn’t really
      @include clearfix;
    }

    .g-col {
      float: left;
      min-height: 1px;
      position: relative;
      clear: none;
      box-sizing: border-box;
    }

    .g--stacked .g-col {
      width: 100%;
    }

    .g--equalHeight {
      > .g-col {
        display: block; // again need to overide old safari thinking it knows flexbox, when it doesn’t really
      }
    }
  }
  //end .no-flexbox
}



/**
 * Grid Span classes (for different breakpoints)
 *
 * Applied by using .g-spanx to .g-col elements, where x is the number of columns
 */

@include gridSpanHelper; // Default sizes

// Responsive sizes only generated if $responsive-grid-sizes == true<commit_msg>Updating --stacked class to --stack<commit_after>/**
 * The Kickoff Flexbox Grid
 * =================================
 * Default grid classes
 * Grid gutter options
 * Modifier Classes (column height and cell alignment)
 * Legacy fallbacks for flexbox
 * Grid span classes
 * Breakpoint stacking
 */

/* Import Grid helpers and mixins */
@import '../mixins/grid-helpers';


/**
 * Basic Usage:
 * =================================
  <div class="g">
    <div class="g-col g-span4 g-span6--mid"></div>
    <div class="g-col g-span8 g-span6--mid"></div>
  </div>
 */
.g {
  display: flex !important; // force display: flex, as otherwise may clash with other components display properties (and the grid won’t work)
  flex-wrap: wrap;
  flex-direction: row;
}

  .g-col {
    display: block;

    // By default, evenly distribute columns
    // n.b. to support non-flexbox browsers, you should always add .g-spanx
    flex: 1 0 0;
    min-width: 0; // this is to make sure that long words don’t get cut off, but wrap as expected
  }

/**
 * Gutter calcs – applied to grid columns in our grid (direct descendants only)
 * Default: pixels (can look at changing to percentage)
 * Usage: gutterCalc() or gutterCalc(false)
 */

// Two types of gutter
// -------------------
// .g--gutter
// Uses padding and fixed gutter px values.
// Pros = Margins will be equal to your $grid-gutter-width (even at larger/smaller container sizes), if that’s what you require
// Cons = Can’t set a border directly to grid containers, as uses negative margins.  Need extra element to get the desired effect

$g-gutter-half: ($grid-gutter-width / 2) + px;

.g--gutter {
  margin-left: -$g-gutter-half;
  margin-right: -$g-gutter-half;

  & > .g-col {
    padding-left: $g-gutter-half;
    padding-right: $g-gutter-half;
  }
}

// .g--gutter--scaled
// Uses margin and percentage values.  Scales the margin as the viewport gets smaller (for RWD)
// Pro = Good for when your container is always the $layout-max-width.  Means can apply borders to grid elements without more markup
// Cons = If container isn’t same size as $layout-max-width, the gutters will also scale (so larger container width === larger gutters and vice versa)

.g--gutter--scaled {
  & > .g-col {
    margin-left: gutterCalc();
    margin-right: 0;

    &:first-child {
      margin-left: 0;
    }
  }
}

.g--stack {
  & > .g-col {
    flex-basis: 100%;
    max-width: 100%;
    margin-left: 0;
  }
}


/**
 * .g--equalHeight – Equal Height Child Elements
 */
.g--equalHeight {
  > .g-col {
    display: flex;

    & > * {
      flex-basis: 100%;
    }
  }
}


/**
 * Alignment
 * Modifier classes to move our grid elements around
 */
.g--alignTop       { align-items: flex-start; }
.g--alignBottom    { align-items: flex-end; }
.g--alignRight     { justify-content: flex-end; }
.g--alignCenter    { justify-content: center; }
.g--alignCenter--v { align-items: center; }


/**
 * Centering
 * Centers an individual column, rather than the entire grid
 */
.g-col--centered {
  margin: 0 auto;
}

/**
 * Shrinking Content
 * Shrink a .g-col down to only the space it needs (flexbox only)
 */
.g-col--shrink {
  flex-grow: 0;
}


/**
 * Add fallbacks for non-flexbox supporting browsers (for example, IE8/9)
 */
@if $use-legacy-grid {
  .no-flexbox {
    .g {
      display: block !important; // need this for old Safari, as it thinks it understands flexbox but doesn’t really
      @include clearfix;
    }

    .g-col {
      float: left;
      min-height: 1px;
      position: relative;
      clear: none;
      box-sizing: border-box;
    }

    .g--stack .g-col {
      width: 100%;
    }

    .g--equalHeight {
      > .g-col {
        display: block; // again need to overide old safari thinking it knows flexbox, when it doesn’t really
      }
    }
  }
  //end .no-flexbox
}



/**
 * Grid Span classes (for different breakpoints)
 *
 * Applied by using .g-spanx to .g-col elements, where x is the number of columns
 */

@include gridSpanHelper; // Default sizes

// Responsive sizes only generated if $responsive-grid-sizes == true
{'fraction_non_alphanumeric': 0.14987714987714987, 'fraction_numerical': 0.007125307125307125, 'mean_word_length': 2.5721807810443176, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 27, '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': '914478', 'n_tokens_mistral': 2749, 'n_tokens_neox': 2620, 'n_words': 887}