english_tea 0.1.0

data/app/assets/stylesheets/english_tea/modules/_job_posts.scss

@@ -0,0 +1,303 @@
+// ==========================================================================
+// Job Post (UJB) patterns & modules
+// ==========================================================================
+
+// ---
+// INLINE JOB POST
+// Styling of contracted and expanded job posts
+// on job posts index page
+// ---
+
+.job-post-inline
+{
+	.job-post-headline
+	{
+		@include transition(all $transition-timing-button $transition-easing-button);
+
+		// Only transition the BG if signed in as nested anchors
+		// will be controlling text transitions
+		&.job-post-signed-in
+		{
+			@include transition(background-color $transition-timing-button $transition-easing-button);
+		}
+
+		&.shown,
+		&:active,
+		&:focus,
+		&:hover
+		{
+			color: rgba(map-get($colors, 1), 0.75) !important;
+
+			mark
+			{
+				color: map-get($colors, 1) !important;
+				font-weight: $type-weight-normal !important;
+			}
+
+			.job-post-favorite
+			{
+				border-color: transparent !important;
+				color: inherit !important;
+			}
+		}
+
+		&.shown:after
+		{
+			@include _box-shadow(3);
+			bottom: 0;
+			content: '';
+			display: block;
+			left: 0;
+			position: absolute;
+			right: 0;
+			top: 0;
+			z-index: 0;
+		}
+
+		@each $key, $val in $colors-job-types
+		{
+			&.job-post-type-#{$key}
+			{
+				&.shown,
+				&:active,
+				&:focus,
+				&:hover
+				{
+					background-color: map-get($val, 2) !important;
+					color: map-get($val, 1) !important;
+				}
+
+				mark
+				{
+					color: map-get($val, 2);
+          font-weight: $type-weight-normal !important;
+				}
+
+				.job-post-favorite
+				{
+					&:active,
+					&:focus,
+					&:hover
+					{
+						background-color: map-get($val, 3) !important;
+					}
+				}
+			}
+		}
+
+		// Counter the global link hover style as we don't need it here
+		&:hover,
+		a:hover
+		{
+			opacity: 1;
+		}
+	}
+}
+
+// ---
+// JOB POST
+// Basic standalone job post styling
+// ---
+
+.job-post
+{
+	@include _box-shadow(6);
+
+	.job-post-headline
+	{
+		color: #4a78ff !important; // see above color notes
+
+		mark
+		{
+			color: map-get($colors, 1) !important;
+			font-weight: $type-weight-normal !important;
+		}
+
+    &.job-post-type-freelance
+    {
+      color: #ffccc7 !important; // see above color notes
+    }
+	}
+
+}
+
+// ---
+// JOB POST HEADLINES
+// Carousel styling for madlib-style carousel
+// ---
+
+.job-post-templates
+{
+	// Main carousel item container base styling
+	.snapper_pane_crop
+	{
+		position: relative;
+		z-index: map-get($layer-scale, 2);
+	}
+
+		// Headline highlighted words base coloring and behavior
+		.marked
+		{
+			border-bottom: 1px solid map-get($colors, 2);
+			color: map-get($colors, 3);
+			font-weight: $type-weight-normal;
+
+			@include transition(all $transition-timing-text $transition-easing-text);
+
+			&:empty:before
+			{
+				content: attr(data-job-post-default);
+			}
+
+			&:empty:focus
+			{
+				color: transparent;
+				cursor: text;
+
+				@include transition(border-color $transition-timing-text $transition-easing-text);
+			}
+
+			&:not(:empty):active,
+			&:not(:empty):focus,
+			&:hover,
+			{
+				border-color: map-get(map-get($colors-job-types, fulltime), 2);
+				color: map-get(map-get($colors-job-types, fulltime), 2);
+			}
+		}
+
+	.snapper_nextprev
+	{
+		display: none;
+
+		@include _mq(map-get($breakpoints, bps))
+		{
+			display: block;
+		}
+	}
+
+	// Base prev/next styling
+	.snapper_nextprev_prev,
+	.snapper_nextprev_next
+	{
+		background: transparent url('data:image/svg+xml,#{$icon-prev}') no-repeat center center;
+		background-size: 125%;
+		display: block;
+		height: _rem($base-rhythm * 3);
+		text-indent: -999em;
+		width: _rem($base-rhythm * 3);
+	}
+
+	.snapper_nextprev_next
+	{
+		background-image: url('data:image/svg+xml,#{$icon-next}');
+	}
+
+	// Within prev/next wrapper container: for non-form pages
+	.snapper_nextprev_contain
+	{
+		> .snapper_nextprev
+		{
+			bottom: 0;
+			left: 0;
+			position: absolute;
+			right: 0;
+			z-index: 0;
+
+			@include _mq(map-get($breakpoints, bpl))
+			{
+				bottom: auto;
+				top: 50%;
+				@include transform(translate3d(0, -50%, 0));
+			}
+		}
+
+			.snapper_nextprev_prev,
+			.snapper_nextprev_next
+			{
+				bottom: _rem(-($base-rhythm * 5) - $base-rhythm-half);
+				height: _rem($base-rhythm * 4);
+				left: 0;
+				position: absolute;
+				width: _rem($base-rhythm * 4);
+
+				@include _mq(map-get($breakpoints, bpl))
+				{
+					bottom: auto;
+					left: _rem(-($base-rhythm * 8));
+					top: 50%;
+					@include transform(translate3d(0, -50%, 0));
+				}
+			}
+
+			.snapper_nextprev_next
+			{
+				left: auto;
+				right: 0;
+
+				@include _mq(map-get($breakpoints, bpl))
+				{
+					right: _rem(-($base-rhythm * 8));
+				}
+			}
+	}
+
+	// Dots navigation to move between items
+	.snapper_nav
+	{
+		label
+		{
+			height: _rem(7px);
+			width: _rem(7px);
+		}
+
+		> a:not(.snapper_nav_item-selected)
+		{
+			opacity: 0.125;
+		}
+	}
+
+	// Adjust styling for compact on form pages
+	&.job-post-templates-compact
+	{
+		.snapper
+		{
+			// overflow: hidden;
+
+			&:before,
+			&:after
+			{
+				content: none;
+				display: none;
+			}
+		}
+
+		.snapper_nextprev_item
+		{
+			display: inline-block;
+		}
+	}
+
+	// Adjust styling for fullsize on non-form pages
+	&.job-post-templates-fullsize
+	{
+		.snapper_pane_crop
+		{
+			@include _box-shadow(3);
+		}
+
+		.snapper_nav
+		{
+			label
+			{
+				height: _rem($base-rhythm);
+				width: _rem($base-rhythm);
+			}
+		}
+	}
+}
+// +/- 30px from vendor css still showing scrollbar in safari
+.enhanced .job-post-templates .snapper_pane_crop .snapper_pane {
+	padding-bottom: 40px;
+	margin-bottom: -40px;
+}

data/app/assets/stylesheets/english_tea/modules/_listings.scss

@@ -0,0 +1,32 @@
+// ==========================================================================
+// Listings module
+// ==========================================================================
+
+.listing 
+{
+
+	> a
+	{
+		@include transition(border-color $transition-timing-base $transition-easing-base);
+
+		&:active,
+		&:focus,
+		&:hover 
+		{
+			border-color: map-get($colors, 10);
+			opacity: 1;
+
+			.listing-location,
+			.listing-updated
+			{
+				display: none;
+			}
+
+			.listing-experience,
+			.listing-ctas
+			{
+				display: block !important;
+			}
+		}
+	}
+}

data/app/assets/stylesheets/english_tea/modules/_menu.scss

@@ -0,0 +1,57 @@
+// ==========================================================================
+// Overlaid menus with dropdowns
+// ==========================================================================
+
+.menu 
+{
+	.menu-dropdown
+	{
+		@include _box-shadow(2);
+		display: none;
+	}
+}
+
+// Click-based menu dropdowns
+.menu-open
+{
+	> .menu-dropdown 
+	{
+		display: block;
+	}
+
+	.has-subnav
+	{
+		&:active,
+		&:focus,
+		&:hover
+		{
+			.menu-dropdown
+			{
+				display: block;
+			}
+		}
+	}
+}	
+
+// Hover-based menu dropdowns
+.menu-quicklook
+{
+	&:active, 
+	&:focus,
+	&:hover
+	{
+		.menu-dropdown-trigger
+		{
+			background-color: map-get($colors, 1) !important;
+			border-bottom-color: map-get($colors, 1) !important;
+			z-index: map-get($layer-scale, 5) !important;
+		}
+
+		.menu-dropdown 
+		{
+			display: block;
+			top: calc(100% - 1px);
+			width: auto;
+		}
+	}
+}

data/app/assets/stylesheets/english_tea/modules/_modal.scss

@@ -0,0 +1,37 @@
+// ==========================================================================
+// Page modals, used for quick actions, confirmations, etc
+// ==========================================================================
+
+.modal
+{
+	background-color: map-get($colors, 1);
+
+	@include _mq(map-get($breakpoints, bps))
+	{
+		background-color: rgba(map-get($colors, 10), 0.625);
+	}
+
+	.modal-content
+	{
+		@include _box-shadow(5);
+
+		@include _mq(map-get($breakpoints, bps))
+		{
+			max-width: _rem(650px);
+		}
+
+		@include _mq(map-get($breakpoints, bpm))
+		{
+			width: 45%;
+		}
+	}
+
+	@include _mq(map-get($breakpoints, bps))
+	{
+		.modal-scrollable
+		{
+			min-height: 50vh;
+			max-height: 65vh;
+		}
+	}
+}

data/app/assets/stylesheets/english_tea/modules/_navigation.scss

@@ -0,0 +1,94 @@
+// ==========================================================================
+// Navigation modules and patterns
+// ==========================================================================
+
+// ---
+// GLOBAL SITE NAVIGATION
+// For horizontally oriented navigation
+// ---
+
+.site-header
+{
+	height: _rem($base-rhythm * 7);
+
+  .site-branding
+  {
+    width: 155px;
+  }
+
+	.site-navigation
+	{
+    li
+    {
+  		position: relative;
+
+  		&:after
+  		{
+  			border-top: 0 $border-style map-get($colors, 3);
+  			bottom: 0;
+  			content: '';
+  			display: block;
+  			font-size: 0;
+  			height: 0;
+  			left: 0;
+  			line-height: 0;
+  			position: absolute;
+  			width: 100%;
+
+        opacity: 0;
+        @include transition(all $transition-timing-base $transition-easing-base);
+  		}
+
+      &.active,
+      &:hover
+      {
+        &:after
+        {
+          border-top-width: _rem(3px);
+          opacity: 1;
+        }
+      }
+
+      &.active
+      {
+        &:after
+        {
+          border-color: map-get($colors, 10);
+        }
+      }
+    }
+	}
+}
+
+// ---
+// SIDEBAR NAVIGATION LIST
+// For vertically oriented navigation
+// ---
+
+.nav
+{
+	.active
+	{
+		background-color: map-get($colors, 2);
+    padding-left: _rem($base-gutter);
+    position: relative;
+
+    @include _mq(map-get($breakpoints, bps))
+    {
+      margin-left: _rem(-$base-gutter-large);
+      padding-left: _rem($base-gutter-large);
+    }
+
+		&:after
+		{
+			border-left: 3px $border-style map-get($colors, 10);
+			content: '';
+			display: block;
+			height: 100%;
+			left: 0;
+			position: absolute;
+			top: 0;
+			width: 0;
+		}
+	}
+}

data/app/assets/stylesheets/english_tea/modules/_notification.scss

@@ -0,0 +1,8 @@
+// ==========================================================================
+// Page notifications, used to provide success/failure/info feedback
+// ==========================================================================
+
+.notification > ul
+{
+	@include _box-shadow(5);
+}

data/app/assets/stylesheets/english_tea/modules/_notifications_stream.scss

@@ -0,0 +1,18 @@
+// ==========================================================================
+// Notifications Stream patterns & modules
+// ==========================================================================
+
+// ---
+// HERO & WINDOW SECTIONS
+// Page hero section and cover image "peek-thru" window
+// ---
+
+.notifications-stream-hero
+{
+  height: 50vmin;
+
+  @include _mq(map-get($breakpoints, bps))
+  {
+    height: 30vmin;
+  }
+}

data/app/assets/stylesheets/english_tea/modules/_overlay.scss

@@ -0,0 +1,49 @@
+// ==========================================================================
+// Page overlay, used for mini-profiles etc
+// ==========================================================================
+
+.overlay
+{
+	// TODO: Is there a better way of managing this?
+	$_overlay-gutter: _rem($base-rhythm * 7);
+
+	.stick-top
+	{
+		position: fixed;
+
+		top: 0;
+		right: $_overlay-gutter;
+		bottom: auto;
+		left: auto;
+	}
+
+	.stick-bottom
+	{
+		position: fixed;
+
+		top: auto;
+		right: $_overlay-gutter;
+		bottom: 0;
+		left: auto;
+	}
+
+	.anchor-top
+	{
+		position: absolute;
+
+		top: 0;
+		right: 0;
+		bottom: auto;
+		left: auto;
+	}
+
+	.anchor-bottom
+	{
+		position: absolute;
+
+		top: auto;
+		right: 0;
+		bottom: 0;
+		left: auto;
+	}
+}