de.swm.commons.mobile.client.theme.base.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%;
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;
}