tachyonscss-rails 4.9.0

data/app/assets/stylesheets/scss/_font-weight.scss

@@ -0,0 +1,87 @@
+
+// Converted Variables
+
+
+// Custom Media Query Variables
+
+
+/*
+
+   FONT WEIGHT
+   Docs: http://tachyons.io/docs/typography/font-weight/
+
+   Base
+     fw = font-weight
+
+   Modifiers:
+     1 = literal value 100
+     2 = literal value 200
+     3 = literal value 300
+     4 = literal value 400
+     5 = literal value 500
+     6 = literal value 600
+     7 = literal value 700
+     8 = literal value 800
+     9 = literal value 900
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
+*/
+
+.normal { font-weight: normal; }
+.b      { font-weight: bold; }
+.fw1    { font-weight: 100; }
+.fw2    { font-weight: 200; }
+.fw3    { font-weight: 300; }
+.fw4    { font-weight: 400; }
+.fw5    { font-weight: 500; }
+.fw6    { font-weight: 600; }
+.fw7    { font-weight: 700; }
+.fw8    { font-weight: 800; }
+.fw9    { font-weight: 900; }
+
+
+@media #{$breakpoint-not-small} {
+  .normal-ns { font-weight: normal; }
+  .b-ns      { font-weight: bold; }
+  .fw1-ns    { font-weight: 100; }
+  .fw2-ns    { font-weight: 200; }
+  .fw3-ns    { font-weight: 300; }
+  .fw4-ns    { font-weight: 400; }
+  .fw5-ns    { font-weight: 500; }
+  .fw6-ns    { font-weight: 600; }
+  .fw7-ns    { font-weight: 700; }
+  .fw8-ns    { font-weight: 800; }
+  .fw9-ns    { font-weight: 900; }
+}
+
+@media #{$breakpoint-medium} {
+  .normal-m { font-weight: normal; }
+  .b-m      { font-weight: bold; }
+  .fw1-m    { font-weight: 100; }
+  .fw2-m    { font-weight: 200; }
+  .fw3-m    { font-weight: 300; }
+  .fw4-m    { font-weight: 400; }
+  .fw5-m    { font-weight: 500; }
+  .fw6-m    { font-weight: 600; }
+  .fw7-m    { font-weight: 700; }
+  .fw8-m    { font-weight: 800; }
+  .fw9-m    { font-weight: 900; }
+}
+
+@media #{$breakpoint-large} {
+  .normal-l { font-weight: normal; }
+  .b-l      { font-weight: bold; }
+  .fw1-l    { font-weight: 100; }
+  .fw2-l    { font-weight: 200; }
+  .fw3-l    { font-weight: 300; }
+  .fw4-l    { font-weight: 400; }
+  .fw5-l    { font-weight: 500; }
+  .fw6-l    { font-weight: 600; }
+  .fw7-l    { font-weight: 700; }
+  .fw8-l    { font-weight: 800; }
+  .fw9-l    { font-weight: 900; }
+}

data/app/assets/stylesheets/scss/_forms.scss

@@ -0,0 +1,23 @@
+
+// Converted Variables
+
+
+// Custom Media Query Variables
+
+
+/*
+
+   FORMS
+   
+*/
+
+.input-reset {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+.button-reset::-moz-focus-inner,
+.input-reset::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}

data/app/assets/stylesheets/scss/_gradients.scss

@@ -0,0 +1,29 @@
+
+// Converted Variables
+
+
+// Custom Media Query Variables
+
+
+/*
+
+   GRADIENTS
+
+
+*/
+
+.gradient-blue { 
+  background-image: linear-gradient(#4570B0, #0081C2);
+}
+
+.gradient-blue-reversed { 
+  background-image: linear-gradient(#0081C2, #4570B0);
+}
+
+.gradient-light-blue { 
+  background-image: linear-gradient(#76D3FE, #008AE0);
+}
+
+.gradient-light-blue-reversed { 
+  background-image: linear-gradient(#008AE0, #76D3FE);
+}

data/app/assets/stylesheets/scss/_heights.scss

@@ -0,0 +1,131 @@
+
+// Converted Variables
+
+
+// Custom Media Query Variables
+
+
+/*
+
+   HEIGHTS
+   Docs: http://tachyons.io/docs/layout/heights/
+
+   Base:
+     h = height
+     min-h = min-height
+     min-vh = min-height vertical screen height
+     vh = vertical screen height
+
+   Modifiers
+     1 = 1st step in height scale
+     2 = 2nd step in height scale
+     3 = 3rd step in height scale
+     4 = 4th step in height scale
+     5 = 5th step in height scale
+
+     -25   = literal value 25%
+     -50   = literal value 50%
+     -75   = literal value 75%
+     -100  = literal value 100%
+
+     -auto = string value of auto
+     -inherit = string value of inherit
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
+*/
+
+/* Height Scale */
+
+.h1 { height: $height-1; }
+.h2 { height: $height-2; }
+.h3 { height: $height-3; }
+.h4 { height: $height-4; }
+.h5 { height: $height-5; }
+
+/* Height Percentages - Based off of height of parent */
+
+.h-25 {  height:  25%; }
+.h-50 {  height:  50%; }
+.h-75 {  height:  75%; }
+.h-100 { height: 100%; }
+
+.min-h-100 { min-height: 100%; }
+
+/* Screen Height Percentage */
+
+.vh-25 {  height:  25vh; }
+.vh-50 {  height:  50vh; }
+.vh-75 {  height:  75vh; }
+.vh-100 { height: 100vh; }
+
+.min-vh-100 { min-height: 100vh; }
+
+
+/* String Properties */
+
+.h-auto {     height: auto; }
+.h-inherit {  height: inherit; }
+
+@media #{$breakpoint-not-small} {
+  .h1-ns {  height: $height-1; }
+  .h2-ns {  height: $height-2; }
+  .h3-ns {  height: $height-3; }
+  .h4-ns {  height: $height-4; }
+  .h5-ns {  height: $height-5; }
+  .h-25-ns { height: 25%; }
+  .h-50-ns { height: 50%; }
+  .h-75-ns { height: 75%; }
+  .h-100-ns { height: 100%; }
+  .min-h-100-ns { min-height: 100%; }
+  .vh-25-ns {  height:  25vh; }
+  .vh-50-ns {  height:  50vh; }
+  .vh-75-ns {  height:  75vh; }
+  .vh-100-ns { height: 100vh; }
+  .min-vh-100-ns { min-height: 100vh; }
+  .h-auto-ns { height: auto; }
+  .h-inherit-ns { height: inherit; }
+}
+
+@media #{$breakpoint-medium} {
+  .h1-m { height: $height-1; }
+  .h2-m { height: $height-2; }
+  .h3-m { height: $height-3; }
+  .h4-m { height: $height-4; }
+  .h5-m { height: $height-5; }
+  .h-25-m { height: 25%; }
+  .h-50-m { height: 50%; }
+  .h-75-m { height: 75%; }
+  .h-100-m { height: 100%; }
+  .min-h-100-m { min-height: 100%; }
+  .vh-25-m {  height:  25vh; }
+  .vh-50-m {  height:  50vh; }
+  .vh-75-m {  height:  75vh; }
+  .vh-100-m { height: 100vh; }
+  .min-vh-100-m { min-height: 100vh; }
+  .h-auto-m { height: auto; }
+  .h-inherit-m { height: inherit; }
+}
+
+@media #{$breakpoint-large} {
+  .h1-l { height: $height-1; }
+  .h2-l { height: $height-2; }
+  .h3-l { height: $height-3; }
+  .h4-l { height: $height-4; }
+  .h5-l { height: $height-5; }
+  .h-25-l { height: 25%; }
+  .h-50-l { height: 50%; }
+  .h-75-l { height: 75%; }
+  .h-100-l { height: 100%; }
+  .min-h-100-l { min-height: 100%; }
+  .vh-25-l {  height:  25vh; }
+  .vh-50-l {  height:  50vh; }
+  .vh-75-l {  height:  75vh; }
+  .vh-100-l { height: 100vh; }
+  .min-vh-100-l { min-height: 100vh; }
+  .h-auto-l { height: auto; }
+  .h-inherit-l { height: inherit; }
+}

data/app/assets/stylesheets/scss/_hovers.scss

@@ -0,0 +1,166 @@
+
+// Converted Variables
+
+
+// Custom Media Query Variables
+
+
+/*
+
+  HOVER EFFECTS
+  Docs: http://tachyons.io/docs/themes/hovers/
+
+    - Dim
+    - Glow
+    - Hide Child
+    - Underline text
+    - Grow
+    - Pointer
+    - Shadow
+
+*/
+
+/*
+
+  Dim element on hover by adding the dim class.
+
+*/
+.dim {
+  opacity: 1;
+  transition: opacity .15s ease-in;
+}
+.dim:hover,
+.dim:focus {
+  opacity: .5;
+  transition: opacity .15s ease-in;
+}
+.dim:active {
+  opacity: .8; transition: opacity .15s ease-out;
+}
+
+/*
+
+  Animate opacity to 100% on hover by adding the glow class.
+
+*/
+.glow {
+  transition: opacity .15s ease-in;
+}
+.glow:hover,
+.glow:focus {
+  opacity: 1;
+  transition: opacity .15s ease-in;
+}
+
+/*
+
+  Hide child & reveal on hover:
+
+  Put the hide-child class on a parent element and any nested element with the
+  child class will be hidden and displayed on hover or focus.
+
+  <div class="hide-child">
+    <div class="child"> Hidden until hover or focus </div>
+    <div class="child"> Hidden until hover or focus </div>
+    <div class="child"> Hidden until hover or focus </div>
+    <div class="child"> Hidden until hover or focus </div>
+  </div>
+*/
+
+.hide-child .child {
+  opacity: 0;
+  transition: opacity .15s ease-in;
+}
+.hide-child:hover  .child,
+.hide-child:focus  .child,
+.hide-child:active .child {
+  opacity: 1;
+  transition: opacity .15s ease-in;
+}
+
+.underline-hover:hover,
+.underline-hover:focus {
+  text-decoration: underline;
+}
+
+/* Can combine this with overflow-hidden to make background images grow on hover
+ * even if you are using background-size: cover */
+
+.grow {
+  -moz-osx-font-smoothing: grayscale;
+  backface-visibility: hidden;
+  transform: translateZ(0);
+  transition: transform 0.25s ease-out;
+}
+
+.grow:hover,
+.grow:focus {
+  transform: scale(1.05);
+}
+
+.grow:active {
+  transform: scale(.90);
+}
+
+.grow-large {
+  -moz-osx-font-smoothing: grayscale;
+  backface-visibility: hidden;
+  transform: translateZ(0);
+  transition: transform .25s ease-in-out;
+}
+
+.grow-large:hover,
+.grow-large:focus {
+  transform: scale(1.2);
+}
+
+.grow-large:active {
+  transform: scale(.95);
+}
+
+/* Add pointer on hover */
+
+.pointer:hover {
+  cursor: pointer;
+}
+
+/*
+   Add shadow on hover.
+
+   Performant box-shadow animation pattern from
+   http://tobiasahlin.com/blog/how-to-animate-box-shadow/
+*/
+
+.shadow-hover {
+  cursor: pointer;
+  position: relative;
+  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+.shadow-hover::after {
+  content: '';
+  box-shadow: 0px 0px 16px 2px rgba( 0, 0, 0, .2 );
+  border-radius: inherit;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+.shadow-hover:hover::after,
+.shadow-hover:focus::after {
+  opacity: 1;
+}
+
+/* Combine with classes in skins and skins-pseudo for
+ * many different transition possibilities. */
+
+.bg-animate,
+.bg-animate:hover,
+.bg-animate:focus {
+  transition: background-color .15s ease-in-out;
+}

data/app/assets/stylesheets/scss/_images.scss

@@ -0,0 +1,18 @@
+
+// Converted Variables
+
+
+// Custom Media Query Variables
+
+
+/*
+
+   IMAGES
+   Docs: http://tachyons.io/docs/elements/images/
+
+*/
+
+/* Responsive images! */
+
+img { max-width: 100%; }
+

data/app/assets/stylesheets/scss/_letter-spacing.scss

@@ -0,0 +1,40 @@
+
+// Converted Variables
+
+
+// Custom Media Query Variables
+
+
+/*
+
+   LETTER SPACING
+   Docs: http://tachyons.io/docs/typography/tracking/
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
+*/
+
+.tracked       { letter-spacing:  $letter-spacing-1; }
+.tracked-tight { letter-spacing: $letter-spacing-tight; }
+.tracked-mega  { letter-spacing:  $letter-spacing-2; }
+
+@media #{$breakpoint-not-small} {
+  .tracked-ns       { letter-spacing:  $letter-spacing-1; }
+  .tracked-tight-ns { letter-spacing: $letter-spacing-tight; }
+  .tracked-mega-ns  { letter-spacing:  $letter-spacing-2; }
+}
+
+@media #{$breakpoint-medium} {
+  .tracked-m       { letter-spacing:  $letter-spacing-1; }
+  .tracked-tight-m { letter-spacing: $letter-spacing-tight; }
+  .tracked-mega-m  { letter-spacing:  $letter-spacing-2; }
+}
+
+@media #{$breakpoint-large} {
+  .tracked-l       { letter-spacing:  $letter-spacing-1; }
+  .tracked-tight-l { letter-spacing: $letter-spacing-tight; }
+  .tracked-mega-l  { letter-spacing:  $letter-spacing-2; }
+}

data/app/assets/stylesheets/scss/_line-height.scss

@@ -0,0 +1,41 @@
+
+// Converted Variables
+
+
+// Custom Media Query Variables
+
+
+/*
+
+   LINE HEIGHT / LEADING
+   Docs: http://tachyons.io/docs/typography/line-height
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
+*/
+
+  .lh-solid { line-height: $line-height-solid; }
+  .lh-title { line-height: $line-height-title; }
+  .lh-copy  { line-height: $line-height-copy; }
+
+@media #{$breakpoint-not-small} {
+  .lh-solid-ns { line-height: $line-height-solid; }
+  .lh-title-ns { line-height: $line-height-title; }
+  .lh-copy-ns  { line-height: $line-height-copy; }
+}
+
+@media #{$breakpoint-medium} {
+  .lh-solid-m { line-height: $line-height-solid; }
+  .lh-title-m { line-height: $line-height-title; }
+  .lh-copy-m  { line-height: $line-height-copy; }
+}
+
+@media #{$breakpoint-large} {
+  .lh-solid-l { line-height: $line-height-solid; }
+  .lh-title-l { line-height: $line-height-title; }
+  .lh-copy-l  { line-height: $line-height-copy; }
+}
+

data/app/assets/stylesheets/scss/_links.scss

@@ -0,0 +1,34 @@
+
+// Converted Variables
+
+
+// Custom Media Query Variables
+
+
+/*
+
+   LINKS
+   Docs: http://tachyons.io/docs/elements/links/
+
+*/
+
+.link {
+  text-decoration: none;
+  transition: color .15s ease-in;
+}
+
+.link:link,
+.link:visited {
+  transition: color .15s ease-in;
+}
+.link:hover   {
+  transition: color .15s ease-in;
+}
+.link:active  {
+  transition: color .15s ease-in;
+}
+.link:focus   {
+  transition: color .15s ease-in;
+  outline: 1px dotted currentColor;
+}
+

data/app/assets/stylesheets/scss/_lists.scss

@@ -0,0 +1,15 @@
+
+// Converted Variables
+
+
+// Custom Media Query Variables
+
+
+/*
+
+   LISTS
+   http://tachyons.io/docs/elements/lists/
+
+*/
+
+.list {         list-style-type: none; }

data/app/assets/stylesheets/scss/_max-widths.scss

@@ -0,0 +1,105 @@
+
+// Converted Variables
+
+
+// Custom Media Query Variables
+
+
+/*
+
+   MAX WIDTHS
+   Docs: http://tachyons.io/docs/layout/max-widths/
+
+   Base:
+     mw = max-width
+
+   Modifiers
+     1 = 1st step in width scale
+     2 = 2nd step in width scale
+     3 = 3rd step in width scale
+     4 = 4th step in width scale
+     5 = 5th step in width scale
+     6 = 6st step in width scale
+     7 = 7nd step in width scale
+     8 = 8rd step in width scale
+     9 = 9th step in width scale
+
+     -100 = literal value 100%
+
+     -none  = string value none
+
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
+*/
+
+/* Max Width Percentages */
+
+.mw-100  { max-width: 100%; }
+
+/* Max Width Scale */
+
+.mw1  {  max-width: $max-width-1; }
+.mw2  {  max-width: $max-width-2; }
+.mw3  {  max-width: $max-width-3; }
+.mw4  {  max-width: $max-width-4; }
+.mw5  {  max-width: $max-width-5; }
+.mw6  {  max-width: $max-width-6; }
+.mw7  {  max-width: $max-width-7; }
+.mw8  {  max-width: $max-width-8; }
+.mw9  {  max-width: $max-width-9; }
+
+/* Max Width String Properties */
+
+.mw-none { max-width: none; }
+
+@media #{$breakpoint-not-small} {
+  .mw-100-ns  { max-width: 100%; }
+
+  .mw1-ns  {  max-width: $max-width-1; }
+  .mw2-ns  {  max-width: $max-width-2; }
+  .mw3-ns  {  max-width: $max-width-3; }
+  .mw4-ns  {  max-width: $max-width-4; }
+  .mw5-ns  {  max-width: $max-width-5; }
+  .mw6-ns  {  max-width: $max-width-6; }
+  .mw7-ns  {  max-width: $max-width-7; }
+  .mw8-ns  {  max-width: $max-width-8; }
+  .mw9-ns  {  max-width: $max-width-9; }
+
+  .mw-none-ns { max-width: none; }
+}
+
+@media #{$breakpoint-medium} {
+  .mw-100-m  { max-width: 100%; }
+
+  .mw1-m  {  max-width: $max-width-1; }
+  .mw2-m  {  max-width: $max-width-2; }
+  .mw3-m  {  max-width: $max-width-3; }
+  .mw4-m  {  max-width: $max-width-4; }
+  .mw5-m  {  max-width: $max-width-5; }
+  .mw6-m  {  max-width: $max-width-6; }
+  .mw7-m  {  max-width: $max-width-7; }
+  .mw8-m  {  max-width: $max-width-8; }
+  .mw9-m  {  max-width: $max-width-9; }
+
+  .mw-none-m { max-width: none; }
+}
+
+@media #{$breakpoint-large} {
+  .mw-100-l  { max-width: 100%; }
+
+  .mw1-l  {  max-width: $max-width-1; }
+  .mw2-l  {  max-width: $max-width-2; }
+  .mw3-l  {  max-width: $max-width-3; }
+  .mw4-l  {  max-width: $max-width-4; }
+  .mw5-l  {  max-width: $max-width-5; }
+  .mw6-l  {  max-width: $max-width-6; }
+  .mw7-l  {  max-width: $max-width-7; }
+  .mw8-l  {  max-width: $max-width-8; }
+  .mw9-l  {  max-width: $max-width-9; }
+
+  .mw-none-l { max-width: none; }
+}