@import "./miniui.scss";

//Form
//Standard Inputs
textarea,
select,
input[type="text"],
input[type="email"],
input[type="date"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="tel"] {
	padding: 0.5em 1em;
	font-size: 1em;
	background-color: $white;
	border: 1px solid $gray;
	outline: none;
	color: #838fa1;
	border-radius: 0.25em;
	vertical-align: middle;
	font-family: 'Microsoft YaHei', Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;
	transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease;
	-webkit-box-shadow: 0em 0em 0em 0em rgba(0, 0, 0, 0.3) inset;
	box-shadow: 0em 0em 0em 0em rgba(0, 0, 0, 0.3) inset;
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
	box-sizing: border-box;
	height: 2.57142857em;
	line-height: 1.42857142em;
	font-size: 14px;

	&:hover {
		border-color: #9ca8b0;
	}
	&:focus {
		background-color: #eff3f8;
		color: #838fa1;
		border-color: #9ca8b0;
	}
	&.error {
		border-color: $red;
		color: $red;
		-webkit-box-shadow: 0.3em 0em 0em 0em $red inset;
		box-shadow: 0.3em 0em 0em 0em #FF5050 inset;
	}
	&.error:focus {
		border: 1px solid $red;
		background: lighten($red, 10%);
	}

	//Size
	&.mini {
		font-size: 12px !important;
		padding: 0.25em .5em;
		height: 1.66666666em;
	}

	&.tiny {
		font-size: 12px !important;
		padding: 0.5em 0.5em;
		height: 2em;
		font-weight: normal;
	}

	&.small {
		font-size: 14px !important;
		padding: 0.5em 0.5em;
		height: 2.28571429em;
		font-weight: normal;
	}

	&.large {
		font-size: 16px !important;
		padding: 0.8125em;
		height: 2.625em;
		font-weight: normal;
	}

	&.big { font-size: 20px !important; }

	&.disabled,
	&:disabled,
	&.disabled:hover,
	&:disabled:hover,
	&.disabled:focus,
	&:disabled:focus {
		cursor: not-allowed;
		background-color: lighten($lightgray, 3%);
		color: #838fa1;
		border-color: #eee;
	}

	&.input-block {
		display: block;
		width: 100%;
	}

}
input:-webkit-autofill {
	background-color:rgba(0,0,0,0);
	background-image: none;
	color: #000;
}

select {
	height: 2.57142857em;
	border-radius: 0.14285714;
}

.textarea,
.form textarea {
	line-height: 1.33;
	min-height: 8em;
	height: 12em;
	max-height: 24em;
	resize: vertical;
}

.form textarea,
.form input[type="checkbox"], .form input[type="radio"] { vertical-align: middle; margin-right: 0.5em;}

//color
@mixin input-color ($name, $color) {
	input.#{"" + $name} {
		color: $color;
		border: 1px solid lighten($color,20%);
	}
	input.#{"" + $name}:hover, input.#{"" + $name}:focus {
		color: $color;
		border: 1px solid $color;
	}
}

@each $name, $color in $color-list {
	@include input-color($name, $color);
}




/*--------------------
    checkbox & radio
---------------------*/
.radio { display: inline-block; position: relative;}





//Group
.input-append,
.input-prepend {
	font-size: 1em;
	white-space: nowrap;
	position: relative;
	height: 2.57142857em;
	display: inline-block;
	vertical-align: middle;

	&.input-block {
		display: block;
		width: 100%;
	}
}

.input-append input {
	z-index: 1;
	padding-right: 3em;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	display: block;
}

.input-append .add-on {
	right: 0;
	left: auto;
}

.input-prepend input {
	z-index: 1;
	position: absolute;
	left: 0;
	top: 0;
	padding-left: 3em;
	width: 100%;
	display: block;
}

.input-prepend .add-on {
	left: 0;
	right: auto;
}

span.add-on {
	z-index: 2;
	text-align: center;
	box-sizing: border-box;
	display: table-cell;
	position: absolute;
	width: 3em;
	text-align: center;
	line-height: 2.57142857em;
	top: 1px;
	color: rgba(0,0,0,0.4);
}


// group

.form-group {
	display: inline-block;
	margin: 0 0.25em 0 0;

	&>* {
		margin: 0 auto !important;
		vertical-align: middle;

		&:not(:first-child):not(:last-child) {
			border-radius: 0;
			border-right: 0;
			border-left: 1;

			&>.dropdown-toggler .button, &>.dropdown-toggler .dropdown-header {
				margin: 0 auto !important;
				border-radius: 0;
				border-right: 0;
				border-left: 1;
			}
		}

		&:first-child:not(:last-child) {
			border-top-right-radius: 0;
	    border-bottom-right-radius: 0;
			border-right: 0;
			&>.dropdown-toggler .button, &>.dropdown-toggler .dropdown-header {
				margin: 0 auto !important;
				border-top-right-radius: 0;
		    border-bottom-right-radius: 0;
				border-right: 0;
			}
		}

		&:last-child:not(:first-child) {
			border-top-left-radius: 0;
	    border-bottom-left-radius: 0;
			&>.dropdown-toggler .button, &>.dropdown-toggler .dropdown-header {
				margin: 0 auto !important;
				border-top-left-radius: 0;
		    border-bottom-left-radius: 0;
			}
		}
	}
}


// group
// .form-group {
// 	display: inline-block;
// 	margin: 0 0.25em 0 0;
//
// 	&>.input {
// 		margin: 0 auto !important;
//
// 		&:not(:first-child):not(:last-child) {
// 			border-radius: 0;
// 		}
// 		&:first-child:not(:last-child) {
// 			border-top-right-radius: 0;
// 	    border-bottom-right-radius: 0;
// 		}
// 		&:last-child:not(:first-child) {
// 			border-top-left-radius: 0;
// 	    border-bottom-left-radius: 0;
// 		}
// 	}
//
// 	&>.button {
// 		margin: 0 auto !important;
//
// 		&:not(:first-child):not(:last-child) {
// 			border-radius: 0;
// 			border-right: 0;
// 			border-left: 0;
// 		}
// 		&:first-child:not(:last-child) {
// 			border-top-right-radius: 0;
// 	    border-bottom-right-radius: 0;
// 			border-right: 0;
// 		}
// 		&:last-child:not(:first-child) {
// 			border-top-left-radius: 0;
// 	    border-bottom-left-radius: 0;
// 			border-left: 0;
// 		}
// 	}
//
// 	&>.dropdown {
// 		margin: 0 auto !important;
// 		vertical-align: middle;
//
// 		&:not(:first-child):not(:last-child) .dropdown-header {
// 			border-radius: 0;
// 			border-right: 0;
// 			border-left: 0;
// 		}
// 		&:first-child:not(:last-child) .dropdown-header {
// 			border-top-right-radius: 0;
// 	    border-bottom-right-radius: 0;
// 			border-right: 0;
// 		}
// 		&:last-child:not(:first-child) .dropdown-header {
// 			border-top-left-radius: 0;
// 	    border-bottom-left-radius: 0;
// 			border-left: 0;
// 		}
// 	}
// }