#18 - css bases triangles in popups

template/css/common.css

@@ -130,19 +130,15 @@ blockquote {
 .bx-popup-box-pointer > i {
     display:block;
     position:absolute;
-    overflow:hidden;
-    font-size:1px; 
-    background-color:#383d66;    
+    top:-5px;
+    width:0px;
+    height:0px;
+    border-width:6px;
+    border-style:solid;
+    border-top-color:transparent;
+    border-right-color:transparent;
+    border-left-color:transparent;
 }
-
-.bx-popup-box-pointer > .i0 {top:0px; left:6px; width:0px; border-left:1px solid rgba(255, 255, 255, 0.2); }
-.bx-popup-box-pointer > .i1 {top:1px; left:5px; width:1px; border-left:1px solid rgba(255, 255, 255, 0.2); border-right:1px solid rgba(255, 255, 255, 0.2); }
-.bx-popup-box-pointer > .i2 {top:2px; left:4px; width:3px; border-left:1px solid rgba(255, 255, 255, 0.2); border-right:1px solid rgba(255, 255, 255, 0.2);}
-.bx-popup-box-pointer > .i3 {top:3px; left:3px; width:5px; border-left:1px solid rgba(255, 255, 255, 0.2); border-right:1px solid rgba(255, 255, 255, 0.2);}
-.bx-popup-box-pointer > .i4 {top:4px; left:2px; width:7px; border-left:1px solid rgba(255, 255, 255, 0.2); border-right:1px solid rgba(255, 255, 255, 0.2);}
-.bx-popup-box-pointer > .i5 {top:5px; left:1px; width:9px; border-left:1px solid rgba(255, 255, 255, 0.2); border-right:1px solid rgba(255, 255, 255, 0.2);}
-.bx-popup-box-pointer > .i6 {top:6px; left:0px; width:11px; border-left:1px solid rgba(255, 255, 255, 0.2); border-right:1px solid rgba(255, 255, 255, 0.2);}
-
 /* --------------- message box */
 
 .bx-msg-box-container {

template/popup_box.html

@@ -1,13 +1,5 @@
 <div id="__id__" class="bx-popup-wrapper" style="__wrapper_style__">
-    <div class="bx-popup-box-pointer">
-        <i class="i0">&#160;</i>
-        <i class="i1">&#160;</i>
-        <i class="i2">&#160;</i>
-        <i class="i3">&#160;</i>
-        <i class="i4">&#160;</i>
-        <i class="i5">&#160;</i>
-        <i class="i6">&#160;</i>
-    </div>
+    <div class="bx-popup-box-pointer"><i class="bx-popup-border"></i></div>
     <div class="bx-popup bx-popup-box bx-popup-width bx-popup-color-bg bx-popup-border bx-def-round-corners">
     <div class="bx-def-round-corners" style="overflow:hidden;">
         <div class="bx-popup-header bx-popup-color-bg bx-def-padding">

template/popup_trans.html

@@ -1,13 +1,5 @@
 <div class="bx-popup-wrapper">
-    <div class="bx-popup-box-pointer">
-        <i class="i0">&#160;</i>
-        <i class="i1">&#160;</i>
-        <i class="i2">&#160;</i>
-        <i class="i3">&#160;</i>
-        <i class="i4">&#160;</i>
-        <i class="i5">&#160;</i>
-        <i class="i6">&#160;</i>
-    </div>
+    <div class="bx-popup-box-pointer"><i class="bx-popup-border"></i></div>
     <div class="bx-popup bx-popup-trans bx-popup-border bx-popup-color-bg bx-def-round-corners">
         <div class="bx-popup-content" style="">__content__</div>
     </div>