roots-rails 0.0.1.alpha

data/vendor/assets/stylesheets/modules/_interaction.sass

@@ -0,0 +1,89 @@
+@import 'utilities'
+
+// -----------------------------------------------------
+// Interaction
+// -----------------------------------------------------
+
+// Mixin: Hover Darken
+// Pass this a color and it will darken it. Defaults to text color, pass $bg makes the bgcolor darken.
+// Optional percentage as the second param.
+// ex. +darken($red)
+// ex. +darken(#D45D86, 30%)
+// ex. +darken($blue, $bg: true)
+
+=hover-darken($color, $percentage: 15%, $bg: false)
+  &:hover
+    @if $bg
+      background-color: darken($color, $percentage)
+    @else
+      color: darken($color, $percentage)
+
+// Mixin: Hover Lighten
+// Works the same way as hover darken but lightens the color
+
+=hover-lighten($color, $percentage: 15%, $bg: false)
+  &:hover
+    @if $bg
+      background-color: lighten($color, $percentage)
+    @else
+      color: lighten($color, $percentage)
+
+// Mixin: Hover Underline
+// This one is interesting, and may need tweaking to get it to work right on the
+// intended element. Works very nicely for text, like in a span, and can animate.
+// ex. +hover-underline
+
+=hover-underline
+  border-bottom: 1px solid transparent
+  &:hover
+    border-bottom: 1px solid
+
+// Mixin: Hover Pop
+// On hover, your element pops out from the page. For scale, it takes an integer or float,
+// 1 represents 100%, 2 is 200%, etc. Optionally can also rotate, pass it a number followed by
+// "deg", like 180deg. If you pass true for shadow, it will animate in a drop shadow to add to
+// the effect
+// ex. +hover-pop(1.5)
+// ex. +hover-pop(2.6, 90deg)
+// ex. +hover-pop(1.2, 45deg, true)
+// ex. +hover-pop(1.7, $shadow: true)
+
+=hover-pop($scale, $rotate: false, $shadow: false)
+  @if $shadow
+    +box-shadow(0 0 1px transparent)
+  &:hover
+    position: relative
+    z-index: 10
+    -webkit-transform: scale($scale)
+    @if $shadow
+      +box-shadow(0 0 5px rgba(#000, .3))
+    @if $rotate
+      -webkit-transform: scale($scale) rotate($rotate)
+
+// Mixin: Hover Fade
+// On hover, fades the element's opacity down. Takes an amount as an integer between
+// 0 and 1, like opacity normally does. Recommended to be used with transition.
+// ex. +hover-fade(.5)
+
+=hover-fade($amount)
+  &:hover
+    opacity: $amount
+
+// Mixin: Hover Color
+// Will swap an elements color or background color on hover. Takes a color in any format
+// as the first argument, and a boolean indicating if you want it to be the background color
+// as the second. Also recommended to be used with transition.
+// ex. +hover-color(#D45D86)
+// ex. +hover-color($red, true)
+
+=hover-color($color, $bg: false)
+  &:hover
+    @if $bg
+      background-color: $color
+    @else
+      color: $color
+
+// To add:
+// *+click-down(pixels)* 
+// *+click-shadow(radius)* 
+// *+button-interaction(color)* 

data/vendor/assets/stylesheets/modules/_reset.sass

@@ -0,0 +1,238 @@
+// ---------------------------------------
+// COMPLETE RESET
+// ---------------------------------------
+
+// This should be used as the last mixin, +global-reset, almost exclusively.
+// This is ported from Eric Meyer's html5 reset.
+
+=reset-box-model
+  margin: 0
+  padding: 0
+  border: 0
+
+=reset-font
+  font-size: 100%
+  font: inherit
+  vertical-align: baseline
+
+=reset-focus
+  outline: 0
+
+=reset-body
+  line-height: 1
+
+=reset-list-style
+  list-style: none
+
+=reset-table
+  border-collapse: collapse
+  border-spacing: 0
+
+=reset-table-cell
+  text-align: left
+  font-weight: normal
+  vertical-align: middle
+
+=reset-quotation
+  quotes: none
+  &:before, &:after
+    content: ""
+    content: none
+
+=reset-image-anchor-border
+  border: none
+
+=global-reset
+  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
+    +reset-box-model
+    +reset-font
+  body
+    +reset-body
+  ol, ul
+    +reset-list-style
+  table
+    +reset-table
+  caption, th, td
+    +reset-table-cell
+  q, blockquote
+    +reset-quotation
+  a img
+    +reset-image-anchor-border
+
+// ---------------------------------------
+// NORMALIZE
+// ---------------------------------------
+
+// Direct port from http://github.com/necolas/normalize.css
+
+=normalize
+  article, aside, details, figcaption, figure, footer, header, hgroup, nav, section
+    display: block
+
+  audio, canvas, video
+    display: inline-block
+    *display: inline
+    *zoom: 1
+
+  audio:not([controls])
+    display: none
+
+  [hidden]
+    display: none
+
+  html
+    font-size: 100%
+    overflow-y: scroll
+    -webkit-text-size-adjust: 100%
+    -ms-text-size-adjust: 100%
+
+  body
+    margin: 0
+
+  body, button, input, select, textarea
+    font-family: sans-serif
+
+  a
+    &:focus
+      outline: thin dotted
+
+    &:hover, &:active
+      outline: 0
+
+  h1
+    font-size: 2em
+
+  abbr[title]
+    border-bottom: 1px dotted
+
+  b, strong
+    font-weight: bold
+
+  blockquote
+    margin: 1em 40px
+
+  dfn
+    font-style: italic
+
+  mark
+    background: #ff0
+    color: #000
+
+  pre, code, kbd, samp
+    font-family: monospace, serif
+    _font-family: 'Courier New', monospace
+    font-size: 1em
+
+  pre
+    white-space: pre
+    white-space: pre-wrap
+    word-wrap: break-word
+
+  q
+    quotes: none
+
+    &:before, &:after
+      content: ''
+      content: none
+
+  small
+    font-size: 75%
+
+  sub, sup
+    font-size: 75%
+    line-height: 0
+    position: relative
+    vertical-align: baseline
+
+  sup
+    top: -0.5em
+
+  sub
+    bottom: -0.25em
+
+  ul, ol
+    margin-left: 0
+    padding: 0 0 0 40px
+
+  dd
+    margin: 0 0 0 40px
+
+  nav
+    ul, ol
+      list-style: none
+      list-style-image: none
+
+
+  img
+    border: 0
+    -ms-interpolation-mode: bicubic
+
+  svg:not(:root)
+    overflow: hidden
+
+  figure
+    margin: 0
+
+  form
+    margin: 0
+
+  fieldset
+    border: 1px solid #c0c0c0
+    margin: 0 2px
+    padding: 0.35em 0.625em 0.75em
+
+  legend
+    border: 0
+    *margin-left: -7px
+
+  button, input, select, textarea
+    font-size: 100%
+    margin: 0
+    vertical-align: baseline
+    *vertical-align: middle
+
+  button, input
+    line-height: normal
+
+  button, input[type='button'], input[type='reset'], input[type='submit']
+    cursor: pointer
+    -webkit-appearance: button
+    *overflow: visible
+
+  input
+    &[type="checkbox"], &[type="radio"]
+      box-sizing: border-box
+      padding: 0
+
+    &[type="search"]
+      -webkit-appearance: textfield
+      -moz-box-sizing: content-box
+      -webkit-box-sizing: content-box
+      box-sizing: content-box
+
+      &::-webkit-search-decoration
+        -webkit-appearance: none
+
+  button::-moz-focus-inner, input::-moz-focus-inner
+    border: 0
+    padding: 0
+
+  textarea
+    overflow: auto
+    vertical-align: top
+
+  table
+    border-collapse: collapse
+    border-spacing: 0

data/vendor/assets/stylesheets/modules/_tables.sass

@@ -0,0 +1,76 @@
+// Mixin: Table
+// Ported directly from Twitter Bootstrap, as they did an excellent job with the tables.
+// Take three fairly self-explanitory arguments, all boolean. 1st makes the table bordered,
+// 2nd adds zebra striping, and the 3rd indiated whether the table is condensed or not.
+
+// TODO: Add options to customize colors
+
+=table($border: true, $striped: true, $condensed: false)
+
+  max-width: 100%
+  border-collapse: collapse 
+  border-spacing: 0
+  width: 100%
+  margin-bottom: 18px
+
+  th, td
+    padding: 8px
+    line-height: 18px
+    text-align: left
+    vertical-align: top
+    border-top: 1px solid #ddd
+
+  th
+    font-weight: bold
+
+  thead th
+    vertical-align: bottom
+
+  thead:first-child tr th, thead:first-child tr td
+    border-top: 0
+
+  tbody + tbody
+    border-top: 2px solid #ddd
+  
+  @if $condensed
+    th, td
+      padding: 4px 5px
+  
+  @if $border
+    border: 1px solid #ddd
+    border-collapse: separate
+    *border-collapse: collapsed
+    +round(4px)
+
+    th + th, td + td, th + td, td + th
+      border-left: 1px solid #ddd
+
+    thead:first-child tr:first-child th, tbody:first-child tr:first-child th, tbody:first-child tr:first-child td
+      border-top: 0
+
+    thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child
+      +round(4px 0 0 0)
+
+    thead:first-child tr:first-child th:last-child, tbody:first-child tr:first-child td:last-child
+      +round(0 4px 0 0)
+
+    thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child
+      +round(0 0 0 4px)
+
+    thead:last-child tr:last-child th:last-child, tbody:last-child tr:last-child td:last-child
+      +round(0 0 4px 0)
+  
+  @if $striped
+    tbody tr:nth-child(odd) td, tbody tr:nth-child(odd) th
+      background-color: #f9f9f9
+
+    tbody tr:hover td, tbody tr:hover th
+      background-color: #f5f5f5
+
+// Additive Mixin: Tables
+// WARNING: Creates classes in your css and styles them - not to be used inside an element.
+// Makes tables look awesome by default. Highly recommended if you have tables on your site at all.
+
+=tables
+  table
+    +table

data/vendor/assets/stylesheets/modules/_typography.sass

@@ -0,0 +1,367 @@
+// -----------------------------------------------------
+// Typography
+// -----------------------------------------------------
+
+// Mixin: Text Margin
+// Pass this guy a font size (pixels - no units) and he will apply margins to the element at a ratio
+// most pleasing to the gods.
+// ex. +text-margin(14)
+
+=text-margin($size)
+  margin: #{$size/1.2}px 0
+
+// Mixin: P
+// Takes care of all your paragraph needs. Pass it an optional size and it will
+// do some golden ratio math and give you a nice line height. Pass it a width and it will
+// be even more accurate. And you can turn off margins if you'd like too.
+
+// math via http://www.pearsonified.com/2011/12/golden-ratio-typography.php
+
+// ex. +p
+// ex. +p(18)
+// ex. +p(14, true, 500px)
+
+=p($size: $font-size, $margins: true, $width: false)
+
+  $gr: 1.61803399
+  $height: $size * $gr
+
+  @if $width
+    $height: $gr - (1 / (2 * $gr)) * (1 - $width / ($width * $gr))
+    width: $width
+
+  @if $margins
+    +text-margin($size)
+  
+  line-height: #{round($height)}px
+  font-size: $size + px
+  font-size: $size*.0615384 + rem // this is questionable, so be careful
+
+// Mixin: Size
+// An alias for 'font-size'
+// ex. +size(16px)
+
+=size($size)
+  font-size: $size
+
+// Mixin: Fs
+// An alias for 'font-size'
+// ex. +size(16px)
+
+=fs($size)
+  font-size: $size
+
+// Mixin: Uppercase
+// An alias for 'text-transform: uppercase'
+// ex. +uppercase
+
+=uppercase
+  text-transform: uppercase
+
+// Mixin: Upcase
+// An alias for 'text-transform: uppercase'
+// ex. +upcase
+
+=upcase
+  +uppercase
+
+// Mixin: Lowercase
+// An alias for 'text-transform: lowercase'
+// ex. +lowercase
+
+=lowercase
+  text-transform: lowercase
+
+// Mixin: Downcase
+// An alias for 'text-transform: lowercase'
+// ex. +downcase
+
+=downcase
+  +lowercase
+
+// Mixin: Small
+// Makes your text smaller and a little lighter. Great on <small /> tags.
+// ex. +small
+
+=small
+  font-size: 55%
+  opacity: .6
+  font-weight: normal
+
+// Internal Mixin: Heading
+// For internal use within headings
+
+=heading($color: #333)
+  color: $color
+  text-rendering: optimizelegibility
+  font-weight: bold
+
+// Internal Mixin: Heading Size
+// Gives your headings ratios custom crafted in house from the finest stock of mathematics.
+// Feed it a size and it will get you rem and some nice header-y margins.
+
+=heading-size($size)
+  font-size: $size + px
+  font-size: $size*.0615384 + rem // this is questionable
+  +text-margin($size/2)
+
+// Mixin Set: h1, h2, h3, h4, h5, h6
+// These provide nice defaults for headings based off the default font size.
+// The can scale infinitely, and work best when matched to their corresponding html elements.
+// ex. +h3
+
+=h1
+  +heading
+  +heading-size($font-size*2.4)
+  line-height: 1.2em
+
+=h2
+  +heading
+  +heading-size($font-size*1.8)
+  line-height: 1.2em
+
+=h3
+  +heading
+  +heading-size($font-size*1.5)
+  line-height: 1.2em
+
+=h4
+  +heading
+  +heading-size($font-size*1.3)
+  line-height: 1.2em
+
+=h5
+  +heading
+  +heading-size($font-size)
+  line-height: 1.2em
+
+=h6
+  +heading
+  +heading-size($font-size*.9)
+  text-transform: uppercase
+  line-height: 1.2em
+
+// Mixin: Link
+// A nice default style for links. Accepts a color and a style. Color can be anything,
+// style can be underline, darken, lighten, or glow, each giving it a different style
+// of interaction when hovered. More suggestions here welcome.
+// ex. +link
+// ex. +link($green)
+// ex. +link(#57777E, glow)
+
+=link($color: $blue, $style: underline)
+  color: $color
+  text-decoration: none
+  +transition
+  @if $style == underline
+    +hover-darken($color)
+    +hover-underline
+  @else if $style == darken
+    +hover-darken($color, 20%)
+  @else if $style == lighten
+    +hover-lighten($color)
+  @else if $style == glow
+    &:hover
+      text-shadow: 0 0 7px rgba($color, .6)
+  &:visited
+    opacity: .8
+
+// Mixin: Reset Link
+// Sometimes my link mixin of the browser defaults will give you questionable link defaults
+// that you don't want on certain elements. This guy gets rid of that.
+// ex. +reset-link
+
+=reset-link
+  color: inherit
+  border: none
+  text-decoration: none
+  &:hover
+    color: inherit
+    border: none
+    text-decoration: none
+  &:visited
+    opacity: 1
+
+// Mixin: Text Selection
+// This guy sets the text select color intelligently based on the $hilight-color variable
+// found in _roots.sass. If you really want, you can pass it a color override too
+// ex. +text-selection()
+
+=text-selection($color: $hilight-color)
+  
+  $dark-text: if( lightness($color) < 60%, true, false )
+  $text-color: if( $dark-text, $white, #494949 )
+  
+  ::-moz-selection
+    background: $color
+    color: $text-color
+  ::selection
+    background: $color
+    color: $text-color
+
+// Mixin: Ul
+// A nice default for list styles. More or less the same as browser defaults, scales nicely.
+// You can pass it any style that list-style-type would normally take. Defaults to disc.
+// Use this on a ul element por favor.
+// ex. +ul
+// ex. +ul(square)
+
+=ul($style: disc)
+  margin: 5px 15px
+  padding-left: 1em
+  li
+    list-style-type: $style
+    padding: 2px 0
+
+// Mixin: Ol
+// A nice default for list styles. More or less the same as browser defaults, scales nicely.
+// You can pass it any style that list-style-type would normally take. Defaults to decimal.
+// Use this on a ol element por favor.
+// ex. +ol
+// ex. +ol(upper-roman)
+
+=ol($style: decimal)
+  margin: 5px 18px
+  padding-left: 1em
+  li
+    list-style-type: $style
+    padding: 2px 0
+
+// Mixin: Inline List
+// For when you need your list to be horizontal. Pass it the spacing you want between list
+// elements, whatever units you'd like. Defaults to 20px
+// ex. +inline-list
+// ex. +inline-list(15px)
+
+=inline-list($spacing: 20px)
+  +group
+  margin: 0
+  padding: 0
+  li
+    float: left
+    margin-right: $spacing
+    list-style-type: none
+  li:last-child
+    margin-right: 0
+
+// Mixin: Reset List
+// If you're tired of all the list shenanigans and want to get rid of them for this special
+// list you're working on, this is your guy. Resets the margins, padding, and style.
+// ex. +reset-list
+
+=reset-list
+  margin: 0
+  padding: 0
+  li
+    list-style-type: none
+    padding: 0
+    margin: 0
+
+// Mixin: Blockquote
+// Nice styles for a blockquote, and even puts a nice hyphen in before your citation.
+// Use with a <p> and <cite> inside for best results.
+// ex. +blockquote
+
+// TODO: Add a couple different styles here
+
+=blockquote
+  p
+    font-weight: 300
+    font-size: 127%
+    line-height: 127%
+  cite
+    color: #888888
+    &:before
+      content: '\2014'
+
+// -----------------------------------------------------
+// Mixins that add styles to tags on your page actively
+// -----------------------------------------------------
+
+// Additive Mixin: Base
+// WARNING: Creates classes in your css and styles them - not to be used inside an element.
+// This is an essential mixin. You want this on your page. Sets your font stack,
+// size, and colors based on the settings file and makes sure that your text is a great looking
+// as possible. You can override any of the params, but there is really no reason to.
+// ex. +base
+
+=base($fonts: $font-stack, $size: $font-size, $color: $font-color)
+  body
+    font-family: $fonts
+    font-size: #{$size*6.46}unquote("%")
+    font-size: #{$size}px
+    color: $color
+    -webkit-font-smoothing: antialiased
+    -webkit-text-size-adjust: 100%
+    -ms-text-size-adjust: 100%
+
+// Additive Mixin: Headers
+// WARNING: Creates classes in your css and styles them - not to be used inside an element.
+// Adds roots' wonderful scaling header styles to your <hx> tags.
+// ex. +headers
+
+=headers
+  h1
+    +h1
+
+  h2
+    +h2
+
+  h3
+    +h3
+
+  h4
+    +h4
+
+  h5
+    +h5
+
+  h6
+    +h6
+
+// Additive Mixin: Lists
+// WARNING: Creates classes in your css and styles them - not to be used inside an element.
+// Adds roots styles to ul and ols.
+// ex. +lists
+
+=lists
+  ul
+    +ul
+  ol
+    +ol
+
+// Additive Mixin: Bold-Italic
+// WARNING: Creates classes in your css and styles them - not to be used inside an element.
+// Adds in bold and italic styles to the right tags if you did a page reset.
+// ex. +bold-italic
+
+=bold-italic
+  b
+    +bold
+  i
+    +italic
+  strong
+    +bold
+  em
+    +italic
+
+// Additive Mixin: Typography
+// WARNING: Creates classes in your css and styles them - not to be used inside an element.
+// Adds roots styles to bold and italic elements, headers, paragrapgs, small text, links, lists,
+// and blockquotes. Got all your basic elements covered.
+// ex. +typography
+
+=typography
+  +bold-italic
+  +headers
+  +text-selection
+  +lists
+
+  p
+    +p($font-size)
+  small
+    +small
+  a
+    +link
+  blockquote
+    +blockquote