adding placeholder color and orientation as a CSS class

src/styles/scss/main.scss

@@ -310,6 +310,22 @@ $colorsAll: (one, $primaryColor),
     width $animSpeed, height $animSpeed;
 }
 
+.#{$app-prefix}placeholder.horizontal,
+.#{$com-prefix}placeholder.horizontal,
+.#{$nv-prefix}placeholder.horizontal {
+  border-color: transparent $placeholderColor;
+  border-width: 3px 5px;
+  margin: -3px 0 0;
+}
+
+.#{$app-prefix}placeholder.vertical,
+.#{$com-prefix}placeholder.vertical,
+.#{$nv-prefix}placeholder.vertical {
+  border-color: $placeholderColor transparent;
+  border-width: 5px 3px;
+  margin: 0 0 0 -3px;
+}
+
 .#{$app-prefix}placeholder-int,
 .#{$com-prefix}placeholder-int,
 .#{$nv-prefix}placeholder-int {

src/utils/Sorter.js

@@ -971,9 +971,11 @@ export default Backbone.View.extend({
       brd = 3,
       method = pos.method;
     var elDim = dims[pos.index];
-    plh.style.borderColor = 'transparent ' + brdCol;
-    plh.style.borderWidth = brd + un + ' ' + (brd + 2) + un;
-    plh.style.margin = '-' + brd + 'px 0 0';
+
+    // Placeholder orientation
+    plh.classList.remove('vertical');
+    plh.classList.add('horizontal');
+
     if (elDim) {
       // If it's not in flow (like 'float' element)
       if (!elDim[4]) {
@@ -981,9 +983,9 @@ export default Backbone.View.extend({
         h = elDim[2] - marg * 2 + un;
         t = elDim[0] + marg;
         l = method == 'before' ? elDim[1] - marg : elDim[1] + elDim[3] - marg;
-        plh.style.borderColor = brdCol + ' transparent';
-        plh.style.borderWidth = brd + 2 + un + ' ' + brd + un;
-        plh.style.margin = '0 0 0 -' + brd + 'px';
+
+        plh.classList.remove('horizontal');
+        plh.classList.add('vertical');
       } else {
         w = elDim[3] + un;
         h = 'auto';