roots-rails 0.0.1.alpha → 1.0.0

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

@@ -1,233 +0,0 @@
-// -----------------------------------------------------
-// Buttons
-// -----------------------------------------------------
-// I realize that this is insane, but trust me, it's worth it
-
-
-// Mixin: Gradient
-// Takes two colors and outputs a vertical gradient that fades between the two colors.
-// ex. +gradient(#EB8468, #BA6952)
-
-// TODO: add option to change direction
-
-=gradient($color1, $color2)
-  background-color: $color2
-  background-repeat: repeat-x
-  background-image: -moz-linear-gradient(top, $color1 0%, $color2 100%)
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $color1), color-stop(100%, $color2))
-  background-image: -webkit-linear-gradient(top, $color1 0%, $color2 100%)
-  background-image: -o-linear-gradient(top, $color1 0%, $color2 100%)
-  background-image: -ms-linear-gradient(top, $color1 0%, $color2 100%)
-  background-image: linear-gradient(top, $color1 0%, $color2 100%)
-  -pie-background: linear-gradient(top, $color1 0%, $color2 100%)
-  behavior: asset-url('pie.htc', javascript)
-
-// Mixin: Simple Gradient
-// Takes one color and an optional strength. Darkens and lightens the color according to the strength
-// and creates a gradient between those two values, the average being the originally passed color.
-// Higher strength will result in a more strongly contrasted gradient
-// ex. +simple-gradient(#EB8468)
-// ex. +simple-gradient(#61D464, 20%)
-
-=simple-gradient($color, $strength: 10%)
-  $start: lighten($color, $strength)
-  $end:   darken($color, $strength)
-  +gradient($start, $end)
-
-// Mixin: Noise Gradient
-// Exactly the same as the gradient mixin, but overlays a very light noise to give it more texture.
-// ex. +noise-gradient(#EB8468, #BA6952)
-
-=noise-gradient($color1, $color2)
-  background: $color2
-  background: url(../img/noise.png) repeat, $color2 -moz-linear-gradient(top, $color1 0%, $color2 100%) repeat-x
-  background: url(../img/noise.png) repeat, $color2 -webkit-gradient(linear, left top, left bottom, color-stop(0%, $color1), color-stop(100%, $color2)) repeat-x
-  background: url(../img/noise.png) repeat, $color2 -webkit-linear-gradient(top, $color1 0%, $color2 100%) repeat-x
-  background: url(../img/noise.png) repeat, $color2 -o-linear-gradient(top, $color1 0%, $color2 100%) repeat-x
-  background: url(../img/noise.png) repeat, $color2 -ms-linear-gradient(top, $color1 0%, $color2 100%) repeat-x
-  background: url(../img/noise.png) repeat, $color2 linear-gradient(top, $color1 0%, $color2 100%) repeat-x
-  -pie-background: url(../img/noise.png) repeat, $color2 linear-gradient(top, $color1 0%, $color2 100%) repeat-x
-  behavior: asset-url('pie.htc', javascript)
-
-// Mixin: Simple Noise Gradient
-// Exactly like simple gradient, but overlays a very light noise to give it more texture.
-// ex. +simple-noise-gradient(#EB8468, #BA6952)
-
-=simple-noise-gradient($color, $strength: 10%)
-  $start: lighten($color, $strength)
-  $end:   darken($color, $strength)
-  +noise-gradient($start, $end)
-
-// Mixin: Hilight
-// Adds a light brighter line across the top of the element for a perspective effect.
-// Takes an optional argument for strength, which takes a value between 0 and 1
-// ex. +hilight
-// ex. +hilight(.7)
-
-=hilight($strength: .3)
-  +box-shadow(inset 0 1px 0 rgba(255,255,255,$strength))
-
-// This is an internal function used for the button mixins, not intended for use.
-
-@function parse-size($size)
-  @if $size == small
-    @return 10
-  @else if $size == medium
-    @return 13
-  @else if $size == large
-    @return 18
-  @else if type-of($size) == number
-    @if unitless($size)
-      @return $size
-    @else
-      // eventually there should be a function here which allows it to take pixels and strips the "px" off the end
-      @warn "No units necessary, you can just pass a unitless number"
-  @else
-    @warn "You must pass small, medium, large, or a number to this mixin"
-
-// Mixin: Simple Button
-// Creates a very basic looking button style. Two optional params:
-// - $color: Takes any color, defaults to the default global color
-// - $size: Takes 'small', 'medium', 'large', or an integer. The numbers reflects the
-//   font size for the text inside the button, but scales all other aspects as well.
-// ex. +simple-button
-// ex. +simple-button($blue)
-// ex. +simple-button(#D4513B)
-// ex. +simple-button($green, large)
-// ex. +simple-button(#4C82D4, 24)
-
-// These will accept font icons interally in the very near future
-
-=simple-button($color: $default, $size: medium)
-
-  // color detection and changes
-  $dark-text: if( lightness($color) < 60%, true, false )
-  $text-color: if( $dark-text, $white, #494949 )
-
-  // parse words, make sure it's a number
-  $size: parse-size($size)
-  
-  // now that we've got numbers, let's work some proportions
-  $height: round($size*1.53)/2
-  $width: round(round($size*1.53)*2.2)/2
-
-  // dynamically calculated styles
-  font-size: #{$size}px
-  padding: #{$height}px #{$width}px
-  border-radius: #{round($size/4.33333)}px
-  background-color: $color
-  color: $text-color
-  color: rgba($text-color, .95)
-
-  // constant styles
-  cursor: pointer
-  font-weight: bold
-  font-family: $font-stack
-  line-height: 1
-  text-align: center
-  text-decoration: none
-  display: inline-block
-
-  &:hover, &:focus
-    background-color: darken($color, 5%)
-    color: darken($text-color, 3%)
-    color: rgba(darken($text-color, 3%), .95)
-
-  &:active
-    background-color: darken($color, 10%)
-
-// Mixin: Button
-// Creates a more fancy looking button style. Two optional params:
-// - $color: Takes any color, defaults to the default global color
-// - $size: Takes 'small', 'medium', 'large', or an integer. The numbers reflects the
-//   font size for the text inside the button, but scales all other aspects as well.
-// ex. +button
-// ex. +button($blue)
-// ex. +button(#D4513B)
-// ex. +button($green, large)
-// ex. +button(#4C82D4, 24)
-
-// These will accept font icons interally in the very near future
-
-=button($color: $default, $size: medium)
-
-  // color detection and changes
-  $dark-text: if( lightness($color) < 60%, true, false )
-  $text-color: if( $dark-text, $white, #494949 )
-  $shadow-color: if( $dark-text, rgba(#000,.1), rgba(#fff,.3) )
-  $hover-color: if( $dark-text, rgba(#000,.2), rgba(#fff,.5) )
-  $down-shadow: if( $dark-text, 0 -1px 1px rgba(#000,.2), 1px 1px 1px rgba(#fff,.6) )
-
-  // parse words, make sure it's a number
-  $size: parse-size($size)
-
-  // now that we've got numbers, let's work some proportions
-  $height: round($size*1.53)/2
-  $width: round(round($size*1.53)*2.2)/2
-
-  // dynamically calculated styles
-  font-size: #{$size}px
-  padding: #{$height}px #{$width}px
-  border-radius: #{round($size/4.33333)}px
-  +simple-noise-gradient($color)
-  text-shadow: 1px 1px 1px $shadow-color
-  border: 1px solid darken($color, 10%)
-  color: $text-color
-  color: rgba($text-color, .95)
-
-  // constant styles
-  +hilight
-  cursor: pointer
-  font-weight: bold
-  font-family: $font-stack
-  line-height: 1
-  text-align: center
-  text-decoration: none
-  display: inline-block
-
-  &:hover, &:focus
-    background-position: 0 -#{$height}px
-    color: darken($text-color, 3%)
-    color: rgba(darken($text-color, 3%), .95)
-    text-shadow: 1px 1px 1px $hover-color
-
-  &:active
-    +box-shadow(inset 0 1px #{$size/2.6}px rgba(darken($color, 25%),.6))
-    text-shadow: $down-shadow
-    border-color: darken($color, 18%)
-
-// Mixin: Button Disabled
-// Add this mixin to a button and it will make the button appear to be disabled.
-// Easiest to attach to a class like '.disabled' and add that class to the button.
-// Takes no arguments.
-// ex.  .disabled
-//        +button-disabled
-
-=button-disabled
-  background: #ccc
-  border-color: darken(#ccc, 10%)
-  opacity: .5
-  cursor: default
-  &:hover
-    background-position: 0 0
-  &:active
-    +box-shadow(none)
-    border-color: darken(#ccc, 10%)
-    text-shadow: 1px 1px 1px rgba(#000,.1)
-
-// Additive Mixin: Buttons
-// WARNING: Creates classes in your css and styles them - not to be used inside an element.
-// This mixin makes it such that you can use classes to define buttons on your page.
-// .btn-simple: creates a simple button
-// .btn: creates a fancy button
-// .disabled: disables an existing button (will only work on .btn and .btn-simple)
-
-=buttons
-  .btn-simple
-    +transition(all .2s ease-in-out)
-    +simple-button($blue)
-  .btn
-    +transition(all .2s ease-in-out)
-    +button($blue)
-  .btn.disabled, .btn-simple.disabled
-    +button-disabled

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

@@ -1,41 +0,0 @@
-// -----------------------------------------------------
-// CODE
-// -----------------------------------------------------
-
-// Mixin: Code
-// Styles inline code snippets on your page. Defaults to a beautiful red, but can be passed any color.
-// ex. +code($blue)
-// ex. +code(#7ED45F)
-
-=code($color: #DF5C33)
-  padding: 3px 4px
-  color: $color
-  background-color: #F5F5F5
-  border: 1px solid #E1E1E8
-  border-radius: 3px
-  font-family: Menlo, Monaco, monospace
-
-// Mixin: Pre
-// Styles code blocks on your page. Sytanx hilighting to be included in the future.
-// ex. +pre
-
-=pre
-  display: block
-  padding: 7px
-  background-color: #F5F5F5
-  border: 1px solid #E1E1E8
-  border-radius: 3px
-  white-space: pre-wrap
-  word-break: break-all
-  font-family: Menlo, Monaco, monospace
-  line-height: 160%
-
-// Additive Mixin: Code Blocks
-// WARNING: Creates classes in your css and styles them - not to be used inside an element.
-// Adds roots styles by default to <code> and <pre> tags.
-
-=code-blocks
-  code
-    +code
-  pre
-    +pre

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

@@ -1,160 +0,0 @@
-// -----------------------------------------------------
-// Better start drinking that kool aid
-// -----------------------------------------------------
-
-// Mixin: Img Scale
-// Lay this down on an image and it will scale as it's container does. Great for mobile sites.
-// ex. +img-scale
-
-=img-scale
-  max-width: 100%
-  display: block
-  border: 0
-  height: auto
-  -ms-interpolation-mode: bicubic
-
-// Mixin: Scale Image IE
-// IE is an unfortunate situation, generally. Although it doesn't even typically respond to
-// media queries or appear on mobile devices, if for some reason you need a scaling image, you
-// can use this mixin. You have to pass the image path to it though.
-// ex. +scale-image-ie(/images/sample.png)
-
-=scale-image-ie($src)
-  background: none
-  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="#{image_url($src, true, false)}",  sizingMethod="scale")
-
-// Mixin: Border Box
-// Border box sizing makes a whole ton of sense, especially when working with mobile layouts.
-// This just implements border box sizing on an element. For more on this concept, check out
-// http://paulirish.com/2012/box-sizing-border-box-ftw/
-// ex. +border-box
-
-=border-box
-  -webkit-box-sizing: border-box
-  -moz-box-sizing: border-box
-  box-sizing: border-box
-
-// Mixin: When
-// This is a very important mixin to understand and can be used to very easily implement mobile
-// layouts. It is very flexible and rides on advanced sass features. Takes one parameter, which
-// accepts a variety of things, as well as a content block.
-
-// $at: Accepts 'phone', 'landscape', 'tablet', one number, or two numbers.
-// if given one number, it will apply the block styles when the screen is that width or less
-// if given two numbers, it will apply the block styles only when the width is between the two numbers.
-
-// This mixin accepts a content block of styles indented below it, which it applies when it meets
-// the conditions you specified in the parameters. See below for examples.
-
-// ex. +when(phone)
-//       color: red
-// ex. +when(tablet)
-//       color: red
-//       font-size: .8em
-// ex. +when(800)
-//       width: 500px
-// ex. +when(500 700)
-//       content: "OMG the dead zone!"
-
-// Huge props to Chris Eppstein for the block feature in sass and the brilliant
-// concepts that follow. Modified from https://gist.github.com/1215856
-
-=when($at)
-  @if $at == phone
-    @media only screen and (max-width: 479px)
-      @content
-  @else if $at == landscape
-    @media only screen and (min-width: 480px) and (max-width: 767px)
-      @content
-  @else if $at == tablet
-    @media only screen and (min-width: 768px) and (max-width: 959px)
-      @content
-  @else if type-of($at) == number
-    @media only screen and (max-width: #{$at}px)
-      @content
-  @else if type-of($at) == list
-    @media only screen and (min-width: nth($at, 1)px) and (max-width: nth($at, 2)px)
-      @content
-  @else
-    @warn "The mixin doesn't want what you're servin up. Check the documentation for usage details"
-
-// Mixin: Split
-// This mixin is also extremely important to understand for quickly crafting up mobile layouts.
-// It is to be used on a parent element, and will horizontally split it's children, make their widths 
-// fluid, and automatically rearrange them to be vertical at a certain width. This is the most common
-// rearrangement pattern in mobile design, and this mixin should more or less replace floats.
-
-// Example:
-
-// **haml**
-// #container
-//   .sidebar
-//   .content
-
-// **sass**
-// #container
-//   +split(25% 75%, 600)
-
-// What this does is splits .sidebar and .content horizontally to the widths that were passed to +split, 
-// 25% and 75%. This is the percentage of the screen they will take up, so as it is resized smaller, these
-// areas will flex. At one point, they will become too thin to look normal anymore, and this is where they
-// should be rearranged to split vertically. The second argument passed (600) is the width at which they will
-// switch to a normal block layout.
-
-// Note that the first argument can take *as many percentages as you want* - it's not limited to two. Just
-// make sure that the number of child divs matches the number of percentages passed.
-
-// Also note that in order for the divs to behave correctly in this setup, the sizing has to be set to
-// border-box. This means padding will not change the width, it will just pad the inside of the containers.
-
-
-=split($params, $respond-at: 480)
-  $total-val: 0%
-  @for $i from 1 to length($params) + 1
-    // warn the user if they are over 100%
-    $total-val: $total-val + nth($params, $i)
-    @if $total-val > 100%
-      @warn "Your total was #{$total-val}. You should probably shoot for a total value under 100% if you want this to come out right"
-    // float em and set the widths
-    & > *:nth-child(#{$i})
-      float: left
-      width: nth($params, $i)
-      +border-box
-      +when($respond-at)
-        width: 100%
-
-// Additive Mixin: Fluid Images
-// WARNING: Creates classes in your css and styles them - not to be used inside an element.
-// Makes images fluid when within <figure> elements. For any and all images, it's up to you
-// to decide whether they are fluid or not.
-
-=fluid-images
-  figure
-    position: relative
-
-  figure img, figure object, figure embed, figure video
-    +img-scale
-
-  img
-    border: 0
-    -ms-interpolation-mode: bicubic
-
-// Additive Mixin: Responsive
-// WARNING: Creates classes in your css and styles them - not to be used inside an element.
-// Add fluid images to your page as well as a utility class for border-box elements, and a couple
-// others that will employ common split patterns, see below.
-
-=responsive
-  +fluid-images
-  .border-box
-    +border-box
-  .s50-50
-    +split(50% 50%)
-  .s25-75
-    +split(25% 75%)
-  .s75-25
-    +split(75% 25%)
-  .s25-50-25
-    +split(25% 50% 25%, 500)
-
-

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

@@ -1,209 +0,0 @@
-// -----------------------------------------------------
-// Forms
-// -----------------------------------------------------
-
-// This module is the most severely lacking, just because I'm not totally sure how to
-// handle it - forms are so different. It will probably end up with this basic functionality
-// for custom forms as well as a mixin you can drop on a form and it will style it for you
-// and take care of everything, for something more like an early prototype or back end.
-
-// It will also contain the ability to append or prepend little icons to your inputs
-
-// Mixin: Focus Glow
-// Makes your inputs glow when focused. Takes a color - they will glow that color. Default color by default.
-// ex. +focus-glow
-// ex. +focus-glow($blue)
-// ex. +focus-glow(#D45D86)
-
-=focus-glow($color: $default)
-  &:focus
-    +box-shadow(0 0 5px rgba($color,.7))
-    border: 1px solid desaturate($color, 35%)
-    outline: none !important
-
-// Mixin: Input
-// A general purpose mixin for text inputs. Provides an nice attractive default style that's easily
-// customizable. Takes a color as the first param and an optional width as the second.
-// ex. +input
-// ex. +input($purple)
-// ex. +input(#D45D86, 400px)
-
-=input($color: $light-blue, $width: 250px)
-  +box-shadow(inset 0 1px 1px rgba(#000, 0.1))
-  font-size: #{$font-size}px
-  font-family: $font-stack
-  font-size: 90%
-  +transition
-  border: solid 1px #bbb
-  border-radius: 2px
-  outline: none !important
-  padding: 4px 5px 4px // test this and make sure it's proportional at different sizes
-  background: #fff
-  color: #555
-  width: $width
-  text-shadow: 0 0 1px rgba(#fff, .1)
-  behavior: asset-url('pie.htc', javascript)
-  @if $color != false
-    +focus-glow($color)
-  @else
-    +box-shadow(none)
-
-// Mixin: Input Search
-// A search style input with rounded corners and an optional search icon at the end. Takes
-// any color.
-// ex. +input-search
-// ex. +input-search($yellow)
-// ex. +input-search
-
-// TODO: Implement search icon option
-
-// =field-search
-//   position: relative
-//   input
-//     +input-search
-//   &:after
-//     font: 16px roots-icons
-//     content: icon(arrow_down_alt1)
-//     display: block
-//     position: absolute
-//     top: 8px
-//     right: 8px
-//     opacity: .5
-
-=input-search($color: $blue)
-  +input($color)
-  padding-left: 9px
-  +rounded
-
-// Mixin: Input Disabled
-// Makes your input appear to be disabled. Note that you also need to add 'disabled' to your
-// html tag in order for it to actually be disabled.
-// ex. +disabled
-
-=input-disabled
-  cursor: not-allowed
-  background: #F5F5F5 !important
-
-  &:hover, &:focus
-    border-color: #bbb
-    +box-shadow(inset 0 1px 1px rgba(#000, 0.1))
-
-// Mixin: Label
-// Very basic label for your form. Pass it an optional display type to have it inline or block.
-// ex. +label
-
-=label($display: inline-block)
-  line-height: 1.5em
-  display: $display
-
-// Mixin: Field
-// Often times it's easier to wrap your input and label in a div called "field" so they can be
-// floated, position, and manipulated without screwing up the rest of the form. That's what this
-// mixin is for - put it on a div that contains a label and an input. Then feed it a direction to
-// align (default is right), and an optional width.
-// ex. +field
-// ex. +field(left)
-// ex. +field(right, 500px)
-
-=field($direction: right, $width: 370px)
-  clear: both
-  margin-bottom: 5px
-  text-align: $direction
-  width: $width
-
-// Mixin: Input Error
-// When someone F'd it up, you gotta show them how it is. Put this on an input to make it clear
-// that something bad is happening. Best implemented in a .error class or something similar.
-// ex. input.error
-//       +input-error
-
-=input-error($color: $red)
-  color: $color
-  border-color: $color
-  +focus-glow($color)
-
-// Mixin: Field Error
-// If you are wrapping labels and inputs in a field div, this makes life even easier. Makes the
-// label text as well as the input field red.
-// ex. .field.error
-//       +field-error
-
-=field-error($color: $red)
-  color: $color
-  input
-    +input-error
-
-// Mixin: Input Warning
-// Ok, so maybe you didn't totally F it up, but at very least you deserve a warning. Well here it is.
-// Best implemented in a .warning class or something similar.
-// ex. input.warning
-//       +input-warning
-
-=input-warning($color: $yellow)
-  color: $color
-  border-color: $color
-  +focus-glow($color)
-
-// Mixin: Field Warning
-// If you are wrapping labels and inputs in a field div, this makes life even easier. Makes the
-// label text as well as the input field yellow.
-// ex. .field.warning
-//       +field-warning
-
-=field-warning($color: $yellow)
-  color: $color
-  input
-    +input-warning
-
-// Mixin: Input Success
-// http://cl.ly/F4Em/great-success.jpeg - Best implemented in a .success class or something similar.
-// ex. input.success
-//       +input-success
-
-=input-success($color: $green)
-  color: $color
-  border-color: $color
-  +focus-glow($color)
-
-// Mixin: Field Success
-// You're probably getting tired of this routine at this point. I'm sure you can imagine what this does.
-// ex. .field.success
-//       +field-success
-
-=field-success($color: $green)
-  color: $color
-  input
-    +input-success
-
-// Additive Mixin: Fields
-// WARNING: Creates classes in your css and styles them - not to be used inside an element.
-// Add the field styles to .field as well as success, warning, and failure states. Also takes
-// direction and width. Highly recommended mixin.
-
-=fields($direction: right, $width: 370px)
-  .field
-    +field($direction, $width)
-
-    &.success
-      +field-success
-    &.warning
-      +field-warning
-    &.error
-      +field-error
-
-// Additive Mixin: Forms
-// WARNING: Creates classes in your css and styles them - not to be used inside an element.
-// Adds nicer looking styles to all text inputs and textareas. Overrides the defaults.
-
-=forms
-  input[type=text], input[type=email], input[type=number], input[type=date], input[type=time], input[type=datetime], textarea
-    +input
-
-    &.disabled
-      +input-disabled
-    &.success
-      +input-success
-    &.warning
-      +input-warning
-    &.error
-      +input-error