roots-rails 0.0.1.alpha

data/lib/generators/templates/sass/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/lib/generators/templates/sass/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/lib/generators/templates/sass/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