github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/src/definitions/collections/menu.less (about) 1 /*! 2 * # Semantic UI - Menu 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 : 'collection'; 18 @element : 'menu'; 19 20 @import (multiple) '../../theme.config'; 21 22 /******************************* 23 Standard 24 *******************************/ 25 26 /*-------------- 27 Menu 28 ---------------*/ 29 30 .ui.menu { 31 margin: @margin; 32 background: @background; 33 font-size: 0em; 34 font-weight: @fontWeight; 35 box-shadow: @boxShadow; 36 border-radius: @borderRadius; 37 } 38 39 .ui.menu:after { 40 content: ''; 41 display: block; 42 height: 0px; 43 clear: both; 44 visibility: hidden; 45 } 46 47 .ui.menu:first-child { 48 margin-top: 0rem; 49 } 50 .ui.menu:last-child { 51 margin-bottom: 0rem; 52 } 53 54 .ui.menu .menu { 55 margin: 0em; 56 } 57 .ui.menu:not(.vertical) .menu { 58 font-size: 0em; 59 } 60 61 /*-------------- 62 Colors 63 ---------------*/ 64 65 /* Text Color */ 66 .ui.menu .item { 67 color: @menuTextColor; 68 } 69 .ui.menu .item .item { 70 color: @subMenuTextColor; 71 } 72 73 /* Hover */ 74 .ui.menu .item .menu a.item:hover, 75 .ui.menu .item .menu .link.item:hover { 76 color: @darkTextColor; 77 } 78 79 80 /*-------------- 81 Items 82 ---------------*/ 83 84 .ui.menu .item { 85 position: relative; 86 display: inline-block; 87 padding: @verticalPadding @horizontalPadding; 88 border-top: @borderSize solid transparent; 89 90 background: @itemBackground; 91 vertical-align: middle; 92 line-height: 1; 93 text-decoration: none; 94 box-sizing: border-box; 95 96 -webkit-tap-highlight-color: transparent; 97 user-select: none; 98 transition: @transition; 99 } 100 101 102 /* Floated Content */ 103 .ui.menu > .item:first-child { 104 border-radius: @borderRadius 0px 0px @borderRadius; 105 } 106 .ui.menu:not(.vertical) .item.left, 107 .ui.menu:not(.vertical) .menu.left { 108 float: left; 109 } 110 .ui.menu:not(.vertical) .item.right, 111 .ui.menu:not(.vertical) .menu.right { 112 float: right; 113 } 114 115 116 /*-------------- 117 Borders 118 ---------------*/ 119 120 .ui.menu .item:before { 121 position: absolute; 122 content: ''; 123 top: 0%; 124 right: 0px; 125 width: @dividerSize; 126 height: 100%; 127 background: @dividerBackground; 128 } 129 .ui.menu > .right.menu:first-child { 130 display: none; 131 } 132 .ui.menu .menu.right .item:before, 133 .ui.menu .item.right:before { 134 right: auto; 135 left: 0px; 136 } 137 138 /*-------------- 139 Text Content 140 ---------------*/ 141 142 .ui.menu .text.item > *, 143 .ui.menu .item > a:not(.ui), 144 .ui.menu .item > p:only-child { 145 user-select: text; 146 line-height: @textLineHeight; 147 color: @textColor; 148 } 149 .ui.menu .item > p:first-child { 150 margin-top: 0; 151 } 152 .ui.menu .item > p:last-child { 153 margin-bottom: 0; 154 } 155 156 /*-------------- 157 Icons 158 ---------------*/ 159 160 .ui.menu .item > i.icon { 161 opacity: @iconOpacity; 162 float: @iconFloat; 163 margin: @iconMargin; 164 } 165 166 .ui.menu .item > i.dropdown.icon { 167 float: @dropdownIconFloat; 168 margin-left: @dropdownIconDistance; 169 } 170 171 /*-------------- 172 Button 173 ---------------*/ 174 175 .ui.menu:not(.vertical) .item > .button { 176 position: relative; 177 top: @buttonOffset; 178 margin: -@buttonVerticalPadding 0; 179 padding-bottom: @buttonVerticalPadding; 180 padding-top: @buttonVerticalPadding; 181 font-size: @buttonSize; 182 } 183 184 185 /*-------------- 186 Inputs 187 ---------------*/ 188 189 .ui.menu .item > .input { 190 width: 100%; 191 } 192 .ui.menu:not(.vertical) .item > .input { 193 position: relative; 194 top: @inputOffset; 195 margin: @inputVerticalMargin 0em; 196 } 197 .ui.menu .item > .input input { 198 font-size: @inputSize; 199 padding-top: @inputVerticalPadding; 200 padding-bottom: @inputVerticalPadding; 201 } 202 .ui.menu .item > .input .button, 203 .ui.menu .item > .input .label { 204 padding-top: @inputVerticalPadding; 205 padding-bottom: @inputVerticalPadding; 206 } 207 208 /* Resizes */ 209 .ui.small.menu .item > .input input { 210 top: @smallInputOffset; 211 padding-top: @smallInputVerticalPadding; 212 padding-bottom: @smallInputVerticalPadding; 213 } 214 .ui.small.menu .item > .input .button, 215 .ui.small.menu .item > .input .label { 216 padding-top: @smallInputVerticalPadding; 217 padding-bottom: @smallInputVerticalPadding; 218 } 219 .ui.large.menu .item > .input input { 220 top: @largeInputOffset; 221 padding-bottom: @largeInputVerticalPadding; 222 padding-top: @largeInputVerticalPadding; 223 } 224 .ui.large.menu .item > .input .button, 225 .ui.large.menu .item > .input .label { 226 padding-top: @largeInputVerticalPadding; 227 padding-bottom: @largeInputVerticalPadding; 228 } 229 230 231 /*-------------- 232 Header 233 ---------------*/ 234 235 .ui.menu .header.item, 236 .ui.vertical.menu .header.item { 237 background: @headerBackground; 238 margin: 0em; 239 text-transform: @headerTextTransform; 240 font-weight: @headerWeight; 241 } 242 243 244 /*-------------- 245 Dropdowns 246 ---------------*/ 247 248 /* Dropdown */ 249 .ui.menu .ui.dropdown.item.visible { 250 background: @subtleTransparentBlack; 251 border-bottom-right-radius: 0em; 252 border-bottom-left-radius: 0em; 253 } 254 .ui.menu .ui.dropdown.active { 255 box-shadow: none; 256 } 257 258 /* Menu Position */ 259 .ui.menu .dropdown.item .menu { 260 background: @dropdownBackground; 261 left: 0px; 262 margin: @dropdownMenuOffset 0px 0px; 263 min-width: ~"calc(100% - 1px)"; 264 box-shadow: @dropdownBoxShadow; 265 } 266 .ui.menu:not(.secondary) .pointing.dropdown.item .menu { 267 margin-top: @dropdownPointingDistance; 268 border-top-left-radius: 0em; 269 border-top-right-radius: 0em; 270 } 271 .ui.menu .simple.dropdown.item .menu { 272 margin: 0px !important; 273 } 274 275 276 /* Secondary Menu Dropdown */ 277 .ui.secondary.menu > .menu > .active.dropdown.item { 278 background-color: transparent; 279 } 280 .ui.secondary.menu .dropdown.item .menu { 281 left: 0px; 282 min-width: 100%; 283 } 284 285 /* Even Width Menu Dropdown */ 286 .ui.item.menu .dropdown .menu .item { 287 width: 100%; 288 } 289 290 /*-------------- 291 Labels 292 ---------------*/ 293 294 .ui.menu .item > .label { 295 background: @labelBackground; 296 color: @labelTextColor; 297 margin: @labelOffset 0em @labelOffset @labelTextMargin; 298 padding: @labelVerticalPadding @labelHorizontalPadding; 299 vertical-align: baseline; 300 } 301 .ui.menu .item > .floating.label { 302 padding: @labelVerticalPadding @labelHorizontalPadding; 303 } 304 305 /*-------------- 306 Images 307 ---------------*/ 308 309 .ui.menu .item > img:only-child { 310 display: block; 311 max-width: 100%; 312 margin: 0em auto; 313 } 314 315 316 /******************************* 317 States 318 *******************************/ 319 320 /*-------------- 321 Hover 322 ---------------*/ 323 324 .ui.link.menu > .item:hover, 325 .ui.menu > .link.item:hover, 326 .ui.menu > a.item:hover, 327 .ui.link.menu .menu > .item:hover, 328 .ui.menu .menu > .link.item:hover, 329 .ui.menu .menu > a.item:hover { 330 cursor: pointer; 331 background: @hoverBackground; 332 color: @hoverColor; 333 } 334 335 336 /*-------------- 337 Pressed 338 ---------------*/ 339 340 .ui.link.menu .item:active, 341 .ui.menu .link.item:active, 342 .ui.menu a.item:active { 343 background: @pressedBackground; 344 color: @pressedColor; 345 } 346 347 /*-------------- 348 Active 349 ---------------*/ 350 351 .ui.menu .active.item { 352 background: @activeBackground; 353 color: @selectedTextColor; 354 font-weight: @activeFontWeight; 355 box-shadow: 0em @activeBorderSize 0em inset; 356 } 357 .ui.menu .active.item > i.icon { 358 opacity: @activeIconOpacity; 359 } 360 361 /* Vertical */ 362 .ui.vertical.menu .active.item { 363 background: @activeBackground; 364 border-radius: 0em; 365 box-shadow: @activeBorderSize 0em 0em inset; 366 } 367 .ui.vertical.menu > .active.item:first-child { 368 border-radius: 0em @borderRadius 0em 0em; 369 } 370 .ui.vertical.menu > .active.item:last-child { 371 border-radius: 0em 0em @borderRadius 0em; 372 } 373 .ui.vertical.menu > .active.item:only-child { 374 border-radius: 0em @borderRadius @borderRadius 0em; 375 } 376 .ui.vertical.menu .active.item .menu .active.item { 377 border-left: none; 378 } 379 .ui.vertical.menu .item .menu .active.item { 380 background-color: @subMenuActiveBackground; 381 box-shadow: none; 382 } 383 384 385 /*-------------- 386 Active Hover 387 ---------------*/ 388 389 .ui.vertical.menu .active.item:hover, 390 .ui.menu .active.item:hover { 391 background-color: @activeHoverBackground; 392 } 393 394 /*-------------- 395 Disabled 396 ---------------*/ 397 398 .ui.menu .item.disabled, 399 .ui.menu .item.disabled:hover { 400 cursor: default; 401 color: @disabledTextColor; 402 background-color: transparent !important; 403 } 404 405 406 /******************************* 407 Types 408 *******************************/ 409 410 /*-------------- 411 Vertical 412 ---------------*/ 413 414 .ui.vertical.menu { 415 background: @verticalBackground; 416 } 417 418 /*--- Item ---*/ 419 .ui.vertical.menu .item { 420 background: @verticalItemBackground; 421 display: block; 422 height: auto !important; 423 border-top: none; 424 border-left: @borderSize solid transparent; 425 border-right: none; 426 } 427 .ui.vertical.menu > .item:first-child { 428 border-radius: @borderRadius @borderRadius 0px 0px; 429 } 430 .ui.vertical.menu > .item:last-child { 431 border-radius: 0px 0px @borderRadius @borderRadius; 432 } 433 434 /*--- Label ---*/ 435 .ui.vertical.menu .item > .label { 436 float: right; 437 text-align: center; 438 } 439 440 /*--- Icon ---*/ 441 .ui.vertical.menu .item > i.icon { 442 width: @iconWidth; 443 float: @verticalIconFloat; 444 margin: @verticalIconMargin; 445 } 446 .ui.vertical.menu .item > .label + i.icon { 447 float: @labelAndIconFloat; 448 margin: @labelAndIconMargin; 449 } 450 451 452 /*--- Border ---*/ 453 .ui.vertical.menu .item:before { 454 position: absolute; 455 content: ''; 456 top: 0%; 457 left: 0px; 458 width: 100%; 459 height: @dividerSize; 460 background: @verticalDividerBackground; 461 height: 1px; 462 } 463 464 .ui.vertical.menu .item:first-child:before { 465 background: none !important; 466 } 467 468 /*--- Dropdown ---*/ 469 .ui.vertical.menu .dropdown.item > .icon { 470 float: right; 471 content: "\f0da"; 472 margin-left: 1em; 473 } 474 .ui.vertical.menu .active.dropdown.item { 475 border-top-right-radius: 0em; 476 border-bottom-right-radius: 0em; 477 } 478 .ui.vertical.menu .dropdown.item .menu { 479 top: 0% !important; 480 left: 100%; 481 margin: @dropdownMenuOffset 0px 0px @dropdownMenuOffset; 482 box-shadow: @dropdownVerticalBoxShadow; 483 border-radius: 0em @borderRadius @borderRadius @borderRadius; 484 } 485 .ui.vertical.menu .dropdown.item .menu .item { 486 font-size: 1rem; 487 } 488 .ui.vertical.menu .dropdown.item .menu .item i.icon { 489 margin-right: 0em; 490 } 491 .ui.vertical.menu .dropdown.item.active { 492 box-shadow: none; 493 } 494 495 /*--- Sub Menu ---*/ 496 .ui.vertical.menu .item:not(.dropdown) > .menu { 497 margin: @subMenuMargin -@horizontalPadding 0em; 498 } 499 .ui.vertical.menu .item:not(.dropdown) > .menu > .item { 500 background: none; 501 padding: @subMenuHorizontalPadding @subMenuVerticalPadding; 502 font-size: @subMenuFontSize; 503 } 504 .ui.vertical.menu .item > .menu > .item:before { 505 display: none; 506 } 507 508 509 /*-------------- 510 Tiered 511 ---------------*/ 512 513 .ui.tiered.menu > .menu > .item:hover { 514 color: @tieredSubMenuActiveColor; 515 } 516 .ui.tiered.menu .active.item { 517 background: @tieredActiveItemBackground; 518 } 519 .ui.tiered.menu > .menu .item.active:after { 520 position: absolute; 521 content: ''; 522 margin-top: -@dividerSize; 523 top: 100%; 524 left: 0px; 525 526 width: 100%; 527 height: 2px; 528 background-color: @tieredActiveMenuBackground; 529 } 530 531 /* Sub Menu */ 532 .ui.tiered.menu .sub.menu { 533 background-color: @tieredActiveMenuBackground; 534 border-radius: 0em 0em @borderRadius @borderRadius; 535 border-top: 1px solid @borderColor; 536 box-shadow: none; 537 } 538 .ui.tiered.menu > .sub.menu > .item { 539 color: @tieredSubMenuColor; 540 font-weight: @tieredSubMenuFontWeight; 541 text-transform: @tieredSubMenuTextTransform; 542 font-size: @subMenuFontSize; 543 } 544 545 /* Sub Menu Divider */ 546 .ui.tiered.menu .sub.menu .item:before { 547 background: none; 548 } 549 550 /* Sub Menu Hover */ 551 .ui.tiered.menu .sub.menu .item:hover { 552 background: @tieredSubMenuHoverBackground; 553 color: @tieredSubMenuHoverColor; 554 } 555 556 /* Sub Menu Active */ 557 .ui.tiered.menu .sub.menu .active.item { 558 padding-top: @verticalPadding; 559 background: @tieredSubMenuActiveBackground; 560 border-radius: 0; 561 border-top: medium none; 562 box-shadow: none; 563 color: @tieredSubMenuActiveColor !important; 564 } 565 .ui.tiered.menu .sub.menu .active.item:after { 566 display: none; 567 } 568 569 /* Inverted Tiered Menu */ 570 .ui.inverted.tiered.menu > .menu > .item { 571 color: @invertedUnselectedTextColor; 572 } 573 .ui.inverted.tiered.menu .sub.menu { 574 background-color: @tieredInvertedSubMenuBackground; 575 } 576 .ui.inverted.tiered.menu .sub.menu .item { 577 color: @invertedLightTextColor; 578 } 579 .ui.inverted.tiered.menu > .menu > .item:hover { 580 color: @invertedHoveredTextColor; 581 } 582 .ui.inverted.tiered.menu .active.item:after { 583 display: none; 584 } 585 .ui.inverted.tiered.menu > .sub.menu > .active.item, 586 .ui.inverted.tiered.menu > .menu > .active.item { 587 color: @invertedSelectedTextColor !important; 588 box-shadow: none; 589 } 590 591 /* Tiered Pointing */ 592 .ui.pointing.tiered.menu > .menu > .item:after { 593 display: none; 594 } 595 .ui.pointing.tiered.menu > .sub.menu > .item:after { 596 display: block; 597 } 598 599 600 /*-------------- 601 Tabular 602 ---------------*/ 603 604 .ui.tabular.menu { 605 background-color: transparent; 606 border-radius: 0em; 607 box-shadow: none !important; 608 border-bottom: @tabularBorderWidth solid @tabularBorderColor; 609 } 610 .ui.tabular.fluid.menu { 611 width: @tabularFluidWidth !important; 612 } 613 .ui.tabular.menu .item { 614 background-color: transparent; 615 616 border-left: @tabularBorderWidth solid transparent; 617 border-right: @tabularBorderWidth solid transparent; 618 border-top: @tabularBorderWidth solid transparent; 619 620 padding-left: @tabularHorizontalPadding; 621 padding-right: @tabularHorizontalPadding; 622 color: @tabularMenuTextColor; 623 } 624 .ui.tabular.menu .item:before { 625 display: none; 626 } 627 628 /* Hover */ 629 .ui.tabular.menu .item:hover { 630 background-color: transparent; 631 color: @hoveredTextColor; 632 } 633 634 /* Active */ 635 .ui.tabular.menu .active.item { 636 position: relative; 637 border-bottom: none; 638 vertical-align: bottom; 639 640 background-color: @tabularMenuActiveBackground; 641 color: @tabularActiveColor; 642 border-color: @tabularBorderColor; 643 font-weight: @tabularActiveWeight; 644 margin-bottom: -@tabularBorderWidth; 645 box-shadow: @tabularActiveBoxShadow; 646 border-radius: @tabularBorderRadius @tabularBorderRadius 0px 0px; 647 } 648 649 /* Coupling with segment for attachment */ 650 .ui.attached.tabular.menu { 651 position: relative; 652 z-index: 2; 653 } 654 .ui.tabular.menu + .bottom.attached.segment, 655 .ui.tabular.menu ~ .bottom.attached.segment + .bottom.attached.segment { 656 border-top: none; 657 margin: 0px; 658 } 659 660 661 662 /*-------------- 663 Pagination 664 ---------------*/ 665 666 .ui.pagination.menu { 667 margin: 0em; 668 display: inline-block; 669 vertical-align: middle; 670 } 671 672 .ui.pagination.menu .item { 673 min-width: @paginationMinWidth; 674 text-align: center; 675 } 676 .ui.pagination.menu .icon.item i.icon { 677 vertical-align: top; 678 } 679 .ui.pagination.menu.floated { 680 display: block; 681 } 682 683 /* Active */ 684 .ui.pagination.menu .active.item { 685 border-top: none; 686 padding-top: @verticalPadding; 687 background-color: @paginationActiveBackground; 688 box-shadow: none; 689 } 690 691 /*-------------- 692 Secondary 693 ---------------*/ 694 695 .ui.secondary.menu { 696 background: @secondaryBackground; 697 border-radius: 0em; 698 box-shadow: none; 699 } 700 .ui.secondary.menu > .menu > .item, 701 .ui.secondary.menu > .item { 702 box-shadow: none; 703 704 border: none; 705 height: auto !important; 706 background: @secondaryItemBackground; 707 708 margin: 0em @secondaryMargin; 709 padding: @secondaryVerticalPadding @secondaryHorizontalPadding; 710 711 border-radius: @secondaryBorderRadius; 712 } 713 .ui.secondary.menu > .menu > .item:before, 714 .ui.secondary.menu > .item:before { 715 display: none !important; 716 } 717 718 .ui.secondary.menu .item > .input input { 719 background-color: transparent; 720 border: none; 721 } 722 723 .ui.secondary.menu .link.item, 724 .ui.secondary.menu a.item { 725 opacity: @secondaryLinkOpacity; 726 transition: none; 727 } 728 .ui.secondary.menu .header.item { 729 border-right: @secondaryHeaderBorder; 730 background: @secondaryHeaderBackground; 731 border-radius: 0em; 732 } 733 734 /* Hover */ 735 .ui.secondary.menu .link.item:hover, 736 .ui.secondary.menu a.item:hover { 737 opacity: 1; 738 } 739 740 /* Active */ 741 .ui.secondary.menu > .menu > .active.item, 742 .ui.secondary.menu > .active.item { 743 background: @secondaryActiveBackground; 744 opacity: 1; 745 box-shadow: none; 746 } 747 .ui.secondary.vertical.menu > .active.item { 748 border-radius: @secondaryBorderRadius; 749 } 750 751 /* Inverted */ 752 .ui.secondary.inverted.menu .link.item, 753 .ui.secondary.inverted.menu a.item { 754 color: @secondaryInvertedColor; 755 } 756 .ui.secondary.inverted.menu .link.item:hover, 757 .ui.secondary.inverted.menu a.item:hover { 758 color: @secondaryInvertedHoverColor; 759 } 760 .ui.secondary.inverted.menu .active.item { 761 background-color: @secondaryInvertedActiveBackground; 762 } 763 764 765 /* Disable variations */ 766 .ui.secondary.item.menu > .item { 767 margin: 0em; 768 } 769 .ui.secondary.attached.menu { 770 box-shadow: none; 771 } 772 773 774 /*--------------------- 775 Secondary Vertical 776 -----------------------*/ 777 778 .ui.secondary.vertical.menu > .item { 779 border: none; 780 margin: 0em 0em @secondaryVerticalMargin; 781 border-radius: @borderRadius; 782 } 783 .ui.secondary.vertical.menu > .header.item { 784 border-radius: 0em; 785 } 786 787 /* Inverted */ 788 .ui.secondary.inverted.menu { 789 background-color: transparent; 790 } 791 792 .ui.secondary.inverted.pointing.menu { 793 border-bottom: @secondaryPointingBorderWidth solid rgba(255, 255, 255, 0.1); 794 } 795 .ui.secondary.inverted.pointing.menu > .item { 796 color: rgba(255, 255, 255, 0.7); 797 } 798 .ui.secondary.inverted.pointing.menu > .header.item { 799 color: #FFFFFF !important; 800 } 801 802 /* Hover */ 803 .ui.secondary.inverted.pointing.menu > .menu > .item:hover, 804 .ui.secondary.inverted.pointing.menu > .item:hover { 805 color: rgba(255, 255, 255, 0.85); 806 } 807 808 /* Pressed */ 809 .ui.secondary.inverted.pointing.menu > .menu > .item:active, 810 .ui.secondary.inverted.pointing.menu > .item:active { 811 border-color: rgba(255, 255, 255, 0.4); 812 } 813 814 /* Active */ 815 .ui.secondary.inverted.pointing.menu > .menu > .item.active, 816 .ui.secondary.inverted.pointing.menu > .item.active { 817 border-color: rgba(255, 255, 255, 0.8); 818 color: rgba(255, 255, 255, 1); 819 } 820 821 822 /*--------------------- 823 Secondary Pointing 824 -----------------------*/ 825 826 .ui.secondary.pointing.menu { 827 border-bottom: @secondaryPointingBorderWidth solid rgba(0, 0, 0, 0.1); 828 } 829 830 .ui.secondary.pointing.menu > .menu > .item, 831 .ui.secondary.pointing.menu > .item { 832 margin: 0em 0em -@secondaryPointingBorderWidth; 833 padding: @secondaryPointingVerticalPadding @secondaryPointingHorizontalPadding; 834 border-bottom: @secondaryPointingBorderWidth solid transparent; 835 border-radius: 0em; 836 transition: @secondaryTransition; 837 } 838 839 /* Item Types */ 840 .ui.secondary.pointing.menu .header.item { 841 margin-bottom: -@secondaryPointingBorderWidth; 842 background-color: transparent !important; 843 border-right-width: 0px !important; 844 font-weight: bold !important; 845 color: @secondaryPointingHeaderColor !important; 846 } 847 .ui.secondary.pointing.menu .text.item { 848 box-shadow: none !important; 849 } 850 .ui.secondary.pointing.menu > .menu > .item:after, 851 .ui.secondary.pointing.menu > .item:after { 852 display: none; 853 } 854 855 /* Hover */ 856 .ui.secondary.pointing.menu > .menu > .link.item:hover, 857 .ui.secondary.pointing.menu > .link.item:hover, 858 .ui.secondary.pointing.menu > .menu > a.item:hover, 859 .ui.secondary.pointing.menu > a.item:hover { 860 background-color: transparent; 861 color: @secondaryPointingHoverTextColor; 862 } 863 864 /* Pressed */ 865 .ui.secondary.pointing.menu > .menu > .link.item:active, 866 .ui.secondary.pointing.menu > .link.item:active, 867 .ui.secondary.pointing.menu > .menu > a.item:active, 868 .ui.secondary.pointing.menu > a.item:active { 869 background-color: transparent; 870 border-color: @secondaryPointingBorderColor; 871 } 872 873 /* Active */ 874 .ui.secondary.pointing.menu > .menu > .item.active, 875 .ui.secondary.pointing.menu > .item.active { 876 background-color: transparent; 877 border-color: rgba(0, 0, 0, 0.4); 878 box-shadow: none; 879 color: @secondaryPointingActiveTextColor; 880 } 881 882 /* Secondary Vertical Pointing */ 883 .ui.secondary.vertical.pointing.menu { 884 border: none; 885 border-right: @secondaryPointingBorderWidth solid rgba(0, 0, 0, 0.1); 886 } 887 .ui.secondary.vertical.pointing.menu > .item { 888 margin: 0em -@secondaryPointingBorderWidth 0em 0em; 889 border-bottom: none; 890 border-right: @secondaryPointingBorderWidth solid transparent; 891 border-radius: 0em; 892 } 893 894 /* Hover */ 895 .ui.secondary.vertical.pointing.menu > .item:hover { 896 background-color: transparent; 897 color: rgba(0, 0, 0, 0.7); 898 } 899 900 /* Pressed */ 901 .ui.secondary.vertical.pointing.menu > .item:active { 902 background-color: transparent; 903 border-color: rgba(0, 0, 0, 0.2); 904 } 905 906 /* Active */ 907 .ui.secondary.vertical.pointing.menu > .item.active { 908 background-color: transparent; 909 border-color: rgba(0, 0, 0, 0.4); 910 color: rgba(0, 0, 0, 0.85); 911 } 912 913 /* Inverted Vertical Pointing Secondary */ 914 .ui.secondary.inverted.vertical.pointing.menu { 915 border-right: @secondaryPointingBorderWidth solid rgba(255, 255, 255, 0.1); 916 border-bottom: none; 917 } 918 919 920 /*-------------- 921 Text Menu 922 ---------------*/ 923 924 .ui.text.menu { 925 display: inline-block; 926 background: none transparent; 927 928 margin: 1rem -1rem; 929 border-radius: 0px; 930 931 box-shadow: none; 932 } 933 .ui.text.menu > .item { 934 opacity: 0.8; 935 936 margin: 0em 1em; 937 padding: 0em; 938 height: auto !important; 939 940 border-radius: 0px; 941 942 box-shadow: none; 943 transition: @textMenuTransition; 944 } 945 .ui.text.menu > .item:before { 946 display: none !important; 947 } 948 .ui.text.menu .header.item { 949 background-color: transparent; 950 951 opacity: 1; 952 color: rgba(50, 50, 50, 0.8); 953 font-size: 0.875rem; 954 padding: 0em; 955 text-transform: uppercase; 956 font-weight: bold; 957 } 958 .ui.text.menu .text.item { 959 opacity: 1; 960 color: rgba(50, 50, 50, 0.8); 961 font-weight: bold; 962 } 963 964 /*--- fluid text ---*/ 965 .ui.text.item.menu .item { 966 margin: 0em; 967 } 968 969 /*--- vertical text ---*/ 970 .ui.vertical.text.menu { 971 margin: 1rem 0em; 972 } 973 .ui.vertical.text.menu:first-child { 974 margin-top: 0rem; 975 } 976 .ui.vertical.text.menu:last-child { 977 margin-bottom: 0rem; 978 } 979 .ui.vertical.text.menu .item { 980 float: left; 981 clear: left; 982 margin: 0.5em 0em; 983 } 984 .ui.vertical.text.menu .item > i.icon { 985 float: none; 986 margin: 0em @verticalPadding 0em 0em; 987 } 988 .ui.vertical.text.menu .header.item { 989 margin: 0.8em 0em; 990 } 991 992 /*--- hover ---*/ 993 .ui.text.menu .item:hover { 994 opacity: 1; 995 background-color: transparent; 996 } 997 998 /*--- active ---*/ 999 .ui.text.menu .active.item { 1000 background-color: transparent; 1001 padding: 0em; 1002 border: none; 1003 opacity: 1; 1004 font-weight: bold; 1005 box-shadow: none; 1006 } 1007 1008 /* disable variations */ 1009 .ui.text.pointing.menu .active.item:after { 1010 box-shadow: none; 1011 } 1012 .ui.text.attached.menu { 1013 box-shadow: none; 1014 } 1015 1016 /* Inverted */ 1017 .ui.inverted.text.menu, 1018 .ui.inverted.text.menu .item, 1019 .ui.inverted.text.menu .item:hover, 1020 .ui.inverted.text.menu .item.active { 1021 background-color: transparent; 1022 } 1023 1024 /* Fluid */ 1025 .ui.fluid.text.menu { 1026 margin-left: 0em; 1027 margin-right: 0em; 1028 } 1029 1030 /*-------------- 1031 Icon Only 1032 ---------------*/ 1033 1034 .ui.icon.menu, 1035 .ui.vertical.icon.menu { 1036 width: auto; 1037 display: inline-block; 1038 height: auto; 1039 } 1040 .ui.icon.menu > .item { 1041 height: auto; 1042 text-align: @iconMenuTextAlign; 1043 color: @iconMenuItemColor; 1044 } 1045 .ui.icon.menu > .item > .icon { 1046 display: block; 1047 float: none !important; 1048 margin: 0em auto !important; 1049 opacity: 1; 1050 } 1051 .ui.icon.menu .icon:before { 1052 opacity: 1; 1053 } 1054 1055 /* Item Icon Only */ 1056 .ui.menu .icon.item .icon { 1057 margin: 0em; 1058 } 1059 1060 .ui.vertical.icon.menu { 1061 float: none; 1062 } 1063 1064 /*--- inverted ---*/ 1065 .ui.inverted.icon.menu .item { 1066 color: rgba(255, 255, 255, 0.8); 1067 } 1068 .ui.inverted.icon.menu .icon { 1069 color: rgba(255, 255, 255, 1); 1070 } 1071 1072 /*-------------- 1073 Labeled Icon 1074 ---------------*/ 1075 1076 .ui.labeled.icon.menu { 1077 text-align: center; 1078 } 1079 .ui.fluid.labeled.icon.menu > .item { 1080 min-width: 0em; 1081 } 1082 1083 .ui.labeled.icon.menu > .item { 1084 min-width: @labeledIconMinWidth; 1085 } 1086 .ui.labeled.icon.menu > .item > .icon { 1087 display: block; 1088 font-size: @labeledIconSize !important; 1089 margin: 0em auto @labeledIconTextMargin !important; 1090 } 1091 1092 1093 1094 /******************************* 1095 Variations 1096 *******************************/ 1097 1098 /*-------------- 1099 Colors 1100 ---------------*/ 1101 1102 /*--- Light Colors ---*/ 1103 .ui.menu .blue.active.item, 1104 .ui.blue.menu .active.item { 1105 border-color: @blue !important; 1106 color: @blue !important; 1107 } 1108 .ui.menu .green.active.item, 1109 .ui.green.menu .active.item { 1110 border-color: @green !important; 1111 color: @green !important; 1112 } 1113 .ui.menu .orange.active.item, 1114 .ui.orange.menu .active.item { 1115 border-color: @orange !important; 1116 color: @orange !important; 1117 } 1118 .ui.menu .pink.active.item, 1119 .ui.pink.menu .active.item { 1120 border-color: @pink !important; 1121 color: @pink !important; 1122 } 1123 .ui.menu .purple.active.item, 1124 .ui.purple.menu .active.item { 1125 border-color: @purple !important; 1126 color: @purple !important; 1127 } 1128 .ui.menu .red.active.item, 1129 .ui.red.menu .active.item { 1130 border-color: @red !important; 1131 color: @red !important; 1132 } 1133 .ui.menu .teal.active.item, 1134 .ui.teal.menu .active.item { 1135 border-color: @teal !important; 1136 color: @teal !important; 1137 } 1138 .ui.menu .yellow.active.item, 1139 .ui.yellow.menu .active.item { 1140 border-color: @yellow !important; 1141 color: @yellow !important; 1142 } 1143 1144 1145 1146 /*-------------- 1147 Inverted 1148 ---------------*/ 1149 1150 .ui.inverted.menu { 1151 background: @invertedBackground; 1152 box-shadow: @invertedBoxShadow; 1153 } 1154 .ui.inverted.menu .header.item { 1155 margin: 0em; 1156 background: @invertedHeaderBackground; 1157 box-shadow: none; 1158 } 1159 1160 .ui.inverted.menu .item, 1161 .ui.inverted.menu .item > a:not(.ui) { 1162 color: @invertedTextColor; 1163 } 1164 1165 .ui.inverted.menu .item:not(.dropdown).menu { 1166 background: @invertedSubMenuBackground; 1167 } 1168 1169 .ui.inverted.menu .item .item, 1170 .ui.inverted.menu .item .item > a:not(.ui) { 1171 color: @invertedSubMenuColor; 1172 } 1173 .ui.inverted.menu .dropdown .menu .item { 1174 color: @dropdownTextColor !important; 1175 transition: none; 1176 } 1177 .ui.inverted.menu .dropdown .menu .item:hover { 1178 background: @dropdownBackgroundHover !important; 1179 color: @dropdownTextColorHover !important; 1180 } 1181 .ui.inverted.menu .item.disabled, 1182 .ui.inverted.menu .item.disabled:hover { 1183 color: @invertedDisabledTextColor; 1184 } 1185 1186 1187 1188 /*--- Border ---*/ 1189 .ui.inverted.menu .item:before { 1190 background: @invertedDividerBackground; 1191 } 1192 .ui.vertical.inverted.menu .item:before { 1193 background: @invertedVerticalDividerBackground; 1194 } 1195 1196 /*--- Hover ---*/ 1197 .ui.link.inverted.menu .item:hover, 1198 .ui.inverted.menu .link.item:hover, 1199 .ui.inverted.menu a.item:hover, 1200 .ui.inverted.menu .dropdown.item:hover { 1201 background: @invertedHoverBackground; 1202 color: @invertedHoverColor; 1203 } 1204 .ui.inverted.menu .item .menu a.item:hover, 1205 .ui.inverted.menu .item .menu .link.item:hover { 1206 background: @invertedSubMenuBackground; 1207 color: @invertedSubMenuHoverColor; 1208 } 1209 1210 /*--- Pressed ---*/ 1211 .ui.inverted.menu a.item:active, 1212 .ui.inverted.menu .dropdown.item:active, 1213 .ui.inverted.menu .link.item:active, 1214 .ui.inverted.menu a.item:active { 1215 background: @invertedMenuPressedBackground; 1216 color: @invertedMenuPressedColor; 1217 } 1218 1219 /*--- Active ---*/ 1220 .ui.inverted.menu .active.item { 1221 box-shadow: none !important; 1222 background: @invertedActiveBackground; 1223 color: @invertedActiveColor !important; 1224 } 1225 .ui.inverted.vertical.menu .item .menu .active.item { 1226 background: @invertedSubMenuActiveBackground; 1227 color: @invertedSubMenuActiveColor; 1228 } 1229 1230 /*--- Pointers ---*/ 1231 .ui.inverted.pointing.menu .active.item:after { 1232 background: #5B5B5B; 1233 box-shadow: none; 1234 } 1235 .ui.inverted.pointing.menu .active.item:hover:after { 1236 background: #4A4A4A; 1237 } 1238 1239 1240 /*-------------- 1241 Selection 1242 ---------------*/ 1243 1244 .ui.selection.menu > .item { 1245 color: rgba(0, 0, 0, 0.4); 1246 } 1247 .ui.selection.menu > .item:hover { 1248 color: rgba(0, 0, 0, 0.6); 1249 } 1250 .ui.selection.menu > .item.active { 1251 color: rgba(0, 0, 0, 0.85); 1252 } 1253 1254 .ui.inverted.selection.menu > .item { 1255 color: rgba(255, 255, 255, 0.4); 1256 } 1257 .ui.inverted.selection.menu > .item:hover { 1258 color: rgba(255, 255, 255, 0.9); 1259 } 1260 .ui.inverted.selection.menu > .item.active { 1261 color: #FFFFFF; 1262 } 1263 1264 1265 /*-------------- 1266 Floated 1267 ---------------*/ 1268 1269 .ui.floated.menu { 1270 float: left; 1271 margin: 0rem 0.5rem 0rem 0rem; 1272 } 1273 .ui.right.floated.menu { 1274 float: right; 1275 margin: 0rem 0rem 0rem 0.5rem; 1276 } 1277 1278 1279 /*-------------- 1280 Inverted Colors 1281 ---------------*/ 1282 1283 /*--- Light Colors ---*/ 1284 .ui.grey.menu { 1285 background-color: @offWhite; 1286 } 1287 1288 /*--- Inverted Colors ---*/ 1289 1290 /* Blue */ 1291 .ui.inverted.blue.menu { 1292 background-color: @blue; 1293 } 1294 .ui.inverted.blue.pointing.menu .active.item:after { 1295 background-color: @blue; 1296 } 1297 /* Green */ 1298 .ui.inverted.green.menu { 1299 background-color: @green; 1300 } 1301 .ui.inverted.green.pointing.menu .active.item:after { 1302 background-color: @green; 1303 } 1304 /* Orange */ 1305 .ui.inverted.orange.menu { 1306 background-color: @orange; 1307 } 1308 .ui.inverted.orange.pointing.menu .active.item:after { 1309 background-color: @orange; 1310 } 1311 /* Pink */ 1312 .ui.inverted.pink.menu { 1313 background-color: @pink; 1314 } 1315 .ui.inverted.pink.pointing.menu .active.item:after { 1316 background-color: @pink; 1317 } 1318 /* Purple */ 1319 .ui.inverted.purple.menu { 1320 background-color: @purple; 1321 } 1322 .ui.inverted.purple.pointing.menu .active.item:after { 1323 background-color: @purple; 1324 } 1325 /* Red */ 1326 .ui.inverted.red.menu { 1327 background-color: @red; 1328 } 1329 .ui.inverted.red.pointing.menu .active.item:after { 1330 background-color: @red; 1331 } 1332 /* Teal */ 1333 .ui.inverted.teal.menu { 1334 background-color: @teal; 1335 } 1336 .ui.inverted.teal.pointing.menu .active.item:after { 1337 background-color: @teal; 1338 } 1339 /* Yellow */ 1340 .ui.inverted.yellow.menu { 1341 background-color: @yellow; 1342 } 1343 .ui.inverted.yellow.pointing.menu .active.item:after { 1344 background-color: @yellow; 1345 } 1346 1347 1348 /*-------------- 1349 Fitted 1350 ---------------*/ 1351 1352 .ui.fitted.menu .item, 1353 .ui.fitted.menu .item .menu .item, 1354 .ui.menu .fitted.item { 1355 padding: 0em; 1356 } 1357 .ui.horizontally.fitted.menu .item, 1358 .ui.horizontally.fitted.menu .item .menu .item, 1359 .ui.menu .horizontally.fitted.item { 1360 padding-top: @verticalPadding; 1361 padding-bottom: @verticalPadding; 1362 } 1363 .ui.vertically.fitted.menu .item, 1364 .ui.vertically.fitted.menu .item .menu .item, 1365 .ui.menu .vertically.fitted.item { 1366 padding-left: @horizontalPadding; 1367 padding-right: @horizontalPadding; 1368 } 1369 1370 /*-------------- 1371 Borderless 1372 ---------------*/ 1373 1374 .ui.borderless.menu .item:before, 1375 .ui.borderless.menu .item .menu .item:before, 1376 .ui.menu .borderless.item:before { 1377 background: none !important; 1378 } 1379 1380 /*------------------- 1381 Compact 1382 --------------------*/ 1383 1384 .ui.compact.menu { 1385 display: inline-block; 1386 margin: 0em; 1387 vertical-align: middle; 1388 } 1389 .ui.compact.vertical.menu { 1390 width: auto !important; 1391 } 1392 .ui.compact.vertical.menu .item:last-child::before { 1393 display: block; 1394 } 1395 1396 /*------------------- 1397 Fluid 1398 --------------------*/ 1399 1400 .ui.menu.fluid, 1401 .ui.vertical.menu.fluid { 1402 display: block; 1403 width: 100% !important; 1404 } 1405 1406 1407 /*------------------- 1408 Evenly Sized 1409 --------------------*/ 1410 1411 .ui.item.menu, 1412 .ui.item.menu .item { 1413 width: 100%; 1414 padding-left: 0px !important; 1415 padding-right: 0px !important; 1416 text-align: center; 1417 } 1418 .ui.menu.two.item .item { 1419 width: 50%; 1420 } 1421 .ui.menu.three.item .item { 1422 width: 33.333%; 1423 } 1424 .ui.menu.four.item .item { 1425 width: 25%; 1426 } 1427 .ui.menu.five.item .item { 1428 width: 20%; 1429 } 1430 .ui.menu.six.item .item { 1431 width: 16.666%; 1432 } 1433 .ui.menu.seven.item .item { 1434 width: 14.285%; 1435 } 1436 .ui.menu.eight.item .item { 1437 width: 12.500%; 1438 } 1439 .ui.menu.nine.item .item { 1440 width: 11.11%; 1441 } 1442 .ui.menu.ten.item .item { 1443 width: 10.0%; 1444 } 1445 .ui.menu.eleven.item .item { 1446 width: 9.09%; 1447 } 1448 .ui.menu.twelve.item .item { 1449 width: 8.333%; 1450 } 1451 1452 1453 /*-------------- 1454 Fixed 1455 ---------------*/ 1456 1457 .ui.menu.fixed { 1458 position: fixed; 1459 z-index: 101; 1460 margin: 0em; 1461 border: none; 1462 width: 100%; 1463 } 1464 .ui.menu.fixed, 1465 .ui.menu.fixed .item:first-child, 1466 .ui.menu.fixed .item:last-child { 1467 border-radius: 0px !important; 1468 } 1469 1470 .ui.fixed.menu, 1471 .ui.top.fixed.menu { 1472 top: 0px; 1473 left: 0px; 1474 right: auto; 1475 bottom: auto; 1476 } 1477 .ui.right.fixed.menu { 1478 top: 0px; 1479 right: 0px; 1480 left: auto; 1481 bottom: auto; 1482 width: auto; 1483 height: 100%; 1484 } 1485 .ui.bottom.fixed.menu { 1486 bottom: 0px; 1487 left: 0px; 1488 top: auto; 1489 right: auto; 1490 } 1491 .ui.left.fixed.menu { 1492 top: 0px; 1493 left: 0px; 1494 right: auto; 1495 bottom: auto; 1496 width: auto; 1497 height: 100%; 1498 } 1499 1500 /* Coupling with Grid */ 1501 .ui.fixed.menu + .ui.grid { 1502 padding-top: @fixedGridMargin; 1503 } 1504 1505 1506 /*------------------- 1507 Pointing 1508 --------------------*/ 1509 1510 .ui.pointing.menu .active.item:after { 1511 position: absolute; 1512 content: ''; 1513 top: 100%; 1514 left: 50%; 1515 transform: translateX(-50%) translateY(-50%) rotate(45deg); 1516 margin: 0em; 1517 background: none; 1518 1519 width: @arrowSize; 1520 height: @arrowSize; 1521 1522 border: none; 1523 border-bottom: @arrowBorder; 1524 border-right: @arrowBorder; 1525 1526 z-index: @arrowZIndex; 1527 1528 transition: @arrowTransition; 1529 } 1530 1531 /* Don't double up pointers */ 1532 .ui.pointing.menu .active.item .menu .active.item:after { 1533 display: none; 1534 } 1535 1536 .ui.vertical.pointing.menu .active.item:after { 1537 position: absolute; 1538 top: 50%; 1539 right: 0%; 1540 bottom: auto; 1541 left: auto; 1542 1543 transform: translateX(50%) translateY(-50%) rotate(45deg); 1544 margin: 0em -@arrowBorderSize 0em 0em; 1545 1546 border: none; 1547 border-top: @arrowBorder; 1548 border-right: @arrowBorder; 1549 } 1550 1551 /* Colors */ 1552 .ui.pointing.menu .active.item:hover:after { 1553 background-color: @arrowHoverColor; 1554 } 1555 .ui.pointing.menu .active.item:after { 1556 background-color: @arrowActiveColor; 1557 } 1558 1559 .ui.vertical.pointing.menu .item:hover:after { 1560 background-color: @arrowVerticalHoverColor; 1561 } 1562 .ui.vertical.pointing.menu .active.item:after { 1563 background-color: @arrowVerticalActiveColor; 1564 } 1565 .ui.vertical.pointing.menu .menu .active.item:after { 1566 background-color: @arrowVerticalSubMenuColor; 1567 } 1568 1569 1570 1571 /*-------------- 1572 Attached 1573 ---------------*/ 1574 1575 .ui.menu.attached { 1576 margin: 0rem; 1577 border-radius: 0px; 1578 /* avoid rgba multiplying */ 1579 box-shadow: @attachedBoxShadow; 1580 } 1581 .ui.top.attached.menu { 1582 border-radius: @borderRadius @borderRadius 0em 0em; 1583 } 1584 .ui.menu.bottom.attached { 1585 border-radius: 0em 0em @borderRadius @borderRadius; 1586 } 1587 1588 /*-------------- 1589 Sizes 1590 ---------------*/ 1591 1592 /* Small */ 1593 .ui.small.menu .item { 1594 font-size: @small; 1595 } 1596 .ui.small.vertical.menu { 1597 width: @smallWidth; 1598 } 1599 1600 /* Medium */ 1601 .ui.menu .item { 1602 font-size: @medium; 1603 } 1604 .ui.vertical.menu { 1605 width: @mediumWidth; 1606 } 1607 1608 /* Large */ 1609 .ui.large.menu .item { 1610 font-size: @large; 1611 } 1612 .ui.large.menu .item .item { 1613 font-size: @largeSubMenu; 1614 } 1615 .ui.large.menu .dropdown .item { 1616 font-size: @largeDropdown; 1617 } 1618 .ui.large.vertical.menu { 1619 width: @largeWidth; 1620 } 1621 1622 .loadUIOverrides();