github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/dist/components/dropdown.css (about) 1 /*! 2 * # Semantic UI x.x - Dropdown 3 * http://github.com/semantic-org/semantic-ui/ 4 * 5 * 6 * Copyright 2014 Contributors 7 * Released under the MIT license 8 * http://opensource.org/licenses/MIT 9 * 10 */ 11 12 13 /******************************* 14 Dropdown 15 *******************************/ 16 17 .ui.dropdown { 18 cursor: pointer; 19 position: relative; 20 display: inline-block; 21 line-height: 1em; 22 tap-highlight-color: rgba(0, 0, 0, 0); 23 outline: none; 24 text-align: left; 25 -webkit-transition: border-radius 0.1s ease, width 0.2s ease; 26 transition: border-radius 0.1s ease, width 0.2s ease; 27 } 28 29 30 /******************************* 31 Content 32 *******************************/ 33 34 35 /*-------------- 36 Menu 37 ---------------*/ 38 39 .ui.dropdown .menu { 40 cursor: auto; 41 position: absolute; 42 display: none; 43 outline: none; 44 top: 100%; 45 margin: 0em; 46 padding: 0em 0em; 47 background: #ffffff; 48 min-width: 100%; 49 white-space: nowrap; 50 font-size: 1rem; 51 text-shadow: none; 52 text-align: left; 53 box-shadow: 0px 1px 4px 0px rgba(39, 41, 43, 0.15); 54 border: 1px solid rgba(39, 41, 43, 0.15); 55 border-radius: 0em 0em 0.2857rem 0.2857rem; 56 -webkit-transition: opacity 0.2s ease; 57 transition: opacity 0.2s ease; 58 z-index: 11; 59 will-change: transform, opacity; 60 } 61 62 /*-------------- 63 Hidden Input 64 ---------------*/ 65 66 .ui.dropdown > input:not(.search):first-child, 67 .ui.dropdown > select { 68 display: none !important; 69 } 70 71 /*-------------- 72 Dropdown Icon 73 ---------------*/ 74 75 .ui.dropdown > .dropdown.icon { 76 width: auto; 77 margin: 0em 0em 0em 1em; 78 } 79 .ui.dropdown .menu > .item .dropdown.icon { 80 width: auto; 81 float: right; 82 margin: 0em 0em 0em 1em; 83 } 84 .ui.dropdown .menu > .item .dropdown.icon + .text { 85 margin-right: 1em; 86 } 87 88 /*-------------- 89 Text 90 ---------------*/ 91 92 .ui.dropdown > .text { 93 display: inline-block; 94 -webkit-transition: color 0.2s ease; 95 transition: color 0.2s ease; 96 } 97 98 /*-------------- 99 Menu Item 100 ---------------*/ 101 102 .ui.dropdown .menu > .item { 103 position: relative; 104 cursor: pointer; 105 display: block; 106 border: none; 107 height: auto; 108 border-top: none; 109 line-height: 1em; 110 color: rgba(0, 0, 0, 0.8); 111 padding: 0.71428571em 1.14285714em !important; 112 font-size: 1rem; 113 text-transform: none; 114 font-weight: normal; 115 box-shadow: none; 116 -webkit-touch-callout: none; 117 } 118 .ui.dropdown .menu > .item:first-child { 119 border-top-width: 0px; 120 } 121 122 /*-------------- 123 Floated Content 124 ---------------*/ 125 126 .ui.dropdown > .text > [class*="right floated"], 127 .ui.dropdown .menu .item > [class*="right floated"] { 128 float: right !important; 129 margin-right: 0em !important; 130 margin-left: 1em !important; 131 } 132 .ui.dropdown > .text > [class*="left floated"], 133 .ui.dropdown .menu .item > [class*="left floated"] { 134 float: left !important; 135 margin-left: 0em !important; 136 margin-right: 1em !important; 137 } 138 .ui.dropdown .menu .item > .icon.floated, 139 .ui.dropdown .menu .item > .flag.floated, 140 .ui.dropdown .menu .item > .image.floated, 141 .ui.dropdown .menu .item > img.floated { 142 margin-top: 0em; 143 } 144 145 /*-------------- 146 Menu Divider 147 ---------------*/ 148 149 .ui.dropdown .menu > .header { 150 margin: 1rem 0rem 0.75rem; 151 padding: 0em 1.14285714em; 152 color: rgba(0, 0, 0, 0.85); 153 font-size: 0.7857rem; 154 font-weight: bold; 155 text-transform: uppercase; 156 } 157 .ui.dropdown .menu > .divider { 158 border-top: 1px solid rgba(0, 0, 0, 0.05); 159 height: 0em; 160 margin: 0.5em 0em; 161 } 162 .ui.dropdown .menu > .input { 163 margin: 0.75rem 1.14285714em; 164 min-width: 200px; 165 } 166 .ui.dropdown .menu > .header + .input { 167 margin-top: 0em; 168 } 169 .ui.dropdown .menu > .input:not(.transparent) input { 170 padding: 0.5em 1em; 171 } 172 .ui.dropdown .menu > .input:not(.transparent) .button, 173 .ui.dropdown .menu > .input:not(.transparent) .icon, 174 .ui.dropdown .menu > .input:not(.transparent) .label { 175 padding-top: 0.5em; 176 padding-bottom: 0.5em; 177 } 178 179 /*----------------- 180 Item Description 181 -------------------*/ 182 183 .ui.dropdown > .text > .description, 184 .ui.dropdown .menu > .item > .description { 185 margin: 0em 0em 0em 1em; 186 color: rgba(0, 0, 0, 0.4); 187 } 188 189 /*-------------- 190 Sub Menu 191 ---------------*/ 192 193 .ui.dropdown .menu .menu { 194 top: 0% !important; 195 left: 100% !important; 196 right: auto !important; 197 margin: 0em 0em 0em -0.5em !important; 198 border-radius: 0em 0.2857rem 0.2857rem 0em !important; 199 z-index: 21 !important; 200 } 201 202 /* Hide Arrow */ 203 .ui.dropdown .menu .menu:after { 204 display: none; 205 } 206 207 208 /******************************* 209 Coupling 210 *******************************/ 211 212 213 /*-------------- 214 Sub Elements 215 ---------------*/ 216 217 218 /* Icons / Flags / Labels / Image */ 219 .ui.dropdown > .text > .icon, 220 .ui.dropdown > .text > .label, 221 .ui.dropdown > .text > .flag, 222 .ui.dropdown > .text > img, 223 .ui.dropdown > .text > .image { 224 margin-top: 0em; 225 } 226 .ui.dropdown .menu > .item > .icon, 227 .ui.dropdown .menu > .item > .label, 228 .ui.dropdown .menu > .item > .flag, 229 .ui.dropdown .menu > .item > .image, 230 .ui.dropdown .menu > .item > img { 231 margin-top: 0em; 232 } 233 .ui.dropdown > .text > .icon, 234 .ui.dropdown > .text > .label, 235 .ui.dropdown > .text > .flag, 236 .ui.dropdown > .text > img, 237 .ui.dropdown > .text > .image, 238 .ui.dropdown .menu > .item > .icon, 239 .ui.dropdown .menu > .item > .label, 240 .ui.dropdown .menu > .item > .flag, 241 .ui.dropdown .menu > .item > .image, 242 .ui.dropdown .menu > .item > img { 243 margin-left: 0em; 244 float: none; 245 margin-right: 0.75em; 246 } 247 248 /*-------------- 249 Image 250 ---------------*/ 251 252 .ui.dropdown > .text > img, 253 .ui.dropdown > .text > .image, 254 .ui.dropdown .menu > .item > .image, 255 .ui.dropdown .menu > .item > img { 256 display: inline-block; 257 vertical-align: middle; 258 width: auto; 259 max-height: 2.5em; 260 } 261 262 /*-------------- 263 Menu 264 ---------------*/ 265 266 267 /* Remove Menu Item Divider */ 268 .ui.dropdown .ui.menu > .item:before, 269 .ui.menu .ui.dropdown .menu > .item:before { 270 display: none; 271 } 272 273 /* Prevent Menu Item Border */ 274 .ui.menu .ui.dropdown .menu .active.item { 275 border-left: none; 276 } 277 278 /* Automatically float dropdown menu right on last menu item */ 279 .ui.menu .right.menu .dropdown:last-child .menu, 280 .ui.menu .right.dropdown.item .menu, 281 .ui.buttons > .ui.dropdown:last-child .menu { 282 left: auto; 283 right: 0em; 284 } 285 286 /*-------------- 287 Button 288 ---------------*/ 289 290 291 /* No Margin On Icon Button */ 292 .ui.dropdown.icon.button > .dropdown.icon { 293 margin: 0em; 294 } 295 .ui.dropdown.button:not(.pointing):not(.floating).active, 296 .ui.dropdown.button:not(.pointing):not(.floating).visible { 297 border-bottom-left-radius: 0em; 298 border-bottom-right-radius: 0em; 299 } 300 301 302 /******************************* 303 Types 304 *******************************/ 305 306 307 /*-------------- 308 Selection 309 ---------------*/ 310 311 312 /* Displays like a select box */ 313 .ui.selection.dropdown { 314 cursor: pointer; 315 word-wrap: break-word; 316 white-space: normal; 317 outline: 0; 318 -webkit-transform: rotateZ(0deg); 319 transform: rotateZ(0deg); 320 min-width: 180px; 321 background: #ffffff; 322 display: inline-block; 323 padding: 0.8em 1.1em; 324 color: rgba(0, 0, 0, 0.8); 325 box-shadow: none; 326 border: 1px solid rgba(39, 41, 43, 0.15); 327 border-radius: 0.2857rem; 328 -webkit-transition: border-radius 0.1s ease, width 0.2s ease, box-shadow 0.2s ease, border 0.2s ease; 329 transition: border-radius 0.1s ease, width 0.2s ease, box-shadow 0.2s ease, border 0.2s ease; 330 } 331 .ui.selection.dropdown.visible, 332 .ui.selection.dropdown.active { 333 z-index: 10; 334 } 335 select.ui.dropdown { 336 height: 38px; 337 padding: 0.5em; 338 border: 1px solid rgba(39, 41, 43, 0.15); 339 visibility: visible; 340 } 341 .ui.selection.dropdown > .text { 342 margin-right: 2em; 343 } 344 .ui.selection.dropdown > .search.icon, 345 .ui.selection.dropdown > .delete.icon, 346 .ui.selection.dropdown > .dropdown.icon { 347 cursor: pointer; 348 position: absolute; 349 top: auto; 350 width: auto; 351 margin: -0.8em; 352 padding: 0.8em; 353 right: 1.1em; 354 opacity: 0.8; 355 -webkit-transition: opacity 0.2s ease; 356 transition: opacity 0.2s ease; 357 } 358 359 /* Compact */ 360 .ui.compact.selection.dropdown { 361 min-width: 0px; 362 } 363 364 /* Selection Menu */ 365 .ui.selection.dropdown .menu { 366 overflow-x: hidden; 367 overflow-y: auto; 368 -webkit-backface-visibility: hidden; 369 backface-visibility: hidden; 370 -webkit-overflow-scrolling: touch; 371 border-top-width: 0px !important; 372 width: auto; 373 margin: 0px -1px; 374 min-width: -webkit-calc(100% + 2px ); 375 min-width: calc(100% + 2px ); 376 outline: none; 377 box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08); 378 -webkit-transition: box-shadow 0.2s ease, border 0.2s ease; 379 transition: box-shadow 0.2s ease, border 0.2s ease; 380 } 381 .ui.selection.dropdown .menu:after, 382 .ui.selection.dropdown .menu:before { 383 display: none; 384 } 385 386 /* Scrollbar in IE */ 387 @media all and (-ms-high-contrast: none) { 388 .ui.selection.dropdown .menu { 389 min-width: -webkit-calc(100% - 15px ); 390 min-width: calc(100% - 15px ); 391 } 392 } 393 @media only screen and (max-width: 767px) { 394 .ui.selection.dropdown .menu { 395 max-height: 7.49991429em; 396 } 397 } 398 @media only screen and (min-width: 768px) { 399 .ui.selection.dropdown .menu { 400 max-height: 9.99988571em; 401 } 402 } 403 @media only screen and (min-width: 992px) { 404 .ui.selection.dropdown .menu { 405 max-height: 14.99982857em; 406 } 407 } 408 @media only screen and (min-width: 1920px) { 409 .ui.selection.dropdown .menu { 410 max-height: 19.99977143em; 411 } 412 } 413 414 /* Menu Item */ 415 .ui.selection.dropdown .menu > .item { 416 border-top: 1px solid rgba(0, 0, 0, 0.05); 417 padding: 0.71428571em 1.14285714em !important; 418 white-space: normal; 419 word-wrap: normal; 420 } 421 422 /* Hover */ 423 .ui.selection.dropdown:hover { 424 border-color: rgba(39, 41, 43, 0.3); 425 box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.05); 426 } 427 428 /* Disabled */ 429 .ui.selection.dropdown.disabled, 430 .ui.selection.dropdown.disabled:hover { 431 cursor: default; 432 box-shadow: none; 433 color: rgba(0, 0, 0, 0.8); 434 border: 1px solid rgba(39, 41, 43, 0.15); 435 opacity: 0.3 !important; 436 } 437 438 /* Visible */ 439 .ui.selection.dropdown.visible { 440 border-color: rgba(39, 41, 43, 0.3); 441 box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08); 442 } 443 .ui.selection.visible.dropdown .menu { 444 border-color: rgba(39, 41, 43, 0.3); 445 box-shadow: 0px 2px 6px 0px rgba(39, 41, 43, 0.15); 446 } 447 448 /* Visible Hover */ 449 .ui.selection.visible.dropdown:hover { 450 border-color: rgba(39, 41, 43, 0.3); 451 box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08); 452 } 453 .ui.selection.visible.dropdown .menu { 454 border-color: rgba(39, 41, 43, 0.3); 455 box-shadow: 0px 2px 6px 0px rgba(39, 41, 43, 0.15); 456 } 457 458 /* Active Item */ 459 .ui.selection.active.dropdown > .text:not(.default), 460 .ui.selection.visible.dropdown > .text:not(.default) { 461 font-weight: normal; 462 color: rgba(0, 0, 0, 0.8); 463 } 464 465 /* Dropdown Icon */ 466 .ui.active.selection.dropdown > .dropdown.icon, 467 .ui.visible.selection.dropdown > .dropdown.icon { 468 opacity: 1; 469 z-index: 3; 470 } 471 472 /* Connecting Border */ 473 .ui.active.selection.dropdown, 474 .ui.visible.selection.dropdown { 475 border-bottom-left-radius: 0em !important; 476 border-bottom-right-radius: 0em !important; 477 } 478 479 /*-------------- 480 Searchable 481 ---------------*/ 482 483 484 /* Search Selection */ 485 .ui.search.dropdown { 486 min-width: ''; 487 } 488 489 /* Search Dropdown */ 490 .ui.search.dropdown > input.search { 491 background: none transparent !important; 492 border: none !important; 493 box-shadow: none !important; 494 border-radius: 0em !important; 495 cursor: pointer; 496 top: 0em; 497 left: 0em; 498 width: 100%; 499 outline: none; 500 -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 501 padding: inherit; 502 } 503 504 /* Text Layering */ 505 .ui.search.dropdown > input.search { 506 position: absolute; 507 z-index: 2; 508 } 509 .ui.search.dropdown > .text { 510 cursor: text; 511 position: relative; 512 z-index: 3; 513 } 514 515 /* Search Selection */ 516 .ui.search.selection.dropdown > input.search { 517 line-height: 1.2142em; 518 padding: 0.6929em 1.1em; 519 } 520 521 /* Active/Visible Search */ 522 .ui.search.dropdown.active > input.search, 523 .ui.search.dropdown.visible > input.search { 524 cursor: auto; 525 } 526 .ui.search.dropdown.active > .text, 527 .ui.search.dropdown.visible > .text { 528 pointer-events: none; 529 } 530 .ui.active.search.dropdown > input.search:focus + .text { 531 color: rgba(0, 0, 0, 0.4) !important; 532 } 533 534 /* Search Menu */ 535 .ui.search.dropdown .menu { 536 overflow-x: hidden; 537 overflow-y: auto; 538 -webkit-backface-visibility: hidden; 539 backface-visibility: hidden; 540 -webkit-overflow-scrolling: touch; 541 } 542 @media only screen and (max-width: 767px) { 543 .ui.search.dropdown .menu { 544 max-height: 7.49991429em; 545 } 546 } 547 @media only screen and (min-width: 768px) { 548 .ui.search.dropdown .menu { 549 max-height: 9.99988571em; 550 } 551 } 552 @media only screen and (min-width: 992px) { 553 .ui.search.dropdown .menu { 554 max-height: 14.99982857em; 555 } 556 } 557 @media only screen and (min-width: 1920px) { 558 .ui.search.dropdown .menu { 559 max-height: 19.99977143em; 560 } 561 } 562 563 /*-------------- 564 Inline 565 ---------------*/ 566 567 .ui.inline.dropdown { 568 cursor: pointer; 569 display: inline-block; 570 color: inherit; 571 } 572 .ui.inline.dropdown .dropdown.icon { 573 margin: 0em 0.5em 0em 0.25em; 574 vertical-align: top; 575 } 576 .ui.inline.dropdown > .text { 577 font-weight: bold; 578 } 579 .ui.inline.dropdown .menu { 580 cursor: auto; 581 margin-top: 0.25em; 582 border-radius: 0.2857rem; 583 } 584 585 586 /******************************* 587 States 588 *******************************/ 589 590 591 /*-------------------- 592 Hover 593 ----------------------*/ 594 595 596 /* Menu Item Hover */ 597 .ui.dropdown .menu > .item:hover { 598 background: rgba(0, 0, 0, 0.05); 599 color: rgba(0, 0, 0, 0.8); 600 z-index: 13; 601 } 602 603 /*-------------------- 604 Active 605 ----------------------*/ 606 607 608 /* Menu Item Active */ 609 .ui.dropdown .menu .active.item { 610 background: transparent; 611 font-weight: bold; 612 color: rgba(0, 0, 0, 0.8); 613 box-shadow: none; 614 z-index: 12; 615 } 616 617 /*-------------------- 618 Default Text 619 ----------------------*/ 620 621 .ui.dropdown > .default.text, 622 .ui.default.dropdown > .text { 623 color: rgba(179, 179, 179, 0.7); 624 } 625 .ui.dropdown:hover > .default.text, 626 .ui.default.dropdown:hover > .text { 627 color: rgba(140, 140, 140, 0.7); 628 } 629 630 /*-------------------- 631 Loading 632 ----------------------*/ 633 634 .ui.loading.dropdown > .text { 635 -webkit-transition: none; 636 transition: none; 637 } 638 .ui.dropdown > .loading.menu { 639 display: block; 640 visibility: hidden; 641 z-index: -1; 642 } 643 644 /*-------------------- 645 Keyboard Select 646 ----------------------*/ 647 648 649 /* Selected Item */ 650 .ui.dropdown.selected, 651 .ui.dropdown .menu .selected.item { 652 background: rgba(0, 0, 0, 0.03); 653 color: rgba(0, 0, 0, 0.8); 654 } 655 656 /*-------------------- 657 Search Filtered 658 ----------------------*/ 659 660 661 /* Filtered Item */ 662 .ui.dropdown > .filtered.text { 663 visibility: hidden; 664 } 665 .ui.dropdown .filtered.item { 666 display: none !important; 667 } 668 669 /*-------------------- 670 Error 671 ----------------------*/ 672 673 .ui.dropdown.error, 674 .ui.dropdown.error > .text, 675 .ui.dropdown.error > .default.text { 676 color: #a94442; 677 } 678 .ui.selection.dropdown.error { 679 background: #fff0f0; 680 border-color: #dbb1b1; 681 } 682 .ui.selection.dropdown.error:hover { 683 border-color: #dbb1b1; 684 } 685 .ui.dropdown.error > .menu, 686 .ui.dropdown.error > .menu .menu { 687 border-color: #dbb1b1; 688 } 689 .ui.dropdown.error > .menu > .item { 690 color: #d95c5c; 691 } 692 693 /* Item Hover */ 694 .ui.dropdown.error > .menu > .item:hover { 695 background-color: #fff2f2; 696 } 697 698 /* Item Active */ 699 .ui.dropdown.error > .menu .active.item { 700 background-color: #fdcfcf; 701 } 702 703 /*-------------------- 704 Disabled 705 ----------------------*/ 706 707 708 /* Disabled */ 709 .ui.disabled.dropdown { 710 cursor: default; 711 pointer-events: none; 712 opacity: 0.3; 713 } 714 715 716 /******************************* 717 Variations 718 *******************************/ 719 720 721 /*-------------- 722 Direction 723 ---------------*/ 724 725 726 /* Flyout Direction */ 727 .ui.dropdown .menu { 728 left: 0px; 729 } 730 731 /* Default Side (Right) */ 732 .ui.dropdown .right.menu > .menu, 733 .ui.dropdown .menu .right.menu { 734 left: 100% !important; 735 right: auto !important; 736 } 737 738 /* Left Flyout Menu */ 739 .ui.dropdown > .left.menu .menu, 740 .ui.dropdown .menu .left.menu { 741 left: auto !important; 742 right: 100% !important; 743 } 744 .ui.dropdown .item .left.dropdown.icon, 745 .ui.dropdown .left.menu .item .dropdown.icon { 746 width: auto; 747 float: left; 748 margin: 0em 0.75em 0em 0em; 749 } 750 .ui.dropdown .item .left.dropdown.icon, 751 .ui.dropdown .left.menu .item .dropdown.icon { 752 width: auto; 753 float: left; 754 margin: 0em 0.75em 0em 0em; 755 } 756 .ui.dropdown .item .left.dropdown.icon + .text, 757 .ui.dropdown .left.menu .item .dropdown.icon + .text { 758 margin-left: 1em; 759 } 760 761 /*-------------- 762 Upward 763 ---------------*/ 764 765 .ui.upward.dropdown > .menu { 766 top: auto; 767 bottom: 100%; 768 box-shadow: 0px 0px 4px 0px rgba(39, 41, 43, 0.15); 769 border-radius: 0.2857rem 0.2857rem 0em 0em; 770 } 771 772 /* Active Upward */ 773 .ui.simple.upward.active.dropdown, 774 .ui.simple.upward.dropdown:hover { 775 border-radius: 0.2857rem 0.2857rem 0em 0em !important; 776 } 777 .ui.upward.dropdown.button:not(.pointing):not(.floating).active, 778 .ui.upward.dropdown.button:not(.pointing):not(.floating).visible { 779 border-radius: 0.2857rem 0.2857rem 0em 0em; 780 } 781 782 /* Selection */ 783 .ui.upward.selection.dropdown .menu { 784 border-top-width: 1px !important; 785 border-bottom-width: 0px !important; 786 } 787 .ui.upward.selection.dropdown:hover { 788 box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.05); 789 } 790 .ui.upward.selection.visible.dropdown:hover { 791 box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.05); 792 } 793 .ui.active.upward.selection.dropdown, 794 .ui.visible.upward.selection.dropdown { 795 border-radius: 0em 0em 0.2857rem 0.2857rem !important; 796 } 797 .ui.upward.selection.dropdown.visible { 798 box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08); 799 } 800 .ui.upward.selection.visible.dropdown:hover .menu { 801 box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08); 802 } 803 804 /*-------------- 805 Simple 806 ---------------*/ 807 808 809 /* Displays without javascript */ 810 .ui.simple.dropdown .menu:before, 811 .ui.simple.dropdown .menu:after { 812 display: none; 813 } 814 .ui.simple.dropdown .menu { 815 position: absolute; 816 display: block; 817 overflow: hidden; 818 top: -9999px !important; 819 opacity: 0; 820 width: 0; 821 height: 0; 822 -webkit-transition: opacity 0.2s ease; 823 transition: opacity 0.2s ease; 824 } 825 .ui.simple.active.dropdown, 826 .ui.simple.dropdown:hover { 827 border-bottom-left-radius: 0em !important; 828 border-bottom-right-radius: 0em !important; 829 } 830 .ui.simple.active.dropdown > .menu, 831 .ui.simple.dropdown:hover > .menu { 832 overflow: visible; 833 width: auto; 834 height: auto; 835 top: 100% !important; 836 opacity: 1; 837 } 838 .ui.simple.dropdown > .menu > .item:active > .menu, 839 .ui.simple.dropdown:hover > .menu > .item:hover > .menu { 840 overflow: visible; 841 width: auto; 842 height: auto; 843 top: 0% !important; 844 left: 100% !important; 845 opacity: 1; 846 } 847 .ui.simple.disabled.dropdown:hover .menu { 848 display: none; 849 height: 0px; 850 width: 0px; 851 overflow: hidden; 852 } 853 854 /* Visible */ 855 .ui.simple.visible.dropdown > .menu { 856 display: block; 857 } 858 859 /*-------------- 860 Fluid 861 ---------------*/ 862 863 .ui.fluid.dropdown { 864 display: block; 865 width: 100%; 866 min-width: 0em; 867 } 868 .ui.fluid.dropdown > .dropdown.icon { 869 float: right; 870 } 871 872 /*-------------- 873 Floating 874 ---------------*/ 875 876 .ui.floating.dropdown .menu { 877 left: 0; 878 right: auto; 879 box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.15); 880 border-radius: 0.2857rem; 881 } 882 .ui.floating.dropdown > .menu { 883 margin-top: 0.5em !important; 884 } 885 886 /*-------------- 887 Pointing 888 ---------------*/ 889 890 .ui.pointing.dropdown > .menu { 891 top: 100%; 892 margin-top: 0.75em; 893 border-radius: 0.2857rem; 894 } 895 .ui.pointing.dropdown > .menu:after { 896 display: block; 897 position: absolute; 898 pointer-events: none; 899 content: ''; 900 visibility: visible; 901 -webkit-transform: rotate(45deg); 902 -ms-transform: rotate(45deg); 903 transform: rotate(45deg); 904 width: 0.5em; 905 height: 0.5em; 906 box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.1); 907 background: #ffffff; 908 z-index: 2; 909 } 910 .ui.pointing.dropdown > .menu:after { 911 top: -0.25em; 912 left: 50%; 913 margin: 0em 0em 0em -0.25em; 914 } 915 916 /* Top Left Pointing */ 917 .ui.top.left.pointing.dropdown > .menu { 918 top: 100%; 919 bottom: auto; 920 left: 0%; 921 right: auto; 922 margin: 1em 0em 0em; 923 } 924 .ui.top.left.pointing.dropdown > .menu { 925 top: 100%; 926 bottom: auto; 927 left: 0%; 928 right: auto; 929 margin: 1em 0em 0em; 930 } 931 .ui.top.left.pointing.dropdown > .menu:after { 932 top: -0.25em; 933 left: 1em; 934 right: auto; 935 margin: 0em; 936 -webkit-transform: rotate(45deg); 937 -ms-transform: rotate(45deg); 938 transform: rotate(45deg); 939 } 940 941 /* Top Right Pointing */ 942 .ui.top.right.pointing.dropdown > .menu { 943 top: 100%; 944 bottom: auto; 945 right: 0%; 946 left: auto; 947 margin: 1em 0em 0em; 948 } 949 .ui.top.right.pointing.dropdown > .menu:after { 950 top: -0.25em; 951 left: auto; 952 right: 1em; 953 margin: 0em; 954 -webkit-transform: rotate(45deg); 955 -ms-transform: rotate(45deg); 956 transform: rotate(45deg); 957 } 958 959 /* Left Pointing */ 960 .ui.left.pointing.dropdown > .menu { 961 top: 0%; 962 left: 100%; 963 right: auto; 964 margin: 0em 0em 0em 1em; 965 } 966 .ui.left.pointing.dropdown > .menu:after { 967 top: 1em; 968 left: -0.25em; 969 margin: 0em 0em 0em 0em; 970 -webkit-transform: rotate(-45deg); 971 -ms-transform: rotate(-45deg); 972 transform: rotate(-45deg); 973 } 974 975 /* Right Pointing */ 976 .ui.right.pointing.dropdown > .menu { 977 top: 0%; 978 left: auto; 979 right: 100%; 980 margin: 0em 1em 0em 0em; 981 } 982 .ui.right.pointing.dropdown > .menu:after { 983 top: 1em; 984 left: auto; 985 right: -0.25em; 986 margin: 0em 0em 0em 0em; 987 -webkit-transform: rotate(135deg); 988 -ms-transform: rotate(135deg); 989 transform: rotate(135deg); 990 } 991 992 /* Bottom Pointing */ 993 .ui.bottom.pointing.dropdown > .menu { 994 top: auto; 995 bottom: 100%; 996 left: 0%; 997 right: auto; 998 margin: 0em 0em 1em; 999 } 1000 .ui.bottom.pointing.dropdown > .menu:after { 1001 top: auto; 1002 bottom: -0.25em; 1003 right: auto; 1004 margin: 0em; 1005 -webkit-transform: rotate(-135deg); 1006 -ms-transform: rotate(-135deg); 1007 transform: rotate(-135deg); 1008 } 1009 1010 /* Reverse Sub-Menu Direction */ 1011 .ui.bottom.pointing.dropdown > .menu .menu { 1012 top: auto !important; 1013 bottom: 0px !important; 1014 } 1015 1016 /* Bottom Left */ 1017 .ui.bottom.left.pointing.dropdown > .menu { 1018 left: 0%; 1019 right: auto; 1020 } 1021 .ui.bottom.left.pointing.dropdown > .menu:after { 1022 left: 1em; 1023 right: auto; 1024 } 1025 1026 /* Bottom Right */ 1027 .ui.bottom.right.pointing.dropdown > .menu { 1028 right: 0%; 1029 left: auto; 1030 } 1031 .ui.bottom.right.pointing.dropdown > .menu:after { 1032 left: auto; 1033 right: 1em; 1034 } 1035 1036 1037 /******************************* 1038 Theme Overrides 1039 *******************************/ 1040 1041 1042 /* Dropdown Carets */ 1043 @font-face { 1044 font-family: 'Dropdown'; 1045 src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggjB5AAAAC8AAAAYGNtYXAPfuIIAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5Zjo82LgAAAFwAAABVGhlYWQAQ88bAAACxAAAADZoaGVhAwcB6QAAAvwAAAAkaG10eAS4ABIAAAMgAAAAIGxvY2EBNgDeAAADQAAAABJtYXhwAAoAFgAAA1QAAAAgbmFtZVcZpu4AAAN0AAABRXBvc3QAAwAAAAAEvAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDX//3//wAB/+MPLQADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAIABJQElABMAABM0NzY3BTYXFhUUDwEGJwYvASY1AAUGBwEACAUGBoAFCAcGgAUBEgcGBQEBAQcECQYHfwYBAQZ/BwYAAQAAAG4BJQESABMAADc0PwE2MzIfARYVFAcGIyEiJyY1AAWABgcIBYAGBgUI/wAHBgWABwaABQWABgcHBgUFBgcAAAABABIASQC3AW4AEwAANzQ/ATYXNhcWHQEUBwYnBi8BJjUSBoAFCAcFBgYFBwgFgAbbBwZ/BwEBBwQJ/wgEBwEBB38GBgAAAAABAAAASQClAW4AEwAANxE0NzYzMh8BFhUUDwEGIyInJjUABQYHCAWABgaABQgHBgVbAQAIBQYGgAUIBwWABgYFBwAAAAEAAAABAADZuaKOXw889QALAgAAAAAA0ABHWAAAAADQAEdYAAAAAAElAW4AAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAASUAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAABAAAAASUAAAElAAAAtwASALcAAAAAAAAACgAUAB4AQgBkAIgAqgAAAAEAAAAIABQAAQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAOAAAAAQAAAAAAAgAOAEcAAQAAAAAAAwAOACQAAQAAAAAABAAOAFUAAQAAAAAABQAWAA4AAQAAAAAABgAHADIAAQAAAAAACgA0AGMAAwABBAkAAQAOAAAAAwABBAkAAgAOAEcAAwABBAkAAwAOACQAAwABBAkABAAOAFUAAwABBAkABQAWAA4AAwABBAkABgAOADkAAwABBAkACgA0AGMAaQBjAG8AbQBvAG8AbgBWAGUAcgBzAGkAbwBuACAAMQAuADAAaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AbgBSAGUAZwB1AGwAYQByAGkAYwBvAG0AbwBvAG4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=) format('truetype'), url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAAVwAAoAAAAABSgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAdkAAAHZLDXE/09TLzIAAALQAAAAYAAAAGAIIweQY21hcAAAAzAAAABMAAAATA9+4ghnYXNwAAADfAAAAAgAAAAIAAAAEGhlYWQAAAOEAAAANgAAADYAQ88baGhlYQAAA7wAAAAkAAAAJAMHAelobXR4AAAD4AAAACAAAAAgBLgAEm1heHAAAAQAAAAABgAAAAYACFAAbmFtZQAABAgAAAFFAAABRVcZpu5wb3N0AAAFUAAAACAAAAAgAAMAAAEABAQAAQEBCGljb21vb24AAQIAAQA6+BwC+BsD+BgEHgoAGVP/i4seCgAZU/+LiwwHi2v4lPh0BR0AAACIDx0AAACNER0AAAAJHQAAAdASAAkBAQgPERMWGyAlKmljb21vb25pY29tb29udTB1MXUyMHVGMEQ3dUYwRDh1RjBEOXVGMERBAAACAYkABgAIAgABAAQABwAKAA0AVgCfAOgBL/yUDvyUDvyUDvuUDvtvi/emFYuQjZCOjo+Pj42Qiwj3lIsFkIuQiY6Hj4iNhouGi4aJh4eHCPsU+xQFiIiGiYaLhouHjYeOCPsU9xQFiI+Jj4uQCA77b4v3FBWLkI2Pjo8I9xT3FAWPjo+NkIuQi5CJjogI9xT7FAWPh42Hi4aLhomHh4eIiIaJhosI+5SLBYaLh42HjoiPiY+LkAgO+92d928Vi5CNkI+OCPcU9xQFjo+QjZCLkIuPiY6Hj4iNhouGCIv7lAWLhomHh4iIh4eJhouGi4aNiI8I+xT3FAWHjomPi5AIDvvdi+YVi/eUBYuQjZCOjo+Pj42Qi5CLkImOhwj3FPsUBY+IjYaLhouGiYeHiAj7FPsUBYiHhomGi4aLh42Hj4iOiY+LkAgO+JQU+JQViwwKAAAAAAMCAAGQAAUAAAFMAWYAAABHAUwBZgAAAPUAGQCEAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA8NoB4P/g/+AB4AAgAAAAAQAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAA4AAAACgAIAAIAAgABACDw2v/9//8AAAAAACDw1//9//8AAf/jDy0AAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAABAAA5emozXw889QALAgAAAAAA0ABHWAAAAADQAEdYAAAAAAElAW4AAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAASUAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAABAAAAASUAAAElAAAAtwASALcAAAAAUAAACAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIADgBHAAEAAAAAAAMADgAkAAEAAAAAAAQADgBVAAEAAAAAAAUAFgAOAAEAAAAAAAYABwAyAAEAAAAAAAoANABjAAMAAQQJAAEADgAAAAMAAQQJAAIADgBHAAMAAQQJAAMADgAkAAMAAQQJAAQADgBVAAMAAQQJAAUAFgAOAAMAAQQJAAYADgA5AAMAAQQJAAoANABjAGkAYwBvAG0AbwBvAG4AVgBlAHIAcwBpAG8AbgAgADEALgAwAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG4AUgBlAGcAdQBsAGEAcgBpAGMAbwBtAG8AbwBuAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('woff'); 1046 font-weight: normal; 1047 font-style: normal; 1048 } 1049 .ui.dropdown > .dropdown.icon { 1050 font-family: 'Dropdown'; 1051 line-height: 1; 1052 height: 1em; 1053 width: 1.23em; 1054 -webkit-backface-visibility: hidden; 1055 backface-visibility: hidden; 1056 font-weight: normal; 1057 font-style: normal; 1058 text-align: center; 1059 } 1060 .ui.dropdown > .dropdown.icon { 1061 width: auto; 1062 } 1063 .ui.dropdown > .dropdown.icon:before { 1064 content: '\f0d7'; 1065 } 1066 1067 /* Sub Menu */ 1068 .ui.dropdown .menu .item .dropdown.icon:before { 1069 content: '\f0da' /*rtl:'\f0d9'*/; 1070 } 1071 .ui.dropdown .item .left.dropdown.icon:before, 1072 .ui.dropdown .left.menu .item .dropdown.icon:before { 1073 content: "\f0d9" /*rtl:"\f0da"*/; 1074 } 1075 1076 /* Upward Dropdown */ 1077 .ui.upward.dropdown > .dropdown.icon:before { 1078 content: "\f0d8"; 1079 } 1080 1081 /* Vertical Menu Dropdown */ 1082 .ui.vertical.menu .dropdown.item > .dropdown.icon:before { 1083 content: "\f0da" /*rtl:"\f0d9"*/; 1084 } 1085 /* Icons for Reference 1086 .dropdown.down.icon { 1087 content: "\f0d7"; 1088 } 1089 .dropdown.up.icon { 1090 content: "\f0d8"; 1091 } 1092 .dropdown.left.icon { 1093 content: "\f0d9"; 1094 } 1095 .dropdown.icon.icon { 1096 content: "\f0da"; 1097 } 1098 */ 1099 1100 1101 /******************************* 1102 User Overrides 1103 *******************************/ 1104