compass-css-arrow 0.0.1 → 0.0.2

data/README.md

@@ -10,7 +10,15 @@ Installation
 
 With Bundler :
 
-    gem 'compass-css-extension', :git => 'git://github.com/msadouni/compass-css-arrow.git'
+    // in your Gemfile
+
+    gem 'compass-css-arrow'
+
+Without Bundler :
+
+    // in a shell
+
+    $ (sudo) gem install compass-css-arrow
 
 Add to a project :
 
@@ -23,14 +31,20 @@ Add to a project :
 Usage
 -----
 
-    // @include css-arrow($position, $size, $color, $border-width, $border-color);
+    // @include css-arrow($position, $size, $color, $border-width, $border-color, $border-style);
+    // default values :
+    // $position      : top | right | bottom | left
+    // $size          : any border-accepted length - px, em, etc. (NOT %)
+    // $color         : any color
+    // $border-width  : any border-accepted length with units comparable to $size
+    // $border-color  : any color
+    // $border-style  : dotted | dashed | solid | double | groove | ridge | inset | outset
+
     @import 'compass-css-arrow';
     .arrow-box {
-      @include css-arrow(top, 30px, #88b7d5, 4px, #c2e1f5);
+      @include css-arrow(top, 30px, #88b7d5, 4px, #c2e1f5, solid);
     }
 
-TODO
-----
-
-- Package as a real gem and update README
+    // specify only some of the values :
+    @include css-arrow($size: 1em, $border-style: dotted);
 

data/lib/compass-css-arrow/version.rb

@@ -1,4 +1,4 @@
 module CompassCssArrow
-  VERSION = '0.0.1'
+  VERSION = '0.0.2'
 end
 

data/stylesheets/compass-css-arrow/_css-arrow.scss

@@ -1,19 +1,47 @@
-@mixin css-arrow($position, $size, $color, $border-width, $border-color) {
-  $arrow-orientation:bottom;
-  $arrow-position:left;
-  @if $position == right {
-    $arrow-orientation:left;
-    $arrow-position:top;
-  } @else if $position == bottom {
-    $arrow-orientation:top;
-    $arrow-position:left;
-  } @else if $position == left {
-    $arrow-orientation:right;
-    $arrow-position:top;
+// Default Settings
+$arrow-default-position     : bottom    !default;
+$arrow-default-size         : 1em       !default;
+$arrow-default-color        : gray      !default;
+$arrow-default-border-width : 0         !default;
+$arrow-default-border-color : false     !default;
+$arrow-default-border-style : solid     !default;
+
+// Mixin
+//
+// $position      : top | right | bottom | left
+// $size          : any border-accepted length - px, em, etc. (NOT %)
+// $color         : any color
+// $border-width  : any border-accepted length with units comparable to $size
+// $border-color  : any color
+// $border-style  : dotted | dashed | solid | double | groove | ridge | inset | outset
+@mixin css-arrow(
+  $position     : $arrow-default-position, 
+  $size         : $arrow-default-size, 
+  $color        : $arrow-default-color, 
+  $border-width : $arrow-default-border-width, 
+  $border-color : $arrow-default-border-color,
+  $border-style : $arrow-default-border-style
+) {
+  $arrow-orientation  : opposite-position($position);
+  $arrow-position     : left;
+  $border-size        : $size + $border-width * 1.41421356;
+
+  @if ($position == right) or ($position == left) {
+    $arrow-position   : top;
   }
+
   position: relative;
   background: $color;
-  border: $border-width solid $border-color;
+
+  @if ($border-width > 0) or ($border-color) {
+    @if not ($border-width > 0) { 
+      $border-width : $size*.25; 
+      $border-size  : $size + $border-width * 1.41421356;
+      @alert 'things!';
+    }
+    @if not $border-color { $border-color: darken($color,5); }
+    border: $border-width $border-style $border-color;
+  }
   &:after, &:before {
     #{$arrow-orientation}: 100%;
     border: solid transparent;
@@ -31,9 +59,8 @@
   }
   &:before {
     border-#{$arrow-orientation}-color: $border-color;
-    border-width: #{round($size + $border-width * 1.41421356)};
+    border-width: $border-size;
     #{$arrow-position}: 50%;
-    margin-#{$arrow-position}: -#{round($size + $border-width * 1.41421356)};
+    margin-#{$arrow-position}: -$border-size;
   }
 }
-

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: compass-css-arrow
 version: !ruby/object:Gem::Version
-  version: 0.0.1
+  version: 0.0.2
   prerelease: 
 platform: ruby
 authors:
@@ -9,11 +9,11 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2012-05-10 00:00:00.000000000Z
+date: 2012-05-11 00:00:00.000000000Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: compass
-  requirement: &2153450300 !ruby/object:Gem::Requirement
+  requirement: &2161519000 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -21,7 +21,7 @@ dependencies:
         version: '0.11'
   type: :runtime
   prerelease: false
-  version_requirements: *2153450300
+  version_requirements: *2161519000
 description: a css-only arrow for compass
 email:
 - matthieusadouni@gmail.com