juliana 0.0.4 → 0.0.5

data/sass/_juliana.scss

@@ -1,2 +1,4 @@
 @import "juliana/settings";
-@import "juliana/mixins";
+@import "juliana/mixins";
+@import "juliana/arrows";
+@import "juliana/buttons";

data/sass/juliana/_arrows.scss

@@ -0,0 +1,137 @@
+//** Arrow ****************************************/
+//*
+//* Adds a CSS3 generated arrow to an element, best used when combined with the button mixins
+//*
+//* @param string [$direction]
+//*   The direction that the arrow should point. left, right, down, up
+//*     Left facing arrows are always floated to the left side of the text, all other arrows are on the right
+//*
+//* @param string [$color]
+//*   Color of generated arrow in hex. Defaults to white.
+//*
+//* @param string [$parent_height]
+//*   Height of parent element in pixels. Defaults to 27px (default button height)
+//*
+//* @param string [$shadow_color]
+//*   Color of generated arrow shadow in hex. Defaults to 35% translucent black
+//*     Note: due to unsupported alpha transparancy on absolutely positioned elements in IE8, arrow shadows are disabled in IE8.
+//*
+//* @param string [$shadow_distance_x]
+//*   X offset of generated shadow. Defaults to 1px
+//*
+//* @param string [$shadow_distance_y]
+//*   Y offset of generated shadow. Defaults to 1px
+//*
+//* @param string [$size]
+//*   Size of arrow in pixels. Defaults to 4px.
+//* 
+//* @param string [$offet]
+//*   Offset from edge of element in px. Defaults to size of arrow * 3
+//*
+//* @param string [$padding]
+//*   Padding to add to the side of the element to account for arrow.  Defaults to size of offset * 2 to center.
+//*/
+
+@mixin arrow ( $direction: right, $color: #fff, $parent_height: 27px, $shadow_color: rgba( #000, 0.35 ), $shadow_distance_x: 1px, $shadow_distance_y: 1px, $size: 4px, $offset: $size * 3, $padding: $offset * 2 ) {
+
+  position: relative;
+  -webkit-transform:rotate(360deg); // force antialiasing
+
+  @if ( $direction == 'down' or $direction == 'up' or $direction == 'right' ) {
+    padding-right: $padding;
+  }
+
+  @if ( $direction == 'left' ) {
+    padding-left: $padding; 
+  } 
+
+  &:after,
+  &:before {
+    @include pseudo;
+    right: $offset - $size;
+  }
+
+  &:after {
+
+    @if ( $direction == 'down' ) {
+      border-color: #{$color} transparent transparent transparent;
+      border-style: solid inset inset inset;
+      top: ceil( ( $parent_height / 2 ) - ( $size / 2 ) );
+    }
+
+    @if ( $direction == 'up' ) {
+      border-color: transparent transparent #{$color} transparent;
+      border-style: inset inset solid inset;
+      top: ceil( ( $parent_height / 2 ) - ( $size * 1.5 ) );
+    }
+
+    @if ( $direction == 'right' ) {
+      border-color: transparent transparent transparent #{$color};
+      border-style: inset inset inset solid;
+      top: ceil( ( $parent_height / 2 ) - ( $size * 1.25 ) );
+    }
+
+    @if ( $direction == 'left' ) {
+      left: $offset - $size;
+      border-color: transparent #{$color} transparent transparent;
+      border-style: inset solid inset inset;
+      top: ceil( ( $parent_height / 2 ) - ( $size * 1.25 ) );
+    }
+
+    border-width: #{$size};
+    width: 0;
+    height: 0;
+    position: absolute;
+
+    .ie & {
+      border-style: solid;
+    }
+
+  } // :after
+  
+  @if ( $shadow_color ) {
+    
+    &:before { 
+    
+      right: $offset - $size - $shadow_distance_x;
+      
+      @if ( $direction == 'down' ) {
+        border-color: #{$shadow_color} transparent transparent transparent;
+        border-style: solid inset inset inset;
+        top: ceil( ( $parent_height / 2 ) - ( $size / 2 ) + $shadow_distance_y );
+      }
+
+      @if ( $direction == 'up' ) {
+        border-color: transparent transparent #{$shadow_color} transparent;
+        border-style: inset inset solid inset;
+        top: ceil( ( $parent_height / 2 ) - ( $size * 1.5 ) + $shadow_distance_y );
+      }
+
+      @if ( $direction == 'right' ) {
+        border-color: transparent transparent transparent #{$shadow_color};
+        border-style: inset inset inset solid;
+        top: ceil( ( $parent_height / 2 ) - ( $size * 1.25 ) + $shadow_distance_y );
+      }
+
+      @if ( $direction == 'left' ) {
+        border-color: transparent #{$shadow_color} transparent transparent;
+        border-style: inset solid inset inset;
+        left: $offset - $size - $shadow_distance_x;
+        top: ceil( ( $parent_height / 2 ) - ( $size * 1.25 ) + $shadow_distance_y );
+      }
+
+      border-width: #{$size};
+      width: 0;
+      height: 0;
+      position: absolute;
+    
+      .ie8 & {
+        // ie8 does not support alpha opacity on abs positioned elements.  punishment for using ie8 = no shadows
+        border-style: none;
+      }
+    
+    } // :before
+    
+  } // if $shadow_color
+
+} // arrow

data/sass/juliana/_buttons.scss

@@ -0,0 +1,237 @@
+//** Button Structure ****************************************/
+//*
+//* Sets up buttons. By default creates .form-button, .form-button-small and .form-button-large to our typical standards
+//*
+//* @param string $default_sizes
+//*   Override this if for some reason the three default sizes are not appropriate for your use case. 
+//*     Provide as a list in the following format:
+//*       button class suffix, button text font-size, button height, button text line-height, button horizontal padding
+//*    
+//*   If you include a size called "default" it will apply one set of rules to the class that you include this mixin with.
+//*
+//* @param string $additional_sizes
+//*   Optionally provide extra sizes to include with default sizes, provided as a list in the following format:
+//*     button class suffix, button text font-size, button height, button text line-height, button horizontal padding
+//*
+//*   Example:
+//*     @include button-structure( huge 24px 32px 32px 32px );
+//*
+//* @param string $prefix
+//*
+//*   Optional string to prefix size class names with.  Defaults to form-button as noted above.
+//*
+//*/
+@mixin button-structure( $default_sizes: false, $additional_sizes: false, $prefix: 'form-button' ) { 
+  
+  @include border-radius( 4px );  
+  border: 1px solid #016084;
+  color: #fefefe;
+  font-weight: bold;
+  display: inline-block; 
+  vertical-align: top;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+
+  $sizes: ( default 12px 27px 27px 15px ) ( small 11px 23px 22px 13px ) ( large 13px 31px 30px 15px );
+
+  @if $default_sizes {
+    $sizes: $default_sizes;
+  }
+
+  @if $additional_sizes {
+    $sizes: append( $sizes, $additional_sizes );
+  }
+
+  
+  @each $size in $sizes {
+
+    @if nth( $size, 1 ) == 'default' {
+      @include _button-sizes( $size );
+    } // if
+    
+    @else {
+            
+      &.#{$prefix}-#{nth( $size, 1 )} {
+        @include _button-sizes( $size );
+      } // form-button-size
+      
+    } // else
+
+  } // each
+
+  &:hover {
+    text-decoration: none;
+  }
+
+} // button-structure
+
+
+//** Button Sizes ****************************************/
+//* Used to avoid repetition in button-structure.  Not very useful to call this directly
+//*
+//* @param list size
+//*   list of size values in format:
+//*     button text font-size, button height, button text line-height, button horizontal padding
+//*/
+@mixin _button-sizes( $size ) {
+  font-size: nth( $size, 2 );
+  height: nth( $size, 3 );
+  line-height: nth( $size, 4 );
+  padding: 0 nth( $size, 5 );
+} // _button_sizes
+
+
+//** Button Style ****************************************/
+//*
+//* Sets up custom button styes.
+//*
+//* All parameters are optional:
+//*
+//* @param string [$active_gradient] Gradient for button active state in list format.  ex: $active_gradient: #000 #fff 
+//*   Note that if not defined explicitly, this will be automatically calculated as $gradient with the values reversed (standard active behavior)
+//*
+//* @param string [$active_shadow] Active state shadow color in hex.
+//*   Box-shadow params are set automatically with function active_shadow
+//* 
+//* @param string [$border_color]
+//*   Specifies button border-color
+//* 
+//* @param string [$border_radius]
+//*   Specifies button border-radius
+//* 
+//* @param string [$border_width]
+//*   Specifies button border-width
+//* 
+//* @param string [$box_shadow]
+//*   Specifies button box-shadow
+//* 
+//* @param string [$gradient]
+//*   Specifies button background gradient
+//* 
+//* @param string [$hover_border]
+//*   Specifies button hover state border (accepts full shorthand)
+//* 
+//* @param string [$hover_decoration]
+//*   Specifies button hover state text-decoration
+//* 
+//* @param string [$hover_gradient]
+//*   Specifies button hover state background gradient.  If not defined, defaults to 5% darker than normal gradient.
+//* 
+//* @param string [$hover_text_color]
+//*   Specifies button hover state text color
+//* 
+//* @param string [$text_color]
+//*   Specifies button text color
+//* 
+//* @param string [$text_shadow]
+//*   Specifies button text-shadow
+//* 
+//* @param string [$visited_text_color]
+//*   Specifies button visited state text color
+//*/
+@mixin button-style ( $active_gradient: false, $active_shadow: false, $border_color: false, $border_radius: false, $border_width: false, $box_shadow: false, $gradient: false, $hover_border: false, $hover_decoration: false, $hover_gradient: false, $hover_text_color: false, $text_color: false, $text_shadow: false, $visited_text_color: false ) {
+
+  @if $border_color {
+    border-color: $border_color;
+  }
+
+  @if $border_radius {
+    @include border-radius( $border_radius );
+  }
+
+  @if $border_width {
+    border-width: $border_width; 
+  }  
+  
+  @if $box_shadow {
+    @include box-shadow( $box_shadow );
+  }
+  
+  @if $gradient {
+    @include gradient( nth( $gradient, 1 ), nth( $gradient, 2 ) );
+  }
+  
+  @if $text_color {
+    color: $text_color;
+  }
+  
+  @if $text_shadow {
+    text-shadow: $text_shadow;    
+  }
+  
+  @if $visited_text_color {
+    
+    &:visited {
+      color: $visited_text_color;
+    }
+    
+  } // if $visited_text_color
+
+  @if $hover_border or $hover_text_color or $hover_gradient or $hover_decoration {
+
+    &:hover,
+    &:active,
+    &:focus {
+    
+      @if $hover_border {
+        border: $hover_border;
+      }
+    
+      @if $hover_border == false and $border_color {
+        border-color: darken( $border_color, 15% );
+      }
+    
+      @if $hover_text_color or $hover_gradient or $hover_decoration {
+      
+          @if $hover_text_color {
+            color: $hover_text_color;  
+          }
+      
+          @if $hover_gradient {
+            @include gradient( nth( $hover_gradient, 1 ), nth( $hover_gradient, 2 ) );
+          }
+      
+          @if $hover_decoration {
+            text-decoration: $hover_decoration;  
+          }
+        
+      } // if $hover_text_color or $hover_gradient or $hover_decoration
+    
+    } // :hover, :active, :focus
+    
+  } // if $hover_border or $hover_text_color or $hover_gradient or $hover_decoration
+
+  @if $hover_gradient == false and $gradient {
+
+    &:hover,
+    &:active,
+    &:focus {
+      @include gradient( darken( nth( $gradient, 1 ), 5% ), darken( nth( $gradient, 2 ), 5% ) );
+    }
+  
+  } // @if $hover_gradient == false and $gradient
+
+
+  @if $active_gradient or $active_shadow {
+    
+    &:active {
+      
+      @if $active_gradient {
+        @include gradient( nth( $active_gradient, 1), nth( $active_gradient, 2 ) );
+      }
+      
+      @if $active_shadow {
+        @include box-shadow( $active_shadow );
+      }
+      
+    } // &:active
+    
+  }  // if $active_gradient or $active_shadow 
+    
+} // button-style
+
+//** Function defining the button active shadow ****************************************/
+@function active_shadow( $color ) {
+  @return inset 0 0 10px $color;
+}

data/sass/juliana/_mixins.scss

@@ -86,6 +86,6 @@
 //*/
 @mixin box-sizing( $sizing: border-box ) {
   -webkit-box-sizing: $sizing;
-	   -moz-box-sizing: $sizing;
-	        box-sizing: $sizing;
+     -moz-box-sizing: $sizing;
+          box-sizing: $sizing;
 }

metadata

@@ -1,65 +1,50 @@
---- !ruby/object:Gem::Specification 
+--- !ruby/object:Gem::Specification
 name: juliana
-version: !ruby/object:Gem::Version 
-  prerelease: false
-  segments: 
-  - 0
-  - 0
-  - 4
-  version: 0.0.4
+version: !ruby/object:Gem::Version
+  version: 0.0.5
+  prerelease: 
 platform: ruby
-authors: 
+authors:
 - Jackie, Jess, John
 autorequire: 
 bindir: bin
 cert_chain: []
-
-date: 2012-06-14 00:00:00 -04:00
-default_executable: 
+date: 2012-07-06 00:00:00.000000000 Z
 dependencies: []
-
 description: Sass it, bitch!
 email: jackie@behance.com
 executables: []
-
 extensions: []
-
 extra_rdoc_files: []
-
-files: 
+files:
 - lib/juliana.rb
 - sass/_juliana.scss
 - sass/juliana/_mixins.scss
 - sass/juliana/_settings.scss
-has_rdoc: true
+- sass/juliana/_buttons.scss
+- sass/juliana/_arrows.scss
 homepage: http://be.net
 licenses: []
-
 post_install_message: 
 rdoc_options: []
-
-require_paths: 
+require_paths:
 - lib
-required_ruby_version: !ruby/object:Gem::Requirement 
-  requirements: 
-  - - ">="
-    - !ruby/object:Gem::Version 
-      segments: 
-      - 0
-      version: "0"
-required_rubygems_version: !ruby/object:Gem::Requirement 
-  requirements: 
-  - - ">="
-    - !ruby/object:Gem::Version 
-      segments: 
-      - 0
-      version: "0"
+required_ruby_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
 requirements: []
-
 rubyforge_project: 
-rubygems_version: 1.3.6
+rubygems_version: 1.8.24
 signing_key: 
 specification_version: 3
 summary: Sassy baby
 test_files: []
-