chore: update visual previews

telerik · Jan 10, 2025 · 47d0a28 · 47d0a28
1 parent 5a70255
commit 47d0a28
Show file tree

Hide file tree

Showing 31 changed files with 367 additions and 27 deletions.
diff --git a/tests/_output/bootstrap/coloreditor/coloreditor-sizes.png b/tests/_output/bootstrap/coloreditor/coloreditor-sizes.png
diff --git a/tests/_output/bootstrap/colorgradient/colorgradient-sizes.png b/tests/_output/bootstrap/colorgradient/colorgradient-sizes.png
diff --git a/tests/_output/bootstrap/colorpalette/colorpalette-sizes.png b/tests/_output/bootstrap/colorpalette/colorpalette-sizes.png
diff --git a/tests/_output/bootstrap/colorpicker/colorpicker-adaptive.png b/tests/_output/bootstrap/colorpicker/colorpicker-adaptive.png
diff --git a/tests/_output/classic/coloreditor/coloreditor-sizes.png b/tests/_output/classic/coloreditor/coloreditor-sizes.png
diff --git a/tests/_output/classic/colorgradient/colorgradient-sizes.png b/tests/_output/classic/colorgradient/colorgradient-sizes.png
diff --git a/tests/_output/classic/colorpalette/colorpalette-sizes.png b/tests/_output/classic/colorpalette/colorpalette-sizes.png
diff --git a/tests/_output/classic/colorpicker/colorpicker-adaptive.png b/tests/_output/classic/colorpicker/colorpicker-adaptive.png
diff --git a/tests/_output/default/coloreditor/coloreditor-sizes.png b/tests/_output/default/coloreditor/coloreditor-sizes.png
diff --git a/tests/_output/default/colorgradient/colorgradient-sizes.png b/tests/_output/default/colorgradient/colorgradient-sizes.png
diff --git a/tests/_output/default/colorpalette/colorpalette-sizes.png b/tests/_output/default/colorpalette/colorpalette-sizes.png
diff --git a/tests/_output/default/colorpicker/colorpicker-adaptive.png b/tests/_output/default/colorpicker/colorpicker-adaptive.png
diff --git a/tests/_output/fluent/coloreditor/coloreditor-sizes.png b/tests/_output/fluent/coloreditor/coloreditor-sizes.png
diff --git a/tests/_output/fluent/colorgradient/colorgradient-sizes.png b/tests/_output/fluent/colorgradient/colorgradient-sizes.png
diff --git a/tests/_output/fluent/colorpalette/colorpalette-sizes.png b/tests/_output/fluent/colorpalette/colorpalette-sizes.png
diff --git a/tests/_output/fluent/colorpicker/colorpicker-adaptive.png b/tests/_output/fluent/colorpicker/colorpicker-adaptive.png
diff --git a/tests/_output/material/coloreditor/coloreditor-sizes.png b/tests/_output/material/coloreditor/coloreditor-sizes.png
diff --git a/tests/_output/material/colorgradient/colorgradient-sizes.png b/tests/_output/material/colorgradient/colorgradient-sizes.png
diff --git a/tests/_output/material/colorpalette/colorpalette-sizes.png b/tests/_output/material/colorpalette/colorpalette-sizes.png
diff --git a/tests/_output/material/colorpicker/colorpicker-adaptive.png b/tests/_output/material/colorpicker/colorpicker-adaptive.png
diff --git a/tests/coloreditor/coloreditor-rtl.html b/tests/coloreditor/coloreditor-rtl.html
@@ -261,7 +261,7 @@
                     </div>
                 </div>
                 <div class="k-coloreditor-views k-vstack">
-                    <div class="k-colorpalette">
+                    <div class="k-colorpalette k-colorpalette-md">
                         <table class="k-colorpalette-table">
                             <tbody>
                                 <tr>
@@ -391,7 +391,7 @@
                     </div>
                 </div>
                 <div class="k-coloreditor-views k-vstack">
-                    <div class="k-colorpalette">
+                    <div class="k-colorpalette k-colorpalette-md">
                         <table class="k-colorpalette-table">
                             <tbody>
                                 <tr>

diff --git a/tests/coloreditor/coloreditor-sizes.html b/tests/coloreditor/coloreditor-sizes.html
@@ -412,7 +412,7 @@
                     </div>
                 </div>
                 <div class="k-coloreditor-views k-vstack">
-                    <div class="k-colorpalette">
+                    <div class="k-colorpalette k-colorpalette-sm">
                         <table class="k-colorpalette-table">
                             <tbody>
                                 <tr>
@@ -543,7 +543,7 @@
                     </div>
                 </div>
                 <div class="k-coloreditor-views k-vstack">
-                    <div class="k-colorpalette">
+                    <div class="k-colorpalette k-colorpalette-md">
                         <table class="k-colorpalette-table">
                             <tbody>
                                 <tr>
@@ -674,7 +674,7 @@
                     </div>
                 </div>
                 <div class="k-coloreditor-views k-vstack">
-                    <div class="k-colorpalette">
+                    <div class="k-colorpalette k-colorpalette-lg">
                         <table class="k-colorpalette-table">
                             <tbody>
                                 <tr>

diff --git a/tests/coloreditor/coloreditor.html b/tests/coloreditor/coloreditor.html
@@ -261,7 +261,7 @@
                     </div>
                 </div>
                 <div class="k-coloreditor-views k-vstack">
-                    <div class="k-colorpalette">
+                    <div class="k-colorpalette k-colorpalette-md">
                         <table class="k-colorpalette-table">
                             <tbody>
                                 <tr>
@@ -391,7 +391,7 @@
                     </div>
                 </div>
                 <div class="k-coloreditor-views k-vstack">
-                    <div class="k-colorpalette">
+                    <div class="k-colorpalette k-colorpalette-md">
                         <table class="k-colorpalette-table">
                             <tbody>
                                 <tr>

diff --git a/tests/colorgradient/colorgradient-sizes.html b/tests/colorgradient/colorgradient-sizes.html
@@ -0,0 +1,225 @@
+<!doctype html>
+<html lang="en" class="k-no-animations" style="--kendo-scrollbar-width: 15px;">
+<head>
+    <title>Document</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" data-role="kendo-theme" href="/packages/default/dist/all.css">
+    <link rel="stylesheet" data-role="kendo-theme-utils" href="/packages/utils/dist/all.css">
+    <link rel="stylesheet" href="/packages/html/assets/styles.css">
+    <script src="/packages/html/assets/scripts.js"></script>
+</head>
+<body id="app" class="k-body">
+    <style>
+        #test-area {
+            grid-template-columns: 1fr 1fr 2fr;
+        }
+        .k-hue-slider {
+            --kendo-slider-start: 0;
+            --kendo-slider-end: 0;
+        }
+        .k-alpha-slider {
+            --kendo-slider-start: 0;
+            --kendo-slider-end: 100;
+        }
+
+    </style>
+    <div id="test-area" class="k-d-grid k-gap-2">
+        <span>Small</span>
+        <span>Medium</span>
+        <span>Large</span>
+        <section>
+            <div class="k-colorgradient k-colorgradient-sm">
+                <div class="k-colorgradient-canvas k-hstack">
+                    <div class="k-hsv-rectangle" style="background: rgb(255, 0, 0);">
+                        <div class="k-hsv-gradient">
+                            <div class="k-hsv-draghandle k-draghandle" style="top: 50px; left: 73px;"></div>
+                        </div>
+                    </div>
+                    <div class="k-hsv-controls k-hstack">
+                        <div class="k-slider k-hue-slider k-slider-vertical k-colorgradient-slider">
+                            <div class="k-slider-track-wrap">
+                                <div class="k-slider-track">
+                                    <div class="k-slider-selection"></div>
+                                    <span class="k-draghandle k-draghandle-end"></span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="k-slider k-alpha-slider k-slider-vertical k-colorgradient-slider">
+                            <div class="k-slider-track-wrap">
+                                <div class="k-slider-track" style="background: linear-gradient(to top, transparent, rgb(255, 0, 0));">
+                                    <div class="k-slider-selection"></div>
+                                    <span class="k-draghandle k-draghandle-end"></span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="k-colorgradient-inputs k-hstack">
+                    <div class="k-vstack">
+                        <button class="k-colorgradient-toggle-mode k-button k-button-sm k-button-flat k-button-flat-base k-rounded-md k-icon-button">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-expand">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M128 288h256L256 480zM256 32 128 224h256.001z"></path>
+                                </svg>
+                            </span>
+                        </button>
+                    </div>
+                    <div class="k-vstack">
+                        <span class="k-numerictextbox k-input k-input-sm k-input-solid k-rounded-md">
+                            <input type="text" class="k-input-inner" placeholder="" autocomplete="off" value="132">
+                        </span>
+                        <label class="k-colorgradient-input-label">R</label>
+                    </div>
+                    <div class="k-vstack">
+                        <span class="k-numerictextbox k-input k-input-sm k-input-solid k-rounded-md">
+                            <input type="text" class="k-input-inner" placeholder="" autocomplete="off" value="132">
+                        </span>
+                        <label class="k-colorgradient-input-label">G</label>
+                    </div>
+                    <div class="k-vstack">
+                        <span class="k-numerictextbox k-input k-input-sm k-input-solid k-rounded-md">
+                            <input type="text" class="k-input-inner" placeholder="" autocomplete="off" value="132">
+                        </span>
+                        <label class="k-colorgradient-input-label">B</label>
+                    </div>
+                    <div class="k-vstack">
+                        <span class="k-numerictextbox k-input k-input-sm k-input-solid k-rounded-md">
+                            <input type="text" class="k-input-inner" placeholder="" autocomplete="off" value="1.00">
+                        </span>
+                        <label class="k-colorgradient-input-label">A</label>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <section>
+            <div class="k-colorgradient k-colorgradient-md">
+                <div class="k-colorgradient-canvas k-hstack">
+                    <div class="k-hsv-rectangle" style="background: rgb(255, 0, 0);">
+                        <div class="k-hsv-gradient">
+                            <div class="k-hsv-draghandle k-draghandle" style="top: 50px; left: 73px;"></div>
+                        </div>
+                    </div>
+                    <div class="k-hsv-controls k-hstack">
+                        <div class="k-slider k-hue-slider k-slider-vertical k-colorgradient-slider">
+                            <div class="k-slider-track-wrap">
+                                <div class="k-slider-track">
+                                    <div class="k-slider-selection"></div>
+                                    <span class="k-draghandle k-draghandle-end"></span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="k-slider k-alpha-slider k-slider-vertical k-colorgradient-slider">
+                            <div class="k-slider-track-wrap">
+                                <div class="k-slider-track" style="background: linear-gradient(to top, transparent, rgb(255, 0, 0));">
+                                    <div class="k-slider-selection"></div>
+                                    <span class="k-draghandle k-draghandle-end"></span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="k-colorgradient-inputs k-hstack">
+                    <div class="k-vstack">
+                        <button class="k-colorgradient-toggle-mode k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-expand">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M128 288h256L256 480zM256 32 128 224h256.001z"></path>
+                                </svg>
+                            </span>
+                        </button>
+                    </div>
+                    <div class="k-vstack">
+                        <span class="k-numerictextbox k-input k-input-md k-input-solid k-rounded-md">
+                            <input type="text" class="k-input-inner" placeholder="" autocomplete="off" value="132">
+                        </span>
+                        <label class="k-colorgradient-input-label">R</label>
+                    </div>
+                    <div class="k-vstack">
+                        <span class="k-numerictextbox k-input k-input-md k-input-solid k-rounded-md">
+                            <input type="text" class="k-input-inner" placeholder="" autocomplete="off" value="132">
+                        </span>
+                        <label class="k-colorgradient-input-label">G</label>
+                    </div>
+                    <div class="k-vstack">
+                        <span class="k-numerictextbox k-input k-input-md k-input-solid k-rounded-md">
+                            <input type="text" class="k-input-inner" placeholder="" autocomplete="off" value="132">
+                        </span>
+                        <label class="k-colorgradient-input-label">B</label>
+                    </div>
+                    <div class="k-vstack">
+                        <span class="k-numerictextbox k-input k-input-md k-input-solid k-rounded-md">
+                            <input type="text" class="k-input-inner" placeholder="" autocomplete="off" value="1.00">
+                        </span>
+                        <label class="k-colorgradient-input-label">A</label>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <section>
+            <div class="k-colorgradient k-colorgradient-lg">
+                <div class="k-colorgradient-canvas k-hstack">
+                    <div class="k-hsv-rectangle" style="background: rgb(255, 0, 0);">
+                        <div class="k-hsv-gradient">
+                            <div class="k-hsv-draghandle k-draghandle" style="top: 50px; left: 73px;"></div>
+                        </div>
+                    </div>
+                    <div class="k-hsv-controls k-hstack">
+                        <div class="k-slider k-hue-slider k-slider-vertical k-colorgradient-slider">
+                            <div class="k-slider-track-wrap">
+                                <div class="k-slider-track">
+                                    <div class="k-slider-selection"></div>
+                                    <span class="k-draghandle k-draghandle-end"></span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="k-slider k-alpha-slider k-slider-vertical k-colorgradient-slider">
+                            <div class="k-slider-track-wrap">
+                                <div class="k-slider-track" style="background: linear-gradient(to top, transparent, rgb(255, 0, 0));">
+                                    <div class="k-slider-selection"></div>
+                                    <span class="k-draghandle k-draghandle-end"></span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="k-colorgradient-inputs k-hstack">
+                    <div class="k-vstack">
+                        <button class="k-colorgradient-toggle-mode k-button k-button-lg k-button-flat k-button-flat-base k-rounded-md k-icon-button">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-expand">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M128 288h256L256 480zM256 32 128 224h256.001z"></path>
+                                </svg>
+                            </span>
+                        </button>
+                    </div>
+                    <div class="k-vstack">
+                        <span class="k-numerictextbox k-input k-input-lg k-input-solid k-rounded-md">
+                            <input type="text" class="k-input-inner" placeholder="" autocomplete="off" value="132">
+                        </span>
+                        <label class="k-colorgradient-input-label">R</label>
+                    </div>
+                    <div class="k-vstack">
+                        <span class="k-numerictextbox k-input k-input-lg k-input-solid k-rounded-md">
+                            <input type="text" class="k-input-inner" placeholder="" autocomplete="off" value="132">
+                        </span>
+                        <label class="k-colorgradient-input-label">G</label>
+                    </div>
+                    <div class="k-vstack">
+                        <span class="k-numerictextbox k-input k-input-lg k-input-solid k-rounded-md">
+                            <input type="text" class="k-input-inner" placeholder="" autocomplete="off" value="132">
+                        </span>
+                        <label class="k-colorgradient-input-label">B</label>
+                    </div>
+                    <div class="k-vstack">
+                        <span class="k-numerictextbox k-input k-input-lg k-input-solid k-rounded-md">
+                            <input type="text" class="k-input-inner" placeholder="" autocomplete="off" value="1.00">
+                        </span>
+                        <label class="k-colorgradient-input-label">A</label>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </div>
+</body>
+</html>