english_tea 0.1.0

data/app/assets/stylesheets/english_tea/color/_social.scss

@@ -0,0 +1,21 @@
+// ==========================================================================
+// Social network color declaration classes
+// ==========================================================================
+
+@each $key, $val in $colors-social
+{
+	.c-txt-soc-#{$key}
+	{
+		color: $val !important;
+	}
+
+	.c-fill-soc-#{$key}
+	{
+		background-color: $val !important;
+	}
+
+	.c-b-soc-#{$key}
+	{
+		border-color: $val !important;
+	}
+}

data/app/assets/stylesheets/english_tea/color/_status.scss

@@ -0,0 +1,25 @@
+// ==========================================================================
+// Status color declaration classes
+// Pulled from $colors and $colors-status
+// ==========================================================================
+
+@each $key, $val in $colors-status
+{
+	@each $_key, $_val in $val
+	{
+		.c-txt-#{$key}#{$_key}
+		{
+			color: $_val !important;
+		}
+
+		.c-fill-#{$key}#{$_key}
+		{
+			background-color: $_val !important;
+		}
+
+		.c-b-#{$key}#{$_key}
+		{
+			border-color: $_val !important;
+		}
+	}
+}

data/app/assets/stylesheets/english_tea/dimension/_margin.scss

@@ -0,0 +1,196 @@
+// ==========================================================================
+// Margin dimension classes
+// ==========================================================================
+
+@include _bp-prefixer(m)
+{
+	// ---
+	// HALF BASE RHYTHM SHORTHANDS
+	// ---
+
+	&half
+	{
+		margin: _rem($base-rhythm-half) !important;
+	}
+
+	&thalf
+	{
+		margin-top: _rem($base-rhythm-half) !important;
+	}
+
+	&rhalf
+	{
+		margin-right: _rem($base-rhythm-half) !important;
+	}
+
+	&bhalf
+	{
+		margin-bottom: _rem($base-rhythm-half) !important;
+	}
+
+	&lhalf
+	{
+		margin-left: _rem($base-rhythm-half) !important;
+	}
+
+	// ---
+	// X/Y MARGIN SHORTHANDS
+	// ---
+
+	&xhalf
+	{
+		margin-right: _rem($base-rhythm-half) !important;
+		margin-left:_rem($base-rhythm-half) !important;
+	}
+
+	&yhalf
+	{
+		margin-top: _rem($base-rhythm-half) !important;
+		margin-bottom: _rem($base-rhythm-half) !important;
+	}
+
+	@each $key, $val in $gutter-scale
+	{
+		&#{$key}
+		{
+			margin: _rem($val) !important;
+		}
+
+		&t#{$key}
+		{
+			margin-top: _rem($val) !important;
+		}
+
+		&r#{$key}
+		{
+			margin-right: _rem($val) !important;
+		}
+
+		&b#{$key}
+		{
+			margin-bottom: _rem($val) !important;
+		}
+
+		&l#{$key}
+		{
+			margin-left: _rem($val) !important;
+		}
+
+		// ---
+		// X/Y MARGIN SHORTHANDS
+		// ---
+
+		&x#{$key}
+		{
+			margin-right: _rem($val) !important;
+			margin-left: _rem($val) !important;
+		}
+
+		&y#{$key}
+		{
+			margin-top: _rem($val) !important;
+			margin-bottom: _rem($val) !important;
+		}
+
+		// ---
+		// NEGATIVE MARGINS
+		// ---
+
+		&t-neg#{$key}
+		{
+			margin-top: _rem(-$val) !important;
+		}
+
+		&r-neg#{$key}
+		{
+			margin-right: _rem(-$val) !important;
+		}
+
+		&b-neg#{$key}
+		{
+			margin-bottom: _rem(-$val) !important;
+		}
+
+		&l-neg#{$key}
+		{
+			margin-left: _rem(-$val) !important;
+		}
+	}
+
+	// ---
+	// RESET MARGINS
+	// ---
+
+	&auto
+	{
+		margin: auto !important;
+	}
+
+	&tauto
+	{
+		margin-top: auto !important;
+	}
+
+	&rauto
+	{
+		margin-right: auto !important;
+	}
+
+	&bauto
+	{
+		margin-bottom: auto !important;
+	}
+
+	&lauto
+	{
+		margin-left: auto !important;
+	}
+
+	&xauto
+	{
+		margin-right: auto !important;
+		margin-left: auto !important;
+	}
+
+	&yauto
+	{
+		margin-top: auto !important;
+		margin-bottom: auto !important;
+	}
+
+	&x-neggutter-half
+	{
+		margin-right: _rem(-$base-gutter) !important;
+		margin-left: _rem(-$base-gutter) !important;
+	}
+
+	&y-neggutter-half
+	{
+		margin-top: _rem(-$base-gutter) !important;
+		margin-bottom: _rem(-$base-gutter) !important;
+	}
+}
+
+.mx-neggutter
+{
+	margin-right: _rem(-$base-gutter) !important;
+	margin-left: _rem(-$base-gutter) !important;
+
+ 	@include _mq(map-get($breakpoints, bps))
+ 	{
+		margin-right: _rem(-$base-gutter-large) !important;
+		margin-left: _rem(-$base-gutter-large) !important;
+ 	}
+}
+
+.my-neggutter
+{
+	margin-top: _rem(-$base-gutter) !important;
+	margin-bottom: _rem(-$base-gutter) !important;
+
+ 	@include _mq(map-get($breakpoints, bps))
+ 	{
+		margin-top: _rem(-$base-gutter-large) !important;
+		margin-bottom: _rem(-$base-gutter-large) !important;
+ 	}
+}

data/app/assets/stylesheets/english_tea/dimension/_padding.scss

@@ -0,0 +1,166 @@
+// ==========================================================================
+// Padding dimension classes
+// ==========================================================================
+
+// ---
+// GUTTER-SIZED PADDING
+// ---
+
+.pxgutter
+{
+	padding-right: _rem($base-gutter) !important;
+	padding-left: _rem($base-gutter) !important;
+
+ 	@include _mq(map-get($breakpoints, bps))
+ 	{
+		padding-right: _rem($base-gutter-large) !important;
+		padding-left: _rem($base-gutter-large) !important;
+ 	}
+}
+
+.pygutter
+{
+	padding-top: _rem($base-gutter) !important;
+	padding-bottom: _rem($base-gutter) !important;
+
+ 	@include _mq(map-get($breakpoints, bps))
+ 	{
+		padding-top: _rem($base-gutter-large) !important;
+		padding-bottom: _rem($base-gutter-large) !important;
+ 	}
+}
+
+@include _bp-prefixer(p)
+{
+	// ---
+	// HALF GUTTER MEASURES
+	// ---
+
+	&gutter-half
+	{
+		padding: _rem($base-gutter) !important;
+	}
+
+	&xgutter-half
+	{
+		padding-right: _rem($base-gutter) !important;
+		padding-left: _rem($base-gutter) !important;
+	}
+
+	&ygutter-half
+	{
+		padding-top: _rem($base-gutter) !important;
+		padding-bottom: _rem($base-gutter) !important;
+	}
+
+	// ---
+	// HALF BASE RHYTHM MEASURES
+	// ---
+
+	&half
+	{
+		padding: _rem($base-rhythm-half) !important;
+	}
+
+	&thalf
+	{
+		padding-top: _rem($base-rhythm-half) !important;
+	}
+
+	&rhalf
+	{
+		padding-right: _rem($base-rhythm-half) !important;
+	}
+
+	&bhalf
+	{
+		padding-bottom: _rem($base-rhythm-half) !important;
+	}
+
+	&lhalf
+	{
+		padding-left: _rem($base-rhythm-half) !important;
+	}
+
+	// ---
+	// X/Y HALF BASE RHYTHM SHORTHANDS
+	// ---
+
+	&xhalf
+	{
+		padding-right: _rem($base-rhythm-half) !important;
+		padding-left:_rem($base-rhythm-half) !important;
+	}
+
+	&yhalf
+	{
+		padding-top: _rem($base-rhythm-half) !important;
+		padding-bottom: _rem($base-rhythm-half) !important;
+	}
+
+	@each $key, $val in $gutter-scale
+	{
+		&#{$key}
+		{
+			padding: _rem($val) !important;
+		}
+
+		&t#{$key}
+		{
+			padding-top: _rem($val) !important;
+		}
+
+		&r#{$key}
+		{
+			padding-right: _rem($val) !important;
+		}
+
+		&b#{$key}
+		{
+			padding-bottom: _rem($val) !important;
+		}
+
+		&l#{$key}
+		{
+			padding-left: _rem($val) !important;
+		}
+
+		&x#{$key}
+		{
+			padding-right: _rem($val) !important;
+			padding-left: _rem($val) !important;
+		}
+
+		&y#{$key}
+		{
+			padding-top: _rem($val) !important;
+			padding-bottom: _rem($val) !important;
+		}
+	}
+
+	// ---
+	// RESET PADDING
+	// ---
+
+	&rauto
+	{
+		padding-right: auto !important;
+	}
+
+	&lauto
+	{
+		padding-left: auto !important;
+	}
+
+	&xauto
+	{
+		padding-right: auto !important;
+		padding-left: auto !important;
+	}
+
+	&yauto
+	{
+		padding-top: auto !important;
+		padding-bottom: auto !important;
+	}
+}

data/app/assets/stylesheets/english_tea/dimension/_position.scss

@@ -0,0 +1,80 @@
+// ==========================================================================
+// Position dimension classes
+// ==========================================================================
+
+@include _bp-prefixer(pos)
+{
+	@each $key, $val in (t: top, r: right, b: bottom, l: left)
+	{
+		// ---
+		// HALF OFFSETS
+		// ---
+
+		&-#{$key}half
+		{
+			#{$val}: _rem($base-rhythm-half) !important;
+		}
+
+		// ---
+		// NEGATIVE HALF OFFSETS
+		// ---
+
+		&-#{$key}-neghalf
+		{
+			#{$val}: _rem(-$base-rhythm-half) !important;
+		}
+
+		// ---
+		// GUTTERED OFFSETS
+		// ---
+
+		@each $gkey, $gval in $gutter-scale
+		{
+			&-#{$key}#{$gkey}
+			{
+				#{$val}: _rem($gval) !important;
+			}
+		}
+
+		// ---
+		// RESET OFFSETS
+		// ---
+
+		&-#{$key}auto
+		{
+			#{$val}: auto !important;
+		}
+
+		// ---
+		// PUSH OFFSETS
+		// ---
+
+		&-#{$key}push
+		{
+			#{$val}: 100% !important;
+		}
+	}
+
+	// ---
+	// CENTERING SHORTHANDS
+	// ---
+
+	&-xcenter
+	{
+		left: 50%;
+		@include transform(translate3d(-50%, 0, 0));
+	}
+
+	&-ycenter
+	{
+		top: 50%;
+		@include transform(translate3d(0, -50%, 0));
+	}
+
+	&-xycenter
+	{
+		left: 50%;
+		top: 50%;
+		@include transform(translate3d(-50%, -50%, 0));
+	}
+}

data/app/assets/stylesheets/english_tea/forms/_autocomplete.scss

@@ -0,0 +1,67 @@
+// ==========================================================================
+// Shorthand styling classes for Google Autocomplete search dropdown
+// ==========================================================================
+
+.pac-container
+{
+	background-color: map-get($colors, 1);
+	border: 1px solid map-get($colors, 3);
+	border-top: none;
+	border-radius: 0;
+	box-shadow: none;
+	color: map-get($colors, 6);
+	font-family: $type-font-body;
+	padding: _rem($base-rhythm) _rem($base-gutter-large) _rem($base-rhythm) 0;
+
+	.pac-item
+	{
+		$_pac-type: map-get($type-scale, 3);
+
+		background: transparent url('data:image/svg+xml,#{$icon-location}') no-repeat _rem($base-gutter) center;
+		background-size: _rem(map-get($icon-scale, base));
+		border: none;
+		color: inherit;
+		font-size: _rem(map-get($_pac-type, size));
+		line-height: _rem(map-get($_pac-type, line-height));
+		padding: _rem($base-rhythm) 0 _rem($base-rhythm) _rem($base-gutter-large + $base-gutter);
+
+		@include transition(all $transition-timing-text $transition-easing-text);
+
+		&:active,
+		&:focus,
+		&:hover
+		{
+			background-color: transparent;
+			color: map-get($colors, 4);
+		}
+	}
+
+		// Hide Google's icon in favor of our own
+		// which is added on .pac-item instead
+		.pac-icon
+		{
+			display: none !important;
+		}
+
+		// Highlighted query matches
+		.pac-item-query
+		{
+			color: map-get($colors, 10);
+			display: inline-block;
+			font-size: inherit;
+			padding-right: _rem($base-rhythm-half);
+
+			&:active,
+			&:focus,
+			&:hover
+			{
+				color: map-get($colors, 6);
+			}
+
+			// Exact character matches within the highlighted query matches
+			.pac-matched
+			{
+				font-weight: $type-weight-medium;
+			}
+		}
+}