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