<commit_before>// Functions and mixins

// Simple function to output a width declaration based on number
// of columns set in the parameter
// uses: $grid-column-width, $grid-gutter-width
@function cols($n: 1) {
  // add code here...
}


// Mixins
// Responsive breakpoints taken from The Goldilocks Approach
// http://www.designbyfront.com/demo/goldilocks-approach/
@mixin respond-to($media: default) {
  @if $media == small {
    @media screen and (max-width: 30em) {
      @content;
    }
  } @else if $media == large {
    @media screen and (min-width: 33.236em) {
      @content;
    }
  } @else if $media == default {
    @media screen and (min-width: 30em) and (max-width: 63.236em) {
      @content;
    }
  }
}

// Image Replacement
// Hides text off to the side and shows the specified background image
// Height and width are determined by the image dimensions
@mixin image-replace($image) {
  @if not $image or $image == '' {
    @warn "$image needed for replacement to work"
  } @else {
    background: image-url($image) no-repeat 0 0;
    @extend %image-replacement;
    height: image-height($image);
    width: image-width($image);
  }
}

// With Icon
// Used to place an icon or image to the left or right of
// an element. Padding is determined by the image size.
@mixin with-icon($icon, $side: 'left', $position: '0 0') {
  @if not $icon or $icon == '' {
    @warn "No $icon specified"
  } @else {
    background: image-url($icon) no-repeat unquote($position);
    padding-#{side}: floor(image-width($icon) + 5);
  }
}

// Builds a grid and grid units under the CSS rule it's included in
// $gutter defaults to the width set in _variables.scss
// Responsive breakpoints ala the Goldilocks Approach
// (http://www.designbyfront.com/demo/goldilocks-approach/)
// are included in the grid
@mixin grid($cols: 2, $width: 30em, $gutter: $grid-gutter-width) {
  $finalWidth: ($width/$cols) - $gutter;
  width: $width;
  @extend %clearfix;
  .unit {
    @extend %float-left;
    margin-right: $gutter;
    width: $finalWidth;
  }
  .unit.last {
    margin-right: 0;
  }
  @include respond-to(small) {
    width: 30em;
    .unit {
      float: none;
      margin-right: 0;
      width: 30em;
    }
  }
  @include respond-to(large) {
    width: 60em;
    .unit {
      margin-right: $gutter;
      width: $finalWidth;
    }
  }
}

// Add rounded corners
@mixin rounded($radius) {
  @include prefixed(border-radius, $radius);
}

// Utility mixins
// prefixed, adds vendor prefixes to the specified property
@mixin prefixed($property, $value) {
  @each $prefix in $browser-prefixes {
    #{$prefix}#{$property}: $value;
  }
}

@mixin linear-gradient($start, $color-stops, $image: false) {
  @if not $start {
    $start: top;
  }
  @each $prefix in $browser-prefixes {
    @if $image == false {
      background-image: #{$prefix}linear-gradient($start, $color-stops);
    } @else {
      background-image: $image #{$prefix}linear-gradient($start, $color-stops);
    }
  }
}

@mixin box-shadow($shadow...) {
  @include prefixed(box-shadow, $shadow);
}

@mixin float($direction: left) {
  float: $direction;
}

@mixin clear($side: both) {
  clear: $side;
}

@mixin clearfix {
  overflow: hidden;
  *zoom: 1;
}

@mixin inline-block {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}
<commit_msg>add button mixin and slight reorg<commit_after>@import 'variables';
// Functions and mixins

// Simple function to output a width declaration based on number
// of columns set in the parameter
// uses: $grid-column-width, $grid-gutter-width
@function cols($n: 1) {
  // add code here...
}


// Mixins
// Responsive breakpoints taken from The Goldilocks Approach
// http://www.designbyfront.com/demo/goldilocks-approach/
@mixin respond-to($media: default) {
  @if $media == small {
    @media screen and (max-width: 30em) {
      @content;
    }
  } @else if $media == large {
    @media screen and (min-width: 33.236em) {
      @content;
    }
  } @else if $media == default {
    @media screen and (min-width: 30em) and (max-width: 63.236em) {
      @content;
    }
  }
}

// Image Replacement
// Hides text off to the side and shows the specified background image
// Height and width are determined by the image dimensions
@mixin image-replace($image) {
  @if not $image or $image == '' {
    @warn "$image needed for replacement to work"
  } @else {
    background: image-url($image) no-repeat 0 0;
    @extend %image-replacement;
    height: image-height($image);
    width: image-width($image);
  }
}

// With Icon
// Used to place an icon or image to the left or right of
// an element. Padding is determined by the image size.
@mixin with-icon($icon, $side: 'left', $position: '0 0') {
  @if not $icon or $icon == '' {
    @warn "No $icon specified"
  } @else {
    background: image-url($icon) no-repeat unquote($position);
    padding-#{side}: floor(image-width($icon) + 5);
  }
}

// Builds a grid and grid units under the CSS rule it's included in
// $gutter defaults to the width set in _variables.scss
// Responsive breakpoints ala the Goldilocks Approach
// (http://www.designbyfront.com/demo/goldilocks-approach/)
// are included in the grid
@mixin grid($cols: 2, $width: 30em, $gutter: $grid-gutter-width) {
  $finalWidth: ($width/$cols) - $gutter;
  width: $width;
  @extend %clearfix;
  .unit {
    @extend %float-left;
    margin-right: $gutter;
    width: $finalWidth;
  }
  .unit.last {
    margin-right: 0;
  }
  @include respond-to(small) {
    width: 30em;
    .unit {
      float: none;
      margin-right: 0;
      width: 30em;
    }
  }
  @include respond-to(large) {
    width: 60em;
    .unit {
      margin-right: $gutter;
      width: $finalWidth;
    }
  }
}

// Utility mixins

@mixin float($direction: left) {
  float: $direction;
}

@mixin clear($side: both) {
  clear: $side;
}

@mixin clearfix {
  overflow: hidden;
  *zoom: 1;
}

@mixin inline-block {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

// prefixed, adds vendor prefixes to the specified property
@mixin prefixed($property, $value) {
  @each $prefix in $browser-prefixes {
    #{$prefix}#{$property}: $value;
  }
}

// CSS3

// Rounded corners
@mixin rounded($radius) {
  @include prefixed(border-radius, $radius);
}

// Linear gradient
@mixin linear-gradient($start, $color-stops, $image: false) {
  @if not $start {
    $start: top;
  }
  @each $prefix in $browser-prefixes {
    @if $image == false {
      background-image: #{$prefix}linear-gradient($start, $color-stops);
    } @else {
      background-image: $image #{$prefix}linear-gradient($start, $color-stops);
    }
  }
}

// Box shadow
@mixin box-shadow($shadow...) {
  @include prefixed(box-shadow, $shadow);
}

// Modules

// Buttons
@mixin button($type: default) {
  $bg: $button-bg;
  $text: $button-text;
  @if $type == 'pos' or $type == 'positive' {
    $bg: $button-pos-bg;
    $text: $button-pos-text;
  } @else if $type == 'neg' or $type == 'negative' {
    $bg: $button-neg-bg;
    $text: $button-neg-text;
  } @else if $type == 'action' {
    $bg: $button-action-bg;
    $text: $button-action-text;
  } @else if $type == 'warn' {
    $bg: $button-warn-bg;
    $text: $button-warn-text;
  }
  @extend %m-button;
  @include linear-gradient(top, ($bg 55%, darken($bg, 20%)));
  color: $text;
  text-shadow: darken($bg, 20%) 0 1px 0;
  &:hover {
    @include linear-gradient(top, (saturate($bg, 25%) 55%, darken($bg, 20%)));
    @include box-shadow(saturate($bg, 30%) 0 0 5px);
  }
}

{'fraction_non_alphanumeric': 0.15897230028101164, 'fraction_numerical': 0.011641910879164994, 'mean_word_length': 3.0619565217391305, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 4, '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': '2369376', 'n_tokens_mistral': 2710, 'n_tokens_neox': 2600, 'n_words': 742}