angular2-boiler-plate/public/css/form.less

Angular 2 Boiler plate that integrated with WebPack, TypeScript, DatePicker, RxJs for Reactive Extensions in Java Script , Karma , Jasmine for unit testing , WebKit ,protractor e2e testing

@import 'variables.less';

input[type=checkbox].sui-check {
	height: @check-size;
	position: relative;
	top: 6px;
	width: @check-size;
	&:checked+.sui-validate {
		color: @selected-color;
	}
	&:disabled+.sui-validate {
		color: @disabled;
	}
}
input[type=radio].sui-radio {
	height: @check-size;
	position: relative;
	top: 6px;
	width: @check-size;
	&:checked+.sui-validate {
		color: @selected-color;
	}
	&:disabled+.sui-validate {
		color: @disabled;
	}
}
.sui-input-group {
	margin-bottom: 24px;
	margin-top: 24px;
}
.sui-group {
	margin-bottom: 24px;
	margin-top: 24px;
}
.sui-input {
	border: none;
	border-bottom: 1px solid @border;
	display: block;
	padding: 8px;
	width: 100%;
}
.sui-input-inline {
	border: none;
	border-bottom: 1px solid @border;
	display: inline;
	padding: 8px;
}
.sui-label{color:@label-color}.sui-input:not(:valid)~.sui-validate{color:@danger}
.sui-select {
	border: 1px solid transparent;
	color: @fg-color;
	padding: 8.5px;
	select {
		&:focus {
			border: 1px solid @selected-color;
			color: @fg-color;
		}
	}
	option[disabled] {
		color: @selected-color;
	}
	border-bottom: 1px solid @border;
}
.sui-dropdown-click {
	cursor: pointer;
	display: inline-block;
	position: relative;
}
.sui-dropdown-hover {
	cursor: pointer;
	display: inline-block;
	position: relative;
	&:hover {
		.sui-dropdown-content {
			display: block;
			z-index: 1;
		}
	}
}
.sui-dropdown-content {
	background-color: @bg-color;
	color: @fg-color;
	cursor: auto;
	display: none;
	margin: 0;
	min-width: 160px;
	padding: 0;
	position: absolute;
	a {
		display: block;
		padding: 6px 16px;
	}
}

.sui-text-error {
	color: @danger;
}

.sui-danger {
	background: @danger;
	color: white;
}

.sui-success {
	background: @success;
	color: white;
}

.sui-info {
	background: @info;
	color: white;
}