/** * React Select * ============ * Created by Jed Watson and Joss Mackison for KeystoneJS, http://www.keystonejs.com/ * https://twitter.com/jedwatson https://twitter.com/jossmackison https://twitter.com/keystonejs * MIT License: https://github.com/JedWatson/react-select */ .Select-input { overflow: hidden; max-width: calc(100% - 20px); } .Select { position: relative; /* width: 100%; */ } .Select-control{ width: 5rem; } .Select-clear-zone{ display: none; } .Select-value{ position: absolute; width: 5rem; margin-top: 5px; } .Select-input{ width: 5rem; margin-top: 5px; } .Select-menu-outer { background-color: #fff; border: 1px solid #ccc; border-top-color: #e6e6e6; box-sizing: border-box; margin-top: -1px; max-height: 200px; position: absolute; right: 0; top: 100%; width: 100%; width: 200px; z-index: 1; -webkit-overflow-scrolling: touch; } .Select-menu { max-height: 198px; overflow-y: auto; } .Select-option { box-sizing: border-box; background-color: #fff; color: #666666; cursor: pointer; display: block; padding: 8px 10px; } .Select .Select-aria-only { position: absolute; display: inline-block; height: 1px; width: 1px; clip: rect(0, 0, 0, 0); overflow: hidden; float: left; } .Select-option { box-sizing: border-box; background-color: #fff; color: #666666; cursor: pointer; display: block; padding: 8px 10px; } .Select-option.is-selected { background-color: #f5faff; background-color: rgba(0, 126, 255, 0.04); color: #333; } .Select-option.is-focused { background-color: #ebf5ff; background-color: rgba(0, 126, 255, 0.08); color: #333; } .Select-option.is-disabled { color: #cccccc; cursor: default; } .Select-noresults { box-sizing: border-box; color: #999999; cursor: default; display: block; padding: 8px 10px; } .Select--multi .Select-input { vertical-align: middle; margin-left: 10px; padding: 0; } .Select--multi.Select--rtl .Select-input { margin-left: 0; margin-right: 10px; } .Select--multi.has-value .Select-input { margin-left: 5px; } .Select--multi .Select-value { background-color: #ebf5ff; background-color: rgba(0, 126, 255, 0.08); /* border: 1px solid #c2e0ff; border: 1px solid rgba(0, 126, 255, 0.24); */ color: #007eff; display: inline-block; font-size: 0.9em; line-height: 1.4; margin-left: 5px; margin-top: 5px; vertical-align: top; } .Select--multi .Select-value-icon, .Select--multi .Select-value-label { display: inline-block; vertical-align: middle; } .Select--multi .Select-value-label { border-bottom-right-radius: 2px; border-top-right-radius: 2px; cursor: default; padding: 2px 5px; } .Select--multi a.Select-value-label { color: #007eff; cursor: pointer; text-decoration: none; } .Select--multi a.Select-value-label:hover { text-decoration: underline; } .Select--multi .Select-value-icon { cursor: pointer; border-bottom-left-radius: 2px; border-top-left-radius: 2px; border-right: 1px solid #c2e0ff; border-right: 1px solid rgba(0, 126, 255, 0.24); padding: 1px 5px 3px; } .Select--multi .Select-value-icon:hover, .Select--multi .Select-value-icon:focus { background-color: #d8eafd; background-color: rgba(0, 113, 230, 0.08); color: #0071e6; } .Select--multi .Select-value-icon:active { background-color: #c2e0ff; background-color: rgba(0, 126, 255, 0.24); } .Select--multi.Select--rtl .Select-value { margin-left: 0; margin-right: 5px; } .Select--multi.Select--rtl .Select-value-icon { border-right: none; border-left: 1px solid #c2e0ff; border-left: 1px solid rgba(0, 126, 255, 0.24); } .Select--multi.is-disabled .Select-value { background-color: #fcfcfc; border: 1px solid #e3e3e3; color: #333; } .Select--multi.is-disabled .Select-value-icon { cursor: not-allowed; border-right: 1px solid #e3e3e3; } .Select--multi.is-disabled .Select-value-icon:hover, .Select--multi.is-disabled .Select-value-icon:focus, .Select--multi.is-disabled .Select-value-icon:active { background-color: #fcfcfc; } .Select input::-webkit-contacts-auto-fill-button, .Select input::-webkit-credentials-auto-fill-button { display: none !important; } .Select input::-ms-clear { display: none !important; } .Select input::-ms-reveal { display: none !important; } .Select, .Select div, .Select input, .Select span { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .Select input:focus{ /* outline: none; */ } .Select.is-searchable.is-open > .Select-control { cursor: text; } .Select.is-searchable.is-focused:not(.is-open) > .Select-control { cursor: text; } .Select.Select--rtl { direction: rtl; text-align: right; } .Select.is-open .Select-input { padding: 0 !important; } .Select.is-open .Select-input, .Select.is-open .Select-input input { width: 100% !important; } .Select.is-open .Select-input input { text-indent: 1px; }