rmc-select-list
Version:
m-select-list ui component for react
219 lines (218 loc) • 7.82 kB
CSS
.rmc-select-list-hide {
display: none ;
}
.rmc-select-list-playground {
position: relative;
}
.rmc-select-list-playground .rmc-select-list-search,
.rmc-select-list-playground,
.rmc-select-list-wrap,
.rmc-select-list-body,
.rmc-select-list-scroller {
box-sizing: border-box;
-ms-touch-action: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
transition: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.rmc-select-list-lighter {
position: absolute;
left: 50%;
top: 50%;
margin: -30px auto auto -60px;
width: 120px;
height: 60px;
background: transparent;
opacity: .7;
color: #0af;
font-size: 40px;
border-radius: 60px;
z-index: 1999;
text-align: center;
line-height: 60px;
}
.rmc-select-list-playground a,
.rmc-select-list-playground a:link,
.rmc-select-list-playground a:visited,
.rmc-select-list-playground a:hover,
.rmc-select-list-playground a:link {
text-decoration: none;
-webkit-tap-highlight-color: transparent;
outline: none;
}
.rmc-select-list-playground ul {
padding: 0;
margin: 0;
}
.rmc-select-list-playground li {
list-style: none;
}
.rmc-select-list-playground .rmc-select-list-search,
.rmc-select-list-playground {
overflow: hidden;
}
.rmc-select-list-wrap,
.rmc-select-list-body {
position: relative;
z-index: 998;
overflow: auto;
overflow-x: hidden;
width: 100%;
height: 100%;
}
.rmc-select-list-scroller {
position: absolute;
left: 0;
top: 0;
z-index: 1;
display: block;
width: 100%;
}
.rmc-select-list-quick-search-bar {
position: absolute;
top: 50%;
right: 0;
z-index: 1999;
margin-top: -120px;
float: right;
text-align: center;
color: #2d68f0;
font-size: 12px;
display: block;
}
.rmc-select-list-quick-search-bar.rmc-select-list-on {
background-color: rgba(128, 128, 128, 0.1);
}
.rmc-select-list-quick-search-bar li > a {
display: block;
color: #000;
padding: 0 8px;
height: 18px;
line-height: 18px;
}
.rmc-select-list-quick-search-bar li > .quick-search-over {
background-color: rgba(128, 128, 128, 0.2);
}
.rmc-select-list-quick-search-bar li > a > i {
margin: 0 auto;
}
.rmc-select-list-content {
background: #fff;
}
.rmc-select-list-content .rmc-select-list-item-order {
box-sizing: border-box;
padding: 10px 15px;
color: #9b9b9b;
font-size: 14px;
background: linear-gradient(0deg, #ffffff, #ffffff) top left no-repeat, linear-gradient(180deg, #ffffff, #ffffff) bottom left no-repeat, linear-gradient(0deg, #e5e5e5, #e5e5e5, transparent, transparent) top left no-repeat, linear-gradient(180deg, #e5e5e5, #e5e5e5, transparent, transparent) bottom left no-repeat, #f5f5f9;
-webkit-background-size: 0px 0px,0px 0px,100% 1px,100% 1px;
}
.rmc-select-list-content .rmc-select-list-item li {
display: block;
background: linear-gradient(0deg, #ffffff, #ffffff) top left no-repeat, linear-gradient(180deg, #ffffff, #ffffff) bottom left no-repeat, linear-gradient(0deg, #e5e5e5, #e5e5e5, transparent, transparent) top left no-repeat, linear-gradient(180deg, #e5e5e5, #e5e5e5, transparent, transparent) bottom left no-repeat, #ffffff;
-webkit-background-size: 0px 0px,15px 1px,0px 0px,100% 1px;
}
.rmc-select-list-content .rmc-select-list-item li:last-child {
-webkit-background-size: 0px 0px,15px 1px,0px 0px,0px 0px;
}
.rmc-select-list-content .rmc-select-list-item li a {
display: block;
line-height: 24px;
font-size: 16px;
padding: 8px 0px;
margin-left: 15px;
margin-right: 32px;
color: #333;
}
.rmc-select-list-content .rmc-select-list-item li:last-child a {
border-bottom: none;
}
.rmc-select-list-icon-clear {
display: block;
width: 16px;
height: 16px;
overflow: hidden;
}
.rmc-select-list-icon-clear:before {
content: "";
display: block;
width: 100%;
height: 100%;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAACs0lEQVR42s1Yz0tUURQWohLKUhcW2a4oRBeaiEQrCRGXLaKippUg/Q3+E/MnOG6EWYnE4AucR8y8+V27saZaRJG1qdQhDcwf3wcjHK7Pd3/gTPPg4w5nzj3nu+eed859t8P2yWQyPeVyOQYkAB+oVSqVOsHfDVmCOtTtaNZTLBYfwGkajnYxHpigoZvm3FMjAqP3gEA4cgJt0JYzkWQyeQaG4jR2yojTthUZ3/e7sZpXNNAM0DZ9GJPBpDVObDLWtKQYSrfIuEcqcvtEzrQS8RPfJir8D9B3GKFcxKQ3hUJhFOM48MnC2R4wD9uLGPejSsKxohdluFQqDR/pgth1yD6akIGj52LBc1H65CBzJ60J6ZBcQC6X64f8Q4T+PyziqZKfdzQLSMvetKsh9AXjDekgm81eg/x9GBngiULmLGRLujZDLgxlzDDxviIyN6UjROEq/nsnjUL2SCkl50jG0EeMhBYskvQb9voWHYmcugJ5tRHlhyFklk3tkwsJ+Zav6Trm3JaOgyDog2xaylKp1HnovrR8/X0SqjnUje/5fH5AElDJQCflYLfGhKs7FrMfyJfBkF7Yif9XHItk3ZUQ8VdskywJvZC/dVzklrJl7mTUY24Fj8uWWSc19Hfwpk1JAp7nXRA5Jc9UZZekTlhM2AYmVTKQvQZ+AiNKQbwMWdHCfoLF7ZkpGejeV6JwEf9lhN4vNmGlTl2CPG/ig1xMWgfxB5hQWkcX5mVDdH/D8FiIbmDSOkyb66y6as1xZQMYl3OYY7rmanr8IKHHMi+AgsEWb8LuXXH8mDY+fvDRhPQzMMFCCL2STV3B+AKYAdYj9IK2O8K2/SFffq16LSTj0afJh2K1BWSqtl+vXjMjQx/tf9nQ/tcx+gurVYcLq1WbCyunKz02QXmlB2wR8kqPOi5XeofRInqx8q/8DQAAAABJRU5ErkJggg==") no-repeat;
background-size: 16px auto;
}
.rmc-select-list-search {
padding: 7px 8px;
display: -webkit-flex;
background: linear-gradient(180deg, #d9d9e1, #d9d9e1, #d9d9e1) bottom left no-repeat, #efeff4;
background-size: 100% 1px;
}
.rmc-select-list-search .rmc-select-list-search-input {
width: 100%;
height: 29px;
margin: 0 auto;
line-height: 29px;
background-color: #fff;
display: -webkit-flex;
-webkit-box-align: center;
-webkit-align-items: center;
-webkit-box-flex: 1;
-webkit-flex: 1;
border-radius: 5px;
background-clip: padding-box;
padding-right: 6px;
}
.rmc-select-list-search .rmc-select-list-search-input input {
width: auto;
text-align: left;
-webkit-appearance: none;
display: block;
padding: 0 0 0 26px;
height: 29px;
border: none;
font-size: 15px;
-webkit-box-flex: 1;
-webkit-flex: 1;
border-radius: 5px 0 0 5px;
background-repeat: no-repeat;
background-position: 6px center;
background-size: 16px 16px;
outline: 0 none;
}
.rmc-select-list-search .rmc-select-list-search-input ::-webkit-input-placeholder {
font-size: 14px;
line-height: 18px;
color: #ccc;
}
.rmc-select-list-search .rmc-select-list-search-input .rmc-select-list-search-clear {
width: 24px;
}
.rmc-select-list-input-autoclear .rmc-select-list-icon-clear {
visibility: hidden;
}
.rmc-select-list-icon-search {
display: block;
width: 16px;
height: 18px;
overflow: hidden;
}
.rmc-select-list-icon-search:before {
content: '';
display: block;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: bottom center;
-webkit-background-size: 16px auto;
}
.rmc-select-list-playground .rmc-select-list-search .rmc-select-list-search-input input.rmc-select-list-search-value,
.rmc-select-list-icon-search:before {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAAyCAMAAAAk/wjEAAAAwFBMVEUAAAC0tLu0tLqurra0tLqwsLezs7oAAAC0tLq0tLq0tLqzs7qysrKwsLa0tLq0tLq0tLm0tLm0tLq0tLqvr7e0tLq0tLqtrbm0tLq0tLqysrm0tLq0tLqqqqqqqqq0tLqxsbmzs7qurq60tLq0tLqysrqiorm0tLixsbiqqrizs7qzs7q0tLq0tLm0tLqzs7mzs7q0tLSzs7qzs7q0tLq0tLmzs7e0tLuysri0tLq0tLq0tLm0tLq0tLq0tLq1tbvM9NIDAAAAP3RSTlMApX8j5ieYAf6q88gKMc78wHH64iBS6BaC03K/2QwJ9CGKE+SJZAttJBLPjqSbfn1HEZJK9eU94Sgpq8es3t2ctfCMAAABeElEQVR4Xu2W2XaDIBCGEdOS4BKNibuxbdqk+75vvP9bdeDkIiJi5fSy/12Qb/wzMzAiSXZuFSWlZWHlNvqVkjRjO8rSpBdZY8okUVzpmUW8BWaR40SzLRYvNAi5HnNgGoQ2Eb/tMJhyaoxJF7OciA3WfHdxbolAk6WaIYLxPXnd8wWlfhcWz1zUkiuiYWUOuI1DZTxyzG0rsrGOhQeN87hSmvNd1CHXVxlMKBjwUKc8ME/l3kghkoU0smBDKkEZ1PRAB82hypnU1xAnQFoFsKXZ8zlAoR4KAcpbjk/1kN361wX0NdFDBHq+aEAlYxHqUcRY2YAoY04f5DBGTaDaxN63SSI+TFL+blLcjUkbvRo07IvJ0cAGh7A+MzjuF0hW1XuxjI6GX2Hs1uCyvDK4ltlob8AAuATbOorgjlHDzmWqf6g9PZB9HVW1x+fj/R1CMqUf1KsbXh4Fpf4kqL+cz80bB2SqX39O/VOrajg1PkFoKDWcAeqZAz8RGGXLP7fpAQAAAABJRU5ErkJggg==");
}