roots-rails 0.0.1.alpha → 1.0.0

data/lib/generators/templates/sass/modules/_ui.sass

@@ -1,205 +0,0 @@
-// -----------------------------------------------------
-// UI
-// -----------------------------------------------------
-
-// Mixin: Area
-// Just a nice little area for you to put content in. Rounded corners, box with light
-// grey background by default. You can pass it a different color if you'd like.
-// ex. +area
-// ex. +area($red) -- not recommended
-
-=area($color: #F5F5F5)
-  +box-shadow(inset 0 0 6px rgba(#000,.05))
-  background-color: $color
-  padding: 15px
-  border-radius: 4px
-  behavior: asset-url('pie.htc', javascript)
-  margin: 20px 0
-
-// Mixin: Notice
-// A notice for you. Best used for flash alerts, this was originally an internal
-// mixin, but you can use it if you'd like. Give it a color and a width and it will
-// output a nice lightly gradiented box for your notice to reside in.
-// ex. +notice
-// ex. +notice(500px, $blue)
-
-=notice($width: false, $color: #EEEEEE)
-  +simple-gradient($color, 3%)
-  +group
-  border-radius: 5px
-  padding: 15px
-  border: 1px solid darken($color, 10%)
-  -webkit-box-shadow: 1px 1px 3px rgba(#000,.05)
-  position: relative
-
-  @if $width
-    width: $width
-
-// Mixin: Flash
-// This is really great for rails flash messages, or really any little notifications like
-// 'logged in!', 'logged out!', or 'errarrrr!'. Takes one of four types and colors them nicely
-// for you - notice, success, warning, or error. Defaults to notice
-// ex. +flash
-// ex. +flash(error )
-
-=flash($type: notice)
-  @if $type == notice
-    +notice($color: #6CC5FA)
-    color: #fff
-    font-weight: bold
-    text-shadow: 1px 1px 1px rgba(#000,.2)
-  @if $type == success
-    +notice($color: #7BDEA3)
-    color: #fff
-    font-weight: bold
-    text-shadow: 1px 1px 1px rgba(#000,.2) 
-  @if $type == warning
-    +notice($color: #FAE677)
-    font-weight: bold
-    text-shadow: 1px 1px 1px rgba(#fff,.2)
-  @if $type == error
-    +notice($color: #E77C70)
-    color: #fff
-    font-weight: bold
-    text-shadow: 1px 1px 1px rgba(#000,.2)
-
-// Mixin: Breadcrumb
-// Lay this one down on a list and it will turn the list into a breadcrumb-y thing. By default
-// separates with a slash, but you can feed it any character. Second param is spacing between the
-// list items, and the third is the color of the divider. All are optional.
-// ex. +breadcrumb
-// ex. +breadcrumb(">")
-// ex. +breadcrumb("-", 25px, $red)
-
-=breadcrumb($character: "/", $spacing: 10px, $divider-color: #CDCDCD)
-  +inline-list($spacing)
-  li:after
-    content: $character
-    margin-left: $spacing
-    color: $divider-color
-  li:last-child:after
-    content: ""
-
-// Mixin: Bubble
-// If you're anything like me, you always seem to find your designers putting little bubbles in things.
-// This mixin takes care of that problem, and makes a nice bubble with 100% css.
-// All parameters optional - accepts width, pointer position (left, center, or right), and a color.
-// ex. +bubble
-// ex. +bubble($color: $blue)
-// ex. +bubble(center, #57777E)
-// ex. +bubble(right, #5740A1, 500px)
-
-=bubble($pointer: left, $color: #EEEEEE, $width: false)
-  +notice($width, $color)
-
-  &:after
-    +triangle(down, 10px, darken($color, 3%))
-    position: absolute
-    bottom: -9px
-    @if $pointer == center
-      @if $width == false
-        @warn "you must specify a width to center the pointer"
-      left: $width/2
-    @else if $pointer == right
-      right: 15px
-  
-  &:before
-    +triangle(down, 10px, darken($color, 10%))
-    position: absolute
-    bottom: -11px
-    @if $pointer == center
-      @if $width == false
-        @warn "you must specify a width to center the pointer"
-      left: $width/2
-    @else if $pointer == right
-      right: 15px
-
-// Mixin: Figure
-// For when you want to *semantically* show an image. Put this on your <figure /> element and it will style
-// the nested image and figcaption in a wonderfully pleasing manner. Takes a color (for the thin outline), and
-// if you want, dimensions of the image as a space separated list.
-// ex. +figure
-// ex. +figure($blue)
-// ex. +figure(#D29E78, 100px 250px)
-// ex. +figure($dimensions: 100px 250px)
-
-=figure($color: $default, $dimensions: false)
-  @if type-of($dimensions) == list
-    display: block
-    width: nth($dimensions, 1)
-    height: nth($dimensions, 2)
-  @else if $dimensions == false
-    +inline-block
-  @else
-    @warn "Pass dimensions as false or a space-spearated list, as such: +figure($dimensions: 100px 250px) or +figure($blue, 100px 250px)"
-  img
-    display: block
-    padding: 4px
-    +round-corners(3px)
-    border: 1px solid rgba($color, .6)
-  figcaption
-    padding: 10px 0
-    text-align: center
-    font-style: italic
-
-// Mixin: Nav
-// Makes a fantastic nav bar for you that doesn't look exactly like bootstrap's and you can
-// customize it as well. Params: fixed (boolean), color (recommend something dark), link color,
-// and size, which is an integer from one up, and scales every aspect of the nav bar for you.
-// All have defaults.
-// This mixin is meant to be placed on a <nav> element that contains a ul.
-// ex. +nav
-// ex. +nav(false, #444, $red, 3)
-
-=nav($fixed: true, $color: #222, $link-color: #fff, $size: 1)
-  display: block
-  z-index: 10
-  +simple-noise-gradient($color, 5%)
-  +group
-  +box-shadow(0 3px 3px rgba(0,0,0,.15))
-  border-bottom: 1px solid rgba(darken($color, 15%),.7)
-  height: #{round(($size + 14)*2.866)}px
-  width: 100%
-  font-size: #{$size + 14}px
-  @if $fixed
-    position: fixed
-  @else
-    position: relative
-
-  ul
-    float: right
-    margin: 0
-    padding: #{($size + 14)*.8}px
-    color: $link-color
-
-    li
-      list-style-type: none
-      margin-right: 30px
-      float: left
-
-      a
-        color: $link-color
-        border: none
-        cursor: pointer
-
-        &:hover
-          color: darken($link-color, 20%)
-          border: none
-
-// Additive Mixin: Flash Notices
-// WARNING: Creates classes in your css and styles them - not to be used inside an element.
-// Super convenient flash notices. Anything with .flash on it will display as a notice, and if
-// you add the additional class .error, .warning, .notice, or .success, it will display the
-// appropriate color background for the message.
-// ex. +flash-notices
-
-=flash-notices
-  .flash
-    &.error
-      +flash(error)
-    &.warning
-      +flash(warning)
-    &.notice
-      +flash(notice)
-    &.success
-      +flash(success)

data/lib/generators/templates/sass/modules/_utilities.sass

@@ -1,372 +0,0 @@
-// -----------------------------------------------------
-// Utilities
-// -----------------------------------------------------
-
-// Mixin: Prefix
-// Pass this a key and a value and it will put all the browser prefixes on it.
-// ex. +prefix(box-shadow, 0 0 3px #000)
-// ex. +prefix(transition, all .3s ease)
-
-=prefix($prop, $val)
-  -webkit-#{$prop}: $val
-  -moz-#{$prop}: $val
-  -o-#{$prop}: $val
-  -ms-#{$prop}: $val
-  #{$prop}: $val
-
-// Mixin: Transition
-// A shortcut for prefixed transitions with an intelligent default. If you want to pass it multiple
-// comma-separated transitions you must put your parameters in quotes (or the commas get confused)
-// ex. +transition
-// ex. +transition(color 1s ease)
-// ex. +transition("color, background 1s ease")
-  
-=transition($params: all .3s ease-in-out)
-  +prefix(transition, unquote($params))
-
-// Mixin: Text Shadow
-// A shortcut for prefixed text-shadows with an intelligent default. If you want to pass it multiple
-// comma-separated shadows you must put your parameters in quotes (or the commas get confused)
-// ex. +text-shadow
-// ex. +text-shadow(1px 1px 3px $blue)
-// ex. +text-shadow("1px 1px 3px $blue, inset 2px 0 5px rgba(0,0,0,.5)")
-
-=text-shadow($params:0 0 1px rgba(0,0,0,.1))
-  +prefix(text-shadow, unquote($params))
-
-// Mixin: Box Shadow
-// A shortcut for prefixed box-shadows with an intelligent default. If you want to pass it multiple
-// comma-separated shadows you must put your parameters in quotes (or the commas get confused)
-// ex. +box-shadow
-// ex. +box-shadow(1px 1px 3px $blue)
-// ex. +box-shadow("1px 1px 3px $blue, inset 2px 0 5px rgba(0,0,0,.5)")
-
-=box-shadow($params)
-  +prefix(box-shadow, unquote($params))
-  behavior: asset-url('test.htc', javascript)
-
-// Mixin: Opacity
-// I know, it seems silly. But every time you go to IE testing you will be thanking yourself for
-// using this instead of the normal opacity declaration. Takes the same params as opacity would normally
-// ex. +opacity(.6)
-
-=opacity($opacity)
-  filter: unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=#{round($opacity * 100)})")
-  opacity: $opacity
-
-// Mixin: Rotate
-// Prefixed rotation with IE compatibility. Takes a degree value followed by "deg"
-// ex. +rotate(45deg)
-
-=rotate($params)
-  +prefix(transform, rotate($params))
-  behavior: asset-url('pie.htc', javascript)
-
-// Mixin: Rounded
-// Unless you are working with a ridiculously large element, this will round the corners
-// as much as css will allow. Even in IE.
-// ex. +rounded
-
-=rounded
-  border-radius: 999px
-  behavior: asset-url('pie.htc', javascript)
-
-// Mixin: Round Corners
-// Take a guess what this does. Aliases border-radius, works in IE.
-// ex. +round-corners(5px)
-
-=round-corners($px)
-  border-radius: $px
-  behavior: asset-url('pie.htc', javascript)
-
-// Mixin: Round
-// Take a guess what this does. Aliases border-radius, works in IE.
-// ex. +round(5px)
-
-=round($px)
-  +round-corners($px)
-
-// Mixin: Border
-// Alias of border, but with an intelligent default
-
-=border($params: 1px solid)
-  border: $params
-
-// Mixin: B
-// Alias of border, but with an intelligent default. Intended for quick debugging use.
-// I used to spend a lot of time typing "border: 1px solid", but no more!
-// ex. +b
-
-=b
-  +border
-
-// Mixin: Bg
-// Alias for background (with images), makes it a little quicker. Takes three arguments, the first is
-// the image path, second is background-position if you want, third is background repeat.
-// ex. +bg(../img/test.png)
-// ex. +bg(../img/other.jpg, center center, repeat)
-
-=bg($path, $position: unquote(""), $repeat: no-repeat)
-  background: url(unquote($path)) $position $repeat
-
-// Mixin: Bold
-// It's just faster to type +bold than font-weight: bold
-// ex. +bold
-
-=bold
-  font-weight: bold
-
-// Mixin: Italic
-// It's just faster to type +italic than font-style: italic
-// ex. +bold
-
-=italic
-  font-style: italic
-
-// Mixin: Columns
-// For css3 columns. Takes column count (int), column gap (px, em), column width (px, em), and
-// a border-like declaration if you want a column rule. This follows exactly with the css3 spec,
-// it's just quicker, prefixed, and shortened.
-// ex. +columns
-// ex. +columns(5)
-// ex. +columns(8, 15px, 200px, 1px solid $red)
-
-=columns($count: 3, $gap: 30px, $width: false, $rule: false)
-  +prefix(column-count, $count)
-  +prefix(column-gap, $gap)
-  @if $width
-    +prefix(column-width, $width)
-  @if $rule
-    +prefix(column-rule, $rule)
-
-// Mixin: Avoid Column Break
-// If you have a list that is broken into columns, this will make sure that the list item
-// is not split across columns awkwardly. Works only in webkit at the moment.
-
-=avoid-column-break
-  +prefix(column-break-inside, avoid)
-
-// Mixin: Triangle
-// One of my favorites. Makes a little css triangle for you. Pass it a direction (up, down, left, right),
-// size (in pixels), and a color.
-// ex. +triangle
-// ex. +triangle(down, 15px, $blue)
-
-=triangle($direction: up, $size: 10px, $color: #000)
-  width: 0
-  height: 0
-  @if $direction == up
-    border-left: $size solid transparent
-    border-right: $size solid transparent
-    border-bottom: $size solid $color
-  @else if $direction == down
-    border-left: $size solid transparent
-    border-right: $size solid transparent
-    border-top: $size solid $color
-  @else if $direction == left
-    border-top: $size solid transparent
-    border-bottom: $size solid transparent
-    border-right: $size solid $color
-  @else if $direction == right
-    border-top: $size solid transparent
-    border-bottom: $size solid transparent
-    border-left: $size solid $color
-
-// Mixin: Ir
-// Image replacement. Pass it an image path and the image's dimensions and any text will be hidden
-// in the div and it will show an image instead. Uses the fanciest new method, props to Paul Irish
-// Avoid any possibility of an error by quoting the image path. Also looks cleaner.
-// ex. +ir("../img/test.jpg", 200px 400px)
-
-=ir($img-path: false, $dimensions: false)
-  font: 0/0 a
-  text-shadow: none
-  color: transparent
-  @if $img-path
-    +bg(unquote($img-path))
-  @if type-of($dimensions) == list
-    width: nth($dimensions, 1)
-    height: nth($dimensions, 3)
-  @else if $dimensions == false
-    // all is well
-  @else
-    @warn "Dimenions takes a space-separated list of values - order: width, height. Ex: +ir('img.jpg', 100px 150px)"
-
-
-// Mixin: Group
-// This is the clearfix with a better name. I use this mixin like there's no tomorrow. It's like using
-// overflow: hidden, except it doesn't hide the overflow. Awesome for wrangling floats, and really quick now.
-// ex. +group
-
-=group
-  zoom: 1
-  &:before, &:after
-    content: ""
-    display: table
-  &:after
-    clear: both
-
-// Mixin: Clearfix
-// In case you can't leave this crazy word in the past. This is an alias for group.
-// ex. +clearfix
-
-=clearfix
-  +group
-
-// Mixin: Inline Block
-// Cross browser inline block display. Saves many IE headaches.
-// ex. +inline-block
-
-=inline-block
-  display: -moz-inline-stack
-  display: inline-block
-  vertical-align: top
-  zoom: 1
-  *display: inline
-
-// Mixin: Media
-// Based on Nicole Sullivan's media class, made famous by Facebook
-// http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
-
-// Put this on a parent and it will split the first two children left and right, like you would with perhaps
-// a comment with an avatar to the left. Pass it a margin between the two.
-// Explained fully here: http://carrotblog.com/css-patterns-evolved/
-
-// This mixin works right when the element you apply it to has two or three direct children
-// The first one will float to the left, the second one will be to the right of the first, and third will go farthest right
-// ex. +split
-// ex. +split(15px)
-// ex. +split(15px 10px)
-
-=media($margin: 10px)
-  
-  $left: $margin
-  $right: $margin
-
-  @if type-of($margin) == list
-    $left:  nth($margin, 1)
-    $right: nth($margin, 2)
-
-  overflow: hidden
-  zoom: 1
-
-  & > *
-    overflow: hidden
-    zoom: 1
-  & > *:first-child
-    float: left
-    margin-right: $right
-  & > *:nth-child(3)
-    float: right
-    margin-left: $left
-
-// Mixin: Raquo
-// Because technically raquo is not semantic, it's easier to add it like this.
-// ex. +raquo
-
-=raquo
-  &:after
-    content: " \00BB"
-
-// Mixin: D
-// I find myself writing "width: blah blah px, height: blah px" all the time. This makes it so so
-// much faster. The arguments it accepts are very flexible. You can pass it one number and it will set that
-// to the width and height. You can give it units, and if you don't it will assume pixels. You can pass
-// it two numbers and it will set the first to width and the second to height. It's very convenient.
-// ex. +d(50) => width: 50px; height: 50px;
-// ex. +d(1.5em 2em) => width: 1.5em; height: 2em
-
-=dimensions($numbers)
-  @if type-of($numbers) == list
-    @if unitless(nth($numbers, 1))
-      width: #{nth($numbers, 1)}px
-      height: #{nth($numbers, 2)}px
-    @else
-      width: nth($numbers, 1)
-      height: nth($numbers, 2)
-  @else if type-of($numbers) == number
-    @if unitless($numbers)
-      width: #{$numbers}px
-      height: #{$numbers}px
-    @else
-      width: $numbers
-      height: $numbers
-  @else
-    @warn "Please pass in a value or list of two values"
-
-// Mixin: D
-// A shorter alias for +dimensions, because I use it so so often.
-
-=d($arg)
-  +dimensions($arg)
-
-// Mixin: Debug
-// Debugging tool - drop this at root level in your css and it will put borders on every element so
-// you can see what's up. It will also flag them if you made mistakes like put in inline styles, forgot
-// an alt on an image, left the alt blank, etc. For god's sake don't use this in production.
-
-// all credit for this goes to intuit.css, from which I adapted it (and improved it a bit)
-// https://github.com/csswizardry/inuit.css
-
-=debug
-  html
-    
-    div
-      border: 1px solid green
-
-    [style], style
-      border: 5px solid yellow
-
-    style
-      border: block
-
-    img
-      border: 5px solid red
-
-    img[alt]
-      border-color: green
-
-    img[alt=""]
-      border-color: yellow
-
-    a
-      border: 5px solid yellow
-
-    a[title]
-      border-color: green
-
-    a[href="#"]
-      outline-color: yellow
-
-    a[target]
-      border-color: red
-
-    [class=""], [id=""]
-      border: 5px solid yellow
-
-// Mixin: Keyframes
-// An easier way to do keyframe animations cross browser. Accepts an animation name
-// and a block.
-// ex. +keyframes(fade-out)
-//        0%
-//          opacity: 1
-//        100%
-//          opacity: 0
-
-// Check out the animations module for a bunch of sweet presets you can load if you want.
-
-=keyframes($name)
-  @-moz-keyframes #{$name}
-    @content
-  @-webkit-keyframes #{$name}
-    @content
-  @-ms-keyframes #{$name}
-    @content
-
-// Mixin: Animation
-// How you actually implement the animation. Takes animation name, duration, and how to handle
-// looping. works the same way as the official, just prefixes it.
-// ex. +animation(fade-out, 5s, infinite)
-
-=animation($params)
-  +prefix(animation, $params)