Updates

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cssarrowplease",
-  "version": "0.2.2-16",
+  "version": "0.2.2-18",
   "author": {
     "name": "Simon Højberg",
     "email": "r.hackr@gmail.com"
@@ -41,4 +41,4 @@
     "cssarrowplease.com",
     "www.cssarrowplease.com"
   ]
-}
+}

public/css/app.css

@@ -32,12 +32,7 @@ input[type='radio']           { border: 0; }
 /* =MODULES
 ====================================================== */
 /* preview */
-.arrow_box                        { padding: 40px; width: 280px; height: 100px; border-radius: 6px; 
-  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
-
-  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.3));
-  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.3));
-}
+.arrow_box                        { padding: 40px; width: 280px; height: 100px; border-radius: 6px; }
 
 /* logo */
 .logo                             { color: #ddf8c6; text-align: center; font-size: 54px; line-height: 54px; font-weight: bold; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }

public/js/lib/models/arrow.js

@@ -61,7 +61,8 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
     @protected
     **/
     _baseCSS: function () {
-      var iPos        = this.invertedPosition(),
+      var pos         = this.get('position'),
+          iPos        = this.invertedPosition(),
           color       = this.get('color'),
           borderWidth = this.get('borderWidth'),
           borderColor = this.get('borderColor'),
@@ -81,14 +82,21 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
 
       css += '\t' + iPos +': 100%;\n';
 
+      if (pos === 'top' || pos === 'bottom') {
+        css += '\tleft: 50%;\n';
+      }
+      else {
+        css += '\ttop: 50%;\n';
+      }
+
       css += '\tborder: solid transparent;\n';
       css += '\tcontent: " ";\n';
       css += '\theight: 0;\n';
       css += '\twidth: 0;\n';
       css += '\tposition: absolute;\n';
       css += '\tpointer-events: none;\n';
 
-      css += '}\n';
+      if(hasBorder) css += '}\n';
 
       return css;
     },
@@ -103,24 +111,25 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
     @protected
     **/
     _arrowCSS: function (color, size, layer) {
-      var pos       = this.get('position'),
-          iPos      = this.invertedPosition(),
-          rgbColor  = this.hexToRGB(color),
-          css       = ".arrow_box:";
+      var pos         = this.get('position'),
+          iPos        = this.invertedPosition(),
+          rgbColor    = this.hexToRGB(color),
+          borderWidth = this.get('borderWidth'),
+          css         = "";
 
       layer = layer || 'after';
 
-      css += layer + ' {\n';
+      if(borderWidth > 0) css += '.arrow_box:' + layer + ' {\n';
 
       css += '\tborder-color: rgba(' + rgbColor.join(', ') + ', 0);\n';
       css += '\tborder-' + iPos + '-color: ' + color + ';\n';
       css += '\tborder-width: ' + size + 'px;\n';
 
       if (pos === 'top' || pos === 'bottom') {
-        css += '\tleft: 50%;\n\tmargin-left: -' + size + 'px;\n';
+        css += '\tmargin-left: -' + size + 'px;\n';
       }
       else {
-        css += '\ttop: 50%;\n\tmargin-top: -' + size + 'px;\n';
+        css += '\tmargin-top: -' + size + 'px;\n';
       }
 
       css += '}';
@@ -176,7 +185,7 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
         this._arrowBorderCSS()
       ];
 
-      return css.join('\n');
+      return css.join(css[2] ? '\n':'');
     },
 
     /**

public/js/spec/models/arrow_spec.js

@@ -134,6 +134,7 @@ describe("CSSArrowPlease.Arrow", function () {
             expected;
 
         expected = '\tbottom: 100%;\n';
+        expected = '\tleft: 50%;\n';
         expected += '\tborder: solid transparent;\n';
         expected += '\tcontent: " ";\n';
         expected += '\theight: 0;\n';
@@ -210,39 +211,43 @@ describe("CSSArrowPlease.Arrow", function () {
         beforeEach(function () { arrow.set('position', 'top'); });
 
         it('is centered', function () {
-          var css = arrow._arrowCSS('red', 20);
-          expect( css ).toMatch( 'left: 50%' );
-          expect( css ).toMatch( 'margin-left: -20px' );
+          var arrowcss = arrow._arrowCSS('red', 20),
+              basecss = arrow._baseCSS();
+          expect( basecss ).toMatch( 'left: 50%' );
+          expect( arrowcss ).toMatch( 'margin-left: -20px' );
         });
       });
 
       describe('position bottom', function () {
         beforeEach(function () { arrow.set('position', 'bottom'); });
 
         it('is centered', function () {
-          var css = arrow._arrowCSS('red', 20);
-          expect( css ).toMatch( 'left: 50%' );
-          expect( css ).toMatch( 'margin-left: -20px' );
+          var arrowcss = arrow._arrowCSS('red', 20),
+              basecss = arrow._baseCSS();
+          expect( basecss ).toMatch( 'left: 50%' );
+          expect( arrowcss ).toMatch( 'margin-left: -20px' );
         });
       });
 
       describe('position right', function () {
         beforeEach(function () { arrow.set('position', 'right'); });
 
         it('is centered', function () {
-          var css = arrow._arrowCSS('red', 20);
-          expect( css ).toMatch( 'top: 50%' );
-          expect( css ).toMatch( 'margin-top: -20px' );
+          var arrowcss = arrow._arrowCSS('red', 20),
+              basecss = arrow._baseCSS();
+          expect( basecss ).toMatch( 'top: 50%' );
+          expect( arrowcss ).toMatch( 'margin-top: -20px' );
         });
       });
 
       describe('position left', function () {
         beforeEach(function () { arrow.set('position', 'left'); });
 
         it('is centered', function () {
-          var css = arrow._arrowCSS('red', 20);
-          expect( css ).toMatch( 'top: 50%' );
-          expect( css ).toMatch( 'margin-top: -20px' );
+          var arrowcss = arrow._arrowCSS('red', 20),
+              basecss = arrow._baseCSS();
+          expect( basecss ).toMatch( 'top: 50%' );
+          expect( arrowcss ).toMatch( 'margin-top: -20px' );
         });
       });