_tools.scss

//@import "rem";  //Includes a function that provides a pixel-value fallback for rem size declarations for IE 8

/**
 * Sass Constants
 *
 * @section sass-constants
 */
 

/**
 * Colors
 */

/* Core Palette */
$forest: hsl(120, 46%, 28%);
$stone: hsl(205, 10, 49);
$cloud: hsl(0, 0%, 100%);

/* Greenery Palette */
$moss-light: hsl(88, 48%, 80%);
$moss: hsl(91, 44%, 41%);
$forest-dark: hsl(156, 100%, 14%);

/* Vibrant Palette */
$salmonberry-light: hsl(14, 68%, 84%);
$salmonberry: hsl(21, 71%, 58%);
$salmonberry-medium: hsl(18, 73%, 47%);
$salmonberry-dark: hsl(21, 100%, 22%);

$rubber-geoducky-light: hsl(48, 87%, 85%);
$rubber-geoducky: hsl(54, 73%, 57%);
$rubber-geoducky-medium: hsl(42, 98%, 54%);
$rubber-geoducky-dark: hsl(38, 61%, 44%);

$sky-light: hsl(209, 65%, 86%);
$sky: hsl(204, 69%, 46%);
$sky-medium: hsl(210, 100%, 30%);
$sky-dark: hsl(206, 100%, 19%);

$oregon-grape-light: hsl(342, 21%, 88%);
$oregon-grape: hsl(311, 28%, 50%);
$oregon-grape-medium: hsl(309, 39%, 27%);
$oregon-grape-dark: hsl(268, 43%, 24%);

$blush-light: hsl(351, 84%, 93%);
$blush: hsl(351, 84%, 67%);
$blush-medium: hsl(348, 58%, 48%);
$blush-dark: hsl(337, 80%, 23%);

$stone-light: hsl(165, 5%, 86%);
$stone-medium: hsl(207, 11%, 40%);
$stone-dark: hsl(240, 100%, 4%);

/**
 * Composit Colors
 *
 * Prebuilt colors based on our existing color palettes.
 */
$highlight: transparentize($rubber-geoducky-light, 0.5);
$drop-shadow: transparentize($oregon-grape-dark, 0.75);

$ui-border: $stone-light;
$ui-border--focused: $stone;
$ui-background: $cloud;

/**
 * Deprecated Colors
 *
 * Colors from the previous brand color palette. Avoid using!
 */
$morning-light: #fdf4b6;
$sky-blue: #0086ee;
$evergreen-neue: #64933a;
$evergreen-old-style: #46502b;
$blueberry-susan: #492c5d;
$wine: #600f21;
$black: #000;

$shadow: hsla(275, 33%, 11%, .25);
$highlight: hsla(52, 95%, 85%, .5); //$morning-light

$display-face: Avenir, "Avenir Next", "Proxima Nova", Helvetica, Arial, sans-serif;
$text-face: Avenir, "Avenir Next", "Proxima Nova", Helvetica, Arial, sans-serif;
$small-face: Verdana, Avenir, "Avenir Next", "Proxima Nova", Helvetica, Arial, sans-serif;

/**
 * Breakpoints
 *
 * See: https://medium.com/@timknight/creating-a-dead-simple-sass-mixin-to-handle-responsive-breakpoints-889927b37740
 */
$lil-groot: (min:  20em);
$rocket:    (min:  22em);
$starlord:  (min:  32em);
$gamora:    (min:  43em);
$drax:      (min:  70em);
$groot:     (min: 125em);

@mixin breakpoint($map) {
	$query: null;
	@if map-has-key($map, min) {
		$query: append($query, unquote("(min-width: #{map-get($map, min)})"))
	}
	@if map-has-key($map, min) and map-has-key($map, max) {
		$query: append($query, unquote("and"))
	}
	@if map-has-key($map, max) {
		$query: append($query, unquote("(max-width: #{map-get($map, max)})"))
	}
	@media screen and #{$query} {
		@content;
	}
}

//*
 // Modular Scale
 //
 // The typographic scale we are using for measurements.
 // Ideal text size is 17px
 // The important number is 345px. This was the size of images in
 // the previous Admissions template, which guided image sizes in
 // the new template.
 //
 // @see http://modularscale.com/scale/?px1=17&px2=345&ra1=1.618&ra2=0
 //

// Step #   Pixels     Ems    Rems
//   18    903.184  53.128  56.449
//   17    798.512  46.971  49.907
//   16    558.210  32.836  34.888
//   15    493.518  29.030  30.845
//   14    345.000  20.294  21.563
//   13    305.017  17.942  19.064
//   12    213.226  12.543  13.327
//   11    188.515  11.089  11.782
//   10    131.784   7.752   8.237
//    9    116.511   6.854   7.282
//    8     81.449   4.791   5.091
//    7     72.009   4.236   4.501
//    6     50.339   2.961   3.146
//    5     44.505   2.618   2.782
//    4     31.112   1.830   1.945
//    3     27.506   1.618   1.719
//    2     19.229   1.131   1.202
//    1     17.000   1       1.063*
//    0.5   14.000   0.824   0.875  Fudged for better readability, especially on mobile.
//   -1     11.884   0.699   0.743
//   -2     10.507   0.618   0.657
//   -3      7.345   0.432   0.459
//   -4      6.494   0.382   0.406
//   -5      4.540   0.267   0.284
//   -6      4.014   0.236   0.251
//   -7      2.806   0.165   0.175
//   -8      2.481   0.146   0.155
//   -9      1.734   0.102   0.108
//  -10      1.533   0.090   0.096
//  -11      1.072   0.063   0.067
 

/**
 * Sass Mixins
 *
 * @section sass-mixins
 */
@mixin margin-default{
	margin: 0.535714285714286em 0 1.071428571428571em 0;  //22.5/14/3 15/14  So, 22.5 + 7.5 + 15 = 45
}
@mixin margin-default-lg{
	margin: 0.441176470588235em 0 0.882352941176471em 0;  //7.5/17/3  15/17  So, 22.5 + 7.5 + 15 = 45
}

@mixin base-type{
	font-size: 0.875rem;  //14px  Step 0.5
	//line-height: 1.607142857142857;  //22.5/14
	line-height: 1.42857142857143;  //20/14
}
@mixin base-type-lg{
	font-size: 1.063rem;  //17px  Step 1
	line-height: 1.47058823529412;  //25/17
}
@mixin base-type-xl{
	font-size: 1.202rem;  //19.232px  Step 2
	line-height: 1.29991680532446;  //25/19.232
}
@mixin small-type{
	font-family: $small-face;
	font-size: 0.657rem;  //10.507px  Step -2
	line-height: 1.427619682116684;  //15/10.507
}

// Replaces PNG background-image with multiple repeating
// gradients instead. Unfortunately, Chrome totally craps out
// in the rendering department, so this will have to wait for
// another day.
//@mixin background-default{
//	background-image:  //Safari 6
		// diagonal lines
//		-webkit-repeating-linear-gradient(
//			-45deg,
//			hsla(0, 0%, 0%, .1),
//			hsla(0, 0%, 0%, .1) 1px,
//			hsla(0, 0%, 0%, 0) 2px,
//			hsla(0, 0%, 0%, 0) 3px
//		),
		// 1px dots
//		-webkit-radial-gradient(
//			hsla(0, 0%, 0%, .1),
//			hsla(0, 0%, 0%, .1) 1px,
//			hsla(0, 0%, 0%, 0) 1px,
//			hsla(0, 0%, 0%, 0) 2px
//		);
//	background-image:
		// diagonal lines
//		repeating-linear-gradient(
//			-45deg,
//			hsla(0, 0%, 0%, .1),
//			hsla(0, 0%, 0%, .1) 1px,
//			hsla(0, 0%, 0%, 0) 2px,
//			hsla(0, 0%, 0%, 0) 3px
//		),
		// 1px dots
//		radial-gradient(
//			hsla(0, 0%, 0%, .1),
//			hsla(0, 0%, 0%, .1) 1px,
//			hsla(0, 0%, 0%, 0) 1px,
//			hsla(0, 0%, 0%, 0) 2px
//		);
	
//	background-size:
		// diagonal lines
//		100% 100%,
		// 1px dots
//		10px 10px;
//}