react-dropdown-z
Version:
React hook. Simple dropdown. (Lib)
1 lines • 6.43 kB
CSS
.ps{overflow:hidden;overflow-anchor:none;-ms-overflow-style:none;touch-action:auto;-ms-touch-action:auto}.ps__rail-x{height:15px;bottom:0}.ps__rail-x,.ps__rail-y{display:none;opacity:0;transition:background-color .2s linear,opacity .2s linear;-webkit-transition:background-color .2s linear,opacity .2s linear;position:absolute}.ps__rail-y{width:15px;right:0}.ps--active-x>.ps__rail-x,.ps--active-y>.ps__rail-y{display:block;background-color:transparent}.ps--focus>.ps__rail-x,.ps--focus>.ps__rail-y,.ps--scrolling-x>.ps__rail-x,.ps--scrolling-y>.ps__rail-y,.ps:hover>.ps__rail-x,.ps:hover>.ps__rail-y{opacity:.6}.ps .ps__rail-x.ps--clicking,.ps .ps__rail-x:focus,.ps .ps__rail-x:hover,.ps .ps__rail-y.ps--clicking,.ps .ps__rail-y:focus,.ps .ps__rail-y:hover{background-color:#eee;opacity:.9}.ps__thumb-x{transition:background-color .2s linear,height .2s ease-in-out;-webkit-transition:background-color .2s linear,height .2s ease-in-out;height:6px;bottom:2px}.ps__thumb-x,.ps__thumb-y{background-color:#aaa;border-radius:6px;position:absolute}.ps__thumb-y{transition:background-color .2s linear,width .2s ease-in-out;-webkit-transition:background-color .2s linear,width .2s ease-in-out;width:6px;right:2px}.ps__rail-x.ps--clicking .ps__thumb-x,.ps__rail-x:focus>.ps__thumb-x,.ps__rail-x:hover>.ps__thumb-x{background-color:#999;height:11px}.ps__rail-y.ps--clicking .ps__thumb-y,.ps__rail-y:focus>.ps__thumb-y,.ps__rail-y:hover>.ps__thumb-y{background-color:#999;width:11px}@supports (-ms-overflow-style:none){.ps{overflow:auto}}@media (-ms-high-contrast:none),screen and (-ms-high-contrast:active){.ps{overflow:auto}}.list-dk-scroll-view .ps__thumb-x{bottom:0}.list-dk-scroll-view .ps__rail-y{left:auto}.list-dk-scroll-view .ps__rail-x,.list-dk-scroll-view .ps__rail-y{z-index:1}.list-dk-scroll-view.perfect-list{position:relative;width:100%;padding:0;margin:0;overflow:hidden}.list-dk-scroll-view.perfect-list .scroll-content{position:relative;display:block;width:100%;height:inherit;max-height:inherit}.list-dk-scroll-view.perfect-list .scroll-content.scroll-always>.ps__rail-x,.list-dk-scroll-view.perfect-list .scroll-content.scroll-always>.ps__rail-y{opacity:.65}.list-dk-scroll-view.perfect-list .scroll-content.scroll-wheel-stop{overscroll-behavior:contain}.list-dk-scroll-view.perfect-list.ps{border:0}.list-dk-scroll-view.perfect-list.ps.scroll-always>.ps__rail-x,.list-dk-scroll-view.perfect-list.ps.scroll-always>.ps__rail-y{opacity:.65}.list-dk-scroll-view.perfect-table{width:100%;border-collapse:collapse;margin:0}.list-dk-scroll-view.perfect-table thead{display:block}.list-dk-scroll-view.perfect-table thead tr{display:table;width:100%;table-layout:fixed}.list-dk-scroll-view.perfect-table tbody{display:block;position:relative;overflow:hidden}.list-dk-scroll-view.perfect-table tbody tr{display:table;width:100%;table-layout:fixed}.list-dk-scroll-view.perfect-table tbody.ps{border:0}.list-dk-scroll-view.perfect-table tbody.scroll-always>.ps__rail-x,.list-dk-scroll-view.perfect-table tbody.scroll-always>.ps__rail-y{opacity:.65}.list-dk-scroll-view.perfect-table tbody.scroll-wheel-stop{overscroll-behavior:contain}@keyframes dropdown2-fade-in-out{0%{opacity:0}50%{opacity:1}}.dp-dropdown2-container{position:relative;display:inline-flex;flex-direction:column;user-select:none}.dp-dropdown2-container .dropdown2-button{display:flex;align-items:center;position:relative;color:#212529;background-color:#e2e6ea;border-color:#f8f9fa;text-align:left;cursor:pointer;height:100%;font-weight:400;white-space:nowrap;vertical-align:middle;outline:none;border:none;border-radius:4px;padding:.375rem 2rem .375rem .5rem;font-size:1rem;line-height:1.2;min-height:32px}.dp-dropdown2-container .dropdown2-button:disabled{opacity:.65;pointer-events:none}.dp-dropdown2-container .dropdown2-button.dropdown2-button-no-data{pointer-events:none}.dp-dropdown2-container .dropdown2-button .dropdown2-arrow{position:absolute;display:inline-block;transform:translateY(-56%);top:56%;right:.75rem;width:0;height:0;margin-left:.255em;vertical-align:.255em;content:" ";border-color:#999 transparent;border-style:solid solid none;border-width:.3em .3em 0}.dp-dropdown2-container .dropdown2-button .dropdown2-arrow.dropdown2-arrow-active{transform:rotate(180deg);top:45%}.dp-dropdown2-container .dropdown2-button .dropdown2-label{display:block;width:100%;margin-left:.375rem;overflow:hidden;text-overflow:ellipsis}.dp-dropdown2-container .dropdown2-button .dropdown2-label.dropdown2-selected{font-weight:400}.dp-dropdown2-container .dropdown2-button .dropdown2-label.dropdown2-placeholder{color:#777}.dp-dropdown2-container .dropdown2-list-default{overflow-y:auto}.dp-dropdown2-container .dropdown2-list-items{position:absolute;display:flex;flex-direction:column;color:#212529;background-color:#fff;font-size:1rem;text-align:left;border-radius:.25rem;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);background-clip:padding-box;z-index:1099;-webkit-animation:dropdown2-fade-in-out .6s linear forwards;animation:dropdown2-fade-in-out .6s linear forwards;transition:all .2s ease;-webkit-overflow-scrolling:touch}.dp-dropdown2-container .dropdown2-list-items .dropdown2-group-item{padding:0 2px;font-style:italic}.dp-dropdown2-container .dropdown2-list-items .dropdown2-item{display:block;width:100%;padding:.375rem .5rem;text-decoration:none;min-height:32px;padding-right:1rem;cursor:pointer;clear:both;font-weight:400;color:#212529;text-align:inherit;white-space:nowrap;background-color:transparent;border:0}.dp-dropdown2-container .dropdown2-list-items .dropdown2-item:hover{background-color:#f2f9fc;border-radius:.25rem}.dp-dropdown2-container .dropdown2-list-items .dropdown2-item.dropdown2-item-disabled{opacity:.65;pointer-events:none}.dp-dropdown2-container .dropdown2-list-items .dropdown2-item.dropdown2-item-selected{background-color:#f2f9fc;color:#333}.dp-dropdown2-container .dropdown2-list-items .dropdown2-item>span{display:block;margin:0;line-height:24px;width:98%;white-space:normal;text-overflow:ellipsis;overflow:hidden;word-break:break-all;padding:.25rem .375rem}.dp-dropdown2-container .dropdown2-list-items .dropdown2-item-tooltip>span{padding:0}.dp-dropdown2-container .dropdown2-list-items .dropdown2-item-tooltip>span>span{width:96%;padding:.25rem 0 .25rem .5rem}