tachyonscss-rails 4.9.0

data/app/assets/stylesheets/scss/_styles.scss

@@ -0,0 +1,15 @@
+
+// Converted Variables
+
+
+// Custom Media Query Variables
+
+
+/*
+
+  STYLES
+
+  Add custom styles here.
+
+*/
+

data/app/assets/stylesheets/scss/_tables.scss

@@ -0,0 +1,42 @@
+
+// Converted Variables
+
+
+// Custom Media Query Variables
+
+
+/*
+
+  TABLES
+  Docs: http://tachyons.io/docs/elements/tables/
+
+*/
+
+.collapse {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+.striped--light-silver:nth-child(odd) {
+  background-color: $light-silver;
+}
+
+.striped--moon-gray:nth-child(odd) {
+  background-color: $moon-gray;
+}
+
+.striped--light-gray:nth-child(odd) {
+  background-color: $light-gray;
+}
+
+.striped--near-white:nth-child(odd) {
+  background-color: $near-white;
+}
+
+.stripe-light:nth-child(odd) {
+  background-color: $white-10;
+}
+
+.stripe-dark:nth-child(odd) {
+  background-color: $black-10;
+}

data/app/assets/stylesheets/scss/_text-align.scss

@@ -0,0 +1,53 @@
+
+// Converted Variables
+
+
+// Custom Media Query Variables
+
+
+/*
+
+  TEXT ALIGN
+  Docs: http://tachyons.io/docs/typography/text-align/
+
+  Base
+    t = text-align
+
+  Modifiers
+    l = left
+    r = right
+    c = center
+    j = justify
+
+  Media Query Extensions:
+    -ns = not-small
+    -m  = medium
+    -l  = large
+
+*/
+
+.tl  { text-align: left; }
+.tr  { text-align: right; }
+.tc  { text-align: center; }
+.tj  { text-align: justify; }
+
+@media #{$breakpoint-not-small} {
+  .tl-ns  { text-align: left; }
+  .tr-ns  { text-align: right; }
+  .tc-ns  { text-align: center; }
+  .tj-ns  { text-align: justify; }
+}
+
+@media #{$breakpoint-medium} {
+  .tl-m  { text-align: left; }
+  .tr-m  { text-align: right; }
+  .tc-m  { text-align: center; }
+  .tj-m  { text-align: justify; }
+}
+
+@media #{$breakpoint-large} {
+  .tl-l  { text-align: left; }
+  .tr-l  { text-align: right; }
+  .tc-l  { text-align: center; }
+  .tj-l  { text-align: justify; }
+}

data/app/assets/stylesheets/scss/_text-decoration.scss

@@ -0,0 +1,42 @@
+
+// Converted Variables
+
+
+// Custom Media Query Variables
+
+
+/*
+
+   TEXT DECORATION
+   Docs: http://tachyons.io/docs/typography/text-decoration/
+
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
+*/
+
+.strike       { text-decoration: line-through; }
+.underline    { text-decoration: underline; }
+.no-underline { text-decoration: none; }
+
+
+@media #{$breakpoint-not-small} {
+  .strike-ns       { text-decoration: line-through; }
+  .underline-ns    { text-decoration: underline; }
+  .no-underline-ns { text-decoration: none; }
+}
+
+@media #{$breakpoint-medium} {
+  .strike-m       { text-decoration: line-through; }
+  .underline-m    { text-decoration: underline; }
+  .no-underline-m { text-decoration: none; }
+}
+
+@media #{$breakpoint-large} {
+  .strike-l       { text-decoration: line-through; }
+  .underline-l {    text-decoration: underline; }
+  .no-underline-l { text-decoration: none; }
+}

data/app/assets/stylesheets/scss/_text-transform.scss

@@ -0,0 +1,53 @@
+
+// Converted Variables
+
+
+// Custom Media Query Variables
+
+
+/*
+
+   TEXT TRANSFORM
+   Docs: http://tachyons.io/docs/typography/text-transform/
+
+   Base:
+     tt = text-transform
+
+   Modifiers
+     c = capitalize
+     l = lowercase
+     u = uppercase
+     n = none
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
+*/
+
+.ttc { text-transform: capitalize; }
+.ttl { text-transform: lowercase; }
+.ttu { text-transform: uppercase; }
+.ttn { text-transform: none; }
+
+@media #{$breakpoint-not-small} {
+  .ttc-ns { text-transform: capitalize; }
+  .ttl-ns { text-transform: lowercase; }
+  .ttu-ns { text-transform: uppercase; }
+  .ttn-ns { text-transform: none; }
+}
+
+@media #{$breakpoint-medium} {
+  .ttc-m { text-transform: capitalize; }
+  .ttl-m { text-transform: lowercase; }
+  .ttu-m { text-transform: uppercase; }
+  .ttn-m { text-transform: none; }
+}
+
+@media #{$breakpoint-large} {
+  .ttc-l { text-transform: capitalize; }
+  .ttl-l { text-transform: lowercase; }
+  .ttu-l { text-transform: uppercase; }
+  .ttn-l { text-transform: none; }
+}

data/app/assets/stylesheets/scss/_type-scale.scss

@@ -0,0 +1,102 @@
+
+// Converted Variables
+
+
+// Custom Media Query Variables
+
+
+/*
+
+   TYPE SCALE
+   Docs: http://tachyons.io/docs/typography/scale/
+
+   Base:
+    f = font-size
+
+   Modifiers
+     1 = 1st step in size scale
+     2 = 2nd step in size scale
+     3 = 3rd step in size scale
+     4 = 4th step in size scale
+     5 = 5th step in size scale
+     6 = 6th step in size scale
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+*/
+
+/*
+ * For Hero/Marketing Titles
+ *
+ * These generally are too large for mobile
+ * so be careful using them on smaller screens.
+ * */
+
+.f-6,
+.f-headline {
+  font-size: $font-size-headline;
+}
+.f-5,
+.f-subheadline {
+  font-size: $font-size-subheadline;
+}
+
+
+/* Type Scale */
+
+
+.f1 { font-size: $font-size-1; }
+.f2 { font-size: $font-size-2; }
+.f3 { font-size: $font-size-3; }
+.f4 { font-size: $font-size-4; }
+.f5 { font-size: $font-size-5; }
+.f6 { font-size: $font-size-6; }
+.f7 { font-size: $font-size-7; }
+
+@media #{$breakpoint-not-small}{
+  .f-6-ns,
+  .f-headline-ns { font-size: $font-size-headline; }
+  .f-5-ns,
+  .f-subheadline-ns { font-size: $font-size-subheadline; }
+  .f1-ns { font-size: $font-size-1; }
+  .f2-ns { font-size: $font-size-2; }
+  .f3-ns { font-size: $font-size-3; }
+  .f4-ns { font-size: $font-size-4; }
+  .f5-ns { font-size: $font-size-5; }
+  .f6-ns { font-size: $font-size-6; }
+  .f7-ns { font-size: $font-size-7; }
+}
+
+@media #{$breakpoint-medium} {
+  .f-6-m,
+  .f-headline-m { font-size: $font-size-headline; }
+  .f-5-m,
+  .f-subheadline-m { font-size: $font-size-subheadline; }
+  .f1-m { font-size: $font-size-1; }
+  .f2-m { font-size: $font-size-2; }
+  .f3-m { font-size: $font-size-3; }
+  .f4-m { font-size: $font-size-4; }
+  .f5-m { font-size: $font-size-5; }
+  .f6-m { font-size: $font-size-6; }
+  .f7-m { font-size: $font-size-7; }
+}
+
+@media #{$breakpoint-large} {
+  .f-6-l,
+  .f-headline-l {
+    font-size: $font-size-headline;
+  }
+  .f-5-l,
+  .f-subheadline-l {
+    font-size: $font-size-subheadline;
+  }
+  .f1-l { font-size: $font-size-1; }
+  .f2-l { font-size: $font-size-2; }
+  .f3-l { font-size: $font-size-3; }
+  .f4-l { font-size: $font-size-4; }
+  .f5-l { font-size: $font-size-5; }
+  .f6-l { font-size: $font-size-6; }
+  .f7-l { font-size: $font-size-7; }
+}

data/app/assets/stylesheets/scss/_typography.scss

@@ -0,0 +1,129 @@
+
+// Converted Variables
+
+
+// Custom Media Query Variables
+
+
+/*
+
+   TYPOGRAPHY
+   http://tachyons.io/docs/typography/measure/
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
+*/
+
+
+
+/* Measure is limited to ~66 characters */
+.measure {
+  max-width: $measure;
+}
+
+/* Measure is limited to ~80 characters */
+.measure-wide {
+  max-width: $measure-wide;
+}
+
+/* Measure is limited to ~45 characters */
+.measure-narrow {
+  max-width: $measure-narrow;
+}
+
+/* Book paragraph style - paragraphs are indented with no vertical spacing. */
+.indent {
+  text-indent: 1em;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.small-caps {
+  font-variant: small-caps;
+}
+
+/* Combine this class with a width to truncate text (or just leave as is to truncate at width of containing element. */
+
+.truncate {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@media #{$breakpoint-not-small} {
+  .measure-ns  {
+    max-width: $measure;
+  }
+  .measure-wide-ns {
+    max-width: $measure-wide;
+  }
+  .measure-narrow-ns {
+    max-width: $measure-narrow;
+  }
+  .indent-ns {
+    text-indent: 1em;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+  .small-caps-ns {
+    font-variant: small-caps;
+  }
+  .truncate-ns {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+@media #{$breakpoint-medium} {
+  .measure-m {
+    max-width: $measure;
+  }
+  .measure-wide-m {
+    max-width: $measure-wide;
+  }
+  .measure-narrow-m {
+    max-width: $measure-narrow;
+  }
+  .indent-m {
+    text-indent: 1em;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+  .small-caps-m {
+    font-variant: small-caps;
+  }
+  .truncate-m {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+@media #{$breakpoint-large} {
+  .measure-l {
+    max-width: $measure;
+  }
+  .measure-wide-l {
+    max-width: $measure-wide;
+  }
+  .measure-narrow-l {
+    max-width: $measure-narrow;
+  }
+  .indent-l {
+    text-indent: 1em;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+  .small-caps-l {
+    font-variant: small-caps;
+  }
+  .truncate-l {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}

data/app/assets/stylesheets/scss/_utilities.scss

@@ -0,0 +1,57 @@
+
+// Converted Variables
+
+
+// Custom Media Query Variables
+
+
+/*
+
+   UTILITIES
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
+*/
+
+/* Equivalent to .overflow-y-scroll */
+.overflow-container {
+  overflow-y: scroll;
+}
+
+.center {
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.mr-auto { margin-right: auto; }
+.ml-auto { margin-left:  auto; }
+
+@media #{$breakpoint-not-small}{
+  .center-ns {
+    margin-right: auto;
+    margin-left: auto;
+  }
+  .mr-auto-ns { margin-right: auto; }
+  .ml-auto-ns { margin-left:  auto; }
+}
+
+@media #{$breakpoint-medium}{
+  .center-m {
+    margin-right: auto;
+    margin-left: auto;
+  }
+  .mr-auto-m { margin-right: auto; }
+  .ml-auto-m { margin-left:  auto; }
+}
+
+@media #{$breakpoint-large}{
+  .center-l {
+    margin-right: auto;
+    margin-left: auto;
+  }
+  .mr-auto-l { margin-right: auto; }
+  .ml-auto-l { margin-left:  auto; }
+}

data/app/assets/stylesheets/scss/_variables.scss

@@ -0,0 +1,143 @@
+
+// Converted Variables
+
+$sans-serif: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, helvetica, 'helvetica neue', ubuntu, roboto, noto, 'segoe ui', arial, sans-serif !default;
+$serif: georgia, serif !default;
+$code: consolas, monaco, monospace !default;
+$font-size-headline: 6rem !default;
+$font-size-subheadline: 5rem !default;
+$font-size-1: 3rem !default;
+$font-size-2: 2.25rem !default;
+$font-size-3: 1.5rem !default;
+$font-size-4: 1.25rem !default;
+$font-size-5: 1rem !default;
+$font-size-6: .875rem !default;
+$font-size-7: .75rem !default;
+$letter-spacing-tight: -.05em !default;
+$letter-spacing-1: .1em !default;
+$letter-spacing-2: .25em !default;
+$line-height-solid: 1 !default;
+$line-height-title: 1.25 !default;
+$line-height-copy: 1.5 !default;
+$measure: 30em !default;
+$measure-narrow: 20em !default;
+$measure-wide: 34em !default;
+$spacing-none: 0 !default;
+$spacing-extra-small: .25rem !default;
+$spacing-small: .5rem !default;
+$spacing-medium: 1rem !default;
+$spacing-large: 2rem !default;
+$spacing-extra-large: 4rem !default;
+$spacing-extra-extra-large: 8rem !default;
+$spacing-extra-extra-extra-large: 16rem !default;
+$spacing-copy-separator: 1.5em !default;
+$height-1: 1rem !default;
+$height-2: 2rem !default;
+$height-3: 4rem !default;
+$height-4: 8rem !default;
+$height-5: 16rem !default;
+$width-1: 1rem !default;
+$width-2: 2rem !default;
+$width-3: 4rem !default;
+$width-4: 8rem !default;
+$width-5: 16rem !default;
+$max-width-1: 1rem !default;
+$max-width-2: 2rem !default;
+$max-width-3: 4rem !default;
+$max-width-4: 8rem !default;
+$max-width-5: 16rem !default;
+$max-width-6: 32rem !default;
+$max-width-7: 48rem !default;
+$max-width-8: 64rem !default;
+$max-width-9: 96rem !default;
+$border-radius-none: 0 !default;
+$border-radius-1: .125rem !default;
+$border-radius-2: .25rem !default;
+$border-radius-3: .5rem !default;
+$border-radius-4: 1rem !default;
+$border-radius-circle: 100% !default;
+$border-radius-pill: 9999px !default;
+$border-width-none: 0 !default;
+$border-width-1: .125rem !default;
+$border-width-2: .25rem !default;
+$border-width-3: .5rem !default;
+$border-width-4: 1rem !default;
+$border-width-5: 2rem !default;
+$box-shadow-1: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ) !default;
+$box-shadow-2: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ) !default;
+$box-shadow-3: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ) !default;
+$box-shadow-4: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ) !default;
+$box-shadow-5: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ) !default;
+$black: #000 !default;
+$near-black: #111 !default;
+$dark-gray: #333 !default;
+$mid-gray: #555 !default;
+$gray: #777 !default;
+$silver: #999 !default;
+$light-silver: #aaa !default;
+$moon-gray: #ccc !default;
+$light-gray: #eee !default;
+$near-white: #f4f4f4 !default;
+$white: #fff !default;
+$transparent: transparent !default;
+$black-90: rgba(0,0,0,.9) !default;
+$black-80: rgba(0,0,0,.8) !default;
+$black-70: rgba(0,0,0,.7) !default;
+$black-60: rgba(0,0,0,.6) !default;
+$black-50: rgba(0,0,0,.5) !default;
+$black-40: rgba(0,0,0,.4) !default;
+$black-30: rgba(0,0,0,.3) !default;
+$black-20: rgba(0,0,0,.2) !default;
+$black-10: rgba(0,0,0,.1) !default;
+$black-05: rgba(0,0,0,.05) !default;
+$black-025: rgba(0,0,0,.025) !default;
+$black-0125: rgba(0,0,0,.0125) !default;
+$white-90: rgba(255,255,255,.9) !default;
+$white-80: rgba(255,255,255,.8) !default;
+$white-70: rgba(255,255,255,.7) !default;
+$white-60: rgba(255,255,255,.6) !default;
+$white-50: rgba(255,255,255,.5) !default;
+$white-40: rgba(255,255,255,.4) !default;
+$white-30: rgba(255,255,255,.3) !default;
+$white-20: rgba(255,255,255,.2) !default;
+$white-10: rgba(255,255,255,.1) !default;
+$white-05: rgba(255,255,255,.05) !default;
+$white-025: rgba(255,255,255,.025) !default;
+$white-0125: rgba(255,255,255,.0125) !default;
+$dark-red: #e7040f !default;
+$red: #ff4136 !default;
+$light-red: #ff725c !default;
+$orange: #ff6300 !default;
+$gold: #ffb700 !default;
+$yellow: #ffd700 !default;
+$light-yellow: #fbf1a9 !default;
+$purple: #5e2ca5 !default;
+$light-purple: #a463f2 !default;
+$dark-pink: #d5008f !default;
+$hot-pink: #ff41b4 !default;
+$pink: #ff80cc !default;
+$light-pink: #ffa3d7 !default;
+$dark-green: #137752 !default;
+$green: #19a974 !default;
+$light-green: #9eebcf !default;
+$navy: #001b44 !default;
+$dark-blue: #00449e !default;
+$blue: #357edd !default;
+$light-blue: #96ccff !default;
+$lightest-blue: #cdecff !default;
+$washed-blue: #f6fffe !default;
+$washed-green: #e8fdf5 !default;
+$washed-yellow: #fffceb !default;
+$washed-red: #ffdfdf !default;
+
+// Custom Media Query Variables
+
+$breakpoint-not-small: 'screen and (min-width: 30em)' !default;
+$breakpoint-medium: 'screen and (min-width: 30em) and (max-width: 60em)' !default;
+$breakpoint-large: 'screen and (min-width: 60em)' !default;
+
+/*
+
+    VARIABLES
+
+*/

data/app/assets/stylesheets/scss/_vertical-align.scss

@@ -0,0 +1,43 @@
+
+// Converted Variables
+
+
+// Custom Media Query Variables
+
+
+/*
+
+   VERTICAL ALIGN
+
+   Media Query Extensions:
+     -ns = not-small
+     -m  = medium
+     -l  = large
+
+*/
+
+.v-base     { vertical-align: baseline; }
+.v-mid      { vertical-align: middle; }
+.v-top      { vertical-align: top; }
+.v-btm      { vertical-align: bottom; }
+
+@media #{$breakpoint-not-small} {
+  .v-base-ns     { vertical-align: baseline; }
+  .v-mid-ns      { vertical-align: middle; }
+  .v-top-ns      { vertical-align: top; }
+  .v-btm-ns      { vertical-align: bottom; }
+}
+
+@media #{$breakpoint-medium} {
+  .v-base-m     { vertical-align: baseline; }
+  .v-mid-m      { vertical-align: middle; }
+  .v-top-m      { vertical-align: top; }
+  .v-btm-m      { vertical-align: bottom; }
+}
+
+@media #{$breakpoint-large} {
+  .v-base-l     { vertical-align: baseline; }
+  .v-mid-l      { vertical-align: middle; }
+  .v-top-l      { vertical-align: top; }
+  .v-btm-l      { vertical-align: bottom; }
+}