compass-css-arrow 0.0.1 → 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. data/README.md +21 -7
  2. data/lib/compass-css-arrow/version.rb +1 -1
  3. data/stylesheets/compass-css-arrow/_css-arrow.scss +43 -16
  4. metadata +4 -4
data/README.md CHANGED
@@ -10,7 +10,15 @@ Installation
10
10
 
11
11
  With Bundler :
12
12
 
13
- gem 'compass-css-extension', :git => 'git://github.com/msadouni/compass-css-arrow.git'
13
+ // in your Gemfile
14
+
15
+ gem 'compass-css-arrow'
16
+
17
+ Without Bundler :
18
+
19
+ // in a shell
20
+
21
+ $ (sudo) gem install compass-css-arrow
14
22
 
15
23
  Add to a project :
16
24
 
@@ -23,14 +31,20 @@ Add to a project :
23
31
  Usage
24
32
  -----
25
33
 
26
- // @include css-arrow($position, $size, $color, $border-width, $border-color);
34
+ // @include css-arrow($position, $size, $color, $border-width, $border-color, $border-style);
35
+ // default values :
36
+ // $position : top | right | bottom | left
37
+ // $size : any border-accepted length - px, em, etc. (NOT %)
38
+ // $color : any color
39
+ // $border-width : any border-accepted length with units comparable to $size
40
+ // $border-color : any color
41
+ // $border-style : dotted | dashed | solid | double | groove | ridge | inset | outset
42
+
27
43
  @import 'compass-css-arrow';
28
44
  .arrow-box {
29
- @include css-arrow(top, 30px, #88b7d5, 4px, #c2e1f5);
45
+ @include css-arrow(top, 30px, #88b7d5, 4px, #c2e1f5, solid);
30
46
  }
31
47
 
32
- TODO
33
- ----
34
-
35
- - Package as a real gem and update README
48
+ // specify only some of the values :
49
+ @include css-arrow($size: 1em, $border-style: dotted);
36
50
 
data/lib/compass-css-arrow/version.rb CHANGED
@@ -1,4 +1,4 @@
1
1
  module CompassCssArrow
2
- VERSION = '0.0.1'
2
+ VERSION = '0.0.2'
3
3
  end
4
4
 
data/stylesheets/compass-css-arrow/_css-arrow.scss CHANGED
@@ -1,19 +1,47 @@
1
- @mixin css-arrow($position, $size, $color, $border-width, $border-color) {
2
- $arrow-orientation:bottom;
3
- $arrow-position:left;
4
- @if $position == right {
5
- $arrow-orientation:left;
6
- $arrow-position:top;
7
- } @else if $position == bottom {
8
- $arrow-orientation:top;
9
- $arrow-position:left;
10
- } @else if $position == left {
11
- $arrow-orientation:right;
12
- $arrow-position:top;
1
+ // Default Settings
2
+ $arrow-default-position : bottom !default;
3
+ $arrow-default-size : 1em !default;
4
+ $arrow-default-color : gray !default;
5
+ $arrow-default-border-width : 0 !default;
6
+ $arrow-default-border-color : false !default;
7
+ $arrow-default-border-style : solid !default;
8
+
9
+ // Mixin
10
+ //
11
+ // $position : top | right | bottom | left
12
+ // $size : any border-accepted length - px, em, etc. (NOT %)
13
+ // $color : any color
14
+ // $border-width : any border-accepted length with units comparable to $size
15
+ // $border-color : any color
16
+ // $border-style : dotted | dashed | solid | double | groove | ridge | inset | outset
17
+ @mixin css-arrow(
18
+ $position : $arrow-default-position,
19
+ $size : $arrow-default-size,
20
+ $color : $arrow-default-color,
21
+ $border-width : $arrow-default-border-width,
22
+ $border-color : $arrow-default-border-color,
23
+ $border-style : $arrow-default-border-style
24
+ ) {
25
+ $arrow-orientation : opposite-position($position);
26
+ $arrow-position : left;
27
+ $border-size : $size + $border-width * 1.41421356;
28
+
29
+ @if ($position == right) or ($position == left) {
30
+ $arrow-position : top;
13
31
  }
32
+
14
33
  position: relative;
15
34
  background: $color;
16
- border: $border-width solid $border-color;
35
+
36
+ @if ($border-width > 0) or ($border-color) {
37
+ @if not ($border-width > 0) {
38
+ $border-width : $size*.25;
39
+ $border-size : $size + $border-width * 1.41421356;
40
+ @alert 'things!';
41
+ }
42
+ @if not $border-color { $border-color: darken($color,5); }
43
+ border: $border-width $border-style $border-color;
44
+ }
17
45
  &:after, &:before {
18
46
  #{$arrow-orientation}: 100%;
19
47
  border: solid transparent;
@@ -31,9 +59,8 @@
31
59
  }
32
60
  &:before {
33
61
  border-#{$arrow-orientation}-color: $border-color;
34
- border-width: #{round($size + $border-width * 1.41421356)};
62
+ border-width: $border-size;
35
63
  #{$arrow-position}: 50%;
36
- margin-#{$arrow-position}: -#{round($size + $border-width * 1.41421356)};
64
+ margin-#{$arrow-position}: -$border-size;
37
65
  }
38
66
  }
39
-
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: compass-css-arrow
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.1
4
+ version: 0.0.2
5
5
  prerelease:
6
6
  platform: ruby
7
7
  authors:
@@ -9,11 +9,11 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2012-05-10 00:00:00.000000000Z
12
+ date: 2012-05-11 00:00:00.000000000Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: compass
16
- requirement: &2153450300 !ruby/object:Gem::Requirement
16
+ requirement: &2161519000 !ruby/object:Gem::Requirement
17
17
  none: false
18
18
  requirements:
19
19
  - - ! '>='
@@ -21,7 +21,7 @@ dependencies:
21
21
  version: '0.11'
22
22
  type: :runtime
23
23
  prerelease: false
24
- version_requirements: *2153450300
24
+ version_requirements: *2161519000
25
25
  description: a css-only arrow for compass
26
26
  email:
27
27
  - matthieusadouni@gmail.com