Skip to content

Commit 831a6a5

Browse files
kendo-botkirchoni
kendo-bot
authored and
kirchoni
committed
chore: update visual previews
1 parent ff8de49 commit 831a6a5

16 files changed

+259
-133
lines changed

‎tests/_output/bootstrap/checkbox/checkbox-group.png

15 KB
Loading

‎tests/_output/bootstrap/checkbox/checkbox-size.png

12.3 KB
Loading

‎tests/_output/classic/checkbox/checkbox-group.png

5.17 KB
Loading

‎tests/_output/classic/checkbox/checkbox-size.png

10.2 KB
Loading

‎tests/_output/default/checkbox/checkbox-group.png

5.1 KB
Loading

‎tests/_output/default/checkbox/checkbox-size.png

4.99 KB
Loading

‎tests/_output/fluent/checkbox/checkbox-group.png

6.96 KB
Loading

‎tests/_output/fluent/checkbox/checkbox-size.png

10.5 KB
Loading

‎tests/_output/material/checkbox/checkbox-group.png

6.53 KB
Loading

‎tests/_output/material/checkbox/checkbox-size.png

10.3 KB
Loading

‎tests/_output/nouvelle/checkbox/checkbox-group.png

6.07 KB
Loading

‎tests/_output/nouvelle/checkbox/checkbox-size.png

12.7 KB
Loading

‎tests/checkbox/checkbox-group.html

+98
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
<!doctype html>
2+
<html lang="en" class="k-no-animations" style="--kendo-scrollbar-width: 15px;">
3+
<head>
4+
<title>Document</title>
5+
<meta charset="utf-8">
6+
<link rel="stylesheet" data-role="kendo-theme" href="/packages/default/dist/all.css">
7+
<link rel="stylesheet" href="/packages/html/assets/styles.css">
8+
<script src="/packages/html/assets/scripts.js"></script>
9+
</head>
10+
<body id="app" class="k-body">
11+
<style>
12+
#test-area {
13+
grid-template-columns: repeat(2, 1fr);
14+
}
15+
16+
</style>
17+
<div id="test-area" class="k-d-grid">
18+
<span>Normal - vertical</span>
19+
<span>With Label - vertical</span>
20+
<ul class="k-checkbox-list k-list-vertical">
21+
<li class="k-checkbox-list-item">
22+
<span class="k-checkbox-wrap">
23+
<input type="checkbox" class="k-checkbox k-checkbox-md k-rounded-md">
24+
</span>
25+
</li>
26+
<li class="k-checkbox-list-item">
27+
<span class="k-checkbox-wrap">
28+
<input type="checkbox" class="k-checkbox k-checkbox-md k-rounded-md">
29+
</span>
30+
</li>
31+
<li class="k-checkbox-list-item">
32+
<span class="k-checkbox-wrap">
33+
<input type="checkbox" class="k-checkbox k-checkbox-md k-rounded-md">
34+
</span>
35+
</li>
36+
</ul>
37+
<ul class="k-checkbox-list k-list-vertical">
38+
<li class="k-checkbox-list-item">
39+
<span class="k-checkbox-wrap">
40+
<input id="ch1-vert" type="checkbox" class="k-checkbox k-checkbox-md k-rounded-md">
41+
</span>
42+
<label class="k-checkbox-label" for="ch1-vert">Option one</label>
43+
</li>
44+
<li class="k-checkbox-list-item">
45+
<span class="k-checkbox-wrap">
46+
<input id="ch2-vert" type="checkbox" class="k-checkbox k-checkbox-md k-rounded-md">
47+
</span>
48+
<label class="k-checkbox-label" for="ch2-vert">Option two</label>
49+
</li>
50+
<li class="k-checkbox-list-item">
51+
<span class="k-checkbox-wrap">
52+
<input id="ch3-vert" type="checkbox" class="k-checkbox k-checkbox-md k-rounded-md">
53+
</span>
54+
<label class="k-checkbox-label" for="ch3-vert">Option three</label>
55+
</li>
56+
</ul>
57+
<span>Normal - horizontal</span>
58+
<span>With Label - horizontal</span>
59+
<ul class="k-checkbox-list k-list-horizontal">
60+
<li class="k-checkbox-list-item">
61+
<span class="k-checkbox-wrap">
62+
<input type="checkbox" class="k-checkbox k-checkbox-md k-rounded-md">
63+
</span>
64+
</li>
65+
<li class="k-checkbox-list-item">
66+
<span class="k-checkbox-wrap">
67+
<input type="checkbox" class="k-checkbox k-checkbox-md k-rounded-md">
68+
</span>
69+
</li>
70+
<li class="k-checkbox-list-item">
71+
<span class="k-checkbox-wrap">
72+
<input type="checkbox" class="k-checkbox k-checkbox-md k-rounded-md">
73+
</span>
74+
</li>
75+
</ul>
76+
<ul class="k-checkbox-list k-list-horizontal">
77+
<li class="k-checkbox-list-item">
78+
<span class="k-checkbox-wrap">
79+
<input id="ch1-hor" type="checkbox" class="k-checkbox k-checkbox-md k-rounded-md">
80+
</span>
81+
<label class="k-checkbox-label" for="ch1-hor">Option one</label>
82+
</li>
83+
<li class="k-checkbox-list-item">
84+
<span class="k-checkbox-wrap">
85+
<input id="ch2-hor" type="checkbox" class="k-checkbox k-checkbox-md k-rounded-md">
86+
</span>
87+
<label class="k-checkbox-label" for="ch2-hor">Option two</label>
88+
</li>
89+
<li class="k-checkbox-list-item">
90+
<span class="k-checkbox-wrap">
91+
<input id="ch3-hor" type="checkbox" class="k-checkbox k-checkbox-md k-rounded-md">
92+
</span>
93+
<label class="k-checkbox-label" for="ch3-hor">Option three</label>
94+
</li>
95+
</ul>
96+
</div>
97+
</body>
98+
</html>

‎tests/checkbox/checkbox-size.html

+121-93
Original file line numberDiff line numberDiff line change
@@ -10,148 +10,176 @@
1010
<body id="app" class="k-body">
1111
<style>
1212
#test-area {
13-
grid-template-columns: 120px repeat(3, 1fr);
13+
grid-template-columns: repeat(3, 1fr);
1414
}
1515

1616
</style>
1717
<div id="test-area" class="k-d-grid">
18-
<span></span>
1918
<span>Small</span>
2019
<span>Medium</span>
2120
<span>Large</span>
22-
<span></span>
23-
<div>
21+
<section>
2422
<span class="k-checkbox-wrap">
25-
<input type="checkbox" class="k-checkbox k-checkbox-sm k-rounded-md k-checked" checked="">
23+
<input id="ch-unchecked-small" type="checkbox" class="k-checkbox k-checkbox-sm k-rounded-md">
2624
</span>
27-
<label class="k-checkbox-label" for="ch1">Checked</label>
28-
</div>
29-
<div>
25+
<label class="k-checkbox-label" for="ch-unchecked-small">unchecked</label>
26+
</section>
27+
<section>
3028
<span class="k-checkbox-wrap">
31-
<input type="checkbox" class="k-checkbox k-checkbox-md k-rounded-md k-checked" checked="">
29+
<input id="ch-unchecked-medium" type="checkbox" class="k-checkbox k-checkbox-md k-rounded-md">
3230
</span>
33-
<label class="k-checkbox-label" for="ch1">Checked</label>
34-
</div>
35-
<div>
31+
<label class="k-checkbox-label" for="ch-unchecked-medium">unchecked</label>
32+
</section>
33+
<section>
3634
<span class="k-checkbox-wrap">
37-
<input type="checkbox" class="k-checkbox k-checkbox-lg k-rounded-md k-checked" checked="">
35+
<input id="ch-unchecked-large" type="checkbox" class="k-checkbox k-checkbox-lg k-rounded-md">
3836
</span>
39-
<label class="k-checkbox-label" for="ch1">Checked</label>
40-
</div>
41-
<span></span>
42-
<div>
37+
<label class="k-checkbox-label" for="ch-unchecked-large">unchecked</label>
38+
</section>
39+
<section>
4340
<span class="k-checkbox-wrap">
44-
<input type="checkbox" class="k-checkbox k-checkbox-sm k-rounded-md k-checked k-disabled" checked="">
41+
<input id="ch-hover-small" type="checkbox" class="k-checkbox k-checkbox-sm k-rounded-md k-hover">
4542
</span>
46-
<label class="k-checkbox-label" for="ch1">Checked</label>
47-
</div>
48-
<div>
43+
<label class="k-checkbox-label" for="ch-hover-small">hover</label>
44+
</section>
45+
<section>
4946
<span class="k-checkbox-wrap">
50-
<input type="checkbox" class="k-checkbox k-checkbox-md k-rounded-md k-checked k-disabled" checked="">
47+
<input id="ch-hover-medium" type="checkbox" class="k-checkbox k-checkbox-md k-rounded-md k-hover">
5148
</span>
52-
<label class="k-checkbox-label" for="ch1">Checked</label>
53-
</div>
54-
<div>
49+
<label class="k-checkbox-label" for="ch-hover-medium">hover</label>
50+
</section>
51+
<section>
5552
<span class="k-checkbox-wrap">
56-
<input type="checkbox" class="k-checkbox k-checkbox-lg k-rounded-md k-checked k-disabled" checked="">
53+
<input id="ch-hover-large" type="checkbox" class="k-checkbox k-checkbox-lg k-rounded-md k-hover">
5754
</span>
58-
<label class="k-checkbox-label" for="ch1">Checked</label>
59-
</div>
60-
<span></span>
61-
<div>
55+
<label class="k-checkbox-label" for="ch-hover-large">hover</label>
56+
</section>
57+
<section>
6258
<span class="k-checkbox-wrap">
63-
<input type="checkbox" class="k-checkbox k-checkbox-sm k-rounded-md">
59+
<input id="ch-focus-small" type="checkbox" class="k-checkbox k-checkbox-sm k-rounded-md k-focus">
6460
</span>
65-
<label class="k-checkbox-label" for="ch3">Unchecked</label>
66-
</div>
67-
<div>
61+
<label class="k-checkbox-label" for="ch-focus-small">focus</label>
62+
</section>
63+
<section>
6864
<span class="k-checkbox-wrap">
69-
<input type="checkbox" class="k-checkbox k-checkbox-md k-rounded-md">
65+
<input id="ch-focus-medium" type="checkbox" class="k-checkbox k-checkbox-md k-rounded-md k-focus">
7066
</span>
71-
<label class="k-checkbox-label" for="ch3">Unchecked</label>
72-
</div>
73-
<div>
67+
<label class="k-checkbox-label" for="ch-focus-medium">focus</label>
68+
</section>
69+
<section>
7470
<span class="k-checkbox-wrap">
75-
<input type="checkbox" class="k-checkbox k-checkbox-lg k-rounded-md">
71+
<input id="ch-focus-large" type="checkbox" class="k-checkbox k-checkbox-lg k-rounded-md k-focus">
7672
</span>
77-
<label class="k-checkbox-label" for="ch3">Unchecked</label>
78-
</div>
79-
<span></span>
80-
<div>
73+
<label class="k-checkbox-label" for="ch-focus-large">focus</label>
74+
</section>
75+
<section>
8176
<span class="k-checkbox-wrap">
82-
<input type="checkbox" class="k-checkbox k-checkbox-sm k-rounded-md k-disabled">
77+
<input id="ch-valid-small" type="checkbox" class="k-checkbox k-checkbox-sm k-rounded-md k-valid">
8378
</span>
84-
<label class="k-checkbox-label" for="ch4">Unchecked</label>
85-
</div>
86-
<div>
79+
<label class="k-checkbox-label" for="ch-valid-small">valid</label>
80+
</section>
81+
<section>
8782
<span class="k-checkbox-wrap">
88-
<input type="checkbox" class="k-checkbox k-checkbox-md k-rounded-md k-disabled">
83+
<input id="ch-valid-medium" type="checkbox" class="k-checkbox k-checkbox-md k-rounded-md k-valid">
8984
</span>
90-
<label class="k-checkbox-label" for="ch4">Unchecked</label>
91-
</div>
92-
<div>
85+
<label class="k-checkbox-label" for="ch-valid-medium">valid</label>
86+
</section>
87+
<section>
9388
<span class="k-checkbox-wrap">
94-
<input type="checkbox" class="k-checkbox k-checkbox-lg k-rounded-md k-disabled">
89+
<input id="ch-valid-large" type="checkbox" class="k-checkbox k-checkbox-lg k-rounded-md k-valid">
9590
</span>
96-
<label class="k-checkbox-label" for="ch4">Unchecked</label>
97-
</div>
98-
<span></span>
99-
<div>
91+
<label class="k-checkbox-label" for="ch-valid-large">valid</label>
92+
</section>
93+
<section>
10094
<span class="k-checkbox-wrap">
101-
<input type="checkbox" class="k-checkbox k-checkbox-sm k-rounded-md k-indeterminate">
95+
<input id="ch-invalid-small" type="checkbox" class="k-checkbox k-checkbox-sm k-rounded-md k-invalid">
10296
</span>
103-
<label class="k-checkbox-label" for="chInd">Indeterminate</label>
104-
</div>
105-
<div>
97+
<label class="k-checkbox-label" for="ch-invalid-small">invalid</label>
98+
</section>
99+
<section>
106100
<span class="k-checkbox-wrap">
107-
<input type="checkbox" class="k-checkbox k-checkbox-md k-rounded-md k-indeterminate">
101+
<input id="ch-invalid-medium" type="checkbox" class="k-checkbox k-checkbox-md k-rounded-md k-invalid">
108102
</span>
109-
<label class="k-checkbox-label" for="chInd">Indeterminate</label>
110-
</div>
111-
<div>
103+
<label class="k-checkbox-label" for="ch-invalid-medium">invalid</label>
104+
</section>
105+
<section>
112106
<span class="k-checkbox-wrap">
113-
<input type="checkbox" class="k-checkbox k-checkbox-lg k-rounded-md k-indeterminate">
107+
<input id="ch-invalid-large" type="checkbox" class="k-checkbox k-checkbox-lg k-rounded-md k-invalid">
114108
</span>
115-
<label class="k-checkbox-label" for="chInd">Indeterminate</label>
116-
</div>
117-
<span></span>
118-
<div>
109+
<label class="k-checkbox-label" for="ch-invalid-large">invalid</label>
110+
</section>
111+
<section>
119112
<span class="k-checkbox-wrap">
120-
<input type="checkbox" class="k-checkbox k-checkbox-sm k-rounded-md k-disabled k-indeterminate">
113+
<input id="ch-required-small" type="checkbox" required="" class="k-checkbox k-checkbox-sm k-rounded-md">
121114
</span>
122-
<label class="k-checkbox-label" for="chIndDis">Indeterminate</label>
123-
</div>
124-
<div>
115+
<label class="k-checkbox-label" for="ch-required-small">required</label>
116+
</section>
117+
<section>
125118
<span class="k-checkbox-wrap">
126-
<input type="checkbox" class="k-checkbox k-checkbox-md k-rounded-md k-disabled k-indeterminate">
119+
<input id="ch-required-medium" type="checkbox" required="" class="k-checkbox k-checkbox-md k-rounded-md">
127120
</span>
128-
<label class="k-checkbox-label" for="chIndDis">Indeterminate</label>
129-
</div>
130-
<div>
121+
<label class="k-checkbox-label" for="ch-required-medium">required</label>
122+
</section>
123+
<section>
131124
<span class="k-checkbox-wrap">
132-
<input type="checkbox" class="k-checkbox k-checkbox-lg k-rounded-md k-disabled k-indeterminate">
125+
<input id="ch-required-large" type="checkbox" required="" class="k-checkbox k-checkbox-lg k-rounded-md">
133126
</span>
134-
<label class="k-checkbox-label" for="chIndDis">Indeterminate</label>
135-
</div>
136-
<span></span>
137-
<div>
127+
<label class="k-checkbox-label" for="ch-required-large">required</label>
128+
</section>
129+
<section>
138130
<span class="k-checkbox-wrap">
139-
<input type="checkbox" required="" class="k-checkbox k-checkbox-sm k-rounded-md k-invalid">
131+
<input id="ch-disabled-small" type="checkbox" class="k-checkbox k-checkbox-sm k-rounded-md k-disabled">
140132
</span>
141-
<label class="k-checkbox-label" for="chError">Invalid</label>
142-
</div>
143-
<div>
133+
<label class="k-checkbox-label" for="ch-disabled-small">disabled</label>
134+
</section>
135+
<section>
144136
<span class="k-checkbox-wrap">
145-
<input type="checkbox" required="" class="k-checkbox k-checkbox-md k-rounded-md k-invalid">
137+
<input id="ch-disabled-medium" type="checkbox" class="k-checkbox k-checkbox-md k-rounded-md k-disabled">
146138
</span>
147-
<label class="k-checkbox-label" for="chError">Invalid</label>
148-
</div>
149-
<div>
139+
<label class="k-checkbox-label" for="ch-disabled-medium">disabled</label>
140+
</section>
141+
<section>
150142
<span class="k-checkbox-wrap">
151-
<input type="checkbox" required="" class="k-checkbox k-checkbox-lg k-rounded-md k-invalid">
143+
<input id="ch-disabled-large" type="checkbox" class="k-checkbox k-checkbox-lg k-rounded-md k-disabled">
152144
</span>
153-
<label class="k-checkbox-label" for="chError">Invalid</label>
154-
</div>
145+
<label class="k-checkbox-label" for="ch-disabled-large">disabled</label>
146+
</section>
147+
<section>
148+
<span class="k-checkbox-wrap">
149+
<input id="ch-checked-small" type="checkbox" class="k-checkbox k-checkbox-sm k-rounded-md k-checked" checked="">
150+
</span>
151+
<label class="k-checkbox-label" for="ch-checked-small">checked</label>
152+
</section>
153+
<section>
154+
<span class="k-checkbox-wrap">
155+
<input id="ch-checked-medium" type="checkbox" class="k-checkbox k-checkbox-md k-rounded-md k-checked" checked="">
156+
</span>
157+
<label class="k-checkbox-label" for="ch-checked-medium">checked</label>
158+
</section>
159+
<section>
160+
<span class="k-checkbox-wrap">
161+
<input id="ch-checked-large" type="checkbox" class="k-checkbox k-checkbox-lg k-rounded-md k-checked" checked="">
162+
</span>
163+
<label class="k-checkbox-label" for="ch-checked-large">checked</label>
164+
</section>
165+
<section>
166+
<span class="k-checkbox-wrap">
167+
<input id="ch-indeterminate-small" type="checkbox" class="k-checkbox k-checkbox-sm k-rounded-md k-indeterminate">
168+
</span>
169+
<label class="k-checkbox-label" for="ch-indeterminate-small">indeterminate</label>
170+
</section>
171+
<section>
172+
<span class="k-checkbox-wrap">
173+
<input id="ch-indeterminate-medium" type="checkbox" class="k-checkbox k-checkbox-md k-rounded-md k-indeterminate">
174+
</span>
175+
<label class="k-checkbox-label" for="ch-indeterminate-medium">indeterminate</label>
176+
</section>
177+
<section>
178+
<span class="k-checkbox-wrap">
179+
<input id="ch-indeterminate-large" type="checkbox" class="k-checkbox k-checkbox-lg k-rounded-md k-indeterminate">
180+
</span>
181+
<label class="k-checkbox-label" for="ch-indeterminate-large">indeterminate</label>
182+
</section>
155183
</div>
156184
</body>
157185
</html>

0 commit comments

Comments
 (0)