de.swm.commons.mobile.client.theme.bootstrap.css.searchbox.css Maven / Gradle / Ivy

@url searchImage searchSearchImage;
@url clearImage searchClearImage;
@url clearTouchedImage searchClearTouchedImage;

@if swmmobile.css pretty {
	@external mgwt-SearchBox, round, input, clear, clear-active, inputAsLabel;
}

.mgwt-SearchBox {
	height: 60px;
	padding-left: 5px;
	padding-right: 5px;
	position: relative;
	background-size: 100% 44px;
	background-repeat: repeat;
	background-position: 0px 0px;
}

.mgwt-SearchBox .round {
		background-clip: padding-box;
		background-image: searchImage;
		background-repeat: no-repeat;
		background-position: 10px 50%;
        border: 1px solid #ccc;
		width: 100%;
		height: 40px;
		
		display: block;
		position: relative;
		top: 10px;
		margin: 0px;
		padding: 0px;
}


.mgwt-SearchBox .round {
	border-bottom-left-radius: 16px 16px;
	border-bottom-right-radius: 16px 16px;
	border-top-left-radius: 16px 16px;
	border-top-right-radius: 16px 16px;
	background-color: white;
}



.mgwt-SearchBox .input {
	border: 0;
	font-size: 16px;
	padding: 0;
	position: absolute;
	display:block;
	top: 0px;
	left: 25px;
	right: 60px;
	bottom: 0px;
}


.mgwt-SearchBox .inputAsLabel {
	border: 0;
	font-size: 16px;
	padding: 0;
	position: absolute;
	display:block;
	top: 10px;
	left: 25px;
	right: 60px;
	bottom: 0px;
	color: black;
}



.mgwt-SearchBox .input {
	\-webkit-appearance: none;
	\-webkit-user-select: text;
	\-webkit-tap-highlight-color: rgba(0,0,0,0);
}




.mgwt-SearchBox .clear {
	position: absolute;
	top: -3px;
	right: 10px;
	width: 40px;
	height: 40px;
	font-size: 16px;
	padding: 0;
	background-image: clearImage;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

.mgwt-SearchBox .clear-active {
	background-image: clearTouchedImage;
}