english_tea 0.1.0

data/app/assets/stylesheets/english_tea/setup/_default.scss

@@ -0,0 +1,286 @@
+// ==========================================================================
+// Base styles: opinionated element defaults
+// ==========================================================================
+
+*
+{
+  box-sizing: border-box;
+}
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video
+{
+  font-family: inherit;
+  font-weight: inherit;
+  margin: 0;
+  padding: 0;
+  vertical-align: baseline;
+}
+
+body
+{
+  font-size: _rem(map-get(map-get($type-scale, 3), size));
+  line-height: _rem(map-get(map-get($type-scale, 3), line-height));
+}
+
+// ---
+// TEXTUAL ELEMENTS
+// ---
+
+p
+{
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+a
+{
+  color: inherit;
+  text-decoration: none;
+  @include transition(all $transition-timing-text $transition-easing-text);
+
+  &:hover
+  {
+    opacity: 0.75;
+  }
+
+  &:focus
+  {
+    outline: none;
+  }
+}
+
+b, strong,
+i, em,
+cite, mark,
+small
+{
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+b,
+strong
+{
+  font-weight: $type-weight-medium;
+}
+
+i,
+em
+{
+  font-style: italic;
+}
+
+cite
+{
+  font-style: normal;
+}
+
+mark
+{
+  background-color: transparent;
+  color: inherit;
+
+  @include transition(all $transition-timing-text $transition-easing-text);
+
+  &:focus
+  {
+    outline: none;
+  }
+}
+
+code,
+pre
+{
+  color: map-get(map-get($colors-status, stat-a), std);
+  font-family: $type-font-code;
+  font-weight: $type-weight-normal;
+  tab-size: 3;
+}
+
+ul,
+ol
+{
+  list-style: none;
+}
+
+hr
+{
+  display: block;
+  height: 1px;
+  border: 0;
+  border-top: 1px solid #ccc;
+  margin: 1em 0;
+  padding: 0;
+}
+
+// ---
+// MEDIA
+// ---
+
+audio,
+canvas,
+iframe,
+img,
+svg,
+video
+{
+  max-width: 100%;
+  vertical-align: middle;
+}
+
+// ---
+// FORMS & CTAS
+// ---
+
+input,
+select,
+textarea,
+[contenteditable]
+{
+  &:focus
+  {
+    outline: none;
+  }
+}
+
+button,
+[type=submit],
+[type=button]
+{
+  border: none;
+  cursor: pointer;
+  display: inline-block;
+  padding: 0;
+  background-color: transparent;
+  background-image: none;
+  border: 0;
+  vertical-align: middle;
+  white-space: nowrap;
+
+  @include prefixer(appearance, none, webkit);
+  @include prefixer(user-select, none, webkit moz ms o spec);
+
+  &:focus
+  {
+    outline: none;
+  }
+}
+
+fieldset
+{
+  border: 0;
+  margin: 0;
+  min-width: 0;
+  padding: 0;
+}
+
+textarea
+{
+  resize: vertical;
+}
+
+input[autocomplete="off"]::-webkit-contacts-auto-fill-button
+{
+  visibility: hidden;
+  display: none !important;
+  pointer-events: none;
+  height: 0;
+  width: 0;
+  margin: 0;
+}
+
+// ---
+// HIGHLIGHTED TEXT
+// ---
+
+::-moz-selection
+{
+  background: map-get($colors, 2);
+  text-shadow: none;
+}
+
+::selection
+{
+  background: map-get($colors, 2);
+  text-shadow: none;
+}

data/app/assets/stylesheets/english_tea/setup/_functions.scss

@@ -0,0 +1,110 @@
+// ==========================================================================
+// Global SASS function declarations
+// ========================================================================== */
+
+@function _rem($px, $base-px: $base-font-size)
+{
+	@if $px == 0px
+	{
+		@return 0;
+	}
+	@else
+	{
+		@return #{$px / $base-px}rem;
+	}
+}
+
+/// Map deep get
+/// @author Hugo Giraudel
+/// @access public
+/// @param {Map} $map - Map
+/// @param {Arglist} $keys - Key chain
+/// @return {*} - Desired value
+@function map-deep-get($map, $keys...)
+{
+  @each $key in $keys
+  {
+    $map: map-get($map, $key);
+  }
+
+  @return $map;
+}
+
+// _decimal.scss | MIT License | gist.github.com/terkel/4373420
+// Round a number to specified digits.
+//
+// @param  {Number} $number A number to round
+// @param  {Number} [$digits:0] Digits to output
+// @param  {String} [$mode:round] (round|ceil|floor) How to round a number
+// @return {Number} A rounded number
+// @example
+//     decimal-round(0.333)    => 0
+//     decimal-round(0.333, 1) => 0.3
+//     decimal-round(0.333, 2) => 0.33
+//     decimal-round(0.666)    => 1
+//     decimal-round(0.666, 1) => 0.7
+//     decimal-round(0.666, 2) => 0.67
+//
+@function _decimal-round($number, $digits: 0, $mode: round) {
+    $n: 1;
+    // $number must be a number
+    @if type-of($number) != number {
+        @warn '#{ $number } is not a number.';
+        @return $number;
+    }
+    // $digits must be a unitless number
+    @if type-of($digits) != number {
+        @warn '#{ $digits } is not a number.';
+        @return $number;
+    } @else if not unitless($digits) {
+        @warn '#{ $digits } has a unit.';
+        @return $number;
+    }
+    @for $i from 1 through $digits {
+        $n: $n * 10;
+    }
+    @if $mode == round {
+        @return round($number * $n) / $n;
+    } @else if $mode == ceil {
+        @return ceil($number * $n) / $n;
+    } @else if $mode == floor {
+        @return floor($number * $n) / $n;
+    } @else {
+        @warn '#{ $mode } is undefined keyword.';
+        @return $number;
+    }
+}
+
+// Ceil a number to specified digits.
+//
+// @param  {Number} $number A number to round
+// @param  {Number} [$digits:0] Digits to output
+// @return {Number} A ceiled number
+// @example
+//     decimal-ceil(0.333)    => 1
+//     decimal-ceil(0.333, 1) => 0.4
+//     decimal-ceil(0.333, 2) => 0.34
+//     decimal-ceil(0.666)    => 1
+//     decimal-ceil(0.666, 1) => 0.7
+//     decimal-ceil(0.666, 2) => 0.67
+//
+@function _decimal-ceil($number, $digits: 0) {
+    @return _decimal-round($number, $digits, ceil);
+}
+
+// Floor a number to specified digits.
+//
+// @param  {Number} $number A number to round
+// @param  {Number} [$digits:0] Digits to output
+// @return {Number} A floored number
+// @example
+//     decimal-floor(0.333)    => 0
+//     decimal-floor(0.333, 1) => 0.3
+//     decimal-floor(0.333, 2) => 0.33
+//     decimal-floor(0.666)    => 0
+//     decimal-floor(0.666, 1) => 0.6
+//     decimal-floor(0.666, 2) => 0.66
+//
+@function _decimal-floor($number, $digits: 0) {
+    @return _decimal-round($number, $digits, floor);
+}

data/app/assets/stylesheets/english_tea/setup/_mixins.scss

@@ -0,0 +1,258 @@
+// ==========================================================================
+// Global SASS mixin declarations
+// ========================================================================== */
+
+// ---
+// MQ
+// Media queries
+// ---
+
+@mixin _mq($point, $IE9: false, $query1: min, $query2: width)
+{
+  @if $IE9 == true
+  {
+    .lt-ie9 &
+    {
+      @content;
+    }
+  }
+
+  @if $point == 0px
+  {
+    @content;
+  }
+  @else
+  {
+    @media (#{$query1}-#{$query2}: $point / $base-font-size + em)
+    {
+      @content;
+    }
+  }
+}
+
+// ---
+// BREAKPOINT PREFIXER
+// Prefix content with breakpoint ref and nest inside MQs
+// ---
+
+@mixin _bp-prefixer($class-suffix: null)
+{
+  @each $bp-name, $bp-val in $breakpoints
+  {
+    @if $bp-name == none
+    {
+      .#{$class-suffix}
+      {
+        @content;
+      }
+    }
+    @else
+    {
+      @include _mq($bp-val)
+      {
+        .#{$bp-name}-#{$class-suffix}
+        {
+          @content;
+        }
+      }
+    }
+  }
+}
+
+// ---
+// BREAKPOINT PREFIXER
+// Simply prefix content with breakpoint ref
+// ---
+
+@mixin _bp-prefixer-basic
+{
+  @each $bp-name, $bp-val in $breakpoints
+  {
+    @if $bp-name != none
+    {
+      @include _mq($bp-val)
+      {
+        .#{$bp-name}-
+        {
+          @content;
+        }
+      }
+    }
+  }
+}
+
+// ---
+// INTRINSIC RATIO
+// Creates intrinsic ratio container for stretched inner element
+// ---
+
+@mixin _intrinsic-ratio
+{
+  height: 0;
+  padding-bottom: 100%; // default
+  position: relative;
+
+  > *:first-child
+  {
+    display: block;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+}
+
+// ---
+// PSEUDO ELEM
+// Basic pseudo element setup for position, dimensions, etc
+// ---
+
+@mixin _pseudo-elem($height, $width)
+{
+  content: '';
+  display: block;
+  height: $height;
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  @include transform(translate3d(-50%, -50%, 0));
+  width: $width;
+}
+
+// ---
+// GENERIC PSEUDO PREFIXER
+// Style input placeholder text w/prefixes
+// ---
+
+@mixin _pseudo-prefix($selector, $prefixes)
+{
+  @each $prefix in $prefixes
+  {
+    ::-#{$prefix}-#{$selector}
+    {
+      @content;
+    }
+  }
+}
+
+// ---
+// PLACEHOLDER PSEUDO PREFIXER
+// Style input placeholder text w/prefixes
+// Retain browser syntax ':' vs '::'
+// ---
+@mixin _placeholder-prefix()
+{
+  &::-webkit-input-placeholder { /* Chrome */
+    @content;
+  }
+  &:-ms-input-placeholder { /* IE 10+ */
+    @content;
+  }
+  &::-moz-placeholder { /* Firefox 19+ */
+    @content;
+    opacity: 1;
+  }
+  &:-moz-placeholder { /* Firefox 4 - 18 */
+    @content;
+    opacity: 1;
+  }
+}
+
+// ---
+// WILL CHANGE
+// Kick the GPU
+// ---
+
+@mixin _will-change
+{
+  @include prefixer(backface-visibility, hidden, webkit moz ms o spec);
+  @include transform(translate3d(0, 0, 0));
+}
+
+// ---
+// BOX SHADOW HELPER
+// https://medium.com/@Florian/freebie-google-material-design-shadow-helper-2a0501295a2d
+// ---
+
+@mixin _box-shadow($level: 2)
+{
+  @if ($level == 1)
+  {
+    box-shadow: 0 1px 3px -1px rgba(0,0,0,0.12), 0 1px 2px -1px rgba(0,0,0,0.24);
+  }
+  @else if ($level == 2)
+  {
+    box-shadow: 0 3px 6px -3px rgba(0,0,0,0.16), 0 3px 6px -3px rgba(0,0,0,0.23);
+  }
+  @else if ($level == 3)
+  {
+    box-shadow: 0 10px 20px -10px rgba(0,0,0,0.19), 0 6px 6px -6px rgba(0,0,0,0.23);
+  }
+  @else if ($level == 4)
+  {
+    box-shadow: 0 14px 28px -14px rgba(0,0,0,0.25), 0 10px 10px -10px rgba(0,0,0,0.22);
+  }
+  @else if ($level == 5)
+  {
+    box-shadow: 0 19px 38px -19px rgba(0,0,0,0.30), 0 15px 12px -15px rgba(0,0,0,0.22);
+  }
+  @else if ($level == 6)
+  {
+    box-shadow: 0 0 38px rgba(0,0,0,0.30), 0 15px 12px -15px rgba(0,0,0,0.22);
+  }
+}
+
+// Monkey Patched from bourbon to brute force allow for !important declarations
+// CSS3 Flexible Box Model and property defaults
+// Unified attributes for 2009, 2011, and 2012 flavours.
+
+// 2009 - display (box | inline-box)
+// 2011 - display (flexbox | inline-flexbox)
+// 2012 - display (flex | inline-flex)
+@mixin display($value) {
+// flex | inline-flex
+  @if inspect($value) == "flex" {
+    // 2009
+    display: -webkit-box;
+    display: -moz-box;
+    display: box;
+
+    // 2012
+    display: -webkit-flex;
+    display: -moz-flex;
+    display: -ms-flexbox; // 2011 (IE 10)
+    display: flex;
+  } @else if inspect($value) == "flex !important" {
+    // 2009
+    display: -webkit-box !important;
+    display: -moz-box !important;
+    display: box !important;
+
+    // 2012
+    display: -webkit-flex !important;
+    display: -moz-flex !important;
+    display: -ms-flexbox !important; // 2011 (IE 10)
+    display: flex !important;
+  } @else if $value == "inline-flex" {
+    display: -webkit-inline-box;
+    display: -moz-inline-box;
+    display: inline-box;
+
+    display: -webkit-inline-flex;
+    display: -moz-inline-flex;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
+  } @else if inspect($value) == "inline-flex !important" {
+    display: -webkit-inline-box !important;
+    display: -moz-inline-box !important;
+    display: inline-box !important;
+
+    display: -webkit-inline-flex !important;
+    display: -moz-inline-flex !important;
+    display: -ms-inline-flexbox !important;
+    display: inline-flex !important;
+  } @else {
+    display: $value;
+  }
+}