fixed width markers

src/allplatforms/classes/WidthMarkers.js

@@ -73,9 +73,9 @@ SC.loadPackage({ 'WidthMarkers': {
                             self.get('markerRight').classList.add('sg-editing-width-marker-right-visible');
                         }
 
-                        self.get('markerLeft').querySelector('.sg-editing-width-marker-left-triangle').style.top = evt.pageY;
-                        self.get('markerRight').querySelector('.sg-editing-width-marker-right-triangle').style.top = evt.pageY;
-                        
+                        self.get('markerLeft').querySelector('.sg-editing-width-marker-left-triangle').style.top = evt.pageY + 'px';
+                        self.get('markerRight').querySelector('.sg-editing-width-marker-right-triangle').style.top = evt.pageY + 'px';
+
                     },
                     onMouseOut = function(evt){
                         if(!self.get('visible')){
@@ -168,9 +168,6 @@ SC.loadPackage({ 'WidthMarkers': {
                             }});
                         }
 
-                        self.get('markerLeft').querySelector('.sg-editing-width-marker-left-triangle').style.top = evt.pageY;
-                        self.get('markerRight').querySelector('.sg-editing-width-marker-right-triangle').style.top = evt.pageY;
-
                         evt.stopPropagation();
                         evt.preventDefault();
                     };

src/allplatforms/css/WidthMarkers.css

@@ -12,10 +12,11 @@
 
 #sg-editing-width-marker-left .sg-editing-width-marker-left-triangle {
 	position: absolute;
-	left: 2px;
-	width: 40px;
-	height: 40px;
-	background-color: #00ff00;
+	margin-top: 	-15px;
+	left: 13px;
+	border-style: 	solid;
+	border-width: 	15px 0 15px 15px;
+	border-color: 	transparent transparent transparent rgb(255, 41, 61);
 	display: none;
 }
 
@@ -31,10 +32,11 @@
 
 #sg-editing-width-marker-right .sg-editing-width-marker-right-triangle {
 	position: absolute;
-	right: 2px;
-	width: 40px;
-	height: 40px;
-	background-color: #00ff00;
+	margin-top: 	-15px;
+	right: 13px;
+	border-style: 	solid;
+	border-width: 	15px 15px 15px 0;
+	border-color: 	transparent rgb(255, 41, 61) transparent transparent;
 	display: none;
 }
 
@@ -42,7 +44,7 @@
 	border-right: 2px dashed rgb(255, 41, 61);
 }
 
-.sg-editing-width-marker-left-visible .sg-editing-width-marker-left-triangle {
+#sg-editing-width-marker-left.sg-editing-width-marker-left-visible .sg-editing-width-marker-left-triangle {
 	display: block;
 }
 
@@ -50,6 +52,6 @@
 	border-left: 2px dashed rgb(255, 41, 61);
 }
 
-.sg-editing-width-marker-right-visible .sg-editing-width-marker-right-triangle {
+#sg-editing-width-marker-right.sg-editing-width-marker-right-visible .sg-editing-width-marker-right-triangle {
 	display: block;
 }