|
27 | 27 | <section> |
28 | 28 | <div class="wrapper"> |
29 | 29 | <p>Vertical wizard; Content is placed to the right (Default)</p> |
30 | | - <div id="wizard" class="k-wizard k-wizard-vertical"> |
| 30 | + <div id="wizard" class="k-wizard k-wizard-vertical k-wizard-right"> |
31 | 31 | <nav class="k-stepper" style="display: grid; grid-template-rows: repeat(3, 1fr);"> |
32 | 32 | <ol class="k-step-list k-step-list-vertical" style="grid-row: 1 / -1;"> |
33 | 33 | <li class="k-step k-step-done k-step-first" style="max-height: 33.333%;"> |
|
74 | 74 | <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md"> |
75 | 75 | <span class="k-button-text">Reset</span> |
76 | 76 | </button> |
77 | | - <span class="k-wizard-pager">Step 1 of 2</span> |
| 77 | + <span class="k-wizard-pager">Step 2 of 3</span> |
78 | 78 | </span> |
79 | 79 | <span class="k-wizard-buttons-right"> |
80 | 80 | <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md"> |
|
91 | 91 | </div> |
92 | 92 | <div class="wrapper"> |
93 | 93 | <p>Small height set</p> |
94 | | - <div id="wizard" class="k-wizard k-wizard-vertical" style="height: 200px;"> |
| 94 | + <div id="wizard" class="k-wizard k-wizard-vertical k-wizard-right" style="height: 200px;"> |
95 | 95 | <nav class="k-stepper" style="display: grid; grid-template-rows: repeat(3, 1fr);"> |
96 | 96 | <ol class="k-step-list k-step-list-vertical" style="grid-row: 1 / -1;"> |
97 | 97 | <li class="k-step k-step-done k-step-first" style="max-height: 33.333%;"> |
|
138 | 138 | <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md"> |
139 | 139 | <span class="k-button-text">Reset</span> |
140 | 140 | </button> |
141 | | - <span class="k-wizard-pager">Step 1 of 2</span> |
| 141 | + <span class="k-wizard-pager">Step 2 of 3</span> |
142 | 142 | </span> |
143 | 143 | <span class="k-wizard-buttons-right"> |
144 | 144 | <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md"> |
|
155 | 155 | </div> |
156 | 156 | <div class="wrapper"> |
157 | 157 | <p>Short content</p> |
158 | | - <div id="wizard" class="k-wizard k-wizard-vertical"> |
| 158 | + <div id="wizard" class="k-wizard k-wizard-vertical k-wizard-right"> |
159 | 159 | <nav class="k-stepper" style="display: grid; grid-template-rows: repeat(3, 1fr);"> |
160 | 160 | <ol class="k-step-list k-step-list-vertical" style="grid-row: 1 / -1;"> |
161 | 161 | <li class="k-step k-step-done k-step-first" style="max-height: 33.333%;"> |
|
202 | 202 | <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md"> |
203 | 203 | <span class="k-button-text">Reset</span> |
204 | 204 | </button> |
205 | | - <span class="k-wizard-pager">Step 1 of 2</span> |
| 205 | + <span class="k-wizard-pager">Step 2 of 3</span> |
206 | 206 | </span> |
207 | 207 | <span class="k-wizard-buttons-right"> |
208 | 208 | <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md"> |
|
219 | 219 | </div> |
220 | 220 | <div class="wrapper"> |
221 | 221 | <p>Short content; Big height set</p> |
222 | | - <div id="wizard" class="k-wizard k-wizard-vertical" style="height: 280px;"> |
| 222 | + <div id="wizard" class="k-wizard k-wizard-vertical k-wizard-right" style="height: 280px;"> |
223 | 223 | <nav class="k-stepper" style="display: grid; grid-template-rows: repeat(3, 1fr);"> |
224 | 224 | <ol class="k-step-list k-step-list-vertical" style="grid-row: 1 / -1;"> |
225 | 225 | <li class="k-step k-step-done k-step-first" style="max-height: 33.333%;"> |
|
266 | 266 | <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md"> |
267 | 267 | <span class="k-button-text">Reset</span> |
268 | 268 | </button> |
269 | | - <span class="k-wizard-pager">Step 1 of 2</span> |
| 269 | + <span class="k-wizard-pager">Step 2 of 3</span> |
270 | 270 | </span> |
271 | 271 | <span class="k-wizard-buttons-right"> |
272 | 272 | <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md"> |
|
332 | 332 | <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md"> |
333 | 333 | <span class="k-button-text">Reset</span> |
334 | 334 | </button> |
335 | | - <span class="k-wizard-pager">Step 1 of 2</span> |
| 335 | + <span class="k-wizard-pager">Step 2 of 3</span> |
336 | 336 | </span> |
337 | 337 | <span class="k-wizard-buttons-right"> |
338 | 338 | <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md"> |
|
396 | 396 | <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md"> |
397 | 397 | <span class="k-button-text">Reset</span> |
398 | 398 | </button> |
399 | | - <span class="k-wizard-pager">Step 1 of 2</span> |
| 399 | + <span class="k-wizard-pager">Step 2 of 3</span> |
400 | 400 | </span> |
401 | 401 | <span class="k-wizard-buttons-right"> |
402 | 402 | <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md"> |
|
460 | 460 | <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md"> |
461 | 461 | <span class="k-button-text">Reset</span> |
462 | 462 | </button> |
463 | | - <span class="k-wizard-pager">Step 1 of 2</span> |
| 463 | + <span class="k-wizard-pager">Step 2 of 3</span> |
464 | 464 | </span> |
465 | 465 | <span class="k-wizard-buttons-right"> |
466 | 466 | <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md"> |
|
524 | 524 | <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md"> |
525 | 525 | <span class="k-button-text">Reset</span> |
526 | 526 | </button> |
527 | | - <span class="k-wizard-pager">Step 1 of 2</span> |
| 527 | + <span class="k-wizard-pager">Step 2 of 3</span> |
528 | 528 | </span> |
529 | 529 | <span class="k-wizard-buttons-right"> |
530 | 530 | <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md"> |
|
0 commit comments