[ KAWWA PORTAL ] Components : Form Multiple Steps

Forms

Form Multiple Steps

Class name: (k-form-steps)
Version: 1.0

You may use form steps to divide your forms in multiple pages.

Demo
Snippets

Title of past step
Title of active step
Title of future step
Title of future step
Title of future step

HTML5 Plain Code

COPY

```
<ol class="k-form-steps">
```

	<li class="past">Title of past step</li>

	<li class="active" aria-label="Current step">Title of active step</li>

```
	<li>Title of future step</li>
```
```
	<li>Title of future step</li>
```
```
	<li>Title of future step</li>
```
```
</ol>
```

CSS Code

COPY

```
ol.k-form-steps {
```
```
	display: flex;
```
```
	-moz-display: flex;
```
```
	-webkit-display: flex;
```
```
	flex-flow: column;
```
```
	-webkit-flex-flow: column;
```
```
	flex-direction: column;
```
```
	position: relative;
```
```
	clear: both;
```
```
	counter-reset: step;
```
```
	margin: 1em 0;
```
```
}
```
```
ol.k-form-steps li {
```
```
	position: relative;
```
```
	-webkit-flex: 1 1 auto;
```
```
	flex: 1 1 auto;
```
```
	list-style-type: none;
```

	font: 0.9em /1 open_sanslight, "Gill Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

```
	color: #B7B7B7;
```
```
	background: #EEE;
```
```
	padding: 0.5em 0.7em;
```
```
	margin: 1rem 0.5rem 0 0;
```
```
}
```
```
ol.k-form-steps li::before {
```
```
	display: inline-block;
```
```
	width: 1.5em;
```
```
	height: 1.5em;
```
```
	line-height: 1.5em;
```
```
	font-size: 1.3em;
```
```
	content: counter(step);
```
```
	counter-increment: step;
```
```
	text-align: center;
```
```
	color: #EEE;
```
```
	background: #D1D1D1;
```
```
	margin-right: 1rem;
```
```
	border-radius: 1.5em;
```
```
}
```
```
ol.k-form-steps li.past {
```
```
	color: #050505;
```
```
	background: #EEE;
```
```
}
```
```
ol.k-form-steps li.past::before {
```
```
	color: #EEE;
```
```
	background: #050505,
```
```
}
```
```
ol.k-form-steps li.active {
```
```
	color: #A40800;
```
```
	border: 1px solid #eee
```
```
}
```
```
ol.k-form-steps li.active::before {
```
```
	color: #EEE;
```
```
	background: #A40800
```
```
}
```
```
@media screen and (min-width: 790px) {
```
```
	ol.k-form-steps {
```
```
		display: flex;
```
```
		-moz-display: flex;
```
```
		-webkit-display: flex;
```
```
		flex-flow: row;
```
```
		-webkit-flex-flow: row;
```
```
		flex-direction: row;
```
```
	}
```
```
	ol.k-form-steps li {
```
```
		text-align: center;
```
```
	}
```
```
	ol.k-form-steps li::before {
```
```
		display: block;
```
```
		margin: 0 auto 5px;
```
```
	}
```
```
}
```

IE Backward Compatibility

In order to correct display bugs for Internet Explorer versions prior to 9, your html pages need to call the following file by Conditional Comments:

List of Components

: jQuery Interactive Feature
: Tapestry integration
: AngularJS Feature

Navigation

Forms

Tables

Dynamic Table

Blocks

Site Utilities

Editorial

eCommerce