added classes for splitter to change gutter style

package.json

@@ -1,7 +1,7 @@
 {
   "author": "Serhii Pimenov <[email protected]>",
   "name": "metro4",
-  "version": "4.5.12-rc10",
+  "version": "4.5.12-rc11",
   "version_suffix": "rc",
   "description": "The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style",
   "keywords": [
@@ -33,6 +33,7 @@
     "clear": "shx rm -rf build/*",
     "build": "npm run clear && npm install && rollup --config",
     "watch": "rollup --config -w",
+    "dev": "npm run watch",
     "cy:test": "cypress open",
     "cy:run": "cypress run",
     "deploy": "node deploy.cjs",

source/components/splitter/splitter.less

@@ -119,4 +119,24 @@
             }
         }
     }
+
+    --gutter-dot-size: 2px;
+    --gutter-bg-size: 8px;
+    --gutter-bg-position: ~"calc(var(--gutter-bg-size) / 2)";
+    --gutter-dot-color: #ffffff;
+    --gutter-dot-color-second: @gray;
+
+    &.gutter-style-dotted {
+        & > .gutter {
+            &::before {
+                background-image: radial-gradient(
+                        circle at center,
+                        var(--gutter-dot-color) var(--gutter-dot-size),
+                        var(--gutter-dot-color-second) 0
+                ), radial-gradient(circle at center, var(--gutter-dot-color) var(--gutter-dot-size), var(--gutter-dot-color-second) 0);
+                background-size: var(--gutter-bg-size) var(--gutter-bg-size);
+                background-position: 0 0, var(--gutter-bg-position) var(--gutter-bg-position);
+            }
+        }
+    }
 }

tests/splitter.html

@@ -12,7 +12,7 @@
 <div class="container">
     <h1>Splitter test page</h1>
 
-    <div class="example p-0 border" style="height: 400px">
+    <div class="example p-0 border" style="height: 200px">
         <div data-role="splitter" data-gutter-size="10" style="height: 100%" class="h-100">
             <div class="d-flex flex-justify-center flex-align-center">This is panel 1</div>
             <div data-role="splitter" data-gutter-size="10" data-split-mode="vertical" data-no-resize="false" class="">
@@ -22,7 +22,7 @@ <h1>Splitter test page</h1>
         </div>
     </div>
 
-    <div class="example p-0 border" style="height: 400px">
+    <div class="example p-0 border" style="height: 200px">
         <div data-role="splitter" data-gutter-size="10" style="height: 100%" class="h-100 gutter-style-ribbed">
             <div class="d-flex flex-justify-center flex-align-center">This is panel 1</div>
             <div data-role="splitter" data-gutter-size="10" data-split-mode="vertical" data-no-resize="false" class="gutter-style-ribbed">
@@ -32,7 +32,7 @@ <h1>Splitter test page</h1>
         </div>
     </div>
 
-    <div class="example p-0 border" style="height: 400px">
+    <div class="example p-0 border" style="height: 200px">
         <div data-role="splitter" data-gutter-size="10" style="height: 100%" class="h-100 gutter-style-dashed">
             <div class="d-flex flex-justify-center flex-align-center">This is panel 1</div>
             <div data-role="splitter" data-gutter-size="10" data-split-mode="vertical" data-no-resize="false" class="gutter-style-dashed">
@@ -42,6 +42,16 @@ <h1>Splitter test page</h1>
         </div>
     </div>
 
+    <div class="example p-0 border" style="height: 200px">
+        <div data-role="splitter" data-gutter-size="10" style="height: 100%" class="h-100 gutter-style-dotted">
+            <div class="d-flex flex-justify-center flex-align-center">This is panel 1</div>
+            <div data-role="splitter" data-gutter-size="10" data-split-mode="vertical" data-no-resize="false" class="gutter-style-dotted">
+                <div class="d-flex flex-justify-center flex-align-center">Panel 1</div>
+                <div class="d-flex flex-justify-center flex-align-center">Panel 2</div>
+            </div>
+        </div>
+    </div>
+
 </div>
 
 <script src="../build/metro.js"></script>