<commit_before>// -----------------------------------------------------------------------------
//
//  Column based grid setup
//
// -----------------------------------------------------------------------------

[class*="grid-wrapper--"]
  @extend %clearfix
  box-sizing: border-box

  > [class*="col--"]
    box-sizing: border-box
    float: left
    .ie7 &, .no-boxsizing &
      padding-left: 0


// -----------------------------------------------------------------------------
// The modifier on the grid-wrapper determines the width of the gutters
// e.g. grid-wrapper--10
// -----------------------------------------------------------------------------

$gutter-widths: 10, 15, 20, 30

.responsive
  [class*="grid-wrapper--"]
    margin-left: 0
    > [class*="col--"]
      padding-left: 0

@each $gutter-width in $gutter-widths

  .grid-wrapper--#{$gutter-width}
    margin-left: -#{$gutter-width}px

    > [class*="col--"]
      padding-left: #{$gutter-width}px

  .responsive
    +respond-to(wide-view)
      .grid-wrapper--#{$gutter-width}
        margin-left: -#{$gutter-width}px

        > [class*="col--"]
          padding-left: #{$gutter-width}px


// -----------------------------------------------------------------------------
// Proportional Grids
//
// The modifier on the column determines its own width
// -----------------------------------------------------------------------------

.col--one-half
  width: percentage(1/2)

.col--one-third
  width: percentage(1/3)

.col--two-thirds
  width: percentage(2/3)

.col--one-quarter
  width: percentage(1/4)

.col--three-quarters
  width: percentage(3/4)

.col--one-fifth
  width: percentage(1/5)

.col--two-fifths
  width: percentage(2/5)

.col--three-fifths
  width: percentage(3/5)

.col--four-fifths
  width: percentage(4/5)

.col--one-whole
  width: 100%

// -----------------------------------------------------------------------------
// Flexible, collapsible grid
//
// 1 to 2 to 3 to 4 to 6 columns
// -----------------------------------------------------------------------------
.grid-flex
  overflow: hidden
  min-width: 180px
  max-width: 1600px
  margin: 0 auto
  padding: 5px 0

.grid-flex__cell
  float: left
  +box-sizing(border-box)
  padding: 5px
  width: percentage(1 / 4)

  // This doesn't really need to hide behind a flag but for
  // consistency with current Rizzo, it does.
  .responsive &
    width: 100%

    @media only screen and (min-width: 320px)
      width: percentage(1 / 2)

    @media only screen and (min-width: 580px)
      width: percentage(1 / 3)

    @media only screen and (min-width: 760px)
      width: percentage(1 / 4)

    @media only screen and (min-width: 1020px)
      width: percentage(1 / 6)

  > .tile
    min-width: 0
    width: 100%
    max-width: none<commit_msg>Fix missed box-sizing error<commit_after>// -----------------------------------------------------------------------------
//
//  Column based grid setup
//
// -----------------------------------------------------------------------------

[class*="grid-wrapper--"]
  @extend %clearfix
  box-sizing: border-box

  > [class*="col--"]
    box-sizing: border-box
    float: left
    .ie7 &, .no-boxsizing &
      padding-left: 0


// -----------------------------------------------------------------------------
// The modifier on the grid-wrapper determines the width of the gutters
// e.g. grid-wrapper--10
// -----------------------------------------------------------------------------

$gutter-widths: 10, 15, 20, 30

.responsive
  [class*="grid-wrapper--"]
    margin-left: 0
    > [class*="col--"]
      padding-left: 0

@each $gutter-width in $gutter-widths

  .grid-wrapper--#{$gutter-width}
    margin-left: -#{$gutter-width}px

    > [class*="col--"]
      padding-left: #{$gutter-width}px

  .responsive
    +respond-to(wide-view)
      .grid-wrapper--#{$gutter-width}
        margin-left: -#{$gutter-width}px

        > [class*="col--"]
          padding-left: #{$gutter-width}px


// -----------------------------------------------------------------------------
// Proportional Grids
//
// The modifier on the column determines its own width
// -----------------------------------------------------------------------------

.col--one-half
  width: percentage(1/2)

.col--one-third
  width: percentage(1/3)

.col--two-thirds
  width: percentage(2/3)

.col--one-quarter
  width: percentage(1/4)

.col--three-quarters
  width: percentage(3/4)

.col--one-fifth
  width: percentage(1/5)

.col--two-fifths
  width: percentage(2/5)

.col--three-fifths
  width: percentage(3/5)

.col--four-fifths
  width: percentage(4/5)

.col--one-whole
  width: 100%

// -----------------------------------------------------------------------------
// Flexible, collapsible grid
//
// 1 to 2 to 3 to 4 to 6 columns
// -----------------------------------------------------------------------------
.grid-flex
  overflow: hidden
  min-width: 180px
  max-width: 1600px
  margin: 0 auto
  padding: 5px 0

.grid-flex__cell
  float: left
  box-sizing: border-box
  padding: 5px
  width: percentage(1 / 4)

  // This doesn't really need to hide behind a flag but for
  // consistency with current Rizzo, it does.
  .responsive &
    width: 100%

    @media only screen and (min-width: 320px)
      width: percentage(1 / 2)

    @media only screen and (min-width: 580px)
      width: percentage(1 / 3)

    @media only screen and (min-width: 760px)
      width: percentage(1 / 4)

    @media only screen and (min-width: 1020px)
      width: percentage(1 / 6)

  > .tile
    min-width: 0
    width: 100%
    max-width: none

{'fraction_non_alphanumeric': 0.3434144595561918, 'fraction_numerical': 0.028990694345025055, 'mean_word_length': 1.2205005959475566, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 13, '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': '915887', 'n_tokens_mistral': 1780, 'n_tokens_neox': 1611, 'n_words': 405}