dojox/mobile/themes/common/SearchBox.less

Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.

/* dojox.mobile.SearchBox */
@import url("TextBox.css");

.mblSearchBox.iphone4:focus::-webkit-search-cancel-button
{ // cannot touch cancel button even if visible
	background: none !important;
	border-color: transparent !important;
}

.mblSearchBox::-webkit-search-cancel-button 
{ 
	.appearance(none);
	background-color: @mbl-searchbox-cancel-button-bg-color;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 15px 15px;
	background-image:
		-webkit-gradient(linear,
			left top,
			right bottom,
			from(transparent),
				color-stop(0.46,  transparent),
				color-stop(0.46,  @mbl-searchbox-cancel-button-color),
				color-stop(0.54,  @mbl-searchbox-cancel-button-color),
				color-stop(0.54,  transparent),
			to(transparent)
		),
		-webkit-gradient(linear,
			right top,
			left bottom,
			from(transparent),
				color-stop(0.46,  transparent),
				color-stop(0.46,  @mbl-searchbox-cancel-button-color),
				color-stop(0.54,  @mbl-searchbox-cancel-button-color),
				color-stop(0.54,  transparent),
			to(transparent)
		)
		!important;
	border: 2px solid @mbl-searchbox-cancel-button-bg-color;
	box-sizing: border-box;
	height: 15px;
	width: 15px;
	display: inline-block;
	vertical-align: middle;
	margin-left: 0.5em;
	.mblSearchBox-Cancel-Button-styles;
} 

.mblSearchBox::-webkit-search-results-decoration { 
	.appearance(none); 
	background-repeat: no-repeat;
	background-size: 13px 13px, 9px 9px;
	background-position: 0px 0px, 10px 10px;
	background-image:
		-webkit-gradient(radial,
			50% 50%, 0,
			50% 50%, 6,
			from(transparent),
				color-stop(0.65, transparent),
			color-stop(0.8, @mbl-searchbox-results-decoration-color),
				color-stop(0.95, transparent),
			to(transparent)
		),
		-webkit-gradient(linear,
			right top,
			left bottom,
			from(transparent),
				color-stop(0.425,  transparent),
			color-stop(0.5, @mbl-searchbox-results-decoration-color),
				color-stop(0.575,  transparent),
			to(transparent)
		)
		!important;
	width: 15px;
	height: 15px;
	display: inline-block;
	vertical-align: middle;
}
.mblSearchBox {
	height: auto;
}
.dj_chrome .mblSearchBox {
	border-radius: 0;
}

/* CSS class for the parent DIV of the dojox/mobile/SearchBox used for filtering a 
  dojox/mobile/RoundRectList or subclass. This class is set by dojox/mobile/FilteredListMixin 
  only if the mixin creates the SearchBox by itself. */
.mblFilteredRoundRectListSearchBox {
  width: 100%;
  padding-left: 9px;
  padding-right: 9px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.mblFilteredRoundRectListSearchBox > input {
  width: 100%;
}

/* CSS class for the parent DIV of the dojox/mobile/SearchBox used for filtering a 
  dojox/mobile/EdgeToEdgeList or subclass. This class is set by dojox/mobile/FilteredListMixin 
  only if the mixin creates the SearchBox by itself. */
.mblFilteredEdgeToEdgeListSearchBox {
  width: 100%;
}

.mblFilteredEdgeToEdgeListSearchBox > input {
  width: 100%;
}