react-selectize-wesm87
Version:
A Stateless & Flexible Select component for React inspired by Selectize
1 lines • 12.7 kB
CSS
.react-selectize{color:#000}.react-selectize.root-node{position:relative;width:300px;}.react-selectize.root-node.disabled{pointer-events:none}.react-selectize.root-node .react-selectize-control{cursor:pointer;display:flex;align-items:flex-start;position:relative;padding:2px;}.react-selectize.root-node .react-selectize-control .react-selectize-placeholder{display:block;line-height:30px;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap;position:absolute;max-width:calc(100% - 56px)}.react-selectize.root-node .react-selectize-control .react-selectize-search-field-and-selected-values{display:flex;min-height:30px;flex-grow:1;flex-wrap:wrap;}.react-selectize.root-node .react-selectize-control .react-selectize-search-field-and-selected-values .resizable-input{background:none;border:none;outline:none;font-size:1em;margin:2px;padding:4px 0;vertical-align:middle;width:0}.react-selectize.root-node .react-selectize-control .react-selectize-search-field-and-selected-values .value-wrapper{display:flex;align-items:center}.react-selectize.root-node .react-selectize-control .react-selectize-reset-button-container,.react-selectize.root-node .react-selectize-control .react-selectize-toggle-button-container{flex-grow:0;flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center;height:30px}.react-selectize.root-node .react-selectize-control .react-selectize-reset-button-container{width:16px}.react-selectize.root-node .react-selectize-control .react-selectize-toggle-button-container{width:32px}.react-selectize.root-node .react-selectize-control .react-selectize-reset-button-container:hover .react-selectize-reset-button path{stroke:#c0392b}.react-selectize.root-node .react-selectize-control .react-selectize-reset-button path{transition:stroke 0.5s 0s ease;stroke:#999;stroke-linecap:square;stroke-linejoin:mitter}.react-selectize.root-node .react-selectize-control .react-selectize-toggle-button path{fill:#999}.react-selectize.dropdown-menu-wrapper{position:absolute;}.react-selectize.dropdown-menu-wrapper.tethered{min-width:300px}.react-selectize.dropdown-menu-wrapper:not(.tethered){width:100%}.react-selectize.dropdown-menu{box-sizing:border-box;overflow:auto;position:absolute;max-height:200px;z-index:10;}.react-selectize.dropdown-menu.tethered{min-width:300px}.react-selectize.dropdown-menu:not(.tethered){width:100%}.react-selectize.dropdown-menu .groups.as-columns{display:flex;}.react-selectize.dropdown-menu .groups.as-columns > div{flex:1}.react-selectize.dropdown-menu .option-wrapper{cursor:pointer;outline:none}.multi-select.react-selectize.root-node .simple-value{display:inline-block;margin:2px;vertical-align:middle;}.multi-select.react-selectize.root-node .simple-value span{display:inline-block;padding:2px 5px 4px;vertical-align:center}.simple-select.react-selectize.root-node .simple-value{margin:2px;}.simple-select.react-selectize.root-node .simple-value span{display:inline-block;vertical-align:center}.react-selectize.default{font-family:Helvetica Neue,Helvetica,Arial,sans-serif}.react-selectize.default.root-node .react-selectize-control{background-color:#fff;border:1px solid;border-color:#d9d9d9 #ccc #b3b3b3;border-radius:4px;font-size:1em;}.react-selectize.default.root-node .react-selectize-control .react-selectize-placeholder{color:#aaa;text-indent:8px}.react-selectize.default.root-node .react-selectize-control .react-selectize-search-field-and-selected-values{padding-left:5px}.react-selectize.default.root-node.open.flipped .react-selectize-control{border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-top-left-radius:0;border-top-right-radius:0}.react-selectize.default.root-node.open:not(.flipped) .react-selectize-control{border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-left-radius:4px;border-top-right-radius:4px}.react-selectize.dropdown-menu-wrapper.default{overflow:hidden;}.react-selectize.dropdown-menu-wrapper.default .dropdown-menu.custom-enter-active,.react-selectize.dropdown-menu-wrapper.default .dropdown-menu.custom-leave-active{transition:transform 0.2s 0s ease}.react-selectize.dropdown-menu-wrapper.default .dropdown-menu.flipped.custom-enter{transform:translateY(100%)}.react-selectize.dropdown-menu-wrapper.default .dropdown-menu.flipped.custom-enter-active{transform:translateY(0%)}.react-selectize.dropdown-menu-wrapper.default .dropdown-menu.flipped.custom-leave{transform:translateY(0%)}.react-selectize.dropdown-menu-wrapper.default .dropdown-menu.flipped.custom-leave-active{transform:translateY(100%)}.react-selectize.dropdown-menu-wrapper.default .dropdown-menu:not(.flipped).custom-enter{transform:translateY(-100%)}.react-selectize.dropdown-menu-wrapper.default .dropdown-menu:not(.flipped).custom-enter-active{transform:translateY(0%)}.react-selectize.dropdown-menu-wrapper.default .dropdown-menu:not(.flipped).custom-leave{transform:translateY(0%)}.react-selectize.dropdown-menu-wrapper.default .dropdown-menu:not(.flipped).custom-leave-active{transform:translateY(-100%)}.react-selectize.dropdown-menu.default{background:#fff;border:1px solid #ccc;margin-top:-1px;}.react-selectize.dropdown-menu.default.flipped{border-top-left-radius:4px;border-top-right-radius:4px}.react-selectize.dropdown-menu.default:not(.flipped){border-color:#b3b3b3 #ccc #d9d9d9;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.react-selectize.dropdown-menu.default .no-results-found{color:#aaa ;font-style:oblique;padding:8px 10px}.react-selectize.dropdown-menu.default .simple-group-title{background-color:#fafafa;padding:8px 8px}.react-selectize.dropdown-menu.default .option-wrapper.highlight{background:#f2f9fc;color:#333}.react-selectize.dropdown-menu.default .option-wrapper .simple-option{color:#666;cursor:pointer;padding:8px 10px;}.react-selectize.dropdown-menu.default .option-wrapper .simple-option.not-selectable{background-color:#f8f8f8;color:#999;cursor:default;font-style:oblique;text-shadow:0 1px 0 #fff}.multi-select.react-selectize.default.root-node .simple-value{background:#f2f9fc;border:1px solid #c9e6f2;border-radius:2px;color:#08c}.simple-select.react-selectize.default.root-node.open .react-selectize-control{background-color:#fff}.simple-select.react-selectize.default.root-node:not(.open) .react-selectize-control{background-color:#f9f9f9;background-image:linear-gradient(to bottom, #fefefe, #f2f2f2)}.react-selectize.bootstrap3{font-family:Helvetica Neue,Helvetica,Arial,sans-serif}.react-selectize.bootstrap3.root-node.open .react-selectize-control{background-color:#fff;border:1px solid #66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(102,175,233,0.6)}.react-selectize.bootstrap3.root-node .react-selectize-control{border:1px solid;border-color:#d9d9d9 #ccc #b3b3b3;border-radius:4px;font-size:1em;}.react-selectize.bootstrap3.root-node .react-selectize-control .react-selectize-placeholder{color:#aaa;text-indent:8px}.react-selectize.bootstrap3.root-node .react-selectize-control .react-selectize-search-field-and-selected-values{padding-left:5px}.react-selectize.bootstrap3.dropdown-menu-wrapper.flipped{margin-bottom:5px}.react-selectize.bootstrap3.dropdown-menu-wrapper:not(.flipped){margin-top:5px}.react-selectize.bootstrap3.dropdown-menu-wrapper .dropdown-menu.custom-enter-active,.react-selectize.bootstrap3.dropdown-menu-wrapper .dropdown-menu.custom-leave-active{transition:opacity 0.2s 0s ease}.react-selectize.bootstrap3.dropdown-menu-wrapper .dropdown-menu.custom-enter{opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)}.react-selectize.bootstrap3.dropdown-menu-wrapper .dropdown-menu.custom-enter-active{opacity:1;-ms-filter:none;filter:none}.react-selectize.bootstrap3.dropdown-menu-wrapper .dropdown-menu.custom-leave{opacity:1;-ms-filter:none;filter:none}.react-selectize.bootstrap3.dropdown-menu-wrapper .dropdown-menu.custom-leave-active{opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)}.react-selectize.bootstrap3.dropdown-menu{background:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 6px 12px rgba(0,0,0,0.175);}.react-selectize.bootstrap3.dropdown-menu.flipped{margin-bottom:5px}.react-selectize.bootstrap3.dropdown-menu:not(.flipped){margin-top:5px}.react-selectize.bootstrap3.dropdown-menu .no-results-found{color:#aaa ;font-style:oblique;padding:8px 10px}.react-selectize.bootstrap3.dropdown-menu .groups:not(.as-columns) > div:not(:first-child){border-top:1px solid #e5e5e5;margin:12px 0 0 0}.react-selectize.bootstrap3.dropdown-menu .simple-group-title{background-color:#fff;color:#999;padding:8px 8px;text-shadow:0 1px 0 rgba(0,0,0,0.05)}.react-selectize.bootstrap3.dropdown-menu .option-wrapper.highlight{background:#428bca;}.react-selectize.bootstrap3.dropdown-menu .option-wrapper.highlight .simple-option{color:#fff}.react-selectize.bootstrap3.dropdown-menu .option-wrapper .simple-option{color:#333;cursor:pointer;padding:8px 10px;}.react-selectize.bootstrap3.dropdown-menu .option-wrapper .simple-option.not-selectable{background-color:#f8f8f8;color:#999;cursor:default;font-style:oblique;text-shadow:0 1px 0 #fff}.multi-select.react-selectize.bootstrap3.root-node .simple-value{background:#efefef;border-radius:4px;color:#333}.react-selectize.material{font-family:Roboto,sans-serif}.react-selectize.material.root-node.open .react-selectize-control:after{transform:scaleX(1)}.react-selectize.material.root-node .react-selectize-control{border-bottom:1px solid rgba(0,0,0,0.3);}.react-selectize.material.root-node .react-selectize-control:after{background-color:#00bcd4;content:"";transform:scaleX(0);transition:transform 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;position:absolute;left:0;bottom:-1px;width:100%;height:2px}.react-selectize.material.root-node .react-selectize-control .react-selectize-placeholder{color:rgba(0,0,0,0.3);text-indent:4px}.react-selectize.material.dropdown-menu-wrapper.flipped{margin-bottom:8px;}.react-selectize.material.dropdown-menu-wrapper.flipped .dropdown-menu{transform-origin:100% 100%}.react-selectize.material.dropdown-menu-wrapper:not(.flipped){margin-top:8px;}.react-selectize.material.dropdown-menu-wrapper:not(.flipped) .dropdown-menu{transform-origin:0% 0%}.react-selectize.material.dropdown-menu-wrapper .dropdown-menu.custom-enter-active,.react-selectize.material.dropdown-menu-wrapper .dropdown-menu.custom-leave-active{transition:transform 250ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, opacity 250ms cubic-bezier(0.23, 1, 0.32, 1) 0ms}.react-selectize.material.dropdown-menu-wrapper .dropdown-menu.custom-enter{opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);transform:scale(0,0)}.react-selectize.material.dropdown-menu-wrapper .dropdown-menu.custom-enter-active{opacity:1;-ms-filter:none;filter:none;transform:scale(1,1)}.react-selectize.material.dropdown-menu-wrapper .dropdown-menu.custom-leave{opacity:1;-ms-filter:none;filter:none;transform:scale(1,1)}.react-selectize.material.dropdown-menu-wrapper .dropdown-menu.custom-leave-active{opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)}.react-selectize.material.dropdown-menu{background-color:#fff;border-radius:2px;box-shadow:rgba(0,0,0,0.118) 0 1px 6px,rgba(0,0,0,0.118) 0 1px 4px;max-height:250px;padding:8px 0;}.react-selectize.material.dropdown-menu.flipped{margin-bottom:8px}.react-selectize.material.dropdown-menu:not(.flipped){margin-top:8px}.react-selectize.material.dropdown-menu .no-results-found{font-style:oblique;font-size:16px;height:32px;padding:0 16px;display:flex;align-items:center}.react-selectize.material.dropdown-menu .groups:not(.as-columns) > div:not(:last-child){border-bottom:1px solid #e5e5e5}.react-selectize.material.dropdown-menu .simple-group-title{color:#8f8f8f;display:flex;align-items:center;font-size:14px;height:48px;padding:0 10px}.react-selectize.material.dropdown-menu .option-wrapper.highlight{background-color:rgba(0,0,0,0.098)}.react-selectize.material.dropdown-menu .option-wrapper .simple-option{color:rgba(0,0,0,0.875);cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;font-size:16px;height:48px;padding:0 16px;}.react-selectize.material.dropdown-menu .option-wrapper .simple-option.not-selectable{background-color:#f8f8f8;color:#999;cursor:default;font-style:oblique;text-shadow:0 1px 0 #fff}.multi-select.react-selectize.material.root-node .simple-value span{padding:0;}.multi-select.react-selectize.material.root-node .simple-value span:after{content:","}.simple-select.react-selectize.material.root-node .simple-value{margin:4px 3px 3px 2px}