zuel-itsm-3.0.2/assets/views/form_elements.html

<!-- start: PAGE TITLE -->
<section id="page-title">
	<div class="row">
		<div class="col-sm-8">
			<h1 class="mainTitle" translate="sidebar.nav.forms.ELEMENTS">{{ mainTitle }}</h1>
			<span class="mainDescription">We set out to create an easy, powerful and versatile form layout system. A
				combination of form styles and the Bootstrap grid means you can do almost anything.</span>
		</div>
		<div ncy-breadcrumb></div>
	</div>
</section>
<!-- end: PAGE TITLE -->
<!-- start: BASIC EXAMPLE -->
<div class="container-fluid container-fullw bg-white">
	<div class="row">
		<div class="col-md-12">
			<h5 class="over-title margin-bottom-15">Basic <span class="text-bold">example</span></h5>
			<p>
				Individual form controls automatically receive some global styling.
			</p>
			<div class="row margin-top-30">
				<div class="col-lg-6 col-md-12">
					<div class="panel panel-white">
						<div class="panel-heading">
							<h5 class="panel-title">Default Form</h5>
						</div>
						<div class="panel-body">
							<p class="text-small margin-bottom-20">
								All textual <code>&lt;input&gt;</code>, <code>&lt;textarea&gt;</code>, and
								<code>&lt;select&gt;</code> elements with <code>.form-control</code> are set to
								<code>width: 100%;</code> by default. Wrap labels and controls in
								<code>.form-group</code> for optimum spacing.
							</p>
							<form role="form">
								<div class="form-group">
									<label for="exampleInputEmail1">
										Email address
									</label>
									<input type="email" class="form-control" id="exampleInputEmail1"
										placeholder="Enter email">
								</div>
								<div class="form-group">
									<label for="exampleInputPassword1">
										Password
									</label>
									<input type="password" class="form-control" id="exampleInputPassword1"
										placeholder="Password">
								</div>
								<div class="checkbox clip-check check-primary">
									<input type="checkbox" id="checkbox1" value="1">
									<label for="checkbox1">
										Remember me
									</label>
								</div>
								<button type="submit" class="btn btn-o btn-primary">
									Submit
								</button>
							</form>
						</div>
					</div>
				</div>
				<div class="col-lg-6 col-md-12">
					<div class="panel panel-white">
						<div class="panel-heading">
							<h5 class="panel-title">Horizontal form</h5>
						</div>
						<div class="panel-body">
							<p class="text-small margin-bottom-20">
								Use Bootstrap's predefined grid classes to align labels and groups of form controls in a
								horizontal layout by adding <code>.form-horizontal</code> to the form. Doing so changes
								<code>.form-group</code>s to behave as grid rows, so no need for <code>.row</code>.
							</p>
							<form role="form" class="form-horizontal">
								<div class="form-group">
									<label class="col-sm-2 control-label" for="inputEmail3">
										Email
									</label>
									<div class="col-sm-10">
										<input type="email" placeholder="Email" id="inputEmail3" class="form-control">
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-2 control-label" for="inputPassword3">
										Password
									</label>
									<div class="col-sm-10">
										<input type="password" placeholder="Password" id="inputPassword3"
											class="form-control">
									</div>
								</div>
								<div class="form-group">
									<div class="col-sm-offset-2 col-sm-10">
										<div class="checkbox clip-check check-primary">
											<input type="checkbox" id="checkbox2" value="1">
											<label for="checkbox2">
												Remember me
											</label>
										</div>
									</div>
								</div>
								<div class="form-group margin-bottom-0">
									<div class="col-sm-offset-2 col-sm-10">
										<button class="btn btn-o btn-primary" type="submit">
											Sign in
										</button>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
				<div class="col-lg-12 col-md-12">
					<div class="panel panel-white">
						<div class="panel-heading">
							<h5 class="panel-title">Inline form</h5>
						</div>
						<div class="panel-body">
							<p class="text-small margin-bottom-20">
								Add <code>.form-inline</code> to your <code>&lt;form&gt;</code> for left-aligned and
								inline-block controls.
							</p>
							<form role="form" class="form-inline">
								<div class="form-group">
									<div class="input-group">
										<div class="input-group-addon">
											@
										</div>
										<input type="email" placeholder="Enter email" class="form-control">
									</div>
								</div>
								<div class="form-group">
									<label for="exampleInputPassword2" class="sr-only">
										Password
									</label>
									<input type="password" placeholder="Password" id="exampleInputPassword2"
										class="form-control">
								</div>
								<div class="form-group">
									<div class="checkbox clip-check check-primary">
										<input type="checkbox" id="checkbox3" value="1">
										<label for="checkbox3">
											Remember me
										</label>
									</div>
								</div>
								<button class="btn btn-primary" type="submit">
									Sign in
								</button>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- end: BASIC EXAMPLE -->
<!-- start: ALTERNATIVE EXAMPLE -->
<div class="container-fluid container-fullw">
	<div class="row">
		<div class="col-md-6">
			<h5 class="over-title margin-bottom-15">Alternative <span class="text-bold">example</span></h5>
			<p>
				Show your text field as a line, adding the class <code>.underline</code>
			</p>
			<div class="panel panel-transparent">
				<div class="panel-heading">
					<h5 class="panel-title">Default Form</h5>
				</div>
				<div class="panel-body">
					<form role="form">
						<div class="form-group">
							<label for="exampleInputEmail1">
								Email address
							</label>
							<input type="email" class="form-control underline" id="exampleInputEmail1"
								placeholder="Enter email">
						</div>
						<div class="form-group">
							<label for="exampleInputPassword1">
								Password
							</label>
							<input type="password" class="form-control underline" id="exampleInputPassword1"
								placeholder="Password">
						</div>
					</form>
				</div>
			</div>
			<h5 class="margin-bottom-15"></h5>
			<div class="panel panel-transparent">
				<div class="panel-heading">
					<h5 class="panel-title">Horizontal Form</h5>
				</div>
				<div class="panel-body">
					<form role="form" class="form-horizontal">
						<div class="form-group">
							<label class="col-sm-2 control-label" for="inputEmail3">
								Email
							</label>
							<div class="col-sm-10">
								<input type="email" placeholder="Email" id="inputEmail3" class="form-control underline">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label" for="inputPassword3">
								Password
							</label>
							<div class="col-sm-10">
								<input type="password" placeholder="Password" id="inputPassword3"
									class="form-control underline">
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
		<div class="col-md-6">
			<h5 class="over-title margin-bottom-15">Control <span class="text-bold">sizing</span></h5>
			<p>
				Create taller or shorter form controls that match button sizes.
			</p>
			<div class="panel panel-white no-radius">
				<div class="panel-heading">
					<h5 class="panel-title">Default field sizing</h5>
				</div>
				<div class="panel-body">
					<form role="form" class="margin-bottom-20">
						<div class="form-group">
							<input type="text" placeholder="Large Text Field" id="form-field-12"
								class="form-control input-lg">
						</div>
						<div class="form-group">
							<input type="text" placeholder="Standard Text Field" id="form-field-13"
								class="form-control">
						</div>
						<div class="form-group">
							<input type="text" placeholder="Small Text Field" id="form-field-13"
								class="form-control input-sm">
						</div>
					</form>
				</div>
			</div>
			<div class="panel panel-white no-radius">
				<div class="panel-heading">
					<h5 class="panel-title">Alternative field sizing</h5>
				</div>
				<div class="panel-body">
					<form role="form">
						<div class="form-group">
							<input type="text" placeholder="Large Text Field" id="form-field-12"
								class="form-control underline input-lg">
						</div>
						<div class="form-group">
							<input type="text" placeholder="Standard Text Field" id="form-field-12"
								class="form-control underline">
						</div>
						<div class="form-group">
							<input type="text" placeholder="Small Text Field" id="form-field-13"
								class="form-control underline input-sm">
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- end: ALTERNATIVE EXAMPLE -->
<!-- start: FIELDSET -->
<div class="container-fluid container-fullw bg-white">
	<div class="row">
		<div class="col-md-12">
			<h5 class="over-title">Defining a <span class="text-bold">Fieldset</span></h5>
			<p class="margin-bottom-30">
				<code>&lt;fieldset&gt;</code> is used as a wrapper right inside the form element. Right after you define
				a fieldset, you can include a legend title by using <code>&lt;legend&gt;</code>. Here's some HTML to
				help make copy paste.
			</p>
			<div class="row">
				<div class="col-md-6">
					<fieldset>
						<legend>
							Your Account
						</legend>
						<div class="form-group">
							<label>
								E-mail <span class="symbol required"></span>
							</label>
							<div class="form-group">
								<input type="email" placeholder="Text Field" name="email" id="email"
									class="form-control">
							</div>
						</div>
					</fieldset>
					<fieldset>
						<legend>
							Choose a password
						</legend>
						<div class="form-group">
							<label>
								Password
							</label>
							<input type="text" class="form-control" placeholder="Repeat Password">
						</div>
						<div class="form-group">
							<label>
								Repeat Password <span class="symbol required"></span>
							</label>
							<input type="email" placeholder="Text Field" name="email" id="email" class="form-control">
						</div>
					</fieldset>
				</div>
				<div class="col-md-6">
					<fieldset>
						<legend>
							Personal Information
						</legend>
						<div class="row">
							<div class="col-md-6">
								<div class="form-group">
									<label>
										First Name
									</label>
									<input type="text" name="firstName" class="form-control"
										placeholder="Enter your First Name">
								</div>
							</div>
							<div class="col-md-6">
								<div class="form-group">
									<label class="control-label">
										Last Name
									</label>
									<input type="text" name="lastName" class="form-control"
										placeholder="Enter your Last Name">
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-md-6">
								<div class="form-group">
									<label class="block">
										Gender
									</label>
									<div class="clip-radio radio-primary">
										<input type="radio" id="female" name="gender" value="female">
										<label for="female">
											Female
										</label>
										<input type="radio" id="male" name="gender" value="male" checked="checked">
										<label for="male">
											Male
										</label>
									</div>
								</div>
							</div>
							<div class="col-md-6">
								<div class="form-group">
									<label>
										Choose your country or region
									</label>
									<select name="country" class="form-control">
										<option value="">&nbsp;</option>
										<option value="AL">Alabama</option>
										<option value="AK">Alaska</option>
										<option value="AZ">Arizona</option>
										<option value="AR">Arkansas</option>
										<option value="CA">California</option>
										<option value="CO">Colorado</option>
										<option value="CT">Connecticut</option>
										<option value="DE">Delaware</option>
										<option value="FL">Florida</option>
										<option value="GA">Georgia</option>
										<option value="HI">Hawaii</option>
										<option value="ID">Idaho</option>
										<option value="IL">Illinois</option>
										<option value="IN">Indiana</option>
										<option value="IA">Iowa</option>
										<option value="KS">Kansas</option>
										<option value="KY">Kentucky</option>
										<option value="LA">Louisiana</option>
										<option value="ME">Maine</option>
										<option value="MD">Maryland</option>
										<option value="MA">Massachusetts</option>
										<option value="MI">Michigan</option>
										<option value="MN">Minnesota</option>
										<option value="MS">Mississippi</option>
										<option value="MO">Missouri</option>
										<option value="MT">Montana</option>
										<option value="NE">Nebraska</option>
										<option value="NV">Nevada</option>
										<option value="NH">New Hampshire</option>
										<option value="NJ">New Jersey</option>
										<option value="NM">New Mexico</option>
										<option value="NY">New York</option>
										<option value="NC">North Carolina</option>
										<option value="ND">North Dakota</option>
										<option value="OH">Ohio</option>
										<option value="OK">Oklahoma</option>
										<option value="OR">Oregon</option>
										<option value="PA">Pennsylvania</option>
										<option value="RI">Rhode Island</option>
										<option value="SC">South Carolina</option>
										<option value="SD">South Dakota</option>
										<option value="TN">Tennessee</option>
										<option value="TX">Texas</option>
										<option value="UT">Utah</option>
										<option value="VT">Vermont</option>
										<option value="VA">Virginia</option>
										<option value="WA">Washington</option>
										<option value="WV">West Virginia</option>
										<option value="WI">Wisconsin</option>
										<option value="WY">Wyoming</option>
									</select>
								</div>
							</div>
						</div>
					</fieldset>
					<fieldset>
						<legend>
							Terms &amp; Condition
						</legend>
						<div class="row">
							<div class="col-md-12">
								<div class="form-group">
									<label class="checkbox-inline clip-check">
										<input type="checkbox" name="newsletter">
										<i></i>
										I read and accept the terms and conditions
									</label>
								</div>
							</div>
						</div>
					</fieldset>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- end: FIELDSET -->
<!-- start: INPUT OPTIONS -->
<div class="container-fluid container-fullw">
	<div class="row">
		<div class="col-md-12">
			<h5 class="over-title">Input <span class="text-bold">Options</span></h5>
			<div class="row">
				<div class="col-sm-6 col-lg-4">
					<div class="panel panel-white">
						<div class="panel-heading">
							<div class="panel-title">
								Disabled State
							</div>
						</div>
						<div class="panel-body">
							<p class="margin-bottom-30">
								Add the <code>disabled</code> boolean attribute on an input to prevent user input.
							</p>
							<div class="form-group">
								<label>
									Disabled Input
								</label>
								<input type="text" placeholder="Disabled" id="form-field-21" class="form-control"
									disabled="disabled">
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-6 col-lg-4">
					<div class="panel panel-white">
						<div class="panel-heading">
							<div class="panel-title">
								Readonly State
							</div>
						</div>
						<div class="panel-body">
							<p class="margin-bottom-30">
								Add the <code>readonly</code> boolean attribute on an input to prevent user input.
							</p>
							<div class="form-group">
								<label>
									Readonly Input
								</label>
								<input type="text" placeholder="Readonly" value="Readonly value" id="form-field-21"
									class="form-control" readonly>
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-6 col-lg-4">
					<div class="panel panel-white">
						<div class="panel-heading">
							<div class="panel-title">
								Required Label
							</div>
						</div>
						<div class="panel-body">
							<p class="margin-bottom-30">
								An asterisk indicates to the user that the field is required.
							</p>
							<div class="form-group">
								<label>
									Required Input <span class="symbol required"></span>
								</label>
								<input type="text" placeholder="Required" class="form-control">
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-6 col-lg-4">
					<div class="panel panel-white">
						<div class="panel-heading">
							<div class="panel-title">
								Success State
							</div>
						</div>
						<div class="panel-body">
							<p class="margin-bottom-30">
								Includes validation styles for success states on form controls.
							</p>
							<div class="form-group has-success">
								<label>
									Success Label <span class="symbol required"></span>
								</label>
								<input type="text" placeholder="Required" class="form-control">
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-6 col-lg-4">
					<div class="panel panel-white">
						<div class="panel-heading">
							<div class="panel-title">
								Warning State
							</div>
						</div>
						<div class="panel-body">
							<p class="margin-bottom-30">
								Includes validation styles for warning states on form controls.
							</p>
							<div class="form-group has-warning">
								<label>
									Warning Label <span class="symbol required"></span>
								</label>
								<input type="text" placeholder="Required" class="form-control">
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-6 col-lg-4">
					<div class="panel panel-white">
						<div class="panel-heading">
							<div class="panel-title">
								Error State
							</div>
						</div>
						<div class="panel-body">
							<p class="margin-bottom-30">
								Includes validation styles for error states on form controls.
							</p>
							<div class="form-group has-error">
								<label>
									Error Label <span class="symbol required"></span>
								</label>
								<input type="text" placeholder="Required" class="form-control">
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- end: INPUT OPTIONS -->
<!-- start: ICONS AND HELPERS -->
<div class="container-fluid container-fullw bg-white">
	<div class="row">
		<div class="col-md-12">
			<h5 class="over-title margin-bottom-15">Icons &amp; <span class="text-bold">Helpers</span></h5>
			<div class="row">
				<div class="col-lg-7 col-sm-6">
					<div class="panel panel-transparent">
						<div class="panel-body">
							<form role="form">
								<div class="form-group">
									<label>
										Block Help
									</label>
									<input type="text" placeholder="Text Field" id="form-field-6" class="form-control">
									<span class="help-block"><i class="ti-info-alt text-primary"></i> A block of help
										text that breaks onto a new line and may extend beyond one line.</span>
								</div>
								<div class="form-group">
									<div class="row">
										<label class="col-sm-12">
											Inline Help
										</label>
										<div class="col-md-8 col-sm-6">
											<input type="text" placeholder="Text Field" id="form-field-7"
												class="form-control">
										</div>
										<span class="help-inline col-md-4 col-sm-6"> <i
												class="ti-info-alt text-primary"></i> Inline help text </span>
									</div>
								</div>
								<div class="form-group">
									<label>
										Tooltip
									</label>
									<input type="text" value="Click me!" tooltip="See? Now click away..."
										tooltip-trigger="focus" tooltip-placement="top" class="form-control" />
								</div>
								<div class="form-group">
									<label>
										Popover
									</label>
									<input type="text" value="Click me!" popover-title="Title" popover-placement="top"
										popover="Hello, World!" class="form-control" />
								</div>
							</form>
						</div>
					</div>
				</div>
				<div class="col-lg-5 col-sm-6">
					<div class="panel panel-transparent">
						<div class="panel-body">
							<form role="form">
								<div class="form-group">
									<label>
										Input with Icon
									</label>
									<span class="input-icon">
										<input type="text" placeholder="Text Field" id="form-field-14"
											class="form-control">
										<i class="ti-user"></i> </span>
								</div>
								<div class="form-group">
									<label>
										Right Icon
									</label>
									<span class="input-icon input-icon-right">
										<input type="text" placeholder="Text Field" id="form-field-17"
											class="form-control">
										<i class="ti-twitter"></i> </span>
								</div>
								<div class="form-group">
									<label>
										Add-on
									</label>
									<div class="input-group">
										<span class="input-group-addon">@</span>
										<input type="text" placeholder="Username" class="form-control">
									</div>
								</div>
								<div class="form-group">
									<div class="input-group">
										<input type="text" class="form-control">
										<span class="input-group-addon">.00</span>
									</div>
								</div>
								<div class="form-group">
									<div class="input-group">
										<span class="input-group-addon">$</span>
										<input type="text" class="form-control">
										<span class="input-group-addon">.00</span>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- end: ICONS AND HELPERS -->
<!-- start: CHECKBOXES -->
<div class="container-fluid container-fullw">
	<div class="row">
		<div class="col-md-12">
			<h5 class="over-title margin-bottom-15"><span class="text-bold">Checkboxes</span></h5>
			<p>
				Checkboxes are for selecting one or several options in a list
			</p>
			<div class="row">
				<div class="col-sm-4">
					<div class="panel panel-transparent">
						<div class="panel-heading">
							<h5 class="panel-title">Inline Checkbox</h5>
						</div>
						<div class="panel-body">
							<p class="text-small">
								Use the <code>.checkbox-inline</code> classes on a series of checkboxes for controls
								that appear on the same line.
							</p>
							<div class="checkbox clip-check check-primary checkbox-inline">
								<input type="checkbox" id="checkbox4" value="1" checked="">
								<label for="checkbox4">
									Checkbox 1
								</label>
							</div>
							<div class="checkbox clip-check check-primary checkbox-inline">
								<input type="checkbox" id="checkbox5" value="1">
								<label for="checkbox5">
									Checkbox 2
								</label>
							</div>
						</div>
					</div>
					<div class="panel panel-transparent">
						<div class="panel-heading">
							<h5 class="panel-title">Default (stacked)</h5>
						</div>
						<div class="panel-body">
							<div class="checkbox clip-check check-primary">
								<input type="checkbox" id="checkbox6" value="1">
								<label for="checkbox6">
									Checkbox 1
								</label>
							</div>
							<div class="checkbox clip-check check-primary">
								<input type="checkbox" id="checkbox7" value="1">
								<label for="checkbox7">
									Checkbox 2
								</label>
							</div>
							<div class="checkbox clip-check check-primary">
								<input type="checkbox" id="checkbox8" value="1">
								<label for="checkbox8">
									Checkbox 3
								</label>
							</div>
							<div class="checkbox clip-check check-primary">
								<input type="checkbox" id="checkbox9" value="1" disabled="">
								<label for="checkbox9">
									Checkbox 4 (disabled)
								</label>
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-4">
					<div class="panel panel-transparent">
						<div class="panel-heading">
							<h5 class="panel-title">Various Colours</h5>
						</div>
						<div class="panel-body">
							<div class="checkbox clip-check check-primary checkbox-inline">
								<input type="checkbox" id="checkbox10" value="1" checked="">
								<label for="checkbox10">
									Checkbox 1
								</label>
							</div>
							<div class="checkbox clip-check check-success checkbox-inline">
								<input type="checkbox" id="checkbox11" value="1" checked="">
								<label for="checkbox11">
									Checkbox 2
								</label>
							</div>
							<div class="checkbox clip-check check-warning checkbox-inline">
								<input type="checkbox" id="checkbox12" value="1" checked="">
								<label for="checkbox12">
									Checkbox 3
								</label>
							</div>
							<div class="checkbox clip-check check-danger checkbox-inline">
								<input type="checkbox" id="checkbox13" value="1" checked="">
								<label for="checkbox13">
									Checkbox 4
								</label>
							</div>
							<div class="checkbox clip-check check-info checkbox-inline">
								<input type="checkbox" id="checkbox14" value="1" checked="">
								<label for="checkbox14">
									Checkbox 5
								</label>
							</div>
							<div class="checkbox clip-check check-purple checkbox-inline">
								<input type="checkbox" id="checkbox15" value="1" checked="">
								<label for="checkbox15">
									Checkbox 6
								</label>
							</div>
						</div>
					</div>
					<div class="panel panel-transparent">
						<div class="panel-heading">
							<h5 class="panel-title">Various Sizes</h5>
						</div>
						<div class="panel-body">
							<div class="checkbox clip-check check-primary checkbox-inline">
								<input type="checkbox" id="checkbox16" value="1">
								<label for="checkbox16">
									Checkbox 1
								</label>
							</div>
							<div class="checkbox clip-check check-primary check-md checkbox-inline">
								<input type="checkbox" id="checkbox17" value="1">
								<label for="checkbox17">
									Checkbox 1
								</label>
							</div>
							<div class="checkbox clip-check check-primary check-lg checkbox-inline">
								<input type="checkbox" id="checkbox18" value="1">
								<label for="checkbox18">
									Checkbox 3
								</label>
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-4">
					<div class="panel panel-transparent">
						<div class="panel-heading">
							<h5 class="panel-title">Switches</h5>
						</div>
						<div class="panel-body">
							<p>
								Turn checkboxes in toggle switches.
							</p>
							<div class="checkbox">
								<switch ng-model="switchsetting" ng-init="switchsetting = true" class="green"></switch>
							</div>
						</div>
					</div>
					<div class="panel panel-transparent">
						<div class="panel-heading">
							<h5 class="panel-title">Buttons</h5>
						</div>
						<div class="panel-body">
							<p>
								Turn checkboxes in buttons.
							</p>
							<!-- /// controller:  'ButtonsCtrl' -  localtion: assets/js/controllers/bootstrapCtrl.js /// -->
							<div ng-controller="ButtonsCtrl">
								<div class="btn-group">
									<label class="btn btn-primary" ng-model="checkModel.left" btn-checkbox>
										Left
									</label>
									<label class="btn btn-primary" ng-model="checkModel.middle" btn-checkbox>
										Middle
									</label>
									<label class="btn btn-primary" ng-model="checkModel.right" btn-checkbox>
										Right
									</label>
								</div>
								<pre class="margin-top-10">{{checkModel}}</pre>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- end: CHECKBOXES -->
<!-- start: RADIO -->
<div class="container-fluid container-fullw bg-white">
	<div class="row">
		<div class="col-md-12">
			<h5 class="over-title margin-bottom-15"><span class="text-bold">Radio</span></h5>
			<p>
				Radios are for selecting one option from many.
			</p>
			<div class="row">
				<div class="col-sm-4">
					<div class="panel panel-transparent">
						<div class="panel-heading">
							<h5 class="panel-title">Inline radio</h5>
						</div>
						<div class="panel-body">
							<p class="text-small">
								Use the <code>.radio-inline</code> classes on a series of radios for controls that
								appear on the same line.
							</p>
							<div class="radio clip-radio radio-primary radio-inline">
								<input type="radio" id="radio1" name="inline" value="radio1">
								<label for="radio1">
									Radio 1
								</label>
							</div>
							<div class="radio clip-radio radio-primary radio-inline">
								<input type="radio" id="radio2" name="inline" value="radio2" checked="checked">
								<label for="radio2">
									Radio 2
								</label>
							</div>
						</div>
					</div>
					<div class="panel panel-transparent">
						<div class="panel-heading">
							<h5 class="panel-title">Vertical radio</h5>
						</div>
						<div class="panel-body">
							<div class="radio clip-radio radio-primary">
								<input type="radio" id="radio3" name="vertical" value="radio3">
								<label for="radio3">
									Radio 1
								</label>
							</div>
							<div class="radio clip-radio radio-primary">
								<input type="radio" id="radio4" name="vertical" value="radio4">
								<label for="radio4">
									Radio 2
								</label>
							</div>
							<div class="radio clip-radio radio-primary">
								<input type="radio" id="radio5" name="vertical" value="radio5">
								<label for="radio5">
									Radio 3
								</label>
							</div>
							<div class="radio clip-radio radio-primary">
								<input type="radio" id="radio6" name="vertical" value="radio6" disabled="">
								<label for="radio6">
									Radio 4 (disabled)
								</label>
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-4">
					<div class="panel panel-transparent">
						<div class="panel-heading">
							<h5 class="panel-title">Verious Colours</h5>
						</div>
						<div class="panel-body">
							<div class="radio clip-radio radio-primary radio-inline">
								<input type="radio" id="radio7" name="radio7" value="radio7" checked="checked">
								<label for="radio7">
									Radio 1
								</label>
							</div>
							<div class="radio clip-radio radio-success radio-inline">
								<input type="radio" id="radio8" name="radio8" value="radio8" checked="checked">
								<label for="radio8">
									Radio 2
								</label>
							</div>
							<div class="radio clip-radio radio-warning radio-inline">
								<input type="radio" id="radio9" name="radio9" value="radio9" checked="checked">
								<label for="radio9">
									Radio 3
								</label>
							</div>
							<div class="radio clip-radio radio-danger radio-inline">
								<input type="radio" id="radio10" name="radio10" value="radio10" checked="checked">
								<label for="radio10">
									Radio 4
								</label>
							</div>
							<div class="radio clip-radio radio-info radio-inline">
								<input type="radio" id="radio11" name="radio11" value="radio11" checked="checked">
								<label for="radio11">
									Radio 5
								</label>
							</div>
							<div class="radio clip-radio radio-purple radio-inline">
								<input type="radio" id="radio12" name="radio12" value="radio12" checked="checked">
								<label for="radio12">
									Radio 6
								</label>
							</div>
						</div>
					</div>
					<div class="panel panel-transparent">
						<div class="panel-heading">
							<h5 class="panel-title">Sized</h5>
						</div>
						<div class="panel-body">
							<div class="radio clip-radio radio-primary radio-inline">
								<input type="radio" id="radio13" name="radiosize" value="radio13">
								<label for="radio13">
									Radio 1
								</label>
							</div>
							<div class="radio clip-radio radio-primary radio-md radio-inline">
								<input type="radio" id="radio14" name="radiosize" value="radio14">
								<label for="radio14">
									Radio 2
								</label>
							</div>
							<div class="radio clip-radio radio-primary radio-lg radio-inline">
								<input type="radio" id="radio15" name="radiosize" value="radio15">
								<label for="radio15">
									Radio 3
								</label>
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-4">
					<!-- /// controller:  'ButtonsCtrl' -  localtion: assets/js/controllers/bootstrapCtrl.js /// -->
					<div ng-controller="ButtonsCtrl">
						<div class="panel panel-transparent">
							<div class="panel-heading">
								<h5 class="panel-title">Buttons</h5>
							</div>
							<div class="panel-body">
								<p>
									Turn radio in buttons.
								</p>
								<div class="btn-group margin-bottom-10">
									<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Left'">
										Left
									</label>
									<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Middle'">
										Middle
									</label>
									<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Right'">
										Right
									</label>
								</div>
								<div class="btn-group">
									<label class="btn btn-primary btn-o" ng-model="radioModel" btn-radio="'Left'"
										uncheckable>
										Left
									</label>
									<label class="btn btn-primary btn-o" ng-model="radioModel" btn-radio="'Middle'"
										uncheckable>
										Middle
									</label>
									<label class="btn btn-primary btn-o" ng-model="radioModel" btn-radio="'Right'"
										uncheckable>
										Right
									</label>
								</div>
								<pre class="margin-top-10">{{radioModel || 'null'}}</pre>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- end: RADIO -->
<!-- start: MASKED INPUT -->
<div class="container-fluid container-fullw">
	<div class="row">
		<div class="col-md-12">
			<h5 class="over-title">Masked <span class="text-bold">Input</span></h5>
			<p class="margin-bottom-30">
				uiMask Directive allows users to enter the data in a certain format (dates, phone numbers, etc).
			</p>
			<div class="row">
				<div class="col-sm-6 col-lg-4">
					<div class="panel panel-white">
						<div class="panel-heading">
							<div class="panel-title">
								Date - 99/99/9999
							</div>
						</div>
						<div class="panel-body">
							<div class="form-group">
								<label for="form-field-mask-1">
									Date <small class="text-success">99/99/9999</small>
								</label>
								<div class="input-group">
									<input type="text" class="form-control" name="masked" placeholder="99/99/9999"
										ui-mask="99/99/9999" ng-model="x">
									<span class="input-group-btn">
										<button type="button" class="btn btn-primary">
											<i class="fa fa-calendar"></i>
											Go!
										</button> </span>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-6 col-lg-4">
					<div class="panel panel-white">
						<div class="panel-heading">
							<div class="panel-title">
								Phone - (999) 999-9999
							</div>
						</div>
						<div class="panel-body">
							<div class="form-group">
								<label for="form-field-mask-2">
									Phone <small class="text-warning">(999) 999-9999</small>
								</label>
								<div class="input-group">
									<span class="input-group-addon"> <i class="fa fa-phone"></i> </span>
									<input type="text" class="form-control" name="masked" placeholder="(999) 999-9999"
										ui-mask="(999) 999-9999" ng-model="x">
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-6 col-lg-4">
					<div class="panel panel-white">
						<div class="panel-heading">
							<div class="panel-title">
								Product Key -A*-999-A999
							</div>
						</div>
						<div class="panel-body">
							<div class="form-group">
								<label for="form-field-mask-3">
									Product Key <small class="text-error">A*-999-A999</small>
								</label>
								<div class="input-group">
									<input type="text" class="form-control" name="masked" placeholder="A*-999-A999"
										ui-mask="A*-999-A999" ng-model="x">
									<span class="input-group-addon"> <i class="fa fa-key"></i> </span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- end: MASKED INPUT -->
<!-- start: TEXT AREA -->
<div class="container-fluid container-fullw bg-white">
	<div class="row">
		<div class="col-md-12">
			<h5 class="over-title">Text <span class="text-bold">Area</span></h5>
			<p class="margin-bottom-30">
				The <code>&lt;textarea&gt;</code> tag defines a multi-line text input control.
			</p>
			<div class="row">
				<div class="col-sm-6">
					<div class="panel panel-white">
						<div class="panel-heading">
							<div class="panel-title">
								Default
							</div>
						</div>
						<div class="panel-body">
							<div class="form-group">
								<textarea placeholder="Default Text" id="form-field-22" class="form-control"></textarea>
							</div>
						</div>
					</div>
					<div class="panel panel-white">
						<div class="panel-heading">
							<div class="panel-title">
								With Character Limit
							</div>
						</div>
						<div class="panel-body">
							<div class="form-group">
								<textarea maxlength="50" id="form-field-23" class="form-control limited"></textarea>
							</div>
						</div>
					</div>
					<div class="panel panel-white">
						<div class="panel-heading">
							<div class="panel-title">
								As a Block Note
							</div>
						</div>
						<div class="panel-body">
							<div class="form-group">
								<div class="note-editor">
									<textarea class="form-control"></textarea>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-6">
					<div class="panel panel-white">
						<div class="panel-heading">
							<div class="panel-title">
								Autosize with Animation
							</div>
						</div>
						<div class="panel-body">
							<div class="form-group">
								<textarea class="form-control autosize area-animated msd-elastic: \n;"
									data-ng-model="bar"></textarea>
							</div>
						</div>
					</div>
					<div class="panel panel-white">
						<div class="panel-heading">
							<div class="panel-title">
								Autosize without Animation
							</div>
						</div>
						<div class="panel-body">
							<div class="form-group">
								<textarea class="form-control autosize msd-elastic: \n;"
									data-ng-model="bar2"></textarea>
							</div>
						</div>
					</div>
					<div class="panel panel-white">
						<div class="panel-heading">
							<div class="panel-title">
								Autosize As a Block Note
							</div>
						</div>
						<div class="panel-body">
							<div class="form-group">
								<div class="note-editor">
									<textarea class="form-control autosize msd-elastic: \n;"
										data-ng-model="bar3"></textarea>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- end: TEXT AREA -->
<!-- start: DATE/TIME Picker -->
<div class="container-fluid container-fullw">
	<div class="row">
		<div class="col-md-12">
			<h5 class="over-title">Date/Time <span class="text-bold">Picker</span></h5>
			<p class="margin-bottom-30">
				A clean, flexible, and fully customizable date picker.
				User can navigate through months and years. The datepicker shows dates that come from other than the
				main month being displayed. These other dates are also selectable.
			</p>
			<div class="panel panel-white no-radius">
				<div class="panel-body">
					<!-- /// controller:  'DatepickerDemoCtrl' -  localtion: assets/js/controllers/bootstrapCtrl.js /// -->
					<div ng-controller="DatepickerDemoCtrl">
						<div class="row">
							<div class="col-md-12">
								<pre>Selected date is: {{dt | date:'MM/dd/yyyy  h:mma' }}</pre>
							</div>
							<div class="col-md-6">
								<h5 class="text-bold margin-top-25 margin-bottom-15">Inline</h5>
								<div class="inline-block min-height-180">
									<datepicker ng-model="dt" min-date="minDate" show-weeks="true" class="well well-sm">
									</datepicker>
								</div>
							</div>
							<div class="col-md-6">
								<h5 class="text-bold margin-top-25 margin-bottom-15">Popup</h5>
								<p class="input-group">
									<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt"
										is-open="opened" min-date="minDate" max-date="'2015-06-22'"
										datepicker-options="dateOptions" date-disabled="disabled(date, mode)"
										ng-required="true" close-text="Close" />
									<span class="input-group-btn">
										<button type="button" class="btn btn-default" ng-click="open($event)">
											<!--<i class="glyphicon glyphicon-calendar"></i>-->
										</button> </span>
								</p>
								<h5 class="text-bold margin-top-25 margin-bottom-15">Format:</h5>
								<select class="form-control" ng-model="format" ng-options="f for f in formats">
									<option></option>
								</select>
								<div class="margin-top-30">
									<button type="button" class="btn btn-sm btn-info" ng-click="today()">
										Today
									</button>
									<button type="button" class="btn btn-sm btn-default" ng-click="dt = '2009-08-24'">
										2009-08-24
									</button>
									<button type="button" class="btn btn-sm btn-danger" ng-click="clear()">
										Clear
									</button>
									<button type="button" class="btn btn-sm btn-default" ng-click="toggleMin()"
										tooltip="After today restriction">
										Min date
									</button>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-md-6">
								<h5 class="text-bold margin-top-25 margin-bottom-15">Timepicker</h5>
								<timepicker ng-model="dt" ng-change="changed()" hour-step="hstep" minute-step="mstep"
									show-meridian="ismeridian"></timepicker>
								<pre class="alert alert-info">Time is: {{dt | date:'shortTime' }}</pre>
								<div class="row">
									<div class="col-xs-6">
										Hours step is: <select class="form-control" ng-model="hstep"
											ng-options="opt for opt in options.hstep"></select>
									</div>
									<div class="col-xs-6">
										Minutes step is: <select class="form-control" ng-model="mstep"
											ng-options="opt for opt in options.mstep"></select>
									</div>
								</div>
								<hr>
								<button class="btn btn-info" ng-click="toggleMode()">
									12H / 24H
								</button>
								<button class="btn btn-default" ng-click="update()">
									Set to 14:00
								</button>
								<button class="btn btn-danger" ng-click="clear()">
									Clear
								</button>
							</div>
							<div class="col-md-6">
								<h5 class="text-bold margin-top-25 margin-bottom-15">Date Range</h5>
								<div class="input-group">
									<input type="text" class="form-control" datepicker-popup="yyyy/MM/dd"
										ng-model="start" is-open="startOpened" ng-init="startOpened = false"
										min-date="'1970-12-31'" max-date="end" ng-required="true" close-text="Close"
										ng-click="startOpen($event)" />
									<span class="input-group-addon">to</span>
									<input type="text" class="form-control" datepicker-popup="yyyy/MM/dd" ng-model="end"
										is-open="endOpened" ng-init="endOpened = false" min-date="start"
										max-date="'2015-06-22'" ng-required="true" close-text="Close"
										ng-click="endOpen($event)" />
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- end: DATE/TIME Picker -->
<!-- start: SELECT BOXES -->
<div class="container-fluid container-fullw bg-white">
	<div class="row">
		<div class="col-md-12">
			<h5 class="over-title">Select <span class="text-bold">Box</span></h5>
			<p class="margin-bottom-30">
				The <code>&lt;select&gt;</code> element is used to create a drop-down list.
			</p>
			<div class="row">
				<div class="col-sm-6">
					<div class="panel panel-transparent">
						<div class="panel-heading">
							<h5 class="panel-title">Default Select Boxes</span></h5>
						</div>
						<div class="panel-body">
							<div class="form-group">
								<label for="form-field-select-1">
									Default
								</label>
								<select id="form-field-select-1" class="form-control">
									<option value="">&nbsp;</option>
									<option value="AL">Alabama</option>
									<option value="AK">Alaska</option>
									<option value="AZ">Arizona</option>
									<option value="AR">Arkansas</option>
									<option value="CA">California</option>
									<option value="CO">Colorado</option>
									<option value="CT">Connecticut</option>
									<option value="DE">Delaware</option>
									<option value="FL">Florida</option>
									<option value="GA">Georgia</option>
									<option value="HI">Hawaii</option>
									<option value="ID">Idaho</option>
									<option value="IL">Illinois</option>
									<option value="IN">Indiana</option>
									<option value="IA">Iowa</option>
									<option value="KS">Kansas</option>
									<option value="KY">Kentucky</option>
									<option value="LA">Louisiana</option>
									<option value="ME">Maine</option>
									<option value="MD">Maryland</option>
									<option value="MA">Massachusetts</option>
									<option value="MI">Michigan</option>
									<option value="MN">Minnesota</option>
									<option value="MS">Mississippi</option>
									<option value="MO">Missouri</option>
									<option value="MT">Montana</option>
									<option value="NE">Nebraska</option>
									<option value="NV">Nevada</option>
									<option value="NH">New Hampshire</option>
									<option value="NJ">New Jersey</option>
									<option value="NM">New Mexico</option>
									<option value="NY">New York</option>
									<option value="NC">North Carolina</option>
									<option value="ND">North Dakota</option>
									<option value="OH">Ohio</option>
									<option value="OK">Oklahoma</option>
									<option value="OR">Oregon</option>
									<option value="PA">Pennsylvania</option>
									<option value="RI">Rhode Island</option>
									<option value="SC">South Carolina</option>
									<option value="SD">South Dakota</option>
									<option value="TN">Tennessee</option>
									<option value="TX">Texas</option>
									<option value="UT">Utah</option>
									<option value="VT">Vermont</option>
									<option value="VA">Virginia</option>
									<option value="WA">Washington</option>
									<option value="WV">West Virginia</option>
									<option value="WI">Wisconsin</option>
									<option value="WY">Wyoming</option>
								</select>
							</div>
							<div class="form-group">
								<label for="form-field-select-1">
									Disabled
								</label>
								<select id="form-field-select-1" class="form-control" disabled>
									<option value="">&nbsp;</option>
									<option value="AL">Alabama</option>
									<option value="AK">Alaska</option>
									<option value="AZ">Arizona</option>
									<option value="AR">Arkansas</option>
									<option value="CA">California</option>
									<option value="CO">Colorado</option>
									<option value="CT">Connecticut</option>
									<option value="DE">Delaware</option>
									<option value="FL">Florida</option>
									<option value="GA">Georgia</option>
									<option value="HI">Hawaii</option>
									<option value="ID">Idaho</option>
									<option value="IL">Illinois</option>
									<option value="IN">Indiana</option>
									<option value="IA">Iowa</option>
									<option value="KS">Kansas</option>
									<option value="KY">Kentucky</option>
									<option value="LA">Louisiana</option>
									<option value="ME">Maine</option>
									<option value="MD">Maryland</option>
									<option value="MA">Massachusetts</option>
									<option value="MI">Michigan</option>
									<option value="MN">Minnesota</option>
									<option value="MS">Mississippi</option>
									<option value="MO">Missouri</option>
									<option value="MT">Montana</option>
									<option value="NE">Nebraska</option>
									<option value="NV">Nevada</option>
									<option value="NH">New Hampshire</option>
									<option value="NJ">New Jersey</option>
									<option value="NM">New Mexico</option>
									<option value="NY">New York</option>
									<option value="NC">North Carolina</option>
									<option value="ND">North Dakota</option>
									<option value="OH">Ohio</option>
									<option value="OK">Oklahoma</option>
									<option value="OR">Oregon</option>
									<option value="PA">Pennsylvania</option>
									<option value="RI">Rhode Island</option>
									<option value="SC">South Carolina</option>
									<option value="SD">South Dakota</option>
									<option value="TN">Tennessee</option>
									<option value="TX">Texas</option>
									<option value="UT">Utah</option>
									<option value="VT">Vermont</option>
									<option value="VA">Virginia</option>
									<option value="WA">Washington</option>
									<option value="WV">West Virginia</option>
									<option value="WI">Wisconsin</option>
									<option value="WY">Wyoming</option>
								</select>
							</div>
							<div class="form-group">
								<label for="form-field-select-2">
									Multiple
								</label>
								<select multiple="multiple" id="form-field-select-2" class="form-control">
									<option value="AL">Alabama</option>
									<option value="AK">Alaska</option>
									<option value="AZ">Arizona</option>
									<option value="AR">Arkansas</option>
									<option value="CA">California</option>
									<option value="CO">Colorado</option>
									<option value="CT">Connecticut</option>
									<option value="DE">Delaware</option>
									<option value="FL">Florida</option>
									<option value="GA">Georgia</option>
									<option value="HI">Hawaii</option>
									<option value="ID">Idaho</option>
									<option value="IL">Illinois</option>
									<option value="IN">Indiana</option>
									<option value="IA">Iowa</option>
									<option value="KS">Kansas</option>
									<option value="KY">Kentucky</option>
									<option value="LA">Louisiana</option>
									<option value="ME">Maine</option>
									<option value="MD">Maryland</option>
									<option value="MA">Massachusetts</option>
									<option value="MI">Michigan</option>
									<option value="MN">Minnesota</option>
									<option value="MS">Mississippi</option>
									<option value="MO">Missouri</option>
									<option value="MT">Montana</option>
									<option value="NE">Nebraska</option>
									<option value="NV">Nevada</option>
									<option value="NH">New Hampshire</option>
									<option value="NJ">New Jersey</option>
									<option value="NM">New Mexico</option>
									<option value="NY">New York</option>
									<option value="NC">North Carolina</option>
									<option value="ND">North Dakota</option>
									<option value="OH">Ohio</option>
									<option value="OK">Oklahoma</option>
									<option value="OR">Oregon</option>
									<option value="PA">Pennsylvania</option>
									<option value="RI">Rhode Island</option>
									<option value="SC">South Carolina</option>
									<option value="SD">South Dakota</option>
									<option value="TN">Tennessee</option>
									<option value="TX">Texas</option>
									<option value="UT">Utah</option>
									<option value="VT">Vermont</option>
									<option value="VA">Virginia</option>
									<option value="WA">Washington</option>
									<option value="WV">West Virginia</option>
									<option value="WI">Wisconsin</option>
									<option value="WY">Wyoming</option>
								</select>
							</div>
							<div class="form-group">
								<label for="form-field-select-2">
									Multiple Disabled
								</label>
								<select multiple="multiple" id="form-field-select-2" class="form-control" disabled>
									<option value="AL">Alabama</option>
									<option value="AK">Alaska</option>
									<option value="AZ">Arizona</option>
									<option value="AR">Arkansas</option>
									<option value="CA">California</option>
									<option value="CO">Colorado</option>
									<option value="CT">Connecticut</option>
									<option value="DE">Delaware</option>
									<option value="FL">Florida</option>
									<option value="GA">Georgia</option>
									<option value="HI">Hawaii</option>
									<option value="ID">Idaho</option>
									<option value="IL">Illinois</option>
									<option value="IN">Indiana</option>
									<option value="IA">Iowa</option>
									<option value="KS">Kansas</option>
									<option value="KY">Kentucky</option>
									<option value="LA">Louisiana</option>
									<option value="ME">Maine</option>
									<option value="MD">Maryland</option>
									<option value="MA">Massachusetts</option>
									<option value="MI">Michigan</option>
									<option value="MN">Minnesota</option>
									<option value="MS">Mississippi</option>
									<option value="MO">Missouri</option>
									<option value="MT">Montana</option>
									<option value="NE">Nebraska</option>
									<option value="NV">Nevada</option>
									<option value="NH">New Hampshire</option>
									<option value="NJ">New Jersey</option>
									<option value="NM">New Mexico</option>
									<option value="NY">New York</option>
									<option value="NC">North Carolina</option>
									<option value="ND">North Dakota</option>
									<option value="OH">Ohio</option>
									<option value="OK">Oklahoma</option>
									<option value="OR">Oregon</option>
									<option value="PA">Pennsylvania</option>
									<option value="RI">Rhode Island</option>
									<option value="SC">South Carolina</option>
									<option value="SD">South Dakota</option>
									<option value="TN">Tennessee</option>
									<option value="TX">Texas</option>
									<option value="UT">Utah</option>
									<option value="VT">Vermont</option>
									<option value="VA">Virginia</option>
									<option value="WA">Washington</option>
									<option value="WV">West Virginia</option>
									<option value="WI">Wisconsin</option>
									<option value="WY">Wyoming</option>
								</select>
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-6">
					<div class="panel panel-transparent">
						<div class="panel-heading">
							<h5 class="panel-title">Css3 Select Boxes</h5>
						</div>
						<div class="panel-body">
							<div class="form-group">
								<label for="form-field-select-1">
									Skin Slide
								</label>
								<select class="cs-select cs-skin-slide">
									<option value=""></option>
									<option value="sightseeing">Sight Seeing</option>
									<option value="business">Business</option>
									<option value="honeymoon">Honeymoon</option>
									<option value="food">Gourmet</option>
									<option value="shopping">Shopping</option>
								</select>
							</div>
							<div class="form-group">
								<label for="form-field-select-1">
									Skin Slide with Icons
								</label>
								<select class="cs-select cs-skin-slide">
									<option value=""></option>
									<option value="sightseeing" data-class="fa fa-apple">Sight Seeing</option>
									<option value="business" data-class="fa fa-android">Business</option>
									<option value="honeymoon" data-class="fa fa-windows">Honeymoon</option>
									<option value="food" data-class="fa fa-dropbox">Gourmet</option>
									<option value="shopping" data-class="fa fa-github">Shopping</option>
								</select>
							</div>
							<div class="form-group">
								<label for="form-field-select-1">
									Skin Slide Disabled
								</label>
								<select class="cs-select cs-skin-slide" disabled>
									<option value=""></option>
									<option value="sightseeing">Sight Seeing</option>
									<option value="business">Business</option>
									<option value="honeymoon">Honeymoon</option>
									<option value="food">Gourmet</option>
									<option value="shopping">Shopping</option>
								</select>
							</div>
							<div class="form-group">
								<label for="form-field-select-2">
									Skin Elastic
								</label>
								<select class="cs-select cs-skin-elastic">
									<option value="" disabled selected>Select a Country</option>
									<option value="france">France</option>
									<option value="brazil">Brazil</option>
									<option value="argentina">Argentina</option>
									<option value="south-africa">South Africa</option>
								</select>
							</div>
							<div class="form-group">
								<label for="form-field-select-2">
									Skin Elastic with Icons
								</label>
								<select class="cs-select cs-skin-elastic">
									<option value="" disabled selected>Select a Country</option>
									<option value="france" data-class="fa fa-apple">France</option>
									<option value="brazil" data-class="fa fa-android">Brazil</option>
									<option value="argentina" data-class="fa fa-windows">Argentina</option>
									<option value="south-africa" data-class="fa fa-dropbox">South Africa</option>
									<option value="shopping" data-class="fa fa-github">Shopping</option>
								</select>
							</div>
							<div class="form-group">
								<label for="form-field-select-2">
									Skin Elastic Disabled
								</label>
								<select class="cs-select cs-skin-elastic" disabled>
									<option value="" disabled selected>Select a Country</option>
									<option value="france">France</option>
									<option value="brazil">Brazil</option>
									<option value="argentina">Argentina</option>
									<option value="south-africa">South Africa</option>
									<option value="shopping">Shopping</option>
								</select>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12">
					<h5 class="over-title">Ui-Select Directive</h5>
					<p>
						AngularJS-native version of Select2 and Selectize.
					</p>
				</div>
				<!-- /// controller:  'SelectCtrl' -  localtion: assets/js/controllers/selectCtrl.js /// -->
				<form ng-controller="SelectCtrl">
					<div class="col-sm-6">
						<div class="panel panel-transparent">
							<div class="panel-body">
								<div class="form-group">
									<label>
										Default
									</label>
									<ui-select ng-model="person.selected" theme="bootstrap">
										<ui-select-match placeholder="Select in the list...">
											{{$select.selected.name}}
										</ui-select-match>
										<ui-select-choices repeat="item in people | filter: $select.search">
											<div ng-bind-html="item.name | highlight: $select.search"></div>
											<small ng-bind-html="item.email | highlight: $select.search"></small>
										</ui-select-choices>
									</ui-select>
								</div>
								<div class="form-group">
									<label>
										Grouped
									</label>
									<ui-select ng-model="person.selected" theme="bootstrap">
										<ui-select-match placeholder="Select in the list...">
											{{$select.selected.name}}
										</ui-select-match>
										<ui-select-choices group-by="'group'"
											repeat="item in people | filter: $select.search">
											<span ng-bind-html="item.name | highlight: $select.search"></span>
											<small ng-bind-html="item.email | highlight: $select.search"></small>
										</ui-select-choices>
									</ui-select>
								</div>
								<div class="form-group">
									<label>
										With a clear button
									</label>
									<div class="input-group">
										<ui-select ng-model="person.selected" theme="bootstrap">
											<ui-select-match placeholder="Select in the list...">
												{{$select.selected.name}}
											</ui-select-match>
											<ui-select-choices repeat="item in people | filter: $select.search">
												<span ng-bind-html="item.name | highlight: $select.search"></span>
												<small ng-bind-html="item.email | highlight: $select.search"></small>
											</ui-select-choices>
										</ui-select>
										<span class="input-group-btn">
											<button ng-click="person.selected = undefined" class="btn btn-default">
												<span class="glyphicon glyphicon-trash"></span>
											</button> </span>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-sm-6">
						<div class="panel panel-transparent">
							<div class="panel-body">
								<div class="form-group">
									<label>
										Disabled
									</label>
									<ui-select ng-model="person.selected" theme="bootstrap" ng-disabled="true">
										<ui-select-match placeholder="Select in the list...">
											{{$select.selected.name}}
										</ui-select-match>
										<ui-select-choices repeat="item in people | filter: $select.search">
											<div ng-bind-html="item.name | highlight: $select.search"></div>
											<small ng-bind-html="item.email | highlight: $select.search"></small>
										</ui-select-choices>
									</ui-select>
								</div>
								<div class="form-group">
									<label>
										Simple String Tags
									</label>
									<ui-select multiple ng-model="multipleDemo.colors" theme="bootstrap"
										ng-disabled="disabled" close-on-select="false">
										<ui-select-match placeholder="Select colors...">
											{{$item}}
										</ui-select-match>
										<ui-select-choices repeat="color in availableColors | filter:$select.search">
											{{color}}
										</ui-select-choices>
									</ui-select>
								</div>
								<div class="form-group">
									<label>
										Array of objects
									</label>
									<ui-select multiple ng-model="multipleDemo.selectedPeople" theme="bootstrap"
										ng-disabled="disabled">
										<ui-select-match placeholder="Select person...">
											{{$item.name}} &lt;{{$item.email}}&gt;
										</ui-select-match>
										<ui-select-choices
											repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
											<div ng-bind-html="person.name | highlight: $select.search"></div>
											<small> email: {{person.email}}
												age: <span
													ng-bind-html="''+person.age | highlight: $select.search"></span>
											</small>
										</ui-select-choices>
									</ui-select>
								</div>
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
<!-- end: SELECT BOXES -->
<!-- start: INPUT SPINNER -->
<div class="container-fluid container-fullw">
	<div class="row">
		<div class="col-md-12">
			<h5 class="over-title">Input <span class="text-bold">Spinner</span></h5>
			<p class="margin-bottom-30">
				A mobile and touch friendly input spinner component for Bootstrap. It supports the mousewheel and the
				up/down keys.
			</p>
			<div class="row">
				<div class="col-sm-6 col-lg-4">
					<div class="panel panel-white min-height-270">
						<div class="panel-heading">
							<div class="panel-title">
								Basic example
							</div>
						</div>
						<div class="panel-body">
							<p class="margin-bottom-30">
								The init value is set on the input with the <code>value</code> attribute.
							</p>
							<div class="form-group">
								<label>
									Example:
								</label>
								<input id="demo1" type="text" value="55" name="demo1" touchspin data-min="0"
									data-max="100" data-step="0.1" data-decimals="2" data-boostat="5"
									data-maxboostedstep="10">
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-6 col-lg-4">
					<div class="panel panel-white min-height-270">
						<div class="panel-heading">
							<div class="panel-title">
								Example with postfix
							</div>
						</div>
						<div class="panel-body">
							<p class="margin-bottom-30">
								Use the <code>data-postfix</code> attribute to add a postfix.
							</p>
							<div class="form-group">
								<label>
									Example with postfix:
								</label>
								<input id="demo1" type="text" value="55" name="demo1" touchspin data-min="0"
									data-max="100" data-step="0.1" data-decimals="2" data-boostat="5"
									data-maxboostedstep="10" data-postfix="%">
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-6 col-lg-4">
					<div class="panel panel-white min-height-270">
						<div class="panel-heading">
							<div class="panel-title">
								With prefix
							</div>
						</div>
						<div class="panel-body">
							<p class="margin-bottom-30">
								Use the <code>data-prefix</code> attribute to add a prefix.
							</p>
							<div class="form-group">
								<label>
									With prefix
								</label>
								<input id="demo1" type="text" value="0" name="demo1" touchspin data-min="-1000000000"
									data-max="1000000000" data-stepinterval="50" data-maxboostedstep="10000000"
									data-prefix="$">
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-6 col-lg-4">
					<div class="panel panel-white min-height-270">
						<div class="panel-heading">
							<div class="panel-title">
								Vertical buttons
							</div>
						</div>
						<div class="panel-body">
							<p class="margin-bottom-30">
								Set the <code>data-verticalbuttons</code> attribute as <code>true</code>.
								You can also specify the class for icons.
							</p>
							<div class="form-group">
								<label>
									Vertical buttons with custom icons
								</label>
								<input id="demo4" type="text" value="0" name="demo4" touchspin
									data-verticalbuttons="true" data-verticalupclass="ti-angle-up"
									data-verticaldownclass="ti-angle-down">
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-6 col-lg-4">
					<div class="panel panel-white min-height-270">
						<div class="panel-heading">
							<div class="panel-title">
								Button postfix
							</div>
						</div>
						<div class="panel-body">
							<p class="margin-bottom-30">
								Set the <code>data-postfix</code> attribute as <code>button</code>.
								You can also specify the class for the button.
							</p>
							<div class="form-group">
								<label>
									Button postfix
								</label>
								<input id="demo5" type="text" value="0" name="demo5" touchspin data-postfix="button"
									data-postfix_extraclass="btn btn-default">
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-6 col-lg-4">
					<div class="panel panel-white min-height-270">
						<div class="panel-heading">
							<div class="panel-title">
								Sizes
							</div>
						</div>
						<div class="panel-body">
							<p class="margin-bottom-30">
								Size of the whole controller can be set with applying input-sm or input-lg class on the
								input
							</p>
							<div class="form-group">
								<label>
									Button postfix (large)
								</label>
								<input id="demo6" type="text" value="0" name="demo6" class="form-control input-lg"
									touchspin data-postfix="button" data-postfix_extraclass="btn btn-default">
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- end: INPUT SPINNER -->

<style>
	.btn-danger {
		background: #fff;
		color: #d43f3a;
		padding: 0 5px !important;
	}
</style>