github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/src/definitions/modules/dropdown.less (about) 1 /*! 2 * # Semantic UI - 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 Theme 15 *******************************/ 16 17 @type : 'module'; 18 @element : 'dropdown'; 19 20 @import (multiple) '../../theme.config'; 21 22 /******************************* 23 Dropdown 24 *******************************/ 25 26 .ui.dropdown { 27 cursor: pointer; 28 position: relative; 29 display: inline-block; 30 line-height: 1em; 31 tap-highlight-color: rgba(0, 0, 0, 0); 32 outline: none; 33 text-align: left; 34 transition: @transition; 35 } 36 37 38 /******************************* 39 Content 40 *******************************/ 41 42 /*-------------- 43 Menu 44 ---------------*/ 45 46 .ui.dropdown .menu { 47 cursor: auto; 48 position: absolute; 49 display: none; 50 outline: none; 51 top: 100%; 52 transition: @menuTransition; 53 54 margin: @menuMargin; 55 padding: @menuPadding; 56 background: @menuBackground; 57 min-width: 100%; 58 59 white-space: @menuWrap; 60 font-size: 1rem; 61 text-shadow: none; 62 text-align: @menuTextAlign; 63 64 box-shadow: @menuBoxShadow; 65 border: @menuBorder; 66 border-radius: @menuBorderRadius; 67 transition: @menuTransition; 68 z-index: @menuZIndex; 69 will-change: transform, opacity; 70 } 71 72 /*-------------- 73 Hidden Input 74 ---------------*/ 75 76 .ui.dropdown > input:not(.search):first-child, 77 .ui.dropdown > select { 78 display: none !important; 79 } 80 81 /*-------------- 82 Dropdown Icon 83 ---------------*/ 84 85 .ui.dropdown > .dropdown.icon { 86 width: auto; 87 margin: @dropdownIconMargin; 88 } 89 .ui.dropdown .menu > .item .dropdown.icon { 90 width: auto; 91 float: @itemDropdownIconFloat; 92 margin: @itemDropdownIconMargin; 93 } 94 .ui.dropdown .menu > .item .dropdown.icon + .text { 95 margin-right: @itemDropdownIconDistance; 96 } 97 98 99 /*-------------- 100 Text 101 ---------------*/ 102 103 .ui.dropdown > .text { 104 display: inline-block; 105 transition: @textTransition; 106 } 107 108 /*-------------- 109 Menu Item 110 ---------------*/ 111 112 .ui.dropdown .menu > .item { 113 position: relative; 114 cursor: pointer; 115 display: block; 116 border: @itemBorder; 117 height: @itemHeight; 118 119 border-top: @itemDivider; 120 line-height: @itemLineHeight; 121 font-size: @itemFontSize; 122 color: @itemColor; 123 124 padding: @itemVerticalPadding @itemHorizontalPadding !important; 125 font-size: @itemFontSize; 126 text-transform: @itemTextTransform; 127 font-weight: @itemFontWeight; 128 box-shadow: @itemBoxShadow; 129 -webkit-touch-callout: none; 130 } 131 .ui.dropdown .menu > .item:first-child { 132 border-top-width: 0px; 133 } 134 135 /*-------------- 136 Floated Content 137 ---------------*/ 138 139 .ui.dropdown > .text > [class*="right floated"], 140 .ui.dropdown .menu .item > [class*="right floated"] { 141 float: right !important; 142 margin-right: 0em !important; 143 margin-left: @floatedDistance !important; 144 } 145 .ui.dropdown > .text > [class*="left floated"], 146 .ui.dropdown .menu .item > [class*="left floated"] { 147 float: left !important; 148 margin-left: 0em !important; 149 margin-right: @floatedDistance !important; 150 } 151 152 .ui.dropdown .menu .item > .icon.floated, 153 .ui.dropdown .menu .item > .flag.floated, 154 .ui.dropdown .menu .item > .image.floated, 155 .ui.dropdown .menu .item > img.floated { 156 margin-top: @itemLineHeightOffset; 157 } 158 159 160 /*-------------- 161 Menu Divider 162 ---------------*/ 163 164 .ui.dropdown .menu > .header { 165 margin: @menuHeaderMargin; 166 padding: @menuHeaderPadding; 167 color: @menuHeaderColor; 168 font-size: @menuHeaderFontSize; 169 font-weight: @menuHeaderFontWeight; 170 text-transform: @menuHeaderTextTransform; 171 } 172 173 .ui.dropdown .menu > .divider { 174 border-top: @menuDividerBorder; 175 height: 0em; 176 margin: @menuDividerMargin; 177 } 178 179 .ui.dropdown .menu > .input { 180 margin: @menuInputMargin; 181 min-width: @menuInputMinWidth; 182 } 183 .ui.dropdown .menu > .header + .input { 184 margin-top: 0em; 185 } 186 .ui.dropdown .menu > .input:not(.transparent) input { 187 padding: @menuInputPadding; 188 } 189 .ui.dropdown .menu > .input:not(.transparent) .button, 190 .ui.dropdown .menu > .input:not(.transparent) .icon, 191 .ui.dropdown .menu > .input:not(.transparent) .label { 192 padding-top: @menuInputVerticalPadding; 193 padding-bottom: @menuInputVerticalPadding; 194 } 195 196 /*----------------- 197 Item Description 198 -------------------*/ 199 200 .ui.dropdown > .text > .description, 201 .ui.dropdown .menu > .item > .description { 202 margin: @itemDescriptionMargin; 203 color: @itemDescriptionColor; 204 } 205 206 207 /*-------------- 208 Sub Menu 209 ---------------*/ 210 211 .ui.dropdown .menu .menu { 212 top: @subMenuTop !important; 213 left: @subMenuLeft !important; 214 right: @subMenuRight !important; 215 margin: @subMenuMargin !important; 216 border-radius: @subMenuBorderRadius !important; 217 z-index: @subMenuZIndex !important; 218 } 219 220 /* Hide Arrow */ 221 .ui.dropdown .menu .menu:after { 222 display: none; 223 } 224 225 226 /******************************* 227 Coupling 228 *******************************/ 229 230 /*-------------- 231 Sub Elements 232 ---------------*/ 233 234 /* Icons / Flags / Labels / Image */ 235 .ui.dropdown > .text > .icon, 236 .ui.dropdown > .text > .label, 237 .ui.dropdown > .text > .flag, 238 .ui.dropdown > .text > img, 239 .ui.dropdown > .text > .image { 240 margin-top: @textLineHeightOffset; 241 } 242 .ui.dropdown .menu > .item > .icon, 243 .ui.dropdown .menu > .item > .label, 244 .ui.dropdown .menu > .item > .flag, 245 .ui.dropdown .menu > .item > .image, 246 .ui.dropdown .menu > .item > img { 247 margin-top: @itemLineHeightOffset; 248 } 249 250 .ui.dropdown > .text > .icon, 251 .ui.dropdown > .text > .label, 252 .ui.dropdown > .text > .flag, 253 .ui.dropdown > .text > img, 254 .ui.dropdown > .text > .image, 255 .ui.dropdown .menu > .item > .icon, 256 .ui.dropdown .menu > .item > .label, 257 .ui.dropdown .menu > .item > .flag, 258 .ui.dropdown .menu > .item > .image, 259 .ui.dropdown .menu > .item > img { 260 margin-left: 0em; 261 float: @itemElementFloat; 262 margin-right: @itemElementDistance; 263 } 264 265 /*-------------- 266 Image 267 ---------------*/ 268 269 .ui.dropdown > .text > img, 270 .ui.dropdown > .text > .image, 271 .ui.dropdown .menu > .item > .image, 272 .ui.dropdown .menu > .item > img { 273 display: inline-block; 274 vertical-align: middle; 275 width: auto; 276 max-height: @menuImageMaxHeight; 277 } 278 279 280 /*-------------- 281 Menu 282 ---------------*/ 283 284 /* Remove Menu Item Divider */ 285 .ui.dropdown .ui.menu > .item:before, 286 .ui.menu .ui.dropdown .menu > .item:before { 287 display: none; 288 } 289 290 /* Prevent Menu Item Border */ 291 .ui.menu .ui.dropdown .menu .active.item { 292 border-left: none; 293 } 294 295 /* Automatically float dropdown menu right on last menu item */ 296 .ui.menu .right.menu .dropdown:last-child .menu, 297 .ui.menu .right.dropdown.item .menu, 298 .ui.buttons > .ui.dropdown:last-child .menu { 299 left: auto; 300 right: 0em; 301 } 302 303 /*-------------- 304 Button 305 ---------------*/ 306 307 /* No Margin On Icon Button */ 308 .ui.dropdown.icon.button > .dropdown.icon { 309 margin: 0em; 310 } 311 .ui.dropdown.button:not(.pointing):not(.floating).active, 312 .ui.dropdown.button:not(.pointing):not(.floating).visible { 313 border-bottom-left-radius: 0em; 314 border-bottom-right-radius: 0em; 315 } 316 317 318 319 /******************************* 320 Types 321 *******************************/ 322 323 /*-------------- 324 Selection 325 ---------------*/ 326 327 /* Displays like a select box */ 328 .ui.selection.dropdown { 329 cursor: pointer; 330 word-wrap: break-word; 331 white-space: normal; 332 outline: 0; 333 transform: rotateZ(0deg); 334 335 min-width: @selectionMinWidth; 336 337 background: @selectionBackground; 338 display: @selectionDisplay; 339 padding: @selectionPadding; 340 color: @selectionTextColor; 341 box-shadow: @selectionBoxShadow; 342 border: @selectionBorder; 343 border-radius: @selectionBorderRadius; 344 transition: @selectionTransition; 345 } 346 .ui.selection.dropdown.visible, 347 .ui.selection.dropdown.active { 348 z-index: @selectionZIndex; 349 } 350 351 select.ui.dropdown { 352 height: @selectHeight; 353 padding: @selectPadding; 354 border: @selectBorder; 355 visibility: @selectVisibility; 356 } 357 .ui.selection.dropdown > .text { 358 margin-right: @selectionTextIconDistance; 359 } 360 .ui.selection.dropdown > .search.icon, 361 .ui.selection.dropdown > .delete.icon, 362 .ui.selection.dropdown > .dropdown.icon { 363 cursor: pointer; 364 position: absolute; 365 top: auto; 366 width: auto; 367 margin: @selectionIconMargin; 368 padding: @selectionIconPadding; 369 right: @selectionHorizontalPadding; 370 opacity: @selectionIconOpacity; 371 transition: @selectionIconTransition; 372 } 373 374 /* Compact */ 375 .ui.compact.selection.dropdown { 376 min-width: 0px; 377 } 378 379 /* Selection Menu */ 380 .ui.selection.dropdown .menu { 381 overflow-x: hidden; 382 overflow-y: auto; 383 backface-visibility: hidden; 384 -webkit-overflow-scrolling: touch; 385 border-top-width: 0px !important; 386 width: auto; 387 margin: 0px -@menuBorderWidth; 388 min-width: @menuMinWidth; 389 outline: none; 390 391 box-shadow: @selectionMenuBoxShadow; 392 transition: @selectionMenuTransition; 393 } 394 .ui.selection.dropdown .menu:after, 395 .ui.selection.dropdown .menu:before { 396 display: none; 397 } 398 399 400 /* Scrollbar in IE */ 401 @media all and (-ms-high-contrast:none) { 402 .ui.selection.dropdown .menu { 403 min-width: ~"calc(100% - "@scrollbarWidth~")"; 404 } 405 } 406 407 @media only screen and (max-width : @largestMobileScreen) { 408 .ui.selection.dropdown .menu { 409 max-height: @selectionMobileMaxMenuHeight; 410 } 411 } 412 @media only screen and (min-width: @tabletBreakpoint) { 413 .ui.selection.dropdown .menu { 414 max-height: @selectionTabletMaxMenuHeight; 415 } 416 } 417 @media only screen and (min-width: @computerBreakpoint) { 418 .ui.selection.dropdown .menu { 419 max-height: @selectionComputerMaxMenuHeight; 420 } 421 } 422 @media only screen and (min-width: @widescreenMonitorBreakpoint) { 423 .ui.selection.dropdown .menu { 424 max-height: @selectionWidescreenMaxMenuHeight; 425 } 426 } 427 428 /* Menu Item */ 429 .ui.selection.dropdown .menu > .item { 430 border-top: @selectionItemDivider; 431 padding: @selectionItemPadding !important; 432 white-space: normal; 433 word-wrap: normal; 434 } 435 436 /* Hover */ 437 .ui.selection.dropdown:hover { 438 border-color: @selectionHoverBorderColor; 439 box-shadow: @selectionHoverBoxShadow; 440 } 441 442 /* Disabled */ 443 .ui.selection.dropdown.disabled, 444 .ui.selection.dropdown.disabled:hover { 445 cursor: default; 446 box-shadow: none; 447 color: @selectionTextColor; 448 border: @selectionBorder; 449 opacity: @disabledOpacity !important; 450 } 451 /* Visible */ 452 .ui.selection.dropdown.visible { 453 border-color: @selectionVisibleBorderColor; 454 box-shadow: @selectionVisibleBoxShadow; 455 } 456 457 .ui.selection.visible.dropdown .menu { 458 border-color: @selectionVisibleBorderColor; 459 box-shadow: @selectionVisibleMenuBoxShadow; 460 } 461 462 463 /* Visible Hover */ 464 .ui.selection.visible.dropdown:hover { 465 border-color: @selectionVisibleHoverBorderColor; 466 box-shadow: @selectionVisibleHoverBoxShadow; 467 } 468 469 .ui.selection.visible.dropdown .menu { 470 border-color: @selectionVisibleHoverBorderColor; 471 box-shadow: @selectionVisibleHoverMenuBoxShadow; 472 } 473 474 475 /* Active Item */ 476 .ui.selection.active.dropdown > .text:not(.default), 477 .ui.selection.visible.dropdown > .text:not(.default) { 478 font-weight: @selectionVisibleTextFontWeight; 479 color: @selectionVisibleTextColor; 480 } 481 482 /* Dropdown Icon */ 483 .ui.active.selection.dropdown > .dropdown.icon, 484 .ui.visible.selection.dropdown > .dropdown.icon { 485 opacity: @selectionVisibleIconOpacity; 486 z-index: 3; 487 } 488 489 /* Connecting Border */ 490 .ui.active.selection.dropdown, 491 .ui.visible.selection.dropdown { 492 border-bottom-left-radius: @selectionVisibleConnectingBorder !important; 493 border-bottom-right-radius: @selectionVisibleConnectingBorder !important; 494 } 495 496 /*-------------- 497 Searchable 498 ---------------*/ 499 500 /* Search Selection */ 501 .ui.search.dropdown { 502 min-width: @searchMinWidth; 503 } 504 505 /* Search Dropdown */ 506 .ui.search.dropdown > input.search { 507 background: none transparent !important; 508 border: none !important; 509 box-shadow: none !important; 510 border-radius: 0em !important; 511 cursor: pointer; 512 top: 0em; 513 left: 0em; 514 width: 100%; 515 outline: none; 516 -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 517 padding: inherit; 518 } 519 520 /* Text Layering */ 521 .ui.search.dropdown > input.search { 522 position: absolute; 523 z-index: 2; 524 } 525 .ui.search.dropdown > .text { 526 cursor: text; 527 position: relative; 528 z-index: 3; 529 } 530 531 /* Search Selection */ 532 .ui.search.selection.dropdown > input.search { 533 line-height: @searchSelectionLineHeight; 534 padding: @searchSelectionInputPadding; 535 } 536 537 /* Active/Visible Search */ 538 .ui.search.dropdown.active > input.search, 539 .ui.search.dropdown.visible > input.search { 540 cursor: auto; 541 } 542 .ui.search.dropdown.active > .text, 543 .ui.search.dropdown.visible > .text { 544 pointer-events: none; 545 } 546 .ui.active.search.dropdown > input.search:focus + .text { 547 color: @unselectedTextColor !important; 548 } 549 550 /* Search Menu */ 551 .ui.search.dropdown .menu { 552 overflow-x: hidden; 553 overflow-y: auto; 554 backface-visibility: hidden; 555 -webkit-overflow-scrolling: touch; 556 } 557 @media only screen and (max-width : @largestMobileScreen) { 558 .ui.search.dropdown .menu { 559 max-height: @searchMobileMaxMenuHeight; 560 } 561 } 562 @media only screen and (min-width: @tabletBreakpoint) { 563 .ui.search.dropdown .menu { 564 max-height: @searchTabletMaxMenuHeight; 565 } 566 } 567 @media only screen and (min-width: @computerBreakpoint) { 568 .ui.search.dropdown .menu { 569 max-height: @searchComputerMaxMenuHeight; 570 } 571 } 572 @media only screen and (min-width: @widescreenMonitorBreakpoint) { 573 .ui.search.dropdown .menu { 574 max-height: @searchWidescreenMaxMenuHeight; 575 } 576 } 577 578 579 /*-------------- 580 Inline 581 ---------------*/ 582 583 .ui.inline.dropdown { 584 cursor: pointer; 585 display: inline-block; 586 color: @inlineTextColor; 587 } 588 .ui.inline.dropdown .dropdown.icon { 589 margin: @inlineIconMargin; 590 vertical-align: top; 591 } 592 .ui.inline.dropdown > .text { 593 font-weight: @inlineTextFontWeight; 594 } 595 .ui.inline.dropdown .menu { 596 cursor: auto; 597 margin-top: @inlineMenuDistance; 598 border-radius: @inlineMenuBorderRadius; 599 } 600 601 602 /******************************* 603 States 604 *******************************/ 605 606 607 /*-------------------- 608 Hover 609 ----------------------*/ 610 611 /* Menu Item Hover */ 612 .ui.dropdown .menu > .item:hover { 613 background: @hoveredItemBackground; 614 color: @hoveredItemColor; 615 z-index: @hoveredZIndex; 616 } 617 618 /*-------------------- 619 Active 620 ----------------------*/ 621 622 /* Menu Item Active */ 623 .ui.dropdown .menu .active.item { 624 background: @activeItemBackground; 625 font-weight: @activeItemFontWeight; 626 color: @activeItemColor; 627 box-shadow: @activeItemBoxShadow; 628 z-index: @activeItemZIndex; 629 } 630 631 /*-------------------- 632 Default Text 633 ----------------------*/ 634 635 .ui.dropdown > .default.text, 636 .ui.default.dropdown > .text { 637 color: @defaultTextColor; 638 } 639 .ui.dropdown:hover > .default.text, 640 .ui.default.dropdown:hover > .text { 641 color: @defaultTextHoverColor; 642 } 643 644 /*-------------------- 645 Loading 646 ----------------------*/ 647 648 .ui.loading.dropdown > .text { 649 transition: none; 650 } 651 .ui.dropdown > .loading.menu { 652 display: block; 653 visibility: hidden; 654 z-index: @loadingZIndex; 655 } 656 657 /*-------------------- 658 Keyboard Select 659 ----------------------*/ 660 661 /* Selected Item */ 662 .ui.dropdown.selected, 663 .ui.dropdown .menu .selected.item { 664 background: @selectedBackground; 665 color: @selectedColor; 666 } 667 668 669 /*-------------------- 670 Search Filtered 671 ----------------------*/ 672 673 /* Filtered Item */ 674 .ui.dropdown > .filtered.text { 675 visibility: hidden; 676 } 677 .ui.dropdown .filtered.item { 678 display: none !important; 679 } 680 681 682 /*-------------------- 683 Error 684 ----------------------*/ 685 686 .ui.dropdown.error, 687 .ui.dropdown.error > .text, 688 .ui.dropdown.error > .default.text { 689 color: @errorTextColor; 690 } 691 692 .ui.selection.dropdown.error { 693 background: @errorBackgroundColor; 694 border-color: @errorBorderColor; 695 } 696 697 .ui.selection.dropdown.error:hover { 698 border-color: @errorBorderColor; 699 } 700 701 .ui.dropdown.error > .menu, 702 .ui.dropdown.error > .menu .menu { 703 border-color: @errorBorderColor; 704 } 705 706 .ui.dropdown.error > .menu > .item { 707 color: @errorItemTextColor; 708 } 709 710 /* Item Hover */ 711 .ui.dropdown.error > .menu > .item:hover { 712 background-color: @errorItemHoverBackground; 713 } 714 715 /* Item Active */ 716 .ui.dropdown.error > .menu .active.item { 717 background-color: @errorItemActiveBackground; 718 } 719 720 721 722 /*-------------------- 723 Disabled 724 ----------------------*/ 725 726 /* Disabled */ 727 .ui.disabled.dropdown { 728 cursor: default; 729 pointer-events: none; 730 opacity: @disabledOpacity; 731 } 732 733 734 /******************************* 735 Variations 736 *******************************/ 737 738 /*-------------- 739 Direction 740 ---------------*/ 741 742 /* Flyout Direction */ 743 .ui.dropdown .menu { 744 left: 0px; 745 } 746 747 748 /* Default Side (Right) */ 749 .ui.dropdown .right.menu > .menu, 750 .ui.dropdown .menu .right.menu { 751 left: 100% !important; 752 right: auto !important; 753 } 754 755 /* Left Flyout Menu */ 756 .ui.dropdown > .left.menu .menu, 757 .ui.dropdown .menu .left.menu { 758 left: auto !important; 759 right: 100% !important; 760 } 761 762 .ui.dropdown .item .left.dropdown.icon, 763 .ui.dropdown .left.menu .item .dropdown.icon { 764 width: auto; 765 float: @leftMenuDropdownIconFloat; 766 margin: @leftMenuDropdownIconMargin; 767 } 768 .ui.dropdown .item .left.dropdown.icon, 769 .ui.dropdown .left.menu .item .dropdown.icon { 770 width: auto; 771 float: @leftMenuDropdownIconFloat; 772 margin: @leftMenuDropdownIconMargin; 773 } 774 .ui.dropdown .item .left.dropdown.icon + .text, 775 .ui.dropdown .left.menu .item .dropdown.icon + .text { 776 margin-left: @itemDropdownIconDistance; 777 } 778 779 780 /*-------------- 781 Upward 782 ---------------*/ 783 784 .ui.upward.dropdown > .menu { 785 top: auto; 786 bottom: 100%; 787 box-shadow: @upwardMenuBoxShadow; 788 border-radius: @upwardMenuBorderRadius; 789 } 790 791 /* Active Upward */ 792 .ui.simple.upward.active.dropdown, 793 .ui.simple.upward.dropdown:hover { 794 border-radius: @borderRadius @borderRadius 0em 0em !important; 795 } 796 .ui.upward.dropdown.button:not(.pointing):not(.floating).active, 797 .ui.upward.dropdown.button:not(.pointing):not(.floating).visible { 798 border-radius: @borderRadius @borderRadius 0em 0em; 799 } 800 801 /* Selection */ 802 .ui.upward.selection.dropdown .menu { 803 border-top-width: @menuBorderWidth !important; 804 border-bottom-width: 0px !important; 805 } 806 .ui.upward.selection.dropdown:hover { 807 box-shadow: @upwardSelectionHoverBoxShadow; 808 } 809 .ui.upward.selection.visible.dropdown:hover { 810 box-shadow: @upwardSelectionVisibleHoverBoxShadow; 811 } 812 .ui.active.upward.selection.dropdown, 813 .ui.visible.upward.selection.dropdown { 814 border-radius: @upwardSelectionVisibleBorderRadius !important; 815 } 816 .ui.upward.selection.dropdown.visible { 817 box-shadow: @upwardSelectionVisibleBoxShadow; 818 } 819 .ui.upward.selection.visible.dropdown:hover .menu { 820 box-shadow: @upwardSelectionVisibleHoverMenuBoxShadow; 821 } 822 823 /*-------------- 824 Simple 825 ---------------*/ 826 827 /* Displays without javascript */ 828 829 .ui.simple.dropdown .menu:before, 830 .ui.simple.dropdown .menu:after { 831 display: none; 832 } 833 .ui.simple.dropdown .menu { 834 position: absolute; 835 display: block; 836 overflow: hidden; 837 top: -9999px !important; 838 opacity: 0; 839 width: 0; 840 height: 0; 841 transition: @simpleTransition; 842 } 843 844 .ui.simple.active.dropdown, 845 .ui.simple.dropdown:hover { 846 border-bottom-left-radius: 0em !important; 847 border-bottom-right-radius: 0em !important; 848 } 849 850 .ui.simple.active.dropdown > .menu, 851 .ui.simple.dropdown:hover > .menu { 852 overflow: visible; 853 width: auto; 854 height: auto; 855 top: 100% !important; 856 opacity: 1; 857 } 858 .ui.simple.dropdown > .menu > .item:active > .menu, 859 .ui.simple.dropdown:hover > .menu > .item:hover > .menu { 860 overflow: visible; 861 width: auto; 862 height: auto; 863 top: 0% !important; 864 left: 100% !important; 865 opacity: 1; 866 } 867 .ui.simple.disabled.dropdown:hover .menu { 868 display: none; 869 height: 0px; 870 width: 0px; 871 overflow: hidden; 872 } 873 874 /* Visible */ 875 .ui.simple.visible.dropdown > .menu { 876 display: block; 877 } 878 879 /*-------------- 880 Fluid 881 ---------------*/ 882 883 .ui.fluid.dropdown { 884 display: block; 885 width: 100%; 886 min-width: 0em; 887 } 888 .ui.fluid.dropdown > .dropdown.icon { 889 float: right; 890 } 891 892 893 /*-------------- 894 Floating 895 ---------------*/ 896 897 .ui.floating.dropdown .menu { 898 left: 0; 899 right: auto; 900 box-shadow: @floatingMenuBoxShadow; 901 border-radius: @floatingMenuBorderRadius; 902 } 903 .ui.floating.dropdown > .menu { 904 margin-top: @floatingMenuDistance !important; 905 } 906 907 /*-------------- 908 Pointing 909 ---------------*/ 910 911 .ui.pointing.dropdown > .menu { 912 top: 100%; 913 margin-top: @pointingMenuDistance; 914 border-radius: @pointingMenuBorderRadius; 915 } 916 917 .ui.pointing.dropdown > .menu:after { 918 display: block; 919 position: absolute; 920 pointer-events: none; 921 content: ''; 922 visibility: visible; 923 transform: rotate(45deg); 924 925 width: @pointingArrowSize; 926 height: @pointingArrowSize; 927 box-shadow: @pointingArrowBoxShadow; 928 background: @pointingArrowBackground; 929 z-index: @pointingArrowZIndex; 930 } 931 932 .ui.pointing.dropdown > .menu:after { 933 top: @pointingArrowOffset; 934 left: 50%; 935 margin: 0em 0em 0em @pointingArrowOffset; 936 } 937 938 /* Top Left Pointing */ 939 .ui.top.left.pointing.dropdown > .menu { 940 top: 100%; 941 bottom: auto; 942 left: 0%; 943 right: auto; 944 margin: @pointingArrowDistanceFromEdge 0em 0em; 945 } 946 .ui.top.left.pointing.dropdown > .menu { 947 top: 100%; 948 bottom: auto; 949 left: 0%; 950 right: auto; 951 margin: @pointingArrowDistanceFromEdge 0em 0em; 952 } 953 .ui.top.left.pointing.dropdown > .menu:after { 954 top: @pointingArrowOffset; 955 left: @pointingArrowDistanceFromEdge; 956 right: auto; 957 margin: 0em; 958 transform: rotate(45deg); 959 } 960 /* Top Right Pointing */ 961 .ui.top.right.pointing.dropdown > .menu { 962 top: 100%; 963 bottom: auto; 964 right: 0%; 965 left: auto; 966 margin: @pointingArrowDistanceFromEdge 0em 0em; 967 } 968 .ui.top.right.pointing.dropdown > .menu:after { 969 top: @pointingArrowOffset; 970 left: auto; 971 right: @pointingArrowDistanceFromEdge; 972 margin: 0em; 973 transform: rotate(45deg); 974 } 975 976 /* Left Pointing */ 977 .ui.left.pointing.dropdown > .menu { 978 top: 0%; 979 left: 100%; 980 right: auto; 981 margin: 0em 0em 0em @pointingArrowDistanceFromEdge; 982 } 983 .ui.left.pointing.dropdown > .menu:after { 984 top: 1em; 985 left: @pointingArrowOffset; 986 margin: 0em 0em 0em 0em; 987 transform: rotate(-45deg); 988 } 989 990 /* Right Pointing */ 991 .ui.right.pointing.dropdown > .menu { 992 top: 0%; 993 left: auto; 994 right: 100%; 995 margin: 0em @pointingArrowDistanceFromEdge 0em 0em; 996 } 997 .ui.right.pointing.dropdown > .menu:after { 998 top: 1em; 999 left: auto; 1000 right: @pointingArrowOffset; 1001 margin: 0em 0em 0em 0em; 1002 transform: rotate(135deg); 1003 } 1004 1005 /* Bottom Pointing */ 1006 .ui.bottom.pointing.dropdown > .menu { 1007 top: auto; 1008 bottom: 100%; 1009 left: 0%; 1010 right: auto; 1011 margin: 0em 0em @pointingArrowDistanceFromEdge ; 1012 } 1013 .ui.bottom.pointing.dropdown > .menu:after { 1014 top: auto; 1015 bottom: @pointingArrowOffset; 1016 right: auto; 1017 margin: 0em; 1018 transform: rotate(-135deg); 1019 } 1020 /* Reverse Sub-Menu Direction */ 1021 .ui.bottom.pointing.dropdown > .menu .menu { 1022 top: auto !important; 1023 bottom: 0px !important; 1024 } 1025 1026 /* Bottom Left */ 1027 .ui.bottom.left.pointing.dropdown > .menu { 1028 left: 0%; 1029 right: auto; 1030 } 1031 .ui.bottom.left.pointing.dropdown > .menu:after { 1032 left: @pointingArrowDistanceFromEdge; 1033 right: auto; 1034 } 1035 1036 /* Bottom Right */ 1037 .ui.bottom.right.pointing.dropdown > .menu { 1038 right: 0%; 1039 left: auto; 1040 } 1041 .ui.bottom.right.pointing.dropdown > .menu:after { 1042 left: auto; 1043 right: @pointingArrowDistanceFromEdge; 1044 } 1045 1046 .loadUIOverrides();