touchstonejs-ui/less/components/SearchField.less

React.js UI components for the TouchstoneJS platform http://touchstonejs.io

// 
// Search Field
// ==============================




// Base
// ------------------------------

.SearchField {
	.display-flex();
}




// Field
// ------------------------------

.SearchField__field {
	.flex(1,1,0);
	padding: @gutter-sm;
	position: relative;
}




// Input
// ------------------------------

.SearchField__input {
	.placeholder( @gray-light );
	background: rgba(0, 0, 0, 0.06);
	border-radius: @border-radius-small;
	border: 0;
	color: inherit;
	font-size: @font-size-sm;
	height: @searchfield-height;
	line-height: normal;
	margin: 0;
	outline: none;
	padding: @gutter-sm (@ionicons-size-base + (@gutter-sm * 2));
	width: 100%;
	-webkit-appearance: none;
}




// Placeholder
// ------------------------------

.SearchField__placeholder {
	.transition( all @view-transition-duration @view-transition-timing-function );
	color: @gray-light;
	font-size: @font-size-sm;
	line-height: @searchfield-height;
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	text-align: center;
	white-space: nowrap;

	.is-focused & {
		right: 100%;
	}
}




// Icons
// ------------------------------


// base

.SearchField__icon {
	.ion();
	color: #8e8e93;
	font-size: @ionicons-size-base;
	line-height: @searchfield-height;
	padding: 0 @gutter-sm;
	width: @ionicons-size-base + (@gutter-sm * 2);
	
	&::before {
		color: inherit;
	}
}


// search

.SearchField__icon--search {
	left: 0;
	margin-left: @gutter-sm;
	pointer-events: none;
	
	&::before {
		content: @ionicon-var-ios-search;
	}
}


// clear

.SearchField__icon--clear {
	position: absolute;
	padding: @gutter-sm;
	top: 0;
	right: @gutter-sm;
	
	&::before {
		content: @ionicon-var-close-circled;
	}
	&.Tappable-active {
		color: @app-primary;
	}
}




// Cancel
// ------------------------------

.SearchField__cancel {
	.transition( all @view-transition-duration @view-transition-timing-function );
	color: @app-primary;
	line-height: @searchfield-height;
	max-width: 0;
	padding: @gutter-sm 0;
	overflow: hidden;
	white-space: nowrap;

	&.is-visible {
		margin-right: @gutter-sm;
		max-width: 68px;
	}
}