134 lines
13 KiB
SCSS
134 lines
13 KiB
SCSS
|
:root {
|
||
|
|
--color : #000;
|
||
|
|
--placeholder-color: #999;
|
||
|
|
--input-bg-color : #f7f7f7;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wx-coolui-scroller-search {
|
||
|
|
display : flex;
|
||
|
|
overflow: hidden;
|
||
|
|
|
||
|
|
.search-inner {
|
||
|
|
background-color: var(--input-bg-color, #f7f7f7);
|
||
|
|
flex : 1;
|
||
|
|
height : 68rpx;
|
||
|
|
margin-right : 0rpx;
|
||
|
|
padding : 0 20rpx 0 68rpx;
|
||
|
|
position : relative;
|
||
|
|
border-radius : 5rpx;
|
||
|
|
display : flex;
|
||
|
|
overflow : hidden;
|
||
|
|
|
||
|
|
&.round {
|
||
|
|
border-radius: 68rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.inner {
|
||
|
|
position: relative;
|
||
|
|
flex : 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-input {
|
||
|
|
height : 68rpx;
|
||
|
|
line-height: 68rpx;
|
||
|
|
font-size : 28rpx;
|
||
|
|
background : transparent;
|
||
|
|
position : relative;
|
||
|
|
z-index : 5;
|
||
|
|
flex : 1;
|
||
|
|
color : var(--color, #000)
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-icon {
|
||
|
|
background-repeat : no-repeat;
|
||
|
|
background-position: center;
|
||
|
|
background-size : 28rpx;
|
||
|
|
width : 68rpx;
|
||
|
|
height : 68rpx;
|
||
|
|
position : relative;
|
||
|
|
overflow : hidden;
|
||
|
|
|
||
|
|
&::after {
|
||
|
|
content : "";
|
||
|
|
display : block;
|
||
|
|
position : absolute;
|
||
|
|
left : -68rpx;
|
||
|
|
top : 0;
|
||
|
|
width : 100%;
|
||
|
|
height : 100%;
|
||
|
|
z-index : 10;
|
||
|
|
background-size : 28rpx;
|
||
|
|
background-repeat : no-repeat;
|
||
|
|
background-position: center;
|
||
|
|
background-image : url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAFFmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNi4wLWMwMDIgNzkuMTY0NDYwLCAyMDIwLzA1LzEyLTE2OjA0OjE3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMiAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDIzLTA4LTMxVDEwOjUzOjEwKzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyMy0wOC0zMVQxMDo1NDoyMCswODowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMy0wOC0zMVQxMDo1NDoyMCswODowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpkM2NjNGQyYS1jMjZmLTVkNDctODJiZS1jZjBkYjc5YzNmOTUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ZDNjYzRkMmEtYzI2Zi01ZDQ3LTgyYmUtY2YwZGI3OWMzZjk1IiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6ZDNjYzRkMmEtYzI2Zi01ZDQ3LTgyYmUtY2YwZGI3OWMzZjk1Ij4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpkM2NjNGQyYS1jMjZmLTVkNDctODJiZS1jZjBkYjc5YzNmOTUiIHN0RXZ0OndoZW49IjIwMjMtMDgtMzFUMTA6NTM6MTArMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyMS4yIChXaW5kb3dzKSIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz64dSbTAAACKklEQVRYhcWXv2tUQRDHPycSrZJOOIkIFyFESBQbIVg8vCZFUiRFUmthZzptvT8gBAvBRjtbFYWApJLjGhubqHgEck1IIDG1dl+Lm43L3vt57503MMy73fnxndndud2aJMZJF8YaHbg4hE0E1IGr9vsIOAY+D4VAUh5elvRG0pmSqSfpuaTFnD6RRC1jD9wBWsCKN/YL6AJ7gIB54ylP5z2wDXTKVGApyPCxpNkU/QVJLzz9P5KirAokTWx6jtqSGgXKuirp0LOfLgqg6Rm3iqxnwC3zsStpogiAj2b4s0Rwx23ztZUXwLKX/d0KADQ8f804nbARrZl8CnzJ3MHZdABs2veDPKfgxNDeqCB7x7Pm8yxrCSJTPKkwuONT8x2lLUHd5PcKSh9SN4hxTj4A19t/jADAXhAjFoCj2ggAuDi/0wAcmZwfAYBbJgeq6wM4HiGAOZOD+yvYlT3brQsVnoDb5nM/TyP6YPJRhdk/NLkbOxsgWtQ/Wq0g+w3z1ZM0k9WIHL8zo8OSwa9Z2SXpSZJe3OA99S8TUrm/423zsSPpUpJeXB/oAEv2/QxoA40h1n7S5HVgJlErJYNp9S8TjtKuZFckrVnFbnrjW2b7LRhPXQKfJzwnjk4ldSS9lPRaUjeY/xT4eJUGIu96NpV9Le/GVMDx2yQQWdfyOIoo/jC5DOwA9+l3w3VcW85ZgSq4LumrVeL8dA1TgTI0B2zQf+wA/HcAAzT21/FfuUOQhF+4UUwAAAAASUVORK5CYII=');
|
||
|
|
filter : drop-shadow(68rpx 0px var(--placeholder-color, #999));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-placeholder {
|
||
|
|
position : absolute;
|
||
|
|
left : 50%;
|
||
|
|
top : 0;
|
||
|
|
transform : translateX(-50%);
|
||
|
|
// padding: 0 76rpx;
|
||
|
|
font-size : 28rpx;
|
||
|
|
// color : #999;
|
||
|
|
text-align : center;
|
||
|
|
line-height : 68rpx;
|
||
|
|
height : 68rpx;
|
||
|
|
transition : transform 0.4s, left 0.3s;
|
||
|
|
display : flex;
|
||
|
|
color : var(--placeholder-color, #999);
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-close {
|
||
|
|
display : none;
|
||
|
|
background-color : var(--input-bg-color, #f7f7f7);
|
||
|
|
width : 40rpx;
|
||
|
|
height : 100%;
|
||
|
|
background-size : cover;
|
||
|
|
position : absolute;
|
||
|
|
right : 0;
|
||
|
|
padding : 0 20rpx 0 20rpx;
|
||
|
|
top : 50%;
|
||
|
|
z-index : 10;
|
||
|
|
transform : translateY(-50%);
|
||
|
|
background-size : 40rpx;
|
||
|
|
background-repeat : no-repeat;
|
||
|
|
background-position: 20rpx center;
|
||
|
|
background-image : url('data:image/png;base64,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
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.button {
|
||
|
|
height : 68rpx;
|
||
|
|
line-height: 68rpx;
|
||
|
|
font-size : 28rpx;
|
||
|
|
padding : 0 14px;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.on {
|
||
|
|
.search-placeholder {
|
||
|
|
text-align: left;
|
||
|
|
left : 0rpx;
|
||
|
|
transform : translateX(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
.button {
|
||
|
|
display : block;
|
||
|
|
margin-left: 20rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.clearable {
|
||
|
|
.search-inner {
|
||
|
|
.search-input {
|
||
|
|
margin-right: 58rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-close {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|