/** * 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/keystonejs/react-select */ .Select { position: relative; } .Select-control { position: relative; overflow: hidden; background-color: #ffffff; border: 1px solid #cccccc; border-color: #d9d9d9 #cccccc #b3b3b3; border-radius: 4px; box-sizing: border-box; color: #333333; cursor: default; outline: none; padding: 8px 52px 8px 10px; transition: all 200ms ease; } .Select-control:hover { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); } .is-searchable.is-open > .Select-control { cursor: text; } .is-open > .Select-control { border-bottom-right-radius: 0; border-bottom-left-radius: 0; background: #ffffff; border-color: #b3b3b3 #cccccc #d9d9d9; } .is-open > .Select-control > .Select-arrow { border-color: transparent transparent #999999; border-width: 0 5px 5px; } .is-searchable.is-focused:not(.is-open) > .Select-control { cursor: text; } .is-focused:not(.is-open) > .Select-control { border-color: #0088cc #0099e6 #0099e6; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 5px -1px rgba(0, 136, 204, 0.5); } .Select-placeholder { color: #aaaaaa; padding: 8px 52px 8px 10px; position: absolute; top: 0; left: 0; right: -15px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .has-value > .Select-control > .Select-placeholder { color: #333333; } .Select-input > input { cursor: default; background: none transparent; box-shadow: none; height: auto; border: 0 none; font-family: inherit; font-size: inherit; margin: 0; padding: 0; outline: none; display: inline-block; -webkit-appearance: none; } .is-focused .Select-input > input { cursor: text; } .Select-control:not(.is-searchable) > .Select-input { outline: none; } .Select-loading { -webkit-animation: Select-animation-spin 400ms infinite linear; -o-animation: Select-animation-spin 400ms infinite linear; animation: Select-animation-spin 400ms infinite linear; width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; border: 2px solid #cccccc; border-right-color: #333333; display: inline-block; position: relative; margin-top: -8px; position: absolute; right: 30px; top: 50%; } .has-value > .Select-control > .Select-loading { right: 46px; } .Select-clear { color: #999999; cursor: pointer; display: inline-block; font-size: 16px; padding: 6px 10px; position: absolute; right: 17px; top: 0; } .Select-clear:hover { color: #c0392b; } .Select-clear > span { font-size: 1.1em; } .Select-arrow-zone { content: " "; display: block; position: absolute; right: 0; top: 0; bottom: 0; width: 30px; cursor: pointer; } .Select-arrow { border-color: #999999 transparent transparent; border-style: solid; border-width: 5px 5px 0; content: " "; display: block; height: 0; margin-top: -ceil(2.5px); position: absolute; right: 10px; top: 14px; width: 0; cursor: pointer; } .Select-menu-outer { border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: #ffffff; border: 1px solid #cccccc; border-top-color: #e6e6e6; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); box-sizing: border-box; margin-top: -1px; max-height: 200px; position: absolute; top: 100%; width: 100%; z-index: 1000; -webkit-overflow-scrolling: touch; } .Select-menu { max-height: 198px; overflow-y: auto; } .Select-option { box-sizing: border-box; color: #666666; cursor: pointer; display: block; padding: 8px 10px; } .Select-option:last-child { border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } .Select-option.is-focused { background-color: #f2f9fc; color: #333333; } .Select-option.is-disabled { color: #cccccc; cursor: not-allowed; } .Select-noresults { box-sizing: border-box; color: #999999; cursor: default; display: block; padding: 8px 10px; } .Select.is-multi .Select-control { padding: 2px 52px 2px 3px; } .Select.is-multi .Select-input { vertical-align: middle; border: 1px solid transparent; margin: 2px; padding: 3px 0; } .Select-item { background-color: #f2f9fc; border-radius: 2px; border: 1px solid #c9e6f2; color: #0088cc; display: inline-block; font-size: 1em; margin: 2px; } .Select-item-icon, .Select-item-label { display: inline-block; vertical-align: middle; } .Select-item-label { cursor: default; border-bottom-right-radius: 2px; border-top-right-radius: 2px; padding: 3px 5px; } .Select-item-label .Select-item-label__a { color: #0088cc; cursor: pointer; } .Select-item-icon { cursor: pointer; border-bottom-left-radius: 2px; border-top-left-radius: 2px; border-right: 1px solid #c9e6f2; padding: 2px 5px 4px; } .Select-item-icon:hover, .Select-item-icon:focus { background-color: #ddeff7; color: #0077b3; } .Select-item-icon:active { background-color: #c9e6f2; } .Select.is-multi.is-disabled .Select-item { background-color: #f2f2f2; border: 1px solid #d9d9d9; color: #888888; } .Select.is-multi.is-disabled .Select-item-icon { cursor: not-allowed; border-right: 1px solid #d9d9d9; } .Select.is-multi.is-disabled .Select-item-icon:hover, .Select.is-multi.is-disabled .Select-item-icon:focus, .Select.is-multi.is-disabled .Select-item-icon:active { background-color: #f2f2f2; } @keyframes Select-animation-spin { to { transform: rotate(1turn); } } @-webkit-keyframes Select-animation-spin { to { -webkit-transform: rotate(1turn); } }