english_tea 0.1.0

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

@@ -0,0 +1,239 @@
+// ==========================================================================
+// Profiles & Mini Profile patterns & modules
+// ==========================================================================
+
+// ---
+// MINI PROFILES
+// Housed within overlay
+// ---
+
+.profile-mini
+{
+	$info-width: 380px;
+
+	.profile-mini-projects
+	{
+		@include _will-change;
+
+		width: calc(100% - #{_rem($info-width)});
+	}
+
+	.profile-mini-info
+	{
+		width: 100%;
+
+		@include _mq(map-get($breakpoints, bpm))
+		{
+			width: _rem($info-width);
+		}
+	}
+}
+
+// ---
+// FULL PROFILES
+// Own-page, full user profile pages
+// ---
+
+	// ---
+	// HERO & WINDOW SECTIONS
+	// Page hero section and cover image "peek-thru" window
+	// ---
+
+	.profile-hero
+	{
+		// Ensure a new stacking context is created so that any
+		// `position: fixed` child elem is relative to this elem
+		@include _will-change();
+
+		height: 50vmin;
+
+		@include _mq(map-get($breakpoints, bps))
+		{
+			height: 60vmin;
+		}
+	}
+
+	// ---
+	// TOOLBOX SECTION
+	// Includes sticky toolbox "navbar"
+	// ---
+
+	.profile-toolbox-navbar
+	{
+		@include display(flex);
+		@include flex-wrap(wrap);
+		@include justify-content(center);
+
+		@include _mq(map-get($breakpoints, bps))
+		{
+			@include flex-wrap(nowrap);
+		}
+
+		@include _mq(map-get($breakpoints, bpm))
+		{
+			@include justify-content(flex-end);
+		}
+
+		> li
+		{
+			@include flex-grow(1);
+			@include flex-shrink(0);
+
+			@include _mq(map-get($breakpoints, bps))
+			{
+				@include flex-grow(0);
+			}
+
+			&.profile-toolbox-info
+			{
+				@include flex-grow(1);
+			}
+
+			&.profile-toolbox-message
+			{
+				@include order(-1);
+
+				@include _mq(map-get($breakpoints, bps))
+				{
+					@include order(0);
+				}
+			}
+		}
+
+			// Increase normal large avatar by 1px to compensate for
+			// lack of top border & align with other toolbox item borders
+			.avatar-large
+			{
+				$avatar-size: _rem(($base-rhythm * 6) + 1px);
+
+        height: $avatar-size;
+        width: $avatar-size;
+			}
+	}
+
+	.profile-toolbox-avatar,
+	.profile-toolbox-info,
+	.profile-toolbox-rate
+	{
+		display: none;
+	}
+
+	.profile-toolbox.stick-top
+	{
+		.profile-toolbox-avatar
+		{
+			display: block;
+		}
+
+		.profile-toolbox-info
+		{
+			@include display(flex);
+			@include flex-direction(column);
+			@include justify-content(center);
+		}
+
+		@include _mq(map-get($breakpoints, bpm))
+		{
+			.profile-toolbox-rate
+			{
+				@include display(flex);
+				@include align-items(center);
+			}
+		}
+	}
+
+	// ---
+	// PROFILE SIDEBAR LAYOUT
+	// Sidebar containing core user data
+	// ---
+
+	.profile-avatar
+	{
+		max-width: _rem($base-rhythm * 13);
+
+		@include _mq(map-get($breakpoints, bps))
+		{
+			max-width: 100%;
+		}
+	}
+
+	.profile-action-item
+	{
+		width: calc(50% - #{_rem($base-gutter / 2)});
+
+		@include _mq(map-get($breakpoints, bps))
+		{
+			width: 100%;
+		}
+	}
+
+	.profile-social-item
+	{
+		width: percentage(1 / 6);
+
+		@include _mq(map-get($breakpoints, bps))
+		{
+			width: percentage(1 / 4);
+		}
+	}
+
+// ---
+// STATUS UPDATING
+// Styling for the pikaday datepicker
+// ---
+
+.status-update
+{
+	.status-update-choice
+	{
+		@include transition(color $transition-timing-text $transition-easing-text);
+
+		&:checked + .status-update-choice-label
+		{
+			display: none;
+		}
+	}
+
+	@each $key, $val in $colors-status
+	{
+		.status-update-current[data-status="#{$key}"]
+		{
+			color: map-get($val, 2);
+		}
+
+		// Hover states for items with `data-status` attributes
+		.status-update-choice-label[data-status="#{$key}"]
+		{
+			&:active,
+			&:focus,
+			&:hover
+			{
+				color: map-get($val, 2);
+			}
+		}
+	}
+
+	.status-update-date
+	{
+		$_datepicker-header-type: map-get($type-scale, 7);
+		$_datepicker-table-type: map-get($type-scale, 3);
+
+		.pika-title
+		{
+			.pika-label
+			{
+				font-size: #{_rem(map-get($_datepicker-header-type, size))};
+				line-height: #{_rem(map-get($_datepicker-header-type, line-height))};
+			}
+		}
+
+		.pika-table
+		{
+			td, th
+			{
+				font-size: #{_rem(map-get($_datepicker-table-type, size))};
+				line-height: #{_rem(map-get($_datepicker-table-type, line-height))};
+			}
+		}
+	}
+}

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

@@ -0,0 +1,55 @@
+// ==========================================================================
+// Portfolios for Profiles and Mini Profiles
+// ==========================================================================
+
+.project,
+.project-sizer
+{
+	max-width: calc((100% - #{_rem($base-gutter)}) / 2);
+	width: 100%;
+
+	@include _mq(map-get($breakpoints, bps))
+	{
+		max-width: calc((100% - #{_rem($base-gutter-large)}) / 2);
+	}
+
+	.projects-fullsize &
+	{
+		@include _mq(map-get($breakpoints, bps))
+		{
+			max-width: calc((100% - #{_rem($base-gutter-large * 2)}) / 3);
+		}
+	}
+}
+
+.project
+{
+	margin-bottom: _rem($base-gutter);
+
+	@include _mq(map-get($breakpoints, bps))
+	{
+		margin-bottom: _rem($base-gutter-large);
+	}
+
+	// Don't need global <a> opacity change on hover here
+	.project-action
+	{
+		&:active,
+		&:focus,
+		&:hover
+		{
+			opacity: 1;
+		}
+	}
+}
+
+// Set gutter sizes depending on breakpoint
+.project-gutter-sizer
+{
+	width: $base-gutter;
+
+	@include _mq(map-get($breakpoints, bps))
+	{
+		width: $base-gutter-large;
+	}
+}

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

@@ -0,0 +1,46 @@
+// ==========================================================================
+// StickyBanner used on marketing homepage
+// ==========================================================================
+
+.stickybanner {
+  bottom: 100%;
+  left: 0;
+  width: 100%;
+  min-height: 40px;
+  transition: transform 500ms cubic-bezier(0.57, 0.07, 0.25, 0.98);
+  box-sizing: content-box;
+
+  .site-branding {
+    width: 155px;
+    margin-top: -7px;
+  }
+}
+
+.stickybanner--js {
+  position: fixed;
+  transform: translate3d(0, 0, 0);
+
+  &.stickybanner--open {
+    transform: translate3d(0, 100%, 0);
+  }
+}
+
+// Custom work for homepage specific stickybanner+tabs associations
+.homepage-content .stickybanner--js {
+  &.stickybanner--open {
+    opacity: 0;
+    display: none !important;
+  }
+
+  &.stickybanner--open.-ontab {
+    opacity: 1;
+    display: flex !important;
+  }
+
+  a span { // shorten button so it doesn't wrap
+    display: none;
+    @media (min-width: 450px) {
+      display: inline;
+    }
+  }
+}

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

@@ -0,0 +1,14 @@
+// ==========================================================================
+// Complex Tabs / Tabset & Tab Panels
+// ==========================================================================
+
+.tabSet--js {
+  .tabPanelWrap {
+    position: relative;
+    overflow: auto;
+  }
+  .tab,
+  .tabPanel {
+    transition: all 500ms cubic-bezier(0.57, 0.07, 0.25, 0.98);
+  }
+}