roots-rails 0.0.1.alpha

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

@@ -0,0 +1,233 @@
+// -----------------------------------------------------
+// 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

@@ -0,0 +1,41 @@
+// -----------------------------------------------------
+// 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

@@ -0,0 +1,160 @@
+// -----------------------------------------------------
+// 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

@@ -0,0 +1,209 @@
+// -----------------------------------------------------
+// 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