Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Allow custom position for the arrow. #4

Merged
merged 5 commits into from

2 participants

@msadouni
Owner
  • default position is in the middle (50%)
  • pixels, percents and ems are allowed
@msadouni Allow custom position for the arrow.
- default position is in the middle (50%)
- pixels, percents and ems are allowed
38b2f82
@msadouni
Owner

I don't really like the $position-value argument name, I'm open for a better suggestion.

@kud

Shouldn't be position because you don't know if it's left, right, top, bottom.

Maybe you could still name it "position" but it should have two params. position and value.

@msadouni
Owner

There already is a $position argument, the first one, which can be either top, right, bottom or left. Then the $position-value indicates where the arrow is placed once it is positioned, and if omitted the arrow goes in the middle.

Maybe $offset could be a better name ?

@kud

Yep, offset so.

@msadouni msadouni merged commit 53f9c7b into master
@msadouni msadouni deleted the arrow-position branch
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Mar 19, 2013
  1. Allow custom position for the arrow.

    authored
    - default position is in the middle (50%)
    - pixels, percents and ems are allowed
  2. README formatting

    authored
  3. add some examples

    authored
This page is out of date. Refresh to see the latest.
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;
}
}
Something went wrong with that request. Please try again.