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.
- data/README.md +21 -7
- data/lib/compass-css-arrow/version.rb +1 -1
- data/stylesheets/compass-css-arrow/_css-arrow.scss +43 -16
- metadata +4 -4
data/README.md
CHANGED
@@ -10,7 +10,15 @@ Installation
|
|
10
10
|
|
11
11
|
With Bundler :
|
12
12
|
|
13
|
-
|
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
|
-
|
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
|
|
@@ -1,19 +1,47 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
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
|
-
|
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:
|
62
|
+
border-width: $border-size;
|
35
63
|
#{$arrow-position}: 50%;
|
36
|
-
margin-#{$arrow-position}:
|
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.
|
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-
|
12
|
+
date: 2012-05-11 00:00:00.000000000Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: compass
|
16
|
-
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: *
|
24
|
+
version_requirements: *2161519000
|
25
25
|
description: a css-only arrow for compass
|
26
26
|
email:
|
27
27
|
- matthieusadouni@gmail.com
|