english_tea 0.1.0

data/app/assets/stylesheets/english_tea/layout/_display.scss

@@ -0,0 +1,93 @@
+// ==========================================================================
+// Display classes
+// ==========================================================================
+
+.inline
+{
+	display: inline !important;
+}
+
+.block
+{
+	display: block !important;
+}
+
+.inline-block
+{
+	display: inline-block !important;
+}
+
+.table
+{
+	display: table !important;
+}
+
+.table-cell
+{
+	display: table-cell !important;
+}
+
+// ---
+// OVERFLOW
+// ---
+
+.o
+{
+	overflow: auto !important;
+}
+
+.ox
+{
+	overflow-x: auto !important;
+}
+
+.oy
+{
+	overflow-y: auto !important;
+}
+
+.o-hidden
+{
+	overflow: hidden !important;
+}
+
+.ox-hidden
+{
+	overflow-x: hidden !important;
+}
+
+.oy-hidden
+{
+	overflow-y: hidden !important;
+}
+
+.o-scroll
+{
+	overflow: scroll !important;
+}
+
+.ox-scroll
+{
+	overflow-x: scroll !important;
+}
+
+.oy-scroll
+{
+	overflow-y: scroll !important;
+	-webkit-overflow-scrolling: touch;
+}
+
+.o-visible
+{
+	overflow: visible;
+}
+
+.ox-visible
+{
+	overflow-x: visible;
+}
+
+.oy-visible
+{
+	overflow-y: visible;
+}

data/app/assets/stylesheets/english_tea/layout/_flex.scss

@@ -0,0 +1,266 @@
+// ==========================================================================
+// Flexbox layout for elements
+// ==========================================================================
+
+.flex
+{
+	@include display(flex !important);
+	@include flex-wrap(wrap !important);
+}
+
+.flex-inline
+{
+  @include display(inline-flex !important);
+}
+
+.flex-column
+{
+  @include flex-direction(column !important);
+}
+
+@include _bp-prefixer(flex)
+{
+  // ---
+  // WRAPPING
+  // ---
+
+  &-wrap
+  {
+    @include flex-wrap(wrap !important);
+  }
+
+  &-nowrap
+  {
+    @include flex-wrap(nowrap !important);
+  }
+
+  // ---
+  // ALIGN ITEMS
+  // ---
+
+  &-top
+  {
+    @include align-items(flex-start !important);
+  }
+
+  &-middle
+  {
+    @include align-items(center !important);
+  }
+
+  &-bottom
+  {
+    @include align-items(flex-end !important);
+  }
+
+  &-stretch
+  {
+    @include align-items(stretch !important);
+  }
+
+  &-baseline
+  {
+    @include align-items(baseline !important);
+  }
+
+  // ---
+  // ALIGN CONTENT
+  // ---
+
+  &-content-top
+  {
+    @include align-content(flex-start !important);
+  }
+
+  &-content-middle
+  {
+    @include align-content(center !important);
+  }
+
+  &-content-bottom
+  {
+    @include align-content(flex-end !important);
+  }
+
+  &-content-stretch
+  {
+    @include align-content(stretch !important);
+  }
+
+  &-content-between
+  {
+    @include align-content(space-between !important);
+  }
+
+  &-content-around
+  {
+    @include align-content(space-around !important);
+  }
+
+  // ---
+  // JUSTIFY CONTENT
+  // ---
+
+  &-left
+  {
+  	@include justify-content(flex-start !important);
+  }
+
+  &-center
+  {
+  	@include justify-content(center !important);
+  }
+
+  &-right
+  {
+  	@include justify-content(flex-end !important);
+  }
+
+  &-between
+  {
+  	@include justify-content(space-between !important);
+  }
+
+  &-around
+  {
+  	@include justify-content(space-around !important);
+  }
+}
+
+  // ---
+  // FLEX CHILDREN SHRINK/GROW
+  // ---
+
+	.shrink
+	{
+		@include flex-shrink(1 !important);
+	}
+
+	.noshrink
+	{
+		@include flex-shrink(0 !important);
+	}
+
+	.grow
+	{
+		@include flex-grow(1 !important);
+	}
+
+	.nogrow
+	{
+		@include flex-grow(0 !important);
+	}
+
+  // ---
+  // FLEX CHILDREN SELF
+  // ---
+
+  .self-stretch
+  {
+    @include align-self(stretch !important);
+  }
+
+  .self-top
+  {
+    @include align-self(flex-start !important);
+  }
+
+  .self-middle
+  {
+    @include align-self(center !important);
+  }
+
+  .self-bottom
+  {
+    @include align-self(flex-end !important);
+  }
+
+  .self-baseline
+  {
+    @include align-self(baseline !important);
+  }
+
+  // ---
+  // FLEX CHILDREN ORDER
+  // ---
+
+  @include _bp-prefixer(order)
+  {
+    &-first
+    {
+       @include order(-1);
+    }
+
+    &-last
+    {
+       @include order(999);
+    }
+
+    &-reset
+    {
+      @include order(initial);
+    }
+
+    @for $i from 1 through 6
+    {
+      &#{$i}
+      {
+        @include order($i);
+      }
+    }
+  }
+
+  // ---
+  // FLEX CHILDREN SIZING
+  // ---
+
+  @include _bp-prefixer(up)
+  {
+    @for $i from 1 through 10
+    {
+      &#{$i}
+      {
+        @include flex-basis(percentage(1 / $i) !important);
+        max-width: percentage(1 / $i); // IE11 padding fix
+				&.grow {
+					max-width: none;
+				}
+      }
+    }
+
+    &2-3
+    {
+      @include flex-basis(percentage(2 / 3) !important);
+      max-width: percentage(2 / 3); // IE11 padding fix
+			&.grow {
+				max-width: none;
+			}
+    }
+
+    &3-4
+    {
+      @include flex-basis(percentage(3 / 4) !important);
+      max-width: percentage(3 / 4); // IE11 padding fix
+			&.grow {
+				max-width: none;
+			}
+    }
+
+    &4-5
+    {
+      @include flex-basis(percentage(4 / 5) !important);
+      max-width: percentage(4 / 5); // IE11 padding fix
+			&.grow {
+				max-width: none;
+			}
+    }
+
+    &auto
+    {
+      @include flex-basis(auto !important);
+      max-width: none; // IE11 padding fix
+			&.grow {
+				max-width: none;
+			}
+    }
+  }

data/app/assets/stylesheets/english_tea/layout/_float.scss

@@ -0,0 +1,33 @@
+// ==========================================================================
+// Element float positioning classes
+// ==========================================================================
+
+.fl-left
+{
+	float: left !important;
+}
+
+.fl-right 
+{
+	float: right !important;
+}
+
+.fl-none 
+{
+	float: none !important;
+}
+
+.fl-clear
+{
+	clear: both !important;
+}
+
+.fl-clear-left
+{
+	clear: left !important;
+}
+
+.fl-clear-right
+{
+	clear: right !important;
+}

data/app/assets/stylesheets/english_tea/layout/_grid.scss

@@ -0,0 +1,210 @@
+// ==========================================================================
+// Flexbox-based grid classes
+// ==========================================================================
+
+// ---
+// GRID CONTAINER W/GUTTERS
+// ---  
+
+.g 
+{
+  @include display(flex !important);
+  @include flex-wrap(wrap);
+
+  padding-right: _rem($base-gutter);
+
+  @include _mq(map-get($breakpoints, bps))
+  {
+    padding-right: _rem($base-gutter-large);
+  }
+
+  > .g
+  {
+    padding-right: 0;
+  }
+}
+
+  // ---
+  // FLUSH GRID
+  // Force flush (w/breakpoint prefixed versions)
+  // ---  
+
+  .g-flush 
+  {
+    padding: 0;
+  }
+
+  @include _bp-prefixer-basic
+  {
+    &g-flush
+    {
+      padding: 0;
+    }
+  }
+
+  // ---
+  // GUTTER GRID
+  // Force gutters (w/breakpoint prefixed versions)
+  // ---  
+
+  .g-gutter 
+  {
+    padding-right: _rem($base-gutter);
+  }
+
+  @include _bp-prefixer-basic
+  {
+    &g-gutter
+    {
+      padding-right: _rem($base-gutter-large);
+    }
+  }
+
+  // ---
+  // ALIGN ITEMS
+  // ---
+
+  .g-top
+  {
+    @include align-items(flex-start);
+  }
+
+  .g-middle
+  {
+    @include align-items(center);
+  }
+
+  .g-bottom
+  {
+    @include align-items(flex-end);
+  }
+
+  .g-stretch
+  {
+    @include align-items(stretch);
+  }
+
+  .g-baseline
+  {
+    @include align-items(baseline);
+  }
+
+  // ---
+  // ALIGN CONTENT
+  // ---
+
+  .g-content-top
+  {
+    @include align-content(flex-start);
+  }
+
+  .g-content-middle
+  {
+    @include align-content(center);
+  }
+
+  .g-content-bottom
+  {
+    @include align-content(flex-end);
+  }
+
+  .g-content-stretch
+  {
+    @include align-content(stretch);
+  }
+
+  .g-content-baseline
+  {
+    @include align-content(baseline);
+  }
+
+  // ---
+  // JUSTIFY CONTENT
+  // ---
+
+  .g-left
+  {
+  	@include justify-content(flex-start);
+  }
+
+  .g-center
+  {
+  	@include justify-content(center);
+  }
+
+  .g-right
+  {
+  	@include justify-content(flex-end);
+  }
+
+  .g-between
+  {
+  	@include justify-content(space-between);
+  }
+
+  .g-around
+  {
+  	@include justify-content(space-around);
+  }
+
+// ---
+// GRID COLUMNS
+// ---
+
+.gc 
+{
+	@include flex-shrink(0);
+  width: 100%;
+
+  @mixin _generate-cols($cols, $gutter)
+  {
+    @for $i from 1 through $cols
+    {
+      &-#{$i}of#{$cols}
+      {
+        padding-left: $gutter;
+        width: percentage($i / $cols);
+      }
+    }
+  }
+
+	@each $key, $val in $grid-scale
+	{
+    $_bp: map-get($val, bp);
+    $_bp-val: map-get($breakpoints, $_bp);
+
+    $_cols: map-get($val, cols);
+    $_gutter: _rem(map-get($val, gutter));
+
+    @if $_bp == none
+    {
+      @include _generate-cols($_cols, $_gutter);
+    } 
+    @else 
+    {
+		  @include _mq($_bp-val)
+		  {
+        @include _generate-cols($_cols, $_gutter);
+		  }
+    }
+	}
+}
+
+  // ---
+  // FLUSH GRID COLUMN
+  // ---  
+
+  .gc-flush 
+  {
+    padding-left: 0;
+  }
+  
+  // ---
+  // STRETCH-TO-FILL GRID COLUMN
+  // ---  
+
+  .gc-fill 
+  {
+    @include flex-grow(1);
+    min-width: none;
+  }

data/app/assets/stylesheets/english_tea/layout/_layers.scss

@@ -0,0 +1,11 @@
+// ==========================================================================
+// Z-Index layers classes
+// ==========================================================================
+
+@each $key, $val in $layer-scale
+{
+	.z#{$key}
+	{
+		z-index: $val !important;
+	}
+}

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

@@ -0,0 +1,36 @@
+// ==========================================================================
+// Element positioning classes
+// ==========================================================================
+
+.relative
+{
+	position: relative;
+}
+
+.absolute
+{
+	position: absolute;
+}
+
+.fixed
+{
+	position: fixed;
+}
+
+@include _bp-prefixer-basic
+{
+	&relative
+	{
+		position: relative;
+	}
+
+	&absolute
+	{
+		position: absolute;
+	}
+
+	&fixed
+	{
+		position: fixed;
+	}
+}