react-cm-ui/core/inputs/dropdown/dropdown.css

React UI for Healthy Church

@keyframes Select-animation-spin{to{transform:rotate(1turn)}}@-webkit-keyframes Select-animation-spin{to{-webkit-transform:rotate(1turn)}}.ui.dropdown{align-items:center;display:inline-flex;justify-content:center;position:relative}.ui.dropdown>.label{margin-bottom:.5em}.ui.dropdown .input-required-indicator{color:#ee4334;display:inline-block;font-size:.875rem;margin-left:3px}.ui.dropdown .dropdown-selection-value{color:#329594;cursor:pointer;font-size:1rem;font-weight:700;text-transform:capitalize}.ui.dropdown>.ui.icon{cursor:pointer}.ui.dropdown .dropdown-selection-value+.ui.icon{margin-left:11px}.ui.dropdown .dropdown-menu{background:#fff;border:1px solid #dbe0e3;border-radius:3px;box-shadow:2px 2px 2px 0 rgba(0,0,0,.06);flex:1 0 auto;list-style:none;margin:5px 0;padding:0;position:absolute;z-index:8000}.ui.dropdown .dropdown-menu li{padding:.25rem 0}.ui.dropdown .dropdown-menu li:first-child{padding-top:.6875rem}.ui.dropdown .dropdown-menu li:last-child{padding-bottom:.6875rem}.ui.dropdown .dropdown-menu li>span{align-items:center;color:#1c2530;cursor:pointer;display:flex;font-size:.875rem;font-weight:600;justify-content:flex-start;padding:.4375rem 1.375rem;text-align:left;transition:color 150ms ease-out;white-space:nowrap}.ui.dropdown .dropdown-menu li>span:hover{background-color:#00aeef;color:#fff}.ui.dropdown .dropdown-menu li.dropdown-item-is-disabled span{color:#97a4ab;cursor:default;pointer-events:none}.ui.dropdown .dropdown-menu.dropdown-menu-columns li{padding:.4375rem 1.375rem}.ui.dropdown .dropdown-menu.dropdown-menu-columns li>span{border-radius:.1875rem;padding:0}.ui.dropdown:not(.dropdown-menu-theme-dark) .dropdown-menu li>span:hover .ui.icon .icon-use-path{fill:#fff}.ui.dropdown.dropdown-button{align-items:center;background-color:#1c93c4;border:0;border-radius:3px;color:#fff;cursor:pointer;display:inline-flex;height:44px;justify-content:center;letter-spacing:1px;margin:0 11px 0 0;padding:0 1.375rem;text-align:center;text-decoration:none;text-transform:capitalize;transition:background-color 125ms linear,color 125ms linear,opacity 250ms ease-out;white-space:normal}.ui.dropdown.dropdown-button.dropdown-button-compact{padding-left:.6875rem;padding-right:.6875rem}.ui.dropdown.dropdown-button .dropdown-selection-value{color:inherit;cursor:pointer;font-size:.875rem;font-weight:600}.ui.dropdown.dropdown-button.dropdown-disable{background-color:#edf1f5!important;cursor:default}.ui.dropdown.dropdown-button.dropdown-disable .dropdown-selection-value{color:#97a4ab;cursor:inherit}.ui.dropdown.dropdown-button.dropdown-disable .ui.icon{cursor:inherit}.ui.dropdown.dropdown-button.dropdown-disable .ui.icon .icon-use-path{fill:#97a4ab}.ui.dropdown.dropdown-button.dropdown-color-alert{background-color:#ee4334}.ui.dropdown.dropdown-button.dropdown-color-alert>.ui.icon .icon-use-path{fill:#fff}.ui.dropdown.dropdown-button.dropdown-color-alternate{background-color:#38424d}.ui.dropdown.dropdown-button.dropdown-color-alternate>.ui.icon .icon-use-path{fill:#fff}.ui.dropdown.dropdown-button.dropdown-color-disable{background-color:#dbe0e3!important;color:#97a4ab;cursor:default}.ui.dropdown.dropdown-button.dropdown-color-disable>.ui.icon .icon-use-path{fill:#97a4ab}.ui.dropdown.dropdown-button.dropdown-color-light{background-color:#f6f7f8;color:#1c2530}.ui.dropdown.dropdown-button.dropdown-color-light>.ui.icon .icon-use-path{fill:#1c2530}.ui.dropdown.dropdown-button.dropdown-color-outline{background-color:transparent;box-shadow:inset 0 0 0 1px #38424d;color:#1c2530}.ui.dropdown.dropdown-button.dropdown-color-outline>.ui.icon .icon-use-path{fill:#1c2530}.ui.dropdown.dropdown-button.dropdown-color-primary{background-color:#1c93c4}.ui.dropdown.dropdown-button.dropdown-color-primary>.ui.icon .icon-use-path{fill:#fff}.ui.dropdown.dropdown-button.dropdown-color-secondary{background-color:#134174}.ui.dropdown.dropdown-button.dropdown-color-secondary>.ui.icon .icon-use-path{fill:#fff}.ui.dropdown.dropdown-button.dropdown-color-success{background-color:#54cd86}.ui.dropdown.dropdown-button.dropdown-color-success>.ui.icon .icon-use-path{fill:#fff}.ui.dropdown.dropdown-button.dropdown-color-transparent{background-color:transparent}.ui.dropdown.dropdown-button.dropdown-color-transparent>.ui.icon.icon-color-primary .icon-use-path{fill:#1c2530}.ui.dropdown.dropdown-button.dropdown-color-warning{background-color:#f99e49}.ui.dropdown.dropdown-button.dropdown-color-warning>.ui.icon .icon-use-path{fill:#fff}.ui.dropdown.dropdown-button.dropdown-is-active{background-color:#00aeef;color:#fff}.ui.dropdown.dropdown-button.dropdown-is-active:not(.dropdown-color-transparent)>.ui.icon .icon-use-path{fill:#fff}.ui.dropdown.dropdown-button.dropdown-is-active.dropdown-color-disable{background-color:#dbe0e3!important;color:#97a4ab;cursor:default}.ui.dropdown.dropdown-button.dropdown-is-active.dropdown-color-disable>.ui.icon .icon-use-path{fill:#97a4ab}.ui.dropdown.dropdown-button.dropdown-is-active.dropdown-color-outline{background-color:transparent;box-shadow:inset 0 0 0 1px #00aeef;color:#1c2530}.ui.dropdown.dropdown-button.dropdown-is-active.dropdown-color-outline>.ui.icon .icon-use-path{fill:#1c2530}.ui.dropdown.dropdown-button.dropdown-is-active.dropdown-color-transparent{background-color:transparent;color:#1c2530}.ui.dropdown.dropdown-button.dropdown-is-active.dropdown-color-transparent>.ui.icon.icon-color-primary .icon-use-path{fill:#1c2530}.ui.dropdown.dropdown-button.dropdown-inverse.dropdown-color-alert{background-color:#ee4334}.ui.dropdown.dropdown-button.dropdown-inverse.dropdown-color-alternate{background-color:#38424d}.ui.dropdown.dropdown-button.dropdown-inverse.dropdown-color-disable{background-color:#dbe0e3;cursor:default}.ui.dropdown.dropdown-button.dropdown-inverse.dropdown-color-light{background-color:#f6f7f8;color:#1c2530}.ui.dropdown.dropdown-button.dropdown-inverse.dropdown-color-outline{background-color:transparent;box-shadow:inset 0 0 0 1px #edf1f5;color:#fff}.ui.dropdown.dropdown-button.dropdown-inverse.dropdown-color-outline>.ui.icon .icon-use-path{fill:#fff}.ui.dropdown.dropdown-button.dropdown-inverse.dropdown-color-primary{background-color:#1c93c4}.ui.dropdown.dropdown-button.dropdown-inverse.dropdown-color-success{background-color:#54cd86}.ui.dropdown.dropdown-fluid{display:block}.ui.dropdown.dropdown-selection{display:inline-block;min-width:200px}.ui.dropdown.dropdown-selection.dropdown-fluid{display:block}.ui.dropdown.dropdown-selection+*{margin-top:2.0625em}.ui.dropdown.dropdown-menu-theme-dark .dropdown-menu{background:#38424d;border:0;border-radius:.1875rem;box-shadow:0 4px 4px 0 rgba(0,0,0,.43)}.ui.dropdown.dropdown-menu-theme-dark .dropdown-menu li>span{color:#fff}.ui.dropdown.dropdown-menu-theme-dark .dropdown-menu li>span:hover{background-color:#fff;color:#1c2530}.ui.dropdown.dropdown-menu-theme-dark .dropdown-menu li>span:hover .ui.icon-color-primary.icon-inverse .icon-use-path{fill:#1c2530}.ui.dropdown.dropdown-menu-theme-dark .dropdown-menu li.dropdown-item-is-disabled span{color:#97a4ab}.ui.dropdown .dropdown-selection-mobile-button{align-items:center;background-color:#fff;border:1px solid #dbe0e3;border-radius:.1875rem;cursor:pointer;display:flex;height:44px;justify-content:flex-start;padding:0 11px;position:relative}.ui.dropdown .dropdown-selection-mobile-button .label,.ui.dropdown .dropdown-selection-mobile-button .placeholder{flex:1 0 auto;text-transform:capitalize}.ui.dropdown .dropdown-selection-mobile-button .placeholder{color:#97a4ab}.ui.dropdown .dropdown-selection-mobile-button .label{color:#1c2530;font-size:1rem}.ui.dropdown .dropdown-selection-mobile-button .ui.icon{flex:0 1 auto;height:16px;margin-left:11px;width:16px}.ui.dropdown.dropdown-disabled .dropdown-selection-mobile-button{background-color:#edf1f5}.ui.dropdown.dropdown-disabled .dropdown-selection-mobile-button .label,.ui.dropdown.dropdown-disabled .dropdown-selection-mobile-button .placeholder{color:#97a4ab}.ui.dropdown .Select{position:relative}.ui.dropdown .Select,.ui.dropdown .Select div,.ui.dropdown .Select input,.ui.dropdown .Select span{box-sizing:border-box}.ui.dropdown .Select.is-disabled>.Select-control{background-color:#edf1f5}.ui.dropdown .Select.is-disabled>.Select-control:hover{box-shadow:none}.ui.dropdown .Select.is-disabled .Select-arrow-zone{cursor:default;pointer-events:none}.ui.dropdown .Select.is-disabled .Select-arrow-zone .ui.icon .icon-use-path{fill:#97a4ab}.ui.dropdown .Select-control{background-color:#fff;border-color:#e9ecee #dbe0e3 #bec7cd;border-radius:.1875rem;border:1px solid #dbe0e3;color:#1c2530;cursor:default;display:table;border-spacing:0;border-collapse:separate;height:44px;outline:0;position:relative;width:100%}.ui.dropdown .Select-control:hover{box-shadow:0 1px 0 rgba(0,0,0,.06)}.ui.dropdown .Select-control .Select-input:focus{outline:0}.ui.dropdown .is-searchable.is-open>.Select-control{cursor:text}.ui.dropdown .is-open:not(.Select--multi)>.Select-control{background-color:#1c2530;border-color:#bec7cd #dbe0e3 #e9ecee;color:#fff}.ui.dropdown .is-open:not(.Select--multi)>.Select-control .Select-arrow{border-color:transparent transparent #999;border-width:0 16px 16px;top:-2px}.ui.dropdown .is-open:not(.Select--multi)>.Select-control .Select-value-label{color:#1c2530!important}.ui.dropdown .is-open:not(.Select--multi)>.Select-control .Select-arrow-zone .ui.icon .icon-use-path,.ui.dropdown .is-open:not(.Select--multi)>.Select-control .Select-clear-zone .ui.icon .icon-use-path{fill:#fff}.ui.dropdown .is-searchable.is-focused:not(.is-open)>.Select-control{cursor:text}.ui.dropdown .is-focused:not(.is-open)>.Select-control{border-color:#00aeef #0abcff #0abcff;box-shadow:inset 0 1px 2px rgba(0,0,0,.1),0 0 5px -1px fade(#00aeef,50%)}.ui.dropdown .Select--single>.Select-control .Select-value,.ui.dropdown .Select-placeholder{bottom:0;color:#97a4ab;left:0;line-height:42px;max-width:100%;overflow:hidden;padding-left:11px;padding-right:11px;position:absolute;right:0;text-overflow:ellipsis;top:0;white-space:nowrap}.ui.dropdown .has-value.Select--single>.Select-control .Select-value .Select-value-label,.ui.dropdown .has-value.is-pseudo-focused.Select--single>.Select-control .Select-value .Select-value-label{color:#1c2530}.ui.dropdown .has-value.Select--single>.Select-control .Select-value a.Select-value-label,.ui.dropdown .has-value.is-pseudo-focused.Select--single>.Select-control .Select-value a.Select-value-label{cursor:pointer;text-decoration:none}.ui.dropdown .has-value.Select--single>.Select-control .Select-value a.Select-value-label:focus,.ui.dropdown .has-value.Select--single>.Select-control .Select-value a.Select-value-label:hover,.ui.dropdown .has-value.is-pseudo-focused.Select--single>.Select-control .Select-value a.Select-value-label:focus,.ui.dropdown .has-value.is-pseudo-focused.Select--single>.Select-control .Select-value a.Select-value-label:hover{color:#00aeef;outline:0;text-decoration:underline}.ui.dropdown .Select-input{height:42px;padding-left:11px;padding-right:11px;vertical-align:middle}.ui.dropdown .Select-input>input{background:none transparent;border:0 none;box-shadow:none;cursor:default;display:inline-block;font-family:inherit;font-size:inherit;margin:0;outline:0;line-height:14px;padding:12px 0 16px;-webkit-appearance:none}.is-focused .ui.dropdown .Select-input>input{cursor:text}.ui.dropdown .has-value.is-pseudo-focused .Select-input{opacity:0}.ui.dropdown .Select-control:not(.is-searchable)>.Select-input{outline:0}.ui.dropdown .Select-loading-zone{cursor:pointer;display:table-cell;position:relative;text-align:center;vertical-align:middle;width:16px}.ui.dropdown .Select-loading{animation:Select-animation-spin .4s infinite linear;width:16px;height:16px;box-sizing:border-box;border-radius:50%;border:2px solid #dbe0e3;border-right-color:#1c2530;display:inline-block;position:relative;vertical-align:middle}.ui.dropdown .Select-clear-zone{animation:Select-animation-fadeIn .2s;color:#999;cursor:pointer;display:table-cell;padding-right:11px;position:relative;text-align:center;vertical-align:middle;width:16px}.ui.dropdown .Select-clear-zone>div{align-items:center;display:flex;justify-content:center}.ui.dropdown .Select-clear-zone:hover{color:#d0021b}.ui.dropdown .Select-clear{display:inline-block;font-size:22px;line-height:1}.ui.dropdown .Select--multi .Select-clear-zone{width:16px}.ui.dropdown .Select--multi .Select-multi-value-wrapper{display:inline-block}.ui.dropdown .Select .Select-aria-only{display:inline-block;height:1px;width:1px;margin:-1px;clip:rect(0,0,0,0);overflow:hidden}.ui.dropdown .Select-arrow-zone{cursor:pointer;display:table-cell;padding-bottom:0;padding-right:11px;position:relative;text-align:center;vertical-align:middle;width:16px}.ui.dropdown .Select-arrow-zone>div{align-items:center;display:flex;justify-content:center}.ui.dropdown .Select-arrow{border-color:#999 transparent transparent;border-style:solid;border-width:16px 16px 8px;display:inline-block;height:0;position:relative;width:0}.ui.dropdown .Select-arrow-zone:hover>.Select-arrow,.ui.dropdown .is-open .Select-arrow{border-top-color:#666}.ui.dropdown .Select-menu-outer{background-color:#38424d;border-radius:.1875rem;box-shadow:0 4px 4px 0 rgba(0,0,0,.43);box-sizing:border-box;margin-top:4px;-webkit-overflow-scrolling:touch;padding-bottom:11px;padding-top:11px;position:absolute;top:100%;width:100%;z-index:1000}.ui.dropdown .Select-option{background-color:#38424d;box-sizing:border-box;color:#fff;cursor:pointer;display:block;font-size:.875rem;font-weight:600;margin:4px 0;padding:7px 22px;white-space:nowrap}.ui.dropdown .Select-option.is-selected{background-color:#fff;color:#1c2530}.ui.dropdown .Select-option.is-focused,.ui.dropdown .Select-option:hover{background-color:#fff;color:#1c2530}.ui.dropdown .Select-option.is-disabled{color:#97a4ab;cursor:default}.ui.dropdown .Select-noresults{box-sizing:border-box;color:#fff;cursor:default;display:block;padding:7px 22px}.ui.dropdown .Select.Select--multi .Select-control{background-color:#fff}.ui.dropdown .Select.Select--multi .Select-input{margin-left:11px;padding:0;vertical-align:middle}.ui.dropdown .Select.Select--multi.has-value .Select-input{margin-left:5px}.ui.dropdown .Select.Select--multi .Select-value{align-items:flex-start;background-color:#f6f7f8;border:1px solid #dbe0e3;border-radius:2px;color:#1c2530;display:inline-flex;flex-direction:row-reverse;font-size:.9em;height:30px;justify-content:flex-start;margin-left:6px;margin-top:6px;vertical-align:top}.ui.dropdown .Select.Select--multi .Select-value-icon,.ui.dropdown .Select.Select--multi .Select-value-label{align-items:center;align-self:stretch;display:inline-flex;flex:0 1 auto;justify-content:center;vertical-align:middle}.ui.dropdown .Select.Select--multi .Select-value-label{border-bottom-left-radius:2px;border-top-left-radius:2px;cursor:default;font-size:.875rem;padding:0 11px}.ui.dropdown .Select.Select--multi a.Select-value-label{color:#08c;cursor:pointer;text-decoration:none}.ui.dropdown .Select.Select--multi a.Select-value-label:hover{text-decoration:underline}.ui.dropdown .Select.Select--multi .Select-value-icon{border-bottom-right-radius:2px;border-top-right-radius:2px;border:1px solid #dbe0e3;color:#97a4ab;cursor:pointer;line-height:1;margin:-1px -1px -1px 0;padding:0 9px;position:relative;speak:none;text-transform:none;transition:background-color 150ms linear,border-color 150ms linear,color 150ms linear}.ui.dropdown .Select.Select--multi .Select-value-icon:focus,.ui.dropdown .Select.Select--multi .Select-value-icon:hover{background-color:#97a4ab;border-color:#97a4ab;color:#fff}.ui.dropdown .Select.Select--multi .Select-value-icon:active{background-color:#c9e6f2}.ui.dropdown .Select.Select--multi.is-open>.Select-control .Select-arrow-zone .ui.icon .icon-use-path{fill:#00aeef}.ui.dropdown .Select--multi.is-disabled>.Select-control{background-color:#edf1f5}.ui.dropdown .Select--multi.is-disabled>.Select-control:hover{box-shadow:none}.ui.dropdown .Select--multi.is-disabled .Select-value-icon{cursor:not-allowed;border-right:1px solid #e3e3e3}.ui.dropdown .Select--multi.is-disabled .Select-value-icon:active,.ui.dropdown .Select--multi.is-disabled .Select-value-icon:focus,.ui.dropdown .Select--multi.is-disabled .Select-value-icon:hover{background-color:#fcfcfc}.ui.dropdown.ui.dropdown-inverse .is-open:not(.Select--multi)>.Select-control{background-color:#fff}.ui.dropdown.ui.dropdown-inverse .is-open:not(.Select--multi)>.Select-control .Select-arrow-zone .ui.icon .icon-use-path,.ui.dropdown.ui.dropdown-inverse .is-open:not(.Select--multi)>.Select-control .Select-clear-zone .ui.icon .icon-use-path{fill:#1c2530}.ui.dropdown.ui.dropdown-inverse .is-open:not(.Select--multi)>.Select-control .Select-value-label{color:#1c2530!important}.ui.dropdown.ui.dropdown-inverse .Select-menu-outer{background-color:#fff}.ui.dropdown.ui.dropdown-inverse .Select-option{background-color:#fff;color:#1c2530}.ui.dropdown.ui.dropdown-inverse .Select-option.is-focused,.ui.dropdown.ui.dropdown-inverse .Select-option.is-selected,.ui.dropdown.ui.dropdown-inverse .Select-option:hover{background-color:#00aeef;color:#fff}.ui.dropdown.ui.dropdown-inverse .Select-option.is-disabled{color:#97a4ab}.ui.dropdown.ui.dropdown-inverse .Select-noresults{color:#1c2530}.ui.dropdown.ui.dropdown-inverse .Select-input>input{color:#1c2530}.ui.dropdown.dropdown-selection-underline .Select--single .Select-control{border-left:0;border-radius:0;border-right:0;border-top:0;font-size:.875rem;height:32px}.ui.dropdown.dropdown-selection-underline .Select--single .Select-control:hover{box-shadow:none}.ui.dropdown.dropdown-selection-underline .Select--single .Select-control .Select-placeholder{line-height:33px;padding-left:0;padding-right:0}.ui.dropdown.dropdown-selection-underline .Select--single .Select-control .Select-value{line-height:33px;padding-left:0}.ui.dropdown.dropdown-selection-underline .Select--single .Select-control .Select-input{height:32px;padding-left:0}.ui.dropdown.dropdown-selection-underline .Select--single .Select-control .Select-input>input{color:#1c2530;padding:7px 0 11px}.ui.dropdown.dropdown-selection-underline .Select--single .Select-control .Select-arrow-zone{padding-right:0;width:10px}.ui.dropdown.dropdown-selection-underline .Select--single .Select-control .ui.icon-times{height:10px;width:10px}.ui.dropdown.dropdown-selection-underline .is-open:not(.Select--multi).Select--single>.Select-control{background-color:#fff;border-bottom-color:#dbe0e3;box-shadow:none;color:#1c2530}.ui.dropdown.dropdown-selection-underline .is-open:not(.Select--multi).Select--single>.Select-control .Select-arrow-zone .icon-use-path{fill:#00aeef}@media only screen and (min-width:768px){.ui.dropdown.dropdown-button{height:33px}}@keyframes Select-animation-fadeIn{from{opacity:0}to{opacity:1}}