Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Merge pull request #4 from msadouni/arrow-position

Allow custom position for the arrow.
  • Loading branch information...
commit 53f9c7b52086246534652e28ef68854d1bb32212 2 parents 3b17797 + 6ec4603
@msadouni authored
View
1  .gitignore
@@ -1 +1,2 @@
*.gem
+.sass-cache/
View
3  README.md
@@ -39,10 +39,11 @@ Usage
// $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
+ // $offset : 50% | any valid position value - px, em, % (too small or too large will look weird)
@import 'compass-css-arrow';
.arrow-box {
- @include css-arrow(top, 30px, #88b7d5, 4px, #c2e1f5, solid);
+ @include css-arrow(top, 30px, #88b7d5, 4px, #c2e1f5, solid, 75%);
}
// specify only some of the values :
View
25 config.rb
@@ -0,0 +1,25 @@
+# Require any additional compass plugins here.
+require './lib/compass-css-arrow'
+
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "examples"
+sass_dir = "examples/sass"
+images_dir = "examples/images"
+javascripts_dir = "examples/javascripts"
+
+# You can select your preferred output style here (can be overridden via the command line):
+# output_style = :expanded or :nested or :compact or :compressed
+
+# To enable relative paths to assets via compass helper functions. Uncomment:
+# relative_assets = true
+
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+# line_comments = false
+
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
View
76 examples/index.html
@@ -0,0 +1,76 @@
+<!doctype html>
+<html>
+<head>
+ <title>Compass CSS Arrow Examples</title>
+ <link rel="stylesheet" href="screen.css">
+</head>
+<body>
+ <div class="content">
+ <h1>Compass CSS Arrow Examples</h1>
+ <div class="example">
+ <div class="arrow-box top">
+ <p>Top</p>
+ </div>
+ <div class="code">
+ <pre>@include css-arrow(top, 30px, #88b7d5, 4px, #c2e1f5, solid);</pre>
+ </div>
+ </div>
+ <div class="example">
+ <div class="arrow-box right">
+ <p>Right</p>
+ </div>
+ <div class="code">
+ <pre>@include css-arrow(right, 30px, #88b7d5, 4px, #c2e1f5, solid);</pre>
+ </div>
+ </div>
+ <div class="example">
+ <div class="arrow-box bottom">
+ <p>Bottom</p>
+ </div>
+ <div class="code">
+ <pre>@include css-arrow(bottom, 30px, #88b7d5, 4px, #c2e1f5, solid);</pre>
+ </div>
+ </div>
+ <div class="example">
+ <div class="arrow-box left">
+ <p>Left</p>
+ </div>
+ <div class="code">
+ <pre>@include css-arrow(left, 30px, #88b7d5, 4px, #c2e1f5, solid);</pre>
+ </div>
+ </div>
+ <div class="example">
+ <div class="arrow-box top-custom">
+ <p>Top at 40px</p>
+ </div>
+ <div class="code">
+ <pre>@include css-arrow(top, 30px, #88b7d5, 4px, #c2e1f5, solid, 40px);</pre>
+ </div>
+ </div>
+ <div class="example">
+ <div class="arrow-box right-custom">
+ <p>Right at 75px</p>
+ </div>
+ <div class="code">
+ <pre>@include css-arrow(right, 30px, #88b7d5, 4px, #c2e1f5, solid, 75px);</pre>
+ </div>
+ </div>
+ <div class="example">
+ <div class="arrow-box bottom-custom">
+ <p>Bottom at 75%</p>
+ </div>
+ <div class="code">
+ <pre>@include css-arrow(bottom, 30px, #88b7d5, 4px, #c2e1f5, solid, 75%);</pre>
+ </div>
+ </div>
+ <div class="example">
+ <div class="arrow-box left-custom">
+ <p>Left at 3em</p>
+ </div>
+ <div class="code">
+ <pre>@include css-arrow(left, 30px, #88b7d5, 4px, #c2e1f5, solid, 3em);</pre>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
View
81 examples/sass/screen.scss
@@ -0,0 +1,81 @@
+/* Welcome to Compass.
+ * In this file you should write your main styles. (or centralize your imports)
+ * Import this file using the following HTML or equivalent:
+ * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
+
+@import "compass/reset";
+@import "compass/css3";
+@import "compass-css-arrow";
+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;
+ &:last-child {
+ border: none;
+ }
+}
+.arrow-box {
+ width: 400px;
+ margin: 0 auto;
+ margin-bottom: 3em;
+ @include border-radius(10px);
+ p {
+ font-size: 3em;
+ padding: 1em;
+ }
+}
+.top {
+ @include css-arrow(top, 30px, #88b7d5, 4px, #c2e1f5, solid);
+}
+.right {
+ @include css-arrow(right, 30px, #88b7d5, 4px, #c2e1f5, solid);
+}
+.bottom {
+ @include css-arrow(bottom, 30px, #88b7d5, 4px, #c2e1f5, solid);
+}
+.left {
+ @include css-arrow(left, 30px, #88b7d5, 4px, #c2e1f5, solid);
+}
+.top-custom {
+ @include css-arrow(top, 30px, #88b7d5, 4px, #c2e1f5, solid, 40px);
+}
+.right-custom {
+ @include css-arrow(right, 30px, #88b7d5, 4px, #c2e1f5, solid, 75px);
+}
+.bottom-custom {
+ @include css-arrow(bottom, 30px, #88b7d5, 4px, #c2e1f5, solid, 75%);
+}
+.left-custom {
+ @include css-arrow(left, 30px, #88b7d5, 4px, #c2e1f5, solid, 3em);
+}
+.code {
+ width: 700px;
+ margin: 0 auto;
+ background: #e3e3e3;
+ padding: 1em;
+ @include border-radius;
+ border: 1px solid #bfbfbf;
+}
+pre {
+ margin: 0;
+ padding: 0;
+ font-size: 1.25em;
+}
View
1  examples/screen.css
@@ -0,0 +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}
View
8 stylesheets/compass-css-arrow/_css-arrow.scss
@@ -5,6 +5,7 @@ $arrow-default-color : gray !default;
$arrow-default-border-width : 0 !default;
$arrow-default-border-color : false !default;
$arrow-default-border-style : solid !default;
+$arrow-default-offset : 50% !default;
// Mixin
//
@@ -20,7 +21,8 @@ $arrow-default-border-style : solid !default;
$color : $arrow-default-color,
$border-width : $arrow-default-border-width,
$border-color : $arrow-default-border-color,
- $border-style : $arrow-default-border-style
+ $border-style : $arrow-default-border-style,
+ $offset : $arrow-default-offset
) {
$arrow-orientation : opposite-position($position);
$arrow-position : left;
@@ -53,13 +55,13 @@ $arrow-default-border-style : solid !default;
&:after {
border-#{$arrow-orientation}-color: $color;
border-width: $size;
- #{$arrow-position}: 50%;
+ #{$arrow-position}: $offset;
margin-#{$arrow-position}: -$size;
}
&:before {
border-#{$arrow-orientation}-color: $border-color;
border-width: $border-size;
- #{$arrow-position}: 50%;
+ #{$arrow-position}: $offset;
margin-#{$arrow-position}: -$border-size;
}
}
Please sign in to comment.
Something went wrong with that request. Please try again.