hy-checkbox/lib/Input/input.less

checkbox & radio ui components for react

/*
 * @Author: SiMeiyu 
 * @Date: 2017-07-04 10:02:45 
 */ 

@import "../../app/variables.less";

.@{ult-prefix}-input {
	background-color: @input-bg;
	background-image: none;
	border: 1px solid @input-border;
	border-radius: @border-radius;
	color: @input-color;
	display: inline-block;
	width: 100%;
	height: @base-space * 4;
	padding: @base-space / 2 @base-space;
	font-size: @font-size-base;
	line-height: @base-space * 3 - 2px;
	transition: border-color 0.15s ease-in-out 0s;
	&:focus {
		border-color: @primary;
	}
	// &[readonly],
	&[disabled] {
		background-color: @input-disable-bg;
		border-color: @input-disable-border;
		color: @input-disable-color;
		cursor: not-allowed;
	}
	
	&::-moz-placeholder {
			color: @text-disable;
	}
	&:-ms-input-placeholder {
			color: @text-disable;
	}
	&::-webkit-input-placeholder {
			color: @text-disable;
	} 
	&-icon {
		position: relative;
		.@{ult-prefix}-input {
			padding-left: @base-space * 2 + 12px;
		}
		.iconfont {
			position: absolute;
			left: @base-space;
			top: 50%;
			font-size: 12px;
			line-height: 1;
			margin-top: -6px;
			color: @input-group-icon;
		}
		&-right {
			.@{ult-prefix}-input {
				padding-left: @base-space;
				padding-right: @base-space * 2 + 12px;
			}
			.iconfont {
				left: auto;
				right: @base-space;
			}
		}
		&-disabled {
			.iconfont {
				color: @input-disable-color;
			}
		}
	}

	&-group {
		display: flex;
		.rc-select {
			width: auto;
			min-width: @base-space * 10;
			flex: 0 0 @base-space * 10;
			position: relative;
			&-focused {
				z-index: 3;
			}
			.rc-select-selection {
				background-color: @input-disable-bg;
				.rc-select-selection__rendered {
					margin-left: @base-space * 2;
					// padding-right: @base-space * 2;
				}
				.rc-select-arrow {
					border: none;
					background-color: transparent;
					width: 20px;
					b {
						left: 20%;
					}
				}
			}
			&:first-child {
				.rc-select-selection {
					border-top-right-radius: 0;
					border-bottom-right-radius: 0;
				}
			}
			&:last-child {
				.rc-select-selection {
					border-top-left-radius: 0;
					border-bottom-left-radius: 0;
					margin-left: -1px;
				}
			}
			&:not(:first-child):not(:last-child) {
				.rc-select-selection {
					border-radius: 0;
					margin-left: -1px;
				}
			}
				
			&.rc-select-disabled {
				.rc-select-selection {
					border-color: @input-border;
					.rc-select-selection__rendered {					
						color: @input-color;
					}
				}
			}
		}
		.@{ult-prefix}-input {
			flex: 1 1 auto;
		}
		.@{ult-prefix}-btn {
			flex: 0 0 auto;
			.@{ult-prefix}-icon-only {
				flex-basis: @base-space * 4;
			}
		}
		.@{ult-prefix}-input, .@{ult-prefix}-btn {
			position: relative;
			&:focus{
				z-index: 3;
			}
			&:last-child {
				border-top-left-radius: 0;
				border-bottom-left-radius: 0;
				margin-left: -1px;
			}
			&:first-child {
				border-top-right-radius: 0;
				border-bottom-right-radius: 0;
			}
			&:not(:first-child):not(:last-child) {
				border-radius: 0;
				margin-left: -1px;
			}
		}
		&-disabled {
			.rc-select.rc-select-disabled {
				.rc-select-selection {
					border-color: @input-disable-border;
					.rc-select-selection__rendered {					
						color: @input-disable-color;
					}
					.rc-select-arrow b {
						border-top-color: @input-disable-color;
					}
				}
			}
		}
	}
}  

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: @white !important;
    background-image: none !important;
    color: @input-color !important;
}