papercss/src/core/_config.scss

/**
  Global PaperCSS Config
*/

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

// Set theme colors
$primary: #41403E !default;
$secondary: #0071DE !default;

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

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

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

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

$shadow-color-regular: hsla(0,0,0%,.2) !default;
$shadow-color-hover: hsla(0,0,0%,.3) !default;


// Map to set your color names
$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);
/**
  This Loop will generate the various .text- and .background- classes
  based on the $colors map above.
*/
@each $colorName, $color, $color-light in $colors {
  .text-#{$colorName} {
    color: $color;
  }
  .background-#{$colorName} {
    background-color: $color-light;
  }
}

// Font settings
$global-font-size: 20px !default;
$header-font: 'Patrick Hand SC' !default;
$body-font: 'Neucha' !default;
$font-color: $primary !default;

// Responsive breakpoints
$large-screen: 1200px !default;
$medium-screen: 992px !default;
$small-screen: 768px !default;
$xsmall-screen: 480px !default;

// Sizes for shadows
$shadow-small: 10px 19px 17px -13px $shadow-color-regular !default;
$shadow-regular: 15px 28px 25px -18px $shadow-color-regular !default;
$shadow-large: 20px 38px 34px -26px $shadow-color-regular !default;
$shadow-hover: 2px 8px 8px -5px $shadow-color-hover !default;


// Mixins
/**
  Assign a border style to a component selector.
  @param    integer
  @default  1
*/
@mixin border-style($style: 1) {
  @if $style==1 {
    border-top-left-radius: 255px 15px;
    border-top-right-radius: 15px 225px;
    border-bottom-right-radius: 225px 15px;
    border-bottom-left-radius: 15px 255px;
  }
  @if $style==2 {
    border-top-left-radius: 125px 25px;
    border-top-right-radius: 10px 205px;
    border-bottom-right-radius: 20px 205px;
    border-bottom-left-radius: 185px 25px;
  }
  @if $style==3 {
    border-top-left-radius: 15px 225px;
    border-top-right-radius: 255px 15px;
    border-bottom-left-radius: 225px 15px;
    border-bottom-right-radius: 15px 255px;
  }
  @if $style==4 {
    border-top-left-radius: 15px 225px;
    border-top-right-radius: 25px 150px;
    border-bottom-left-radius: 25px 115px;
    border-bottom-right-radius: 155px 25px;
  }
  @if $style==5 {
    border-top-left-radius: 250px 15px;
    border-top-right-radius: 25px 80px;
    border-bottom-left-radius: 20px 115px;
    border-bottom-right-radius: 15px 105px;
  }
  @if $style==6 {
    border-top-left-radius: 28px 125px;
    border-top-right-radius: 100px 30px;
    border-bottom-right-radius: 20px 205px;
    border-bottom-left-radius: 15px 225px;
  }
}

/**
  Mixin for setting responsive breakpoints
  @param string | integer
  @default null
*/
@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";}
}

/**
  Useful helper mixins
*/
@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 li-bullet($char) {
  li:before {
    content: $char;
  }
}

/*
  Add transform: translate() with browser prefixes.
  Same syntax for translate() and translate3d()
  To get 3D add a $z value and set 'true'
  @param string | boolean
  @default 0 | false
*/
@mixin translate($x, $y, $z: 0, $transform3d: false) {
  @if $transform3d {
    -webkit-transform: translate3d($x, $y, $z);
    -ms-transform: translate3d($x, $y, $z);
    transform: translate3d($x, $y, $z);
  } @else {
    -webkit-transform: translate($x, $y);
    -ms-transform: translate($x, $y);
    transform: translate($x, $y);
  }
}

/*
  Add global transition styles to selector
  @param string
  @default all | 235ms | ease-in-out | 0
*/
@mixin transition($name:all, $duration:235ms, $animation:ease-in-out, $delay:0s){
  -webkit-transition: $name $duration $animation $delay;
  -moz-transition: $name $duration $animation $delay;
  -o-transition: $name $duration $animation $delay;
  transition: $name $duration $animation $delay;
}

/**
  Set the shadow type for a component
  @param    string
  @default  regular
*/
@mixin shadow($type: regular) {
  @if $type == hover {
    box-shadow: $shadow-hover;
    @include translate(0, 2px, 0, true);
  } @else if $type == small {
    @include transition($animation: ease);
    box-shadow: $shadow-small;
  } @else if $type == regular {
    @include transition($animation: ease);
    box-shadow: $shadow-regular;
  } @else if $type == large {
    @include transition($animation: ease);
    box-shadow: $shadow-large;
  } @else {
    @error "wrong $type. available types: small | regular | large | hover"
  }
}