<commit_before>// Mixins

// Font-styles
@mixin font-style1($color:"") {
  font-family: $sans;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: $small;
  line-height: 20px;
}

@mixin font-style2($color:"") {
  font-family: $sans;
  font-size: $med;
  font-weight: 300;
  letter-spacing: 0.04em;
}

@mixin font-style3 {
  font: italic 700 27px/30px $serif;
  color: $white;
}

// Button style
@mixin button-style {
  @include font-style1($dk-blue);
  min-width: 150px;
  border: 3px solid $dk-blue;
  padding: 3px 5px 2px;
  display: inline-block;
  text-align: center;
  background: none;
  
  &:hover {
    color: $color-bg;
    background: $dk-blue;
  }

  @include phone{
    width:100%;
  }
}

// Support for styling input placeholder text
@mixin placeholder {
  &.placeholder {
    @content;
  }
  &::-moz-placeholder {
    @content;
  }
  &::-webkit-input-placeholder {
    @content;
  }
}

// Clearfix
@mixin clearfix {
  *zoom: 1;
  &:before, &:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden;
  }
  &:after {
    clear: both;
  }
}

// Easily verically align any element (courtesey of @seb_ekstrom)
@mixin vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

// retina.scss
// Defaults to png but can be overwritten to jpg or gif
// $image name is equal to the image name with out it's extention - 'example.png' would be defined as 'example'
// A helper mixin for applying high-resolution background images (http://www.retinajs.com)

@mixin at2x($image_name, $w: auto, $h: auto, $extention: '.png') {
  background-image: image_url($image_name + $extention);
  $x2img : $image_name + '@2x' + $extention;

  @media all and (-webkit-min-device-pixel-ratio : 1.5) {
    background-image: image_url($x2img);
    background-size: $w auto;
  }
}

// ---------------------------------------------------------------------------------------------------------------------
//
//  Author: <NAME>
//  www: http://paranoida.com/
//  twitter: http://twitter.com/paranoida
//  dribbble: http://dribbble.com/paranoida
//
//  Licensed under a MIT License
//
// ---------------------------------------------------------------------------------------------------------------------

// ---------------------------------------------------------------------------------------------------------------------
// --- screen ----------------------------------------------------------------------------------------------------------
// ---------------------------------------------------------------------------------------------------------------------
@mixin phone {
  @media screen and (max-width: #{$breakpoint-small}){
    @content;
  }
}
@mixin tablet-only {
  @media screen and (min-width: #{$breakpoint-medium}) and (max-width: #{$breakpoint-large - 1px}){
    @content;
  }
}
@mixin tablet {
  @media screen and (min-width: #{$breakpoint-medium}) {
    @content;
  }
}
@mixin desktop {
  @media screen and (min-width: #{$breakpoint-large}) {
    @content;
  }
}

// ---------------------------------------------------------------------------------------------------------------------
// --- hdpi ------------------------------------------------------------------------------------------------------------
// ---------------------------------------------------------------------------------------------------------------------

// Based on bourbon hidpi-media-queries file (https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_hidpi-media-query.scss)
// HiDPI mixin. Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/)

@mixin hdpi($ratio: 1.3)
{
  @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
  only screen and (min--moz-device-pixel-ratio: $ratio),
  only screen and (-o-min-device-pixel-ratio: #{$ratio}/1),
  only screen and (min-resolution: #{round($ratio*96)}dpi),
  only screen and (min-resolution: #{$ratio}dppx)
  {
    @content; 
  }
}


// Freaking easy responsive rows of items by @chriscoyier (http://css-tricks.com/video-screencasts/132-quick-useful-case-sass-math-mixins/)
@mixin rowMachine($numPerRow, $margin) {
  width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow);
  &:nth-child(n) {
    margin-bottom: $margin;
    margin-right: $margin;
  }
  &:nth-child(#{$numPerRow}n) {
    margin-right: 0;
    margin-bottom: 0;
  }
}

@mixin darkenShift($num1, $num2, $startColor, $adjustPercent, $i:1) {
  @for $i from $num1 through $num2 {
    &:nth-of-type(#{$i}) {
     background-color: darken($startColor, ($i * $adjustPercent));
    }
    $i: $i + 1
  }
}
<commit_msg>better button styles for mobile -> desktop<commit_after>// Mixins

// Font-styles
@mixin font-style1($color:"") {
  font-family: $sans;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: $small;
  line-height: 20px;
}

@mixin font-style2($color:"") {
  font-family: $sans;
  font-size: $med;
  font-weight: 300;
  letter-spacing: 0.04em;
}

@mixin font-style3 {
  font: italic 700 27px/30px $serif;
  color: $white;
}

// Button style
@mixin button-style {
  @include font-style1($dk-blue);
  border: 3px solid $dk-blue;
  padding: 3px 5px 2px;
  text-align: center;
  background: none;
  display: block;

  @include tablet {
    min-width: 150px;
    display: inline-block;
  }

  &:hover {
    color: $color-bg;
    background: $dk-blue;
  }
}

// Support for styling input placeholder text
@mixin placeholder {
  &.placeholder {
    @content;
  }
  &::-moz-placeholder {
    @content;
  }
  &::-webkit-input-placeholder {
    @content;
  }
}

// Clearfix
@mixin clearfix {
  *zoom: 1;
  &:before, &:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden;
  }
  &:after {
    clear: both;
  }
}

// Easily verically align any element (courtesey of @seb_ekstrom)
@mixin vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

// retina.scss
// Defaults to png but can be overwritten to jpg or gif
// $image name is equal to the image name with out it's extention - 'example.png' would be defined as 'example'
// A helper mixin for applying high-resolution background images (http://www.retinajs.com)

@mixin at2x($image_name, $w: auto, $h: auto, $extention: '.png') {
  background-image: image_url($image_name + $extention);
  $x2img : $image_name + '@2x' + $extention;

  @media all and (-webkit-min-device-pixel-ratio : 1.5) {
    background-image: image_url($x2img);
    background-size: $w auto;
  }
}

// ---------------------------------------------------------------------------------------------------------------------
//
//  Author: <NAME>
//  www: http://paranoida.com/
//  twitter: http://twitter.com/paranoida
//  dribbble: http://dribbble.com/paranoida
//
//  Licensed under a MIT License
//
// ---------------------------------------------------------------------------------------------------------------------

// ---------------------------------------------------------------------------------------------------------------------
// --- screen ----------------------------------------------------------------------------------------------------------
// ---------------------------------------------------------------------------------------------------------------------
@mixin phone {
  @media screen and (max-width: #{$breakpoint-small}){
    @content;
  }
}
@mixin tablet-only {
  @media screen and (min-width: #{$breakpoint-medium}) and (max-width: #{$breakpoint-large - 1px}){
    @content;
  }
}
@mixin tablet {
  @media screen and (min-width: #{$breakpoint-medium}) {
    @content;
  }
}
@mixin desktop {
  @media screen and (min-width: #{$breakpoint-large}) {
    @content;
  }
}

// ---------------------------------------------------------------------------------------------------------------------
// --- hdpi ------------------------------------------------------------------------------------------------------------
// ---------------------------------------------------------------------------------------------------------------------

// Based on bourbon hidpi-media-queries file (https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_hidpi-media-query.scss)
// HiDPI mixin. Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/)

@mixin hdpi($ratio: 1.3)
{
  @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
  only screen and (min--moz-device-pixel-ratio: $ratio),
  only screen and (-o-min-device-pixel-ratio: #{$ratio}/1),
  only screen and (min-resolution: #{round($ratio*96)}dpi),
  only screen and (min-resolution: #{$ratio}dppx)
  {
    @content; 
  }
}


// Freaking easy responsive rows of items by @chriscoyier (http://css-tricks.com/video-screencasts/132-quick-useful-case-sass-math-mixins/)
@mixin rowMachine($numPerRow, $margin) {
  width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow);
  &:nth-child(n) {
    margin-bottom: $margin;
    margin-right: $margin;
  }
  &:nth-child(#{$numPerRow}n) {
    margin-right: 0;
    margin-bottom: 0;
  }
}

@mixin darkenShift($num1, $num2, $startColor, $adjustPercent, $i:1) {
  @for $i from $num1 through $num2 {
    &:nth-of-type(#{$i}) {
     background-color: darken($startColor, ($i * $adjustPercent));
    }
    $i: $i + 1
  }
}

{'fraction_non_alphanumeric': 0.33147632311977715, 'fraction_numerical': 0.017022593624264934, 'mean_word_length': 1.6059139784946237, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 6, 'https://': 2, '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': '5708667', 'n_tokens_mistral': 3157, 'n_tokens_neox': 2978, 'n_words': 674}