boarding_pass 0.1.9 → 1.0.0.beta1

data/app/assets/stylesheets/vendor/_typeplate.scss

@@ -0,0 +1,834 @@
+/*!
+ *
+.||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||.
+
+	.                                      '||            .
+  .||.  .... ... ... ...    ....  ... ...   ||   ....   .||.    ....
+   ||    '|.  |   ||'  || .|...||  ||'  ||  ||  '' .||   ||   .|...||
+   ||     '|.|    ||    | ||       ||    |  ||  .|' ||   ||   ||
+   '|.'    '|     ||...'   '|...'  ||...'  .||. '|..'|'  '|.'  '|...'
+		.. |      ||               ||
+		 ''      ''''             ''''      A Typographic Starter Kit
+
+  URL ........... http://typeplate.com
+  VERSION ....... 1.1.2
+  Github ........ https://github.com/typeplate/typeplate.github.io
+  AUTHORS ....... Dennis Gaebel (@gryghostvisuals) & Zachary Kain (@zakkain)
+  LICENSE ....... Creative Commmons Attribution 3.0
+  LICENSE URL ... http://creativecommons.org/licenses/by/3.0
+
+ .||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||.
+ *
+ */
+
+
+
+// .x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x //
+//
+// $Variables
+//
+// .x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x //
+
+
+// $Variable $BaseType
+// -------------------------------------//
+//the serif boolean var can be redeclared from another stylesheet. However
+//the var must be placed after your @import "typeplate.scss";
+$serif-boolean: true !default;
+
+$font-family: if($serif-boolean, serif, sans-serif) !default; // Non-font-face font-stack
+
+$font-weight: normal !default;
+$line-height: 1.65 !default;
+$font-size: 112.5 !default; // percentage value (16 * 112.5% = 18px)
+$font-base: 16 * ($font-size/100) !default; // converts our percentage to a pixel value
+$custom-font-family: false !default; // Custom font-face stack, if set will be added to the $font-family
+$measure: $font-base * $line-height;
+
+
+// $Variable $Paragraphs
+// -------------------------------------//
+
+// Text Indentation Value
+$indent-val: 1.5em !default;
+
+// Paragraph Styling Boolean
+// 'false' means no vertical whitespace
+// between subsequent paragraphs.
+$paragraph-vertical-whitespace: false !default;
+
+
+// $Variable $Small-Print
+// -------------------------------------//
+
+$small-print-size: 65% !default;
+
+
+// $Variable $Base-Color
+// -------------------------------------//
+
+$body-copy-color: #444 !default;
+$heading-color: #222 !default;
+
+
+// $Variable $Ampersand
+// -------------------------------------//
+
+$amp-fontface-name: Ampersand !default;
+$amp-fontface-source: local('Georgia'), local('Garamond'), local('Palatino'), local('Book Antiqua') !default;
+$amp-fontface-fallback: local('Georgia') !default;
+
+// Allows for our ampersand element to have differing
+// font-family from the ampersand unicode font-family.
+$amp-font-family: Verdana, sans-serif !default;
+
+
+// $Variable $Icon-Font-Helper
+// -------------------------------------//
+// ex.1) $icon-fonts: (icon-name);
+// ex.2) $icon-fonts: (icon-name1, icon-name2, icon-name3);
+$icon-fonts: null !default;
+
+
+// $Variable $Typescale
+// -------------------------------------//
+
+$tera: 117 !default; // 117 = 18 × 6.5
+$giga: 90 !default; // 90 = 18 × 5
+$mega: 72 !default; // 72 = 18 × 4
+$alpha: 60 !default; // 60 = 18 × 3.3333
+$beta: 48 !default; // 48 = 18 × 2.6667
+$gamma: 36 !default; // 36 = 18 × 2
+$delta: 24 !default; // 24 = 18 × 1.3333
+$epsilon: 21 !default; // 21 = 18 × 1.1667
+$zeta: 18 !default; // 18 = 18 × 1
+
+
+// $Variable $Typescale-Unit
+// -------------------------------------//
+
+$type-scale-unit-value: rem !default;
+
+
+// $Variable $Pull-Quotes
+// -------------------------------------//
+
+$pull-quote-fontsize: 4em !default;
+$pull-quote-opacity: 0.5 !default;
+$pull-quote-color: #dc976e !default;
+
+
+// $Variable $Citation
+// -------------------------------------//
+
+$cite-display: block !default;
+$cite-text-align: right !default;
+$cite-font-size: inherit !default;
+
+
+// $Variable $Small-Caps
+// -------------------------------------//
+
+$small-caps-color: gray !default;
+$small-caps-weight: 600 !default;
+
+
+// $Variable $DropCap
+// -------------------------------------//
+
+$dropcap-float-position: left !default;
+$dropcap-font-size: 4em !default;
+$dropcap-font-family: inherit !default;
+$dropcap-txt-indent: 0 !default;
+$dropcap-margin: inherit !default;
+$dropcap-padding: inherit !default;
+$dropcap-color: inherit !default;
+$dropcap-line-height: 1 !default;
+$dropcap-bg: transparent !default;
+
+
+// .x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x //
+//
+// $Fontfaces
+//
+// .x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x //
+
+
+// $Fontface $Unicode-Range-Ampersand
+// -------------------------------------//
+
+@font-face {
+	font-family: '#{$amp-fontface-name}';
+	src: $amp-fontface-source;
+	unicode-range: U+0026;
+}
+
+// Ampersand fallback font for unicode range
+@font-face {
+	font-family: '#{$amp-fontface-name}';
+	src: $amp-fontface-fallback;
+	unicode-range: U+270C;
+}
+
+
+// $Fontface $Icon-Font-Helper
+// -------------------------------------//
+// ICON FONT HELPER
+// In order to use this hot rod you must have the following…
+// 1. Compass.
+// 2. Create a 'fonts' directory in the root of your project.
+// 3. Specify within your 'config.rb' file the following line…
+//
+// fonts_dir = "name-of-your-fonts-directory" ( i.e. fonts_dir = "fonts" )
+//
+// Example usage:
+// ex.1) $icon-fonts: (icon-name);
+// ex.2) $icon-fonts: (icon-name1, icon-name2, icon-name3);
+//
+// Additional Notes:
+// @include font-face() is a Compass helper function
+// based on this gist by Chris Van Patten
+// https://gist.github.com/4469518
+
+@if ($icon-fonts != null) {
+	@each $font in $icon-fonts {
+		@include font-face( $font,
+			font-files(
+				'#{$font}/#{$font}.woff',
+				'#{$font}/#{$font}.ttf',
+				'#{$font}/#{$font}.svg', svg
+			),
+			'#{$font}/#{$font}.eot'
+			)
+	}
+}
+
+
+// .x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x //
+//
+// $Functions
+//
+// .x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x //
+
+
+// $Function $Context Calculator
+// -------------------------------------//
+// divide a given font-size by base font-size & return a relative value
+
+@function context-calc($scale, $base, $value) {
+	$calc: $scale / $base;
+	@return #{$calc}#{$value};
+}
+
+
+// $Function $Measure-Margin
+// -------------------------------------//
+// divide 1 unit of measure by given font-size & return a relative em value
+
+@function measure-margin($scale, $measure, $value) {
+	$calc: $measure / $scale;
+	@return #{$calc}#{$value};
+}
+
+
+// .x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x //
+//
+// $Mixins / $Placeholders
+//
+// .x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x //
+
+
+// $Mixin $Type-Scale
+// -------------------------------------//
+// provides a pixel fallback if you decide
+// to use 'rems' as a unit over ems.
+
+@mixin type-scale($scale, $base, $value, $measure:"") {
+	// If 'rem' is used as a $value then provide a px fallback.
+	@if $value == rem {
+		font-size: #{$scale}#{px};
+	}
+	font-size: context-calc($scale, $base, $value);
+	@if $measure != "" {
+		margin-bottom: measure-margin($scale, $measure, $value);
+	}
+}
+
+// $Mixin $Hypens
+// -------------------------------------//
+//http://trentwalton.com/2011/09/07/css-hyphenation
+
+@mixin css-hyphens($val) {
+	// Accepted values: [ none | manual | auto ]
+	-webkit-hyphens: $val; // Safari 5.1 thru 6, iOS 4.2 thru 6
+	-moz-hyphens: $val; // Firefox 16 thru 20
+	-ms-hyphens: $val; // IE10
+	-o-hyphens: $val; // PRESTO...haha LOL
+	hyphens: $val; // W3C standard
+}
+
+
+// $Mixin $Smallcaps
+// -------------------------------------//
+// http://blog.hypsometry.com/articles/true-small-capitals-with-font-face
+// ISSUE #1 : https://github.com/typeplate/typeplate.github.com/issues/1
+
+@mixin smallcaps($color, $font-weight) {
+	// depends on the font family.
+	// some font-families don't support small caps
+	// or don't provide them with their web font.
+	font-variant: small-caps;
+	font-weight: $font-weight;
+	text-transform: lowercase;
+	color: $color;
+}
+
+
+// $Mixin $Fontsize-Adjust
+// -------------------------------------//
+// correct x-height for fallback fonts: requires secret formula
+// yet to be discovered. This is still wacky for support. Use
+// wisely grasshopper.
+
+@mixin font-size-adjust($adjust-value) {
+	// firefox 17+ only (as of Feb. 2013)
+	font-size-adjust: $adjust-value;
+}
+
+
+// $Mixin $Ampersand
+// -------------------------------------//
+
+@mixin ampersand($amp-font-family...) {
+	font-family: $amp-font-family;
+}
+
+%ampersand-placeholder {
+	@include ampersand($amp-fontface-name, $amp-font-family);
+}
+
+// Call your ampersand on any element you wish from another stylesheet
+// using this Sass extend we've provided. For exmaple:
+//
+// <h6 class="ampersand">Dewey Cheat 'em & Howe</h6>
+//
+// .ampersand { @extend %ampersand-placeholder; }
+
+
+// $Mixin $Blockquote
+// -------------------------------------//
+// https://github.com/typeplate/typeplate.github.io/issues/95
+//
+// Use our pre-defined markup and add a class
+// to your custom blockquote element.
+// For example:
+//
+// .blockquote { @include blockquote("-"); }
+//
+// "-" is your citation flourish. For example:
+//
+// I always say important things because I'm so smart
+//                           - Super Important Person
+
+// Citation Mixin for Custom Styling
+@mixin cite-style($display, $text-align, $font-size) {
+	display: $display;
+	font-size: $font-size;
+	text-align: $text-align;
+}
+
+%cite {
+	@include cite-style($cite-display, $cite-text-align, $cite-font-size);
+}
+
+@mixin blockquote($citation-flourish) {
+	p {
+		&:last-of-type {
+			margin-bottom: -#{$line-height/2}em;
+		}
+	}
+	+ figcaption {
+		@extend %cite;
+		&:before {
+			content: $citation-flourish;
+		}
+	}
+}
+
+
+// $Mixin $Pull-Quotes
+// -------------------------------------//
+
+@mixin pull-quotes($pull-quote-fontsize, $pull-quote-opacity, $pull-quote-color) {
+	position: relative;
+	padding: context-calc($pull-quote-fontsize, $pull-quote-fontsize, em);
+	&:before,
+	&:after {
+		height: context-calc($pull-quote-fontsize, $pull-quote-fontsize, em);
+		opacity: $pull-quote-opacity;
+		position: absolute;
+		font-size: $pull-quote-fontsize;
+		color: $pull-quote-color;
+	}
+	&:before {
+		content: '“';
+		top:  0;
+		left: 0;
+	}
+	&:after {
+		content: '”';
+		bottom: 0;
+		right: 0;
+	}
+}
+
+
+// $Placeholder $Wordwrap
+// -------------------------------------//
+// Silent Sass Classes - A.K.A Placeholders
+//
+// normal: Indicates that lines may only break at normal word break points.
+// break-word : Indicates that normally unbreakable words may be broken at
+// arbitrary points if there are no otherwise acceptable break points in the line.
+
+%breakword {
+	word-wrap: break-word;
+}
+
+%normal-wrap {
+	word-wrap: normal;
+}
+
+%inherit-wrap {
+	word-wrap: auto;
+}
+
+
+// $Mixin $Dropcaps
+// -------------------------------------//
+/**
+ * Dropcap Sass @include
+ * Use the following Sass @include with any selector you feel necessary.
+ *
+	@include dropcap($dropcap-float-position, $dropcap-font-size, $dropcap-font-family, $dropcap-txt-indent, $dropcap-margin, $dropcap-padding, $dropcap-color, $dropcap-line-height, $dropcap-bg);
+ *
+ * Extend this object into your custom stylesheet. Let the variables do the work.
+ *
+ */
+
+// Use @include dropcap($dropcap-float-position, $dropcap-font-size, $dropcap-font-family, $dropcap-txt-indent, $dropcap-margin, $dropcap-padding, $dropcap-color, $dropcap-line-height, $dropcap-bg);
+// to pass the following arguments below. Feel free to pass in custom
+// values for the variables we've provided.
+//
+// Make sure you add the class “drop-cap” to your markup in order to operate.
+@mixin dropcap($dropcap-float-position, $dropcap-font-size, $dropcap-font-family, $dropcap-txt-indent, $dropcap-margin, $dropcap-padding, $dropcap-color, $dropcap-line-height, $dropcap-bg) {
+	&:first-letter {
+		float: $dropcap-float-position;
+		margin: $dropcap-margin;
+		padding: $dropcap-padding;
+		font-size: $dropcap-font-size;
+		font-family: $dropcap-font-family;
+		line-height: $dropcap-line-height;
+		text-indent: $dropcap-txt-indent;
+		background: $dropcap-bg;
+		color: $dropcap-color;
+	}
+}
+
+
+// $Mixin $Codeblocks
+// -------------------------------------//
+
+@mixin white-space($wrap-space) {
+	@if $wrap-space == 'pre-wrap' {
+		white-space: #{-moz-}$wrap-space; // Firefox 1.0-2.0
+		white-space: $wrap-space;       // current browsers
+	} @else {
+		white-space: $wrap-space;
+	}
+}
+
+
+// $Mixin $Definition-Lists
+// -------------------------------------//
+// lining
+// http://lea.verou.me/2012/02/flexible-multiline-definition-lists-with-2-lines-of-css
+//
+// dictionary-style
+// http://lea.verou.me/2012/02/flexible-multiline-definition-lists-with-2-lines-of-css
+
+@mixin definition-list-style($style) {
+	// lining style
+	@if $style == lining {
+		dt,
+		dd {
+			display: inline;
+			margin: 0;
+		}
+		dt,
+		dd {
+			& + dt {
+				&:before {
+					content: "\A";
+					white-space: pre;
+				}
+			}
+		}
+		dd {
+			& + dd {
+				&:before {
+					content: ", ";
+				}
+			}
+			&:before {
+					content: ": ";
+					margin-left: -0.2rem; //removes extra space between the dt and the colon
+			}
+		}
+	}
+	// dictionary-style
+	@if $style == dictionary-style {
+		dt {
+			display: inline;
+			counter-reset: definitions;
+			& + dt {
+				&:before {
+					content: ", ";
+					margin-left: -0.2rem; // removes extra space between the dt and the comma
+				}
+			}
+		}
+		dd {
+			display: block;
+			counter-increment: definitions;
+			&:before {
+				content: counter(definitions, decimal) ". ";
+			}
+		}
+	}
+}
+
+
+
+// .x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x //
+//
+// $Typeplate Styles
+//
+// .x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x //
+
+
+// $Styles $Globals
+// -------------------------------------//
+
+html {
+	$_font_metrics: '#{$font-size}%/#{$line-height}';
+	@if $custom-font-family {
+		font: $font-weight unquote($_font_metrics) $custom-font-family, $font-family;
+	} @else {
+		font: $font-weight unquote($_font_metrics) $font-family;
+	}
+}
+
+body {
+	// Ala Trent Walton
+	@include css-hyphens(auto);
+
+	// normal: Indicates that lines may only break at normal word break points.
+	// break-word : Indicates that normally unbreakable words may be broken at ...
+	// arbitrary points if there are no otherwise acceptable break points in the line.
+	@extend %breakword;
+	color: $body-copy-color;
+}
+
+small {
+	font-size: $small-print-size;
+}
+
+
+// $Styles $Headings
+// -------------------------------------//
+
+// Extend included classes on any element of your
+// choosing for adjusting type based on the scale
+// provided.
+
+// For example:
+
+// <h6 class="giga">Awesome Headline</h6>
+// <p class="tera">a story about a dude</p>
+
+// Our Type Scale is as follows with px fallbacks
+// for IE 6-8 as they do not understand REM units.
+//
+// 18, 21, 24, 36, 48, 60, 72, 90, 117
+
+// styles for all headings, in the style of @csswizardry
+%hN {
+	text-rendering: optimizeLegibility; // voodoo to enable ligatures and kerning
+	line-height: 1; // this fixes huge spaces when a heading wraps onto two lines
+	margin-top: 0;
+}
+
+// Multi-dimensional array, where:
+// the first value is the name of the class
+// and the second value is the variable for the size
+$sizes: tera $tera, giga $giga, mega $mega, alpha $alpha, beta $beta, gamma $gamma, delta $delta, epsilon $epsilon, zeta $zeta;
+
+// Sass loop to associate h1-h6 tags with their appropriate greek
+// heading based on a modular scale.
+// for each size in the scale, create a class
+@each $size in $sizes {
+	.#{nth($size, 1)} {
+		@debug #{$measure};
+		@debug #{nth($size, 2)};
+		@debug #{$measure / nth($size, 2)};
+		@include type-scale(nth($size, 2), $font-base, '#{$type-scale-unit-value}', $measure);
+	}
+}
+
+// associate h1-h6 tags with their appropriate greek heading
+h1 {
+	@extend .alpha;
+	@extend %hN;
+}
+
+h2 {
+	@extend .beta;
+	@extend %hN;
+}
+
+h3 {
+	@extend .gamma;
+	@extend %hN;
+}
+
+h4 {
+	@extend .delta;
+	@extend %hN;
+}
+
+h5 {
+	@extend .epsilon;
+	@extend %hN;
+}
+
+h6 {
+	@extend .zeta;
+	@extend %hN;
+}
+
+
+// $Styles $Parargraphs
+// -------------------------------------//
+
+p {
+	margin: auto auto $indent-val;
+
+	// Conditonal Check For Paragraph Styling
+	@if $paragraph-vertical-whitespace == false {
+		& + p {
+			//siblings indentation
+			text-indent: $indent-val;
+			margin-top: -$indent-val;
+		}
+	}
+}
+
+
+// $Styles $Hyphenation
+// -------------------------------------//
+// http://meyerweb.com/eric/thoughts/2012/12/17/where-to-avoid-css-hyphenation
+
+abbr,
+acronym,
+blockquote,
+code,
+dir,
+kbd,
+listing,
+plaintext,
+q,
+samp,
+tt,
+var,
+xmp {
+	@include css-hyphens(auto);
+}
+
+
+// $Styles $Codeblocks
+// -------------------------------------//
+
+pre code {
+	@extend %normal-wrap;
+	@include white-space(pre-wrap);
+}
+
+pre {
+	@include white-space(pre);
+}
+
+code {
+	@include white-space(pre);
+	font-family: monospace;
+}
+
+
+// $Styles $Smallcaps
+// -------------------------------------//
+/**
+ * Abbreviations Markup
+ *
+	<abbr title="hyper text markup language">HMTL</abbr>
+ *
+ * Extend this object into your markup.
+ *
+ */
+abbr {
+	@include smallcaps($small-caps-color, $small-caps-weight);
+	&[title]:hover {
+		cursor: help;
+	}
+}
+
+
+// $Styles $Headings-Color
+// -------------------------------------//
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	color: $heading-color;
+}
+
+
+// $Styles $Dropcap
+// -------------------------------------//
+
+// Combats our sibling paragraphs syling and indentation
+// As not to ruin our beautiful drop caps.
+p + .drop-cap {
+	text-indent: 0;
+	margin-top: 0;
+}
+
+.drop-cap {
+	@include dropcap($dropcap-float-position, $dropcap-font-size, $dropcap-font-family, $dropcap-txt-indent, $dropcap-margin, $dropcap-padding, $dropcap-color, $dropcap-line-height, $dropcap-bg);
+}
+
+
+// $Styles $Definition-Lists
+// -------------------------------------//
+/**
+ * Lining Definition Style Markup
+ *
+	<dl class="lining">
+		<dt><b></b></dt>
+		<dd></dd>
+	</dl>
+ *
+ * Extend this object into your markup.
+ *
+ */
+.lining {
+	@include definition-list-style(lining);
+}
+
+/**
+ * Dictionary Definition Style Markup
+ *
+	<dl class="dictionary-style">
+		<dt><b></b></dt>
+			<dd></dd>
+	</dl>
+ *
+ * Extend this object into your markup.
+ *
+ */
+.dictionary-style {
+	@include definition-list-style(dictionary-style);
+}
+
+
+// $Styles $Blockquote-Markup
+// -------------------------------------//
+/**
+ * Blockquote Markup
+ *
+		<figure>
+			<blockquote cite="">
+				<p></p>
+			</blockquote>
+			<figcaption>
+				<cite>
+					<small><a href=""></a></small>
+				</cite>
+			</figcaption>
+		</figure>
+ *
+ * Extend this object into your markup.
+ *
+ */
+
+
+// $Styles $Pull-Quotes
+// -------------------------------------//
+// http://24ways.org/2005/swooshy-curly-quotes-without-images
+//
+// http://todomvc.com - Thanks sindresorhus!
+// https://github.com/typeplate/typeplate.github.io/issues/49
+
+/**
+ * Pull Quotes Markup
+ *
+	<aside class="pull-quote">
+		<blockquote>
+			<p></p>
+		</blockquote>
+	</aside>
+ *
+ * Extend this object into your custom stylesheet.
+ *
+ */
+
+.pull-quote {
+	 @include pull-quotes($pull-quote-fontsize, $pull-quote-opacity, $pull-quote-color);
+}
+
+
+// $Styles $Figures
+// -------------------------------------//
+/**
+ * Figures Markup
+ *
+	<figure>
+		<figcaption>
+			<strong>Fig. 4.2 | </strong>Type Anatomy, an excerpt from Mark Boulton's book<cite title="http://designingfortheweb.co.uk/book/part3/part3_chapter11.php">"Designing for the Web"</cite>
+		</figcaption>
+	</figure>
+ *
+ * Extend this object into your markup.
+ *
+ */
+
+
+// $Styles $Footnotes
+// -------------------------------------//
+/**
+ * Footnote Markup : Replace 'X' with your unique number for each footnote
+ *
+	<article>
+		<p><sup><a href="#fn-itemX" id="fn-returnX"></a></sup></p>
+		<footer>
+			<ol class="foot-notes">
+				<li id="fn-itemX"><a href="#fn-returnX">↩</a></li>
+			</ol>
+		</footer>
+	</article>
+ *
+ * Extend this object into your markup.
+ *
+ */