rmc-select-list/assets/index.css

m-select-list ui component for react

.rmc-select-list-hide {
  display: none !important;
}
.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==");
}