hy-checkbox/lib/Select/select.less

checkbox & radio ui components for react

/*
 * @Author: SiMeiyu 
 * @Date: 2017-07-04 10:06:39 
 */ 

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

.rc-select {
	width: 100%;
	.rc-select-selection {
		border: 1px solid @input-border;
		box-shadow: none;
		height: @base-space * 4;
		line-height: @base-space * 4;
		border-radius: @border-radius;
		transition: @trans;
		&:hover {
			border-color: @border !important;
			box-shadow: none !important;
		}
		&__rendered {
			height: 30px;
			line-height: 30px;
			margin-left: @base-space;
			padding-right: @base-space * 4;
			font-size: @font-size-base;
			color: @input-color;
		}
		.rc-select-arrow {
			top: 0;
			right: 0;
			height: 30px;
			width: @base-space * 4;
			background-color: @input-group-btn-bg;
			border-left: 1px solid @input-border;
			border-bottom-right-radius: @border-radius;
			border-top-right-radius: @border-radius;
			// b {
			// 	    border-color: transparent transparent @input-group-btn-text @input-group-btn-text;
			// 			border-style: solid;
			// 			border-width: 0 0 1px 1px;
			// 			height: 6px;
			// 			width: 6px;
			// 			margin-left: -2px;
			// 			margin-top: -4px;
			// 			transform: rotate(-45deg);
						
			// }
		}
		&:hover {
			border-color: @primary;
			box-shadow: 0 0 2px @primary;
		}
		&:active {
			border-color: @primary;
		}
	}

	.rc-select-selection--single {
		.rc-select-selection__clear {
			right: @base-space * 5;
		}
	}

	.rc-select-selection--multiple {
		min-height: @base-space * 4;
		height: auto;
		.rc-select-selection__rendered {
			height: auto;
			padding-bottom: 0;
			.rc-select-selection__choice {
				background-color: @input-disable-bg;
				line-height: @base-space * 4 - 2px - 8px;
			}
		}
	}

	&.rc-select-focused .rc-select-selection {
		border-color: @primary !important;
		box-shadow: none !important;
	}
	// &.rc-select-open .rc-select-selection .rc-select-arrow b {
	// 	transform: rotate(135deg);
	// }

	&-disabled {
		.rc-select-selection {
			border-color: @input-disable-border;
			background-color: @input-disable-bg;
			color: @input-disable-color;
			.rc-select-selection__rendered {
				color: @input-disable-color;
			}
			.rc-select-arrow {
				background-color: @input-disable-bg;
				border-left-color: @input-disable-border;
			}
		}
		
		&.rc-select-focused .rc-select-selection {
			border-color: @input-disable-border !important;
		}

		.rc-select-selection--multiple {
			.rc-select-selection__rendered {
				.rc-select-selection__choice {
					background-color: darken(@white, 2%);
				}
			}
		}
	}
}
li.rc-select-dropdown-menu-item {
	font-size: @font-size-base;
	&.rc-select-dropdown-menu-item-active {
		background-color: @primary-active;
	}
}