compass-css-arrow 0.0.3 → 0.0.4
Sign up to get free protection for your applications and to get access to all the features.
- 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
|