papercss/src/components/_config.scss

// Global PaperCSS Config

// Imports
@import url('https://fonts.googleapis.com/css?family=Neucha|Patrick+Hand+SC');

// Set Colors
$primary: #41403E;
$secondary: #0071DE;

$success: #86a361;
$warning: #ddcd45;
$danger: #a7342d;
$muted: #868e96;

$primary-light: lighten($primary, 50%);
$secondary-light: lighten($secondary, 50%);
$success-light: lighten($success, 30%);
$warning-light: lighten($warning, 30%);
$danger-light: lighten($danger, 45%);
$muted-light: lighten($muted, 35%);

$white-dark: rgba(black, 0.03);
$light-dark: rgba(black, 0.7);
$white: rgba(white, 1);
$main-background: rgba(white, 1);

$primary-text: #FFF;
$secondary-text: $primary;
$success-text: $primary;
$warning-text: $primary;
$danger-text: $primary;
$muted-text: $primary;

// Set class names to generate the css classes on build
$colors: (primary, $primary, $primary-light, $primary-text),
         (secondary, $secondary, $secondary-light, $secondary-text),
         (success, $success, $success-light, $success-text),
         (warning, $warning, $warning-light, $warning-text),
         (danger, $danger, $danger-light, $danger-text),
         (muted, $muted, $muted-light, $muted-text);

@each $colorName, $color, $color-light in $colors {
  .text-#{$colorName} {
    color: $color;
  }
  .background-#{$colorName} {
    background-color: $color-light;
  }
}

// Set Fonts
$global-font-size: 20px;
$header-font: 'Patrick Hand SC';
$body-font: 'Neucha';
$font-color: $primary;

// Sizes for responsive breakpoints
$large-screen: 1200px;
$medium-screen: 992px;
$small-screen: 768px;
$xsmall-screen: 480px;


// Mixins
@mixin resp($max:null, $min:null) {
  @if $max == large or $max == lg  { $max: $large-screen; }
  @if $max == medium or $max == md { $max: $medium-screen; }
  @if $max == small or $max == sm { $max: $small-screen; }
  @if $max == xsmall or $max == xs { $max: $xsmall-screen; }
  @if ($min != null and $max != null) {@media only screen and (max-width: $max) and (min-width: $min) { @content; }}
  @else if($max != null and $min == null){@media only screen and (max-width: $max) { @content; }}
  @else if($min != null and $max == null){@media only screen and (min-width: $min) { @content; }}
  @else { @error "no matching size found";}
}

@mixin hr-after() {
  text-align: center;
  color: lighten($primary, 30%);
  display: block;
  content: "~~~";
  position: relative;
  font-size: 1.5rem;
}

@mixin center-all() {
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}

@mixin col-size($percent) {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 $percent;
  -ms-flex: 0 0 $percent;
  flex: 0 0 $percent;
  max-width: $percent;
}

@mixin make-column($columns) {
  @each $breakpoint, $columnName in $columns {
    // @todo: fix failing resp() mixin here
    @media only screen and (max-width: $breakpoint) {
      @for $i from 1 through $numberOfColumns {
        .#{$columnName}-#{$i} {
          flex: 0 0 $i * 100% / $numberOfColumns;
          max-width: $i * 100% / $numberOfColumns;
        }
      }
    }
  }
}

@mixin li-bullet($char) {
  li:before {
    content: $char;
  }
}

@mixin transition-transform($transition) {
  -webkit-transition: -webkit-transform $transition;
  -moz-transition: -moz-transform $transition;
  -o-transition: -o-transform $transition;
  transition: transform $transition;
}

@mixin translate($x, $y) {
  -webkit-transform: translate($x, $y);
  -ms-transform: translate($x, $y);
  transform: translate($x, $y);
}