You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

410 lines
8.0 KiB

.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);
}