english_tea 0.1.0

data/app/assets/stylesheets/english_tea/media/_icons.scss

@@ -0,0 +1,61 @@
+// ==========================================================================
+// Icon styling classes
+// ==========================================================================
+
+// TODO: Get rid of this!
+@import '../setup/mixins';
+
+.icon
+{
+	box-sizing: content-box;
+	display: block;
+	fill: currentColor;
+	height: _rem(map-get($icon-scale, base));
+	pointer-events: none; // Avoid svg gobbling click events
+	vertical-align: middle;
+	width: _rem(map-get($icon-scale, base));
+}
+
+@include _bp-prefixer(icon)
+{
+	@each $key, $val in $icon-scale
+	{
+		&-#{$key}
+		{
+			height: _rem($val);
+			width: _rem($val);
+		}
+	}
+}
+
+// ---
+// ENCODED ICON SVGS
+// ---
+
+$icon-caret: '%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M7%2010l5%205%205-5z%22/%3E%3C/svg%3E';
+
+$icon-plus: '%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M19%2013h-6v6h-2v-6H5v-2h6V5h2v6h6v2z%22%2F%3E%3C%2Fsvg%3E';
+
+$icon-upload: '%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%09%3Cpath%20d%3D%22M9%2016h6v-6h4l-7-7-7%207h4zm-4%202h14v2H5z%22/%3E%0A%3C/svg%3E';
+
+$icon-photo: '%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M3%204V1h2v3h3v2H5v3H3V6H0V4h3zm3%206V7h3V4h7l1.83%202H21c1.1%200%202%20.9%202%202v12c0%201.1-.9%202-2%202H5c-1.1%200-2-.9-2-2V10h3zm7%209c2.76%200%205-2.24%205-5s-2.24-5-5-5-5%202.24-5%205%202.24%205%205%205zm-3.2-5c0%201.77%201.43%203.2%203.2%203.2s3.2-1.43%203.2-3.2-1.43-3.2-3.2-3.2-3.2%201.43-3.2%203.2z%22/%3E%3C/svg%3E';
+
+$icon-prev: '%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M15.41%207.41L14%206l-6%206%206%206%201.41-1.41L10.83%2012z%22/%3E%3C/svg%3E';
+
+$icon-prev-rev: '%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M15.41%207.41L14%206l-6%206%206%206%201.41-1.41L10.83%2012z%22%20fill%3D%22%23ffffff%22/%3E%3C/svg%3E';
+
+$icon-next: '%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M10%206L8.59%207.41%2013.17%2012l-4.58%204.59L10%2018l6-6z%22/%3E%3C/svg%3E';
+
+$icon-next-rev: '%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M10%206L8.59%207.41%2013.17%2012l-4.58%204.59L10%2018l6-6z%22%20fill%3D%22%23ffffff%22/%3E%3C/svg%3E';
+
+$icon-check-simple: '%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M9%2016.2L4.8%2012l-1.4%201.4L9%2019%2021%207l-1.4-1.4L9%2016.2z%22%20fill%3D%22%23ffffff%22/%3E%3C/svg%3E';
+
+$icon-delete: '%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M6%2019c0%201.1.9%202%202%202h8c1.1%200%202-.9%202-2V7H6v12zm2.46-7.12l1.41-1.41L12%2012.59l2.12-2.12%201.41%201.41L13.41%2014l2.12%202.12-1.41%201.41L12%2015.41l-2.12%202.12-1.41-1.41L10.59%2014l-2.13-2.12zM15.5%204l-1-1h-5l-1%201H5v2h14V4z%22/%3E%3C/svg%3E';
+
+$icon-search: '%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M15.5%2014h-.79l-.28-.27C15.41%2012.59%2016%2011.11%2016%209.5%2016%205.91%2013.09%203%209.5%203S3%205.91%203%209.5%205.91%2016%209.5%2016c1.61%200%203.09-.59%204.23-1.57l.27.28v.79l5%204.99L20.49%2019l-4.99-5zm-6%200C7.01%2014%205%2011.99%205%209.5S7.01%205%209.5%205%2014%207.01%2014%209.5%2011.99%2014%209.5%2014z%22%20/%3E%3C/svg%3E';
+
+$icon-search-light: '%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M15.5%2014h-.79l-.28-.27C15.41%2012.59%2016%2011.11%2016%209.5%2016%205.91%2013.09%203%209.5%203S3%205.91%203%209.5%205.91%2016%209.5%2016c1.61%200%203.09-.59%204.23-1.57l.27.28v.79l5%204.99L20.49%2019l-4.99-5zm-6%200C7.01%2014%205%2011.99%205%209.5S7.01%205%209.5%205%2014%207.01%2014%209.5%2011.99%2014%209.5%2014z%22%20fill%3D%22%23cccccc%22%20/%3E%3C/svg%3E';
+
+$icon-location: '%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202C8.13%202%205%205.13%205%209c0%205.25%207%2013%207%2013s7-7.75%207-13c0-3.87-3.13-7-7-7zm0%209.5c-1.38%200-2.5-1.12-2.5-2.5s1.12-2.5%202.5-2.5%202.5%201.12%202.5%202.5-1.12%202.5-2.5%202.5z%22/%3E%3C/svg%3E';
+
+$icon-location-light: '%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202C8.13%202%205%205.13%205%209c0%205.25%207%2013%207%2013s7-7.75%207-13c0-3.87-3.13-7-7-7zm0%209.5c-1.38%200-2.5-1.12-2.5-2.5s1.12-2.5%202.5-2.5%202.5%201.12%202.5%202.5-1.12%202.5-2.5%202.5z%22%20fill%3D%22%23cccccc%22/%3E%3C/svg%3E';

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

@@ -0,0 +1,40 @@
+// ==========================================================================
+// Various shorthand classes for user avatar sizing
+// ==========================================================================
+
+@include _bp-prefixer(avatar)
+{
+  &
+  {
+    display: block;
+    height: _rem($base-rhythm * 5);
+    width: _rem($base-rhythm * 5);
+  }
+
+  &-tiny
+  {
+    display: block;
+    height: _rem($base-rhythm * 3);
+    width: _rem($base-rhythm * 3);
+  }
+
+  &-small
+  {
+    display: block;
+    height: _rem($base-rhythm * 4);
+    width: _rem($base-rhythm * 4);
+  }
+
+  &-large
+  {
+    display: block;
+    height: _rem($base-rhythm * 6);
+    width: _rem($base-rhythm * 6);
+
+    @include _mq(map-get($breakpoints, bps))
+    {
+      height: _rem($base-rhythm * 7);
+      width: _rem($base-rhythm * 7);
+    }
+  }
+}

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

@@ -0,0 +1,60 @@
+// ==========================================================================
+// Billing plans module
+// ==========================================================================
+
+// Make sure everything we change is ready to go smoothly
+.billing-plan,
+.billing-plan-header,
+.billing-plan-frequency,
+.billing-plan-frequency .lbl-choice,
+.billing-plan-frequency .lbl-choice > b
+{
+  @include transition(all $transition-timing-base $transition-easing-base);
+}
+
+.billing-plan
+{
+  // Current state for highlighting the current overall plan
+  &.billing-plan-current
+  {
+    border-color: map-get($colors, 10) !important;
+
+    .billing-plan-header
+    {
+      background-color: map-get($colors, 10) !important;
+      border-color: map-get($colors, 10) !important;
+      color: map-get($colors, 1) !important;
+    }
+
+    .billing-plan-frequency
+    {
+      &:last-child
+      {
+        border-color: map-get($colors, 10) !important;
+      }
+    }
+
+    .billing-plan-status
+    {
+      border-bottom-color: map-get($colors, 10) !important;
+    }
+  }
+
+    // Current state for highlighting the current plan frequency
+    .billing-plan-frequency-current
+    {
+      background-color: $color-fill-shade !important;
+
+      .lbl-choice
+      {
+        background-color: map-get($colors, 10) !important;
+        border-color: map-get($colors, 10) !important;
+        color: map-get($colors, 10) !important;
+
+        > b
+        {
+          background-color: $color-fill-shade !important;
+        }
+      }
+    }
+}

data/app/assets/stylesheets/english_tea/modules/_box-shadow.scss

@@ -0,0 +1,11 @@
+// ==========================================================================
+// Box shadow styling classes
+// ==========================================================================
+
+@for $i from 1 through 6
+{
+  .shadow#{$i}
+  {
+    @include _box-shadow($i);
+  }
+}

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

@@ -0,0 +1,36 @@
+// ==========================================================================
+// Round bubble indicator styling classes
+// ==========================================================================
+
+// ---
+// SIMPLE NOTIFICATION BUBBLE
+// ---
+
+.bubble
+{
+  $type: map-get($type-scale, 0);
+
+  background-color: map-get($colors, 10);
+  border-radius: _rem($base-rhythm);
+  color: map-get($colors, 1);
+  display: block;
+  font-size: _rem(map-get($type, size));
+  height: _rem($base-rhythm * 2);
+  line-height: _rem($base-rhythm * 2);
+  min-width: _rem($base-rhythm * 2);
+  padding: 0 _rem($base-rhythm-half);
+  text-align: center;
+}
+
+// This resides out of our type/sizing hierachy
+.bubble-small
+{
+  $dimension: _rem(18px);
+
+  font-size: 8px; // using _rem seems to end up with 9px in Chrome
+  font-weight: $type-weight-medium;
+  height: $dimension;
+  line-height: $dimension;
+  min-width: $dimension;
+  padding: 0;
+}

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

@@ -0,0 +1,27 @@
+@keyframes color-animation {
+    0% {
+      background: red;
+    }
+    15% {
+      background: orange;
+    }
+    30% {
+      background: yellow;
+    }
+    45% {
+      background: green;
+    }
+    60% {
+      background: blue;
+    }
+    75% {
+      background: purple;
+    }
+    100% {
+      background: red;
+    }
+ }
+
+.celebrate {
+   animation: color-animation 0.7s infinite linear alternate;
+}

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

@@ -0,0 +1,51 @@
+// ==========================================================================
+// Cursor styling classes
+// ==========================================================================
+
+.default
+{
+  cursor: default;
+}
+
+.pointer
+{
+  cursor: pointer;
+}
+
+.wait
+{
+  cursor: wait;
+}
+
+.help
+{
+  cursor: help;
+}
+
+.move
+{
+  cursor: move;
+}
+
+@include _bp-prefixer-basic
+{
+  &default
+  {
+    cursor: default;
+  }
+
+  &pointer
+  {
+    cursor: pointer;
+  }
+
+  &wait
+  {
+    cursor: wait;
+  }
+
+  &help
+  {
+    cursor: help;
+  }
+}

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

@@ -0,0 +1,38 @@
+// ==========================================================================
+// Fadein: content revealing elements
+// ==========================================================================
+
+.fadein {
+  opacity: 1;
+  transform: translate3d(0,0,0);
+}
+.fadein--js {
+  @include transition(all 500ms cubic-bezier(0.57, 0.07, 0.25, 0.98));
+}
+.fadein--staged {
+  opacity: 0;
+  @include transform(translate3d(0, 20px, 0));
+}
+
+// customizations
+.homebarishigh__image {
+  &.fadein--js {
+    @include transition-timing-function(cubic-bezier(0.860, 0.000, 0.070, 1.000)); // easeInOutQuint
+  }
+}
+.homearsenal__image--bg,
+.homearsenal__image--float {
+  &.fadein--js {
+    @include transition(all 750ms cubic-bezier(0.57, 0.07, 0.25, 0.98));
+  }
+}
+.homearsenal__image--bg {
+  &.fadein--staged {
+    @include transform(translate3d(0, 140px, 0));
+  }
+}
+.homearsenal__image--float {
+  &.fadein--staged {
+    @include transform(translate3d(0, 100px, 0));
+  }
+}

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

@@ -0,0 +1,224 @@
+// ==========================================================================
+// Misc modules and patterns
+// ==========================================================================
+
+// ---
+// CONTENT SECTION
+// Background styles for fullscreen (error type) pages
+// ---
+
+.fullscreen
+{
+  background-position: left top;
+  background-repeat: repeat;
+  background-size: 25%;
+}
+
+// ---
+// INTRINSIC RATIO
+// Make a wrapper element have an intrinsic ratio
+// and stretch inner element to fit
+// ---
+
+.intrinsic
+{
+  @include _intrinsic-ratio;
+}
+
+// ---
+// DIVIDER
+// Adds a small divider rule below as a pseudo element
+// ---
+
+.div
+{
+  &:after
+  {
+    content: '';
+    border-bottom: 1px $border-style $color-border-base;
+    display: block;
+    height: 0;
+    margin: _rem($base-gutter) auto;
+    width: _rem($base-gutter-large);
+  }
+
+  &.div-rev:after
+  {
+    border-color: map-get($colors, 8);
+  }
+}
+
+// ---
+// STATUS
+// Availability indicator
+// ---
+
+.status
+{
+  background-color: map-get($colors, 10);
+  border-radius: 100%;
+  display: inline-block;
+  height: _rem($base-font-size / 2);
+  position: relative;
+  top: -1px;
+  vertical-align: middle;
+  width: _rem($base-font-size / 2);
+
+  &.status-small
+  {
+    height: _rem(6px);
+    top: auto;
+    width: _rem(6px);
+  }
+}
+
+// ---
+// TRIANGLES
+// ---
+
+.tri
+{
+  &:before
+  {
+    border-color: transparent transparent map-get($colors, 1) transparent;
+    border-style: solid;
+    border-width: 0 _rem($base-gutter) _rem($base-gutter) _rem($base-gutter);
+    content: '';
+    display: block;
+    height: 0;
+    left: 0;
+    position: absolute;
+    top: _rem(-$base-gutter);
+    width: 0;
+  }
+
+  &.pos-xcenter
+  {
+    &:before
+    {
+      left: 50%;
+      @include transform(translate3d(-50%, 0, 0));
+    }
+  }
+
+  &.pos-tpush
+  {
+    top: calc(100% + #{_rem($base-gutter)});
+  }
+}
+
+// ---
+// FLIPBOARD CHARS
+// ---
+
+.flip
+{
+  border: $border-width $border-style map-get($colors, 3);
+  border-radius: $border-radius-rounded;
+  padding: 0 3px;
+  position: relative;
+
+  &:first-child
+  {
+    margin-left: 2px;
+  }
+
+  &:last-child
+  {
+    margin-right: 2px;
+  }
+
+  &:before
+  {
+    border-top: $border-width $border-style map-get($colors, 3);
+    content: '';
+    display: block;
+    font-size: 0;
+    height: 0;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 50%;
+    width: 100%;
+    z-index: -1;
+  }
+}
+
+// ---
+// IMAGE PROGRESS INDICATOR
+// ---
+
+.progress
+{
+  background-color: $color-fill-progress;
+  height: _rem($base-rhythm-half);
+  width: 0;
+}
+
+// ---
+// SIMPLE HOVER SHOW/HIDE
+// ---
+
+@include _mq(map-get($breakpoints, bpm))
+{
+  .no-touchevents
+  {
+    .hov
+    {
+      .hov-bg
+      {
+        opacity: 1;
+        @include transition(opacity $transition-timing-base $transition-easing-base);
+        @include _will-change();
+      }
+
+      .hov-show
+      {
+        opacity: 0;
+        @include transition(all $transition-timing-base $transition-easing-base);
+        visibility: hidden;
+      }
+
+      &:active,
+      &:focus,
+      &:hover
+      {
+        opacity: 1;
+
+        .hov-bg
+        {
+          opacity: map-get($opacity-scale, 3);
+        }
+
+        .hov-show
+        {
+          opacity: 1;
+          visibility: visible;
+        }
+      }
+    }
+  }
+}
+
+// ---
+// INDICATOR DOT
+// ---
+
+.dot
+{
+  position: relative;
+
+  &:before
+  {
+    background-color: map-deep-get($colors-status, stat-na, 3);
+    border-radius: $border-radius-circle;
+    content: '';
+    display: block;
+    font-size: 0;
+    height: 0.5rem;
+    left: _rem(-$base-gutter);
+    position: absolute;
+    top: _rem(-2px);
+    width: 0.5rem;
+  }
+}