compass-css-arrow 0.0.3 → 0.0.4
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/.gitignore +1 -0
- data/README.md +2 -1
- data/config.rb +25 -0
- data/examples/index.html +76 -0
- data/examples/sass/screen.scss +81 -0
- data/examples/screen.css +1 -0
- data/lib/compass-css-arrow/version.rb +1 -1
- data/stylesheets/compass-css-arrow/_css-arrow.scss +5 -3
- metadata +14 -5
data/.gitignore
CHANGED
data/README.md
CHANGED
|
@@ -39,10 +39,11 @@ Usage
|
|
|
39
39
|
// $border-width : any border-accepted length with units comparable to $size
|
|
40
40
|
// $border-color : any color
|
|
41
41
|
// $border-style : dotted | dashed | solid | double | groove | ridge | inset | outset
|
|
42
|
+
// $offset : 50% | any valid position value - px, em, % (too small or too large will look weird)
|
|
42
43
|
|
|
43
44
|
@import 'compass-css-arrow';
|
|
44
45
|
.arrow-box {
|
|
45
|
-
@include css-arrow(top, 30px, #88b7d5, 4px, #c2e1f5, solid);
|
|
46
|
+
@include css-arrow(top, 30px, #88b7d5, 4px, #c2e1f5, solid, 75%);
|
|
46
47
|
}
|
|
47
48
|
|
|
48
49
|
// specify only some of the values :
|
data/config.rb
ADDED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
# Require any additional compass plugins here.
|
|
2
|
+
require './lib/compass-css-arrow'
|
|
3
|
+
|
|
4
|
+
# Set this to the root of your project when deployed:
|
|
5
|
+
http_path = "/"
|
|
6
|
+
css_dir = "examples"
|
|
7
|
+
sass_dir = "examples/sass"
|
|
8
|
+
images_dir = "examples/images"
|
|
9
|
+
javascripts_dir = "examples/javascripts"
|
|
10
|
+
|
|
11
|
+
# You can select your preferred output style here (can be overridden via the command line):
|
|
12
|
+
# output_style = :expanded or :nested or :compact or :compressed
|
|
13
|
+
|
|
14
|
+
# To enable relative paths to assets via compass helper functions. Uncomment:
|
|
15
|
+
# relative_assets = true
|
|
16
|
+
|
|
17
|
+
# To disable debugging comments that display the original location of your selectors. Uncomment:
|
|
18
|
+
# line_comments = false
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
# If you prefer the indented syntax, you might want to regenerate this
|
|
22
|
+
# project again passing --syntax sass, or you can uncomment this:
|
|
23
|
+
# preferred_syntax = :sass
|
|
24
|
+
# and then run:
|
|
25
|
+
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
|
data/examples/index.html
ADDED
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>Compass CSS Arrow Examples</title>
|
|
5
|
+
<link rel="stylesheet" href="screen.css">
|
|
6
|
+
</head>
|
|
7
|
+
<body>
|
|
8
|
+
<div class="content">
|
|
9
|
+
<h1>Compass CSS Arrow Examples</h1>
|
|
10
|
+
<div class="example">
|
|
11
|
+
<div class="arrow-box top">
|
|
12
|
+
<p>Top</p>
|
|
13
|
+
</div>
|
|
14
|
+
<div class="code">
|
|
15
|
+
<pre>@include css-arrow(top, 30px, #88b7d5, 4px, #c2e1f5, solid);</pre>
|
|
16
|
+
</div>
|
|
17
|
+
</div>
|
|
18
|
+
<div class="example">
|
|
19
|
+
<div class="arrow-box right">
|
|
20
|
+
<p>Right</p>
|
|
21
|
+
</div>
|
|
22
|
+
<div class="code">
|
|
23
|
+
<pre>@include css-arrow(right, 30px, #88b7d5, 4px, #c2e1f5, solid);</pre>
|
|
24
|
+
</div>
|
|
25
|
+
</div>
|
|
26
|
+
<div class="example">
|
|
27
|
+
<div class="arrow-box bottom">
|
|
28
|
+
<p>Bottom</p>
|
|
29
|
+
</div>
|
|
30
|
+
<div class="code">
|
|
31
|
+
<pre>@include css-arrow(bottom, 30px, #88b7d5, 4px, #c2e1f5, solid);</pre>
|
|
32
|
+
</div>
|
|
33
|
+
</div>
|
|
34
|
+
<div class="example">
|
|
35
|
+
<div class="arrow-box left">
|
|
36
|
+
<p>Left</p>
|
|
37
|
+
</div>
|
|
38
|
+
<div class="code">
|
|
39
|
+
<pre>@include css-arrow(left, 30px, #88b7d5, 4px, #c2e1f5, solid);</pre>
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
|
+
<div class="example">
|
|
43
|
+
<div class="arrow-box top-custom">
|
|
44
|
+
<p>Top at 40px</p>
|
|
45
|
+
</div>
|
|
46
|
+
<div class="code">
|
|
47
|
+
<pre>@include css-arrow(top, 30px, #88b7d5, 4px, #c2e1f5, solid, 40px);</pre>
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
<div class="example">
|
|
51
|
+
<div class="arrow-box right-custom">
|
|
52
|
+
<p>Right at 75px</p>
|
|
53
|
+
</div>
|
|
54
|
+
<div class="code">
|
|
55
|
+
<pre>@include css-arrow(right, 30px, #88b7d5, 4px, #c2e1f5, solid, 75px);</pre>
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
58
|
+
<div class="example">
|
|
59
|
+
<div class="arrow-box bottom-custom">
|
|
60
|
+
<p>Bottom at 75%</p>
|
|
61
|
+
</div>
|
|
62
|
+
<div class="code">
|
|
63
|
+
<pre>@include css-arrow(bottom, 30px, #88b7d5, 4px, #c2e1f5, solid, 75%);</pre>
|
|
64
|
+
</div>
|
|
65
|
+
</div>
|
|
66
|
+
<div class="example">
|
|
67
|
+
<div class="arrow-box left-custom">
|
|
68
|
+
<p>Left at 3em</p>
|
|
69
|
+
</div>
|
|
70
|
+
<div class="code">
|
|
71
|
+
<pre>@include css-arrow(left, 30px, #88b7d5, 4px, #c2e1f5, solid, 3em);</pre>
|
|
72
|
+
</div>
|
|
73
|
+
</div>
|
|
74
|
+
</div>
|
|
75
|
+
</body>
|
|
76
|
+
</html>
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
/* Welcome to Compass.
|
|
2
|
+
* In this file you should write your main styles. (or centralize your imports)
|
|
3
|
+
* Import this file using the following HTML or equivalent:
|
|
4
|
+
* <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
|
|
5
|
+
|
|
6
|
+
@import "compass/reset";
|
|
7
|
+
@import "compass/css3";
|
|
8
|
+
@import "compass-css-arrow";
|
|
9
|
+
body {
|
|
10
|
+
font-family: monospace;
|
|
11
|
+
color: #444;
|
|
12
|
+
background: #f3f3f3;
|
|
13
|
+
}
|
|
14
|
+
h1 {
|
|
15
|
+
font-family: Georgia, serif;
|
|
16
|
+
font-size: 3em;
|
|
17
|
+
color: #88b7d5;
|
|
18
|
+
text-align: center;
|
|
19
|
+
margin-bottom: 1em;
|
|
20
|
+
}
|
|
21
|
+
.content {
|
|
22
|
+
width: 1000px;
|
|
23
|
+
margin: 0 auto;
|
|
24
|
+
padding: 3em 0;
|
|
25
|
+
}
|
|
26
|
+
.example {
|
|
27
|
+
margin-bottom: 1em;
|
|
28
|
+
padding: 3em;
|
|
29
|
+
border-bottom: 1px dashed #bfbfbf;
|
|
30
|
+
text-align: center;
|
|
31
|
+
&:last-child {
|
|
32
|
+
border: none;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
.arrow-box {
|
|
36
|
+
width: 400px;
|
|
37
|
+
margin: 0 auto;
|
|
38
|
+
margin-bottom: 3em;
|
|
39
|
+
@include border-radius(10px);
|
|
40
|
+
p {
|
|
41
|
+
font-size: 3em;
|
|
42
|
+
padding: 1em;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
.top {
|
|
46
|
+
@include css-arrow(top, 30px, #88b7d5, 4px, #c2e1f5, solid);
|
|
47
|
+
}
|
|
48
|
+
.right {
|
|
49
|
+
@include css-arrow(right, 30px, #88b7d5, 4px, #c2e1f5, solid);
|
|
50
|
+
}
|
|
51
|
+
.bottom {
|
|
52
|
+
@include css-arrow(bottom, 30px, #88b7d5, 4px, #c2e1f5, solid);
|
|
53
|
+
}
|
|
54
|
+
.left {
|
|
55
|
+
@include css-arrow(left, 30px, #88b7d5, 4px, #c2e1f5, solid);
|
|
56
|
+
}
|
|
57
|
+
.top-custom {
|
|
58
|
+
@include css-arrow(top, 30px, #88b7d5, 4px, #c2e1f5, solid, 40px);
|
|
59
|
+
}
|
|
60
|
+
.right-custom {
|
|
61
|
+
@include css-arrow(right, 30px, #88b7d5, 4px, #c2e1f5, solid, 75px);
|
|
62
|
+
}
|
|
63
|
+
.bottom-custom {
|
|
64
|
+
@include css-arrow(bottom, 30px, #88b7d5, 4px, #c2e1f5, solid, 75%);
|
|
65
|
+
}
|
|
66
|
+
.left-custom {
|
|
67
|
+
@include css-arrow(left, 30px, #88b7d5, 4px, #c2e1f5, solid, 3em);
|
|
68
|
+
}
|
|
69
|
+
.code {
|
|
70
|
+
width: 700px;
|
|
71
|
+
margin: 0 auto;
|
|
72
|
+
background: #e3e3e3;
|
|
73
|
+
padding: 1em;
|
|
74
|
+
@include border-radius;
|
|
75
|
+
border: 1px solid #bfbfbf;
|
|
76
|
+
}
|
|
77
|
+
pre {
|
|
78
|
+
margin: 0;
|
|
79
|
+
padding: 0;
|
|
80
|
+
font-size: 1.25em;
|
|
81
|
+
}
|
data/examples/screen.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}html{line-height:1}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}q,blockquote{quotes:none}q:before,q:after,blockquote:before,blockquote:after{content:"";content:none}a img{border:none}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block}body{font-family:monospace;color:#444;background:#f3f3f3}h1{font-family:Georgia,serif;font-size:3em;color:#88b7d5;text-align:center;margin-bottom:1em}.content{width:1000px;margin:0 auto;padding:3em 0}.example{margin-bottom:1em;padding:3em;border-bottom:1px dashed #bfbfbf;text-align:center}.example:last-child{border:none}.arrow-box{width:400px;margin:0 auto;margin-bottom:3em;-webkit-border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px;border-radius:10px}.arrow-box p{font-size:3em;padding:1em}.top{position:relative;background:#88b7d5;border:4px solid #c2e1f5}.top:after,.top:before{bottom:100%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none}.top:after{border-bottom-color:#88b7d5;border-width:30px;left:50%;margin-left:-30px}.top:before{border-bottom-color:#c2e1f5;border-width:35.65685px;left:50%;margin-left:-35.65685px}.right{position:relative;background:#88b7d5;border:4px solid #c2e1f5}.right:after,.right:before{left:100%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none}.right:after{border-left-color:#88b7d5;border-width:30px;top:50%;margin-top:-30px}.right:before{border-left-color:#c2e1f5;border-width:35.65685px;top:50%;margin-top:-35.65685px}.bottom{position:relative;background:#88b7d5;border:4px solid #c2e1f5}.bottom:after,.bottom:before{top:100%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none}.bottom:after{border-top-color:#88b7d5;border-width:30px;left:50%;margin-left:-30px}.bottom:before{border-top-color:#c2e1f5;border-width:35.65685px;left:50%;margin-left:-35.65685px}.left{position:relative;background:#88b7d5;border:4px solid #c2e1f5}.left:after,.left:before{right:100%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none}.left:after{border-right-color:#88b7d5;border-width:30px;top:50%;margin-top:-30px}.left:before{border-right-color:#c2e1f5;border-width:35.65685px;top:50%;margin-top:-35.65685px}.top-custom{position:relative;background:#88b7d5;border:4px solid #c2e1f5}.top-custom:after,.top-custom:before{bottom:100%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none}.top-custom:after{border-bottom-color:#88b7d5;border-width:30px;left:40px;margin-left:-30px}.top-custom:before{border-bottom-color:#c2e1f5;border-width:35.65685px;left:40px;margin-left:-35.65685px}.right-custom{position:relative;background:#88b7d5;border:4px solid #c2e1f5}.right-custom:after,.right-custom:before{left:100%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none}.right-custom:after{border-left-color:#88b7d5;border-width:30px;top:75px;margin-top:-30px}.right-custom:before{border-left-color:#c2e1f5;border-width:35.65685px;top:75px;margin-top:-35.65685px}.bottom-custom{position:relative;background:#88b7d5;border:4px solid #c2e1f5}.bottom-custom:after,.bottom-custom:before{top:100%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none}.bottom-custom:after{border-top-color:#88b7d5;border-width:30px;left:75%;margin-left:-30px}.bottom-custom:before{border-top-color:#c2e1f5;border-width:35.65685px;left:75%;margin-left:-35.65685px}.left-custom{position:relative;background:#88b7d5;border:4px solid #c2e1f5}.left-custom:after,.left-custom:before{right:100%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none}.left-custom:after{border-right-color:#88b7d5;border-width:30px;top:3em;margin-top:-30px}.left-custom:before{border-right-color:#c2e1f5;border-width:35.65685px;top:3em;margin-top:-35.65685px}.code{width:700px;margin:0 auto;background:#e3e3e3;padding:1em;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;border:1px solid #bfbfbf}pre{margin:0;padding:0;font-size:1.25em}
|
|
@@ -5,6 +5,7 @@ $arrow-default-color : gray !default;
|
|
|
5
5
|
$arrow-default-border-width : 0 !default;
|
|
6
6
|
$arrow-default-border-color : false !default;
|
|
7
7
|
$arrow-default-border-style : solid !default;
|
|
8
|
+
$arrow-default-offset : 50% !default;
|
|
8
9
|
|
|
9
10
|
// Mixin
|
|
10
11
|
//
|
|
@@ -20,7 +21,8 @@ $arrow-default-border-style : solid !default;
|
|
|
20
21
|
$color : $arrow-default-color,
|
|
21
22
|
$border-width : $arrow-default-border-width,
|
|
22
23
|
$border-color : $arrow-default-border-color,
|
|
23
|
-
$border-style : $arrow-default-border-style
|
|
24
|
+
$border-style : $arrow-default-border-style,
|
|
25
|
+
$offset : $arrow-default-offset
|
|
24
26
|
) {
|
|
25
27
|
$arrow-orientation : opposite-position($position);
|
|
26
28
|
$arrow-position : left;
|
|
@@ -53,13 +55,13 @@ $arrow-default-border-style : solid !default;
|
|
|
53
55
|
&:after {
|
|
54
56
|
border-#{$arrow-orientation}-color: $color;
|
|
55
57
|
border-width: $size;
|
|
56
|
-
#{$arrow-position}:
|
|
58
|
+
#{$arrow-position}: $offset;
|
|
57
59
|
margin-#{$arrow-position}: -$size;
|
|
58
60
|
}
|
|
59
61
|
&:before {
|
|
60
62
|
border-#{$arrow-orientation}-color: $border-color;
|
|
61
63
|
border-width: $border-size;
|
|
62
|
-
#{$arrow-position}:
|
|
64
|
+
#{$arrow-position}: $offset;
|
|
63
65
|
margin-#{$arrow-position}: -$border-size;
|
|
64
66
|
}
|
|
65
67
|
}
|
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.4
|
|
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:
|
|
12
|
+
date: 2013-03-19 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: compass
|
|
16
|
-
requirement:
|
|
16
|
+
requirement: !ruby/object:Gem::Requirement
|
|
17
17
|
none: false
|
|
18
18
|
requirements:
|
|
19
19
|
- - ! '>='
|
|
@@ -21,7 +21,12 @@ dependencies:
|
|
|
21
21
|
version: '0.11'
|
|
22
22
|
type: :runtime
|
|
23
23
|
prerelease: false
|
|
24
|
-
version_requirements:
|
|
24
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
25
|
+
none: false
|
|
26
|
+
requirements:
|
|
27
|
+
- - ! '>='
|
|
28
|
+
- !ruby/object:Gem::Version
|
|
29
|
+
version: '0.11'
|
|
25
30
|
description: a css-only arrow for compass
|
|
26
31
|
email:
|
|
27
32
|
- matthieusadouni@gmail.com
|
|
@@ -34,6 +39,10 @@ files:
|
|
|
34
39
|
- Gemfile.lock
|
|
35
40
|
- README.md
|
|
36
41
|
- compass-css-arrow.gemspec
|
|
42
|
+
- config.rb
|
|
43
|
+
- examples/index.html
|
|
44
|
+
- examples/sass/screen.scss
|
|
45
|
+
- examples/screen.css
|
|
37
46
|
- lib/compass-css-arrow.rb
|
|
38
47
|
- lib/compass-css-arrow/version.rb
|
|
39
48
|
- stylesheets/_compass-css-arrow.scss
|
|
@@ -60,7 +69,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
60
69
|
version: '0'
|
|
61
70
|
requirements: []
|
|
62
71
|
rubyforge_project: compass-css-arrow
|
|
63
|
-
rubygems_version: 1.8.
|
|
72
|
+
rubygems_version: 1.8.25
|
|
64
73
|
signing_key:
|
|
65
74
|
specification_version: 3
|
|
66
75
|
summary: a css-only arrow for compass
|