Merge branch 'dev/gfl_finish_bug_in_flow-item' into 'master'

* Code for style problem in flowchart

See merge request easycorp/zentaopms!6855

module/block/view/flowchart.html.php

@@ -1,34 +1,29 @@
 <div class='flowchart'>
 <?php foreach ($lang->block->flowchart as $flowName => $flow):?>
 <?php $idx = 0; ?>
-  <div class='row row-<?php echo $flowName?>'>
+  <div class='row flow-chart-row row-<?php echo $flowName?>'>
   <?php foreach ($flow as $flowItem):?>
-    <div class='flow-item flow-item-<?php echo $idx ++ ?>'><div title='<?php echo $flowItem ?>'><span class='flow-item-display'><?php echo $flowItem ?></span></div></div>
+    <div class='flow-item flow-item-<?php echo $idx ++ ?>'><div title='<?php echo $flowItem ?>'><div class='flow-item-display'><?php echo $flowItem ?></div></div></div>
   <?php endforeach; ?>
   </div>
 <?php endforeach; ?>
 </div>
 <style>
-.flow-item {float: left; width: 16.66667%; max-width: 180px; text-align: center; margin-bottom: 9px; padding-right: 15px;}
-.flow-item > div {position: relative; padding: 5px 0 5px 8px; line-height: 20px; background: #66A2FF; white-space:nowrap; overflow: visible; color: #3c4353}
-.flow-item > div:before, .flow-item > div:after {content: ' '; display: block; width: 0; height: 0; border-style: solid; border-width: 15px 0 15px 10px; border-color: transparent transparent transparent #66A2FF; position: absolute; left: 0; top: 0;}
+.flow-chart-row {display: flex; gap: 5px; margin-bottom: 9px;}
+.flow-item {background: url('/static/svg/arrow-blue.svg') center no-repeat; background-size: cover; text-align: center; margin: 0; padding-right: 15px; flex:0 1 16%; position: relative; padding: 5px 0 5px 8px; white-space:nowrap; overflow: visible; color: #3c4353; display: flex; align-items: center;}
+.flow-item > div {padding-left: 5%;}
 .ie-8 .flow-item > div:before {display: none}
 .flow-item > div:before {border-left-color: #fff; z-index: 1}
-.flow-item > div:after {left: auto; right: -10px; z-index: 2}
-.flow-item > div > span {display: flow-root; overflow: hidden;}
+.flow-item > div > div {display: flow-root; overflow: hidden; padding-left: 5px;}
 .ie-8 .flow-item > div {margin-right: 10px}
-.flow-item-0 > div {color: #FFF; font-weight: 400; padding-left: 0;}
+.flow-item-0 > div {color: #FFF; font-weight: 400;}
 .flow-item-0 > div:before {display: none}
-.flow-item-1 > div,
-.flow-item-2 > div,
-.flow-item-3 > div,
-.flow-item-4 > div,
-.flow-item-5 > div {background: #E6F0FF}
-.flow-item-1 > div:after,
-.flow-item-2 > div:after,
-.flow-item-3 > div:after,
-.flow-item-4 > div:after,
-.flow-item-5 > div:after {border-left-color: #E6F0FF}
+
+.flow-item-1,
+.flow-item-2,
+.flow-item-3,
+.flow-item-4,
+.flow-item-5 {background-image: url('/static/svg/arrow-white.svg'); }
 
 .block-sm .flow-item {padding-right: 5px}
 .block-sm .flow-item > div:before, .block-sm .flow-item > div:after {border-width: 15px 0 15px 6px;}

www/static/svg/arrow-blue.svg

@@ -0,0 +1,3 @@
+<svg width="94" height="33" viewBox="0 0 94 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.89" d="M0.241455 0.416992H87.8391L93.8391 16.667L87.8391 32.917H0.241455V0.416992Z" fill="#66A2FF"/>
+</svg>

www/static/svg/arrow-white.svg

@@ -0,0 +1,3 @@
+<svg width="106" height="33" viewBox="0 0 106 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.6" d="M96.3378 32.417H1.37838L7.41553 16.8478L7.48562 16.667L7.41553 16.4862L1.37838 0.916992H96.3378L104.481 16.667L96.3378 32.417Z" fill="#E6F0FF" stroke="#E6F0FF"/>
+</svg>