.ui.dropdown { position: relative; display: inline-block; line-height: 1; -webkit-transition: border-radius .1s ease,width .2s ease; transition: border-radius .1s ease,width .2s ease; -webkit-tap-highlight-color: rgba(0,0,0,0); -moz-tap-highlight-color: rgba(0,0,0,0); tap-highlight-color: rgba(0,0,0,0); } .ui.dropdown .menu { position: absolute; display: none; top: 100%; margin: 0; background-color: #FFF; min-width: 100%; white-space: nowrap; font-size: .875em; text-shadow: none; -webkit-box-shadow: 0 0 1px 1px rgba(0,0,0,.1); box-shadow: 0 0 1px 1px rgba(0,0,0,.1); border-radius: 0 0 .325em .325em; -webkit-transition: opacity .2s ease; transition: opacity .2s ease; z-index: 11; } .ui.dropdown>.dropdown.icon { width: auto; margin: 0 0 0 1em; } .ui.dropdown>.dropdown.icon:before { content: "\f0d7"; } .ui.dropdown .menu .item .dropdown.icon { width: auto; float: right; margin: 0 0 0 .5em; } .ui.dropdown .menu .item .dropdown.icon:before { content: "\f0da"; } .ui.dropdown>.text { cursor: pointer; display: inline-block; -webkit-transition: color .2s ease; transition: color .2s ease; } .ui.dropdown .menu { left: 0; } .ui.dropdown .menu .menu { top: 0!important; left: 100%!important; margin: 0!important; border-radius: 0 .325em .325em 0!important; } .ui.dropdown .menu .menu:after { display: none; } .ui.dropdown .menu .item { cursor: pointer; border: 0; border-top: 1px solid rgba(0,0,0,.05); height: auto; font-size: .875em; display: block; color: rgba(0,0,0,.75); padding: .85em 1em!important; font-size: .875rem; text-transform: none; font-weight: 400; text-align: left; -webkit-touch-callout: none; } .ui.dropdown .menu .item:before { display: none; } .ui.dropdown .menu .item .icon { margin-right: .75em; } .ui.dropdown .menu .item:first-child { border-top: 0; } .ui.menu .right.menu .dropdown:last-child .menu, .ui.buttons>.ui.dropdown:last-child .menu { left: auto; right: 0; } .ui.vertical.menu .dropdown.item>.dropdown.icon:before { content: "\f0da"; } .ui.dropdown.icon.button>.dropdown.icon { margin: 0; } .ui.visible.dropdown>.menu { display: block; } .ui.dropdown .menu .item:hover { background-color: rgba(0,0,0,.02); z-index: 12; } .ui.dropdown .menu .active.item { background-color: rgba(0,0,0,.06)!important; border-left: 0; border-color: transparent!important; -webkit-box-shadow: none; -moz-shadow: none; box-shadow: none; z-index: 12; } .ui.dropdown>.default.text, .ui.default.dropdown>.text { color: rgba(0,0,0,.5); } .ui.dropdown:hover>.default.text, .ui.default.dropdown:hover>.text { color: rgba(0,0,0,.8); } .ui.simple.dropdown .menu:before, .ui.simple.dropdown .menu:after { display: none; } .ui.simple.dropdown .menu { display: block; overflow: hidden; top: -9999px!important; position: absolute; opacity: 0; width: 0; height: 0; -webkit-transition: opacity .2s ease-out; transition: opacity .2s ease-out; } .ui.simple.active.dropdown, .ui.simple.dropdown:hover { border-bottom-left-radius: 0!important; border-bottom-right-radius: 0!important; } .ui.simple.active.dropdown>.menu, .ui.simple.dropdown:hover>.menu { overflow: visible; width: auto; height: auto; top: 100%!important; opacity: 1; } .ui.simple.dropdown>.menu .item:active>.menu, .ui.simple.dropdown:hover>.menu .item:hover>.menu { overflow: visible; width: auto; height: auto; top: 0!important; left: 100%!important; opacity: 1; } .ui.simple.disabled.dropdown:hover .menu { display: none; height: 0; width: 0; overflow: hidden; } .ui.selection.dropdown { cursor: pointer; display: inline-block; word-wrap: break-word; white-space: normal; background-color: #FFF; padding: .5em 1em; line-height: 1.33; color: rgba(0,0,0,.8); -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.1)!important; box-shadow: 0 0 0 1px rgba(0,0,0,.1)!important; border-radius: .3125em!important; } .ui.selection.dropdown select { display: none; } .ui.selection.dropdown>.dropdown.icon { opacity: .7; margin: .2em 0 .2em 1.25em; -webkit-transition: opacity .2s ease-out; transition: opacity .2s ease-out; } .ui.selection.dropdown, .ui.selection.dropdown .menu { top: 100%; -webkit-transition: -webkit-box-shadow .2s ease-out; transition: box-shadow .2s ease-out; } .ui.selection.dropdown .menu { max-height: 312px; overflow-x: hidden; overflow-y: auto; -webkit-box-shadow: 0 1px 0 1px #E0E0E0; box-shadow: 0 1px 0 1px #E0E0E0; border-radius: 0 0 .325em .325em; } .ui.selection.dropdown .menu:after, .ui.selection.dropdown .menu:before { display: none; } .ui.selection.dropdown .menu img { height: 2.5em; display: inline-block; vertical-align: middle; margin-right: .5em; } .ui.selection.dropdown:hover { -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.2)!important; box-shadow: 0 0 0 1px rgba(0,0,0,.2)!important; } .ui.selection.dropdown:hover .menu { -webkit-box-shadow: 0 1px 0 1px #D3D3D3; box-shadow: 0 1px 0 1px #D3D3D3; } .ui.selection.dropdown:hover>.dropdown.icon { opacity: 1; } .ui.visible.selection.dropdown { border-bottom-left-radius: 0!important; border-bottom-right-radius: 0!important; } .ui.active.selection.dropdown { border-radius: .3125em .3125em 0 0!important; } .ui.active.selection.dropdown>.dropdown.icon { opacity: 1; } .ui.fluid.dropdown { display: block; } .ui.fluid.dropdown>.dropdown.icon { float: right; } .ui.inline.dropdown { cursor: pointer; display: inline-block; color: inherit; } .ui.inline.dropdown .dropdown.icon { margin: 0 .5em 0 .25em; } .ui.inline.dropdown .text { font-weight: 700; } .ui.inline.dropdown .menu { cursor: auto; margin-top: .25em; border-radius: .325em; } .ui.floating.dropdown .menu { left: 0; right: auto; margin-top: .5em; border-radius: .325em; } .ui.pointing.dropdown .menu { top: 100%; margin-top: .75em; border-radius: .325em; } .ui.pointing.dropdown .menu:after { display: block; position: absolute; pointer-events: none; content: " "; visibility: visible; width: .5em; height: .5em; -webkit-box-shadow: -1px -1px 0 1px rgba(0,0,0,.05); box-shadow: -1px -1px 0 1px rgba(0,0,0,.05); background-image: none; background-color: #FFF; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); z-index: 2; } .ui.pointing.dropdown .menu .active.item:first-child { background: transparent -webkit-linear-gradient(transparent,rgba(0,0,0,.03)); background: transparent-webkit-gradient(linear, top left, bottom left, from(transparent), to(rgba(0,0,0,.03))); background: transparent -webkit-linear-gradient(transparent, rgba(0,0,0,.03)); background: transparent linear-gradient(transparent,rgba(0,0,0,.03)); } .ui.pointing.dropdown .menu:after { top: -.25em; left: 50%; margin: 0 0 0 -.25em; } .ui.top.left.pointing.dropdown .menu { top: 100%; bottom: auto; left: 0; right: auto; margin: .75em 0 0; } .ui.top.left.pointing.dropdown .menu:after { top: -.25em; left: 1.25em; right: auto; margin: 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .ui.top.right.pointing.dropdown .menu { top: 100%; bottom: auto; right: 0; left: auto; margin: .75em 0 0; } .ui.top.right.pointing.dropdown .menu:after { top: -.25em; left: auto; right: 1.25em; margin: 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .ui.left.pointing.dropdown .menu { top: 0; left: 100%; right: auto; margin: 0 0 0 .75em; } .ui.left.pointing.dropdown .menu:after { top: 1em; left: -.25em; margin: 0; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .ui.right.pointing.dropdown .menu { top: 0; left: auto; right: 100%; margin: 0 .75em 0 0; } .ui.right.pointing.dropdown .menu:after { top: 1em; left: auto; right: -.25em; margin: 0; -webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); }