github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/src/definitions/elements/label.less (about) 1 /*! 2 * # Semantic UI - Label 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 : 'element'; 18 @element : 'label'; 19 20 @import (multiple) '../../theme.config'; 21 22 /******************************* 23 Label 24 *******************************/ 25 26 .ui.label { 27 display: inline-block; 28 vertical-align: @verticalAlign; 29 line-height: 1; 30 31 margin: @verticalMargin @horizontalMargin; 32 33 background-color: @backgroundColor; 34 border-color: @backgroundColor; 35 36 background-image: @backgroundImage; 37 38 padding: @verticalPadding @horizontalPadding; 39 color: @labelTextColor; 40 41 text-transform: @textTransform; 42 font-weight: @fontWeight; 43 44 border-radius: @borderRadius; 45 box-sizing: border-box; 46 transition: @transition; 47 } 48 49 .ui.label:first-child { 50 margin-left: 0em; 51 } 52 .ui.label:last-child { 53 margin-right: 0em; 54 } 55 56 57 /* Link */ 58 a.ui.label { 59 cursor: pointer; 60 } 61 62 /* Inside Link */ 63 .ui.label a { 64 cursor: pointer; 65 color: inherit; 66 opacity: @linkOpacity; 67 transition: @linkTransition; 68 } 69 .ui.label a:hover { 70 opacity: 1; 71 } 72 73 /* Icon */ 74 .ui.label .icon { 75 width: auto; 76 margin: 0em @iconDistance 0em 0em; 77 } 78 /* Detail */ 79 .ui.label .detail { 80 display: inline-block; 81 vertical-align: top; 82 font-weight: @detailFontWeight; 83 margin-left: @detailMargin; 84 opacity: @detailOpacity; 85 } 86 .ui.label .detail .icon { 87 margin: 0em @detailIconDistance 0em 0em; 88 } 89 90 91 /* Removable label */ 92 .ui.label .close.icon, 93 .ui.label .delete.icon { 94 cursor: pointer; 95 margin-right: 0em; 96 margin-left: @deleteMargin; 97 opacity: @linkOpacity; 98 transition: @deleteTransition; 99 } 100 .ui.label .delete.icon:hover { 101 opacity: 1; 102 } 103 104 /*------------------- 105 Group 106 --------------------*/ 107 108 .ui.labels .label { 109 margin: 0em @groupHorizontalMargin @groupVerticalMargin 0em; 110 } 111 112 113 /*------------------- 114 Coupling 115 --------------------*/ 116 117 /* Remove border radius on attached segment */ 118 .ui.attached.segment > .ui.top.left.attached.label, 119 .ui.bottom.attached.segment > .ui.top.left.attached.label { 120 border-top-left-radius: 0; 121 } 122 .ui.attached.segment > .ui.top.right.attached.label, 123 .ui.bottom.attached.segment > .ui.top.right.attached.label { 124 border-top-right-radius: 0; 125 } 126 .ui.top.attached.segment > .ui.bottom.left.attached.label { 127 border-bottom-left-radius: 0; 128 } 129 .ui.top.attached.segment > .ui.bottom.right.attached.label { 130 border-bottom-right-radius: 0; 131 } 132 133 /* Padding on next content after a label */ 134 .ui.top.attached.label:first-child + :not(.attached) { 135 margin-top: @attachedSegmentPadding !important; 136 } 137 .ui.bottom.attached.label:first-child ~ :last-child:not(.attached) { 138 margin-top: 0em; 139 margin-bottom: @attachedSegmentPadding !important; 140 } 141 142 143 /******************************* 144 Types 145 *******************************/ 146 147 .ui.image.label { 148 width: auto !important; 149 margin-top: 0em; 150 margin-bottom: 0em; 151 max-width: 9999px; 152 vertical-align: baseline; 153 text-transform: none; 154 155 background: @imageLabelBackground; 156 padding: @imageLabelPadding; 157 border-radius: @imageLabelBorderRadius; 158 box-shadow: @imageLabelBoxShadow; 159 } 160 161 .ui.image.label img { 162 display: inline-block; 163 vertical-align: top; 164 165 height: @imageLabelImageHeight; 166 margin: @imageLabelImageMargin; 167 border-radius: @imageLabelBorderRadius; 168 } 169 170 .ui.image.label .detail { 171 background: @imageLabelDetailBackground; 172 margin: @imageLabelDetailMargin; 173 padding: @imageLabelDetailPadding; 174 border-radius: 0em @imageLabelBorderRadius @imageLabelBorderRadius 0em; 175 } 176 177 /*------------------- 178 Tag 179 --------------------*/ 180 181 .ui.tag.labels .label, 182 .ui.tag.label { 183 margin-left: 1em; 184 position: relative; 185 padding-left: @tagHorizontalPadding; 186 padding-right: @tagHorizontalPadding; 187 188 border-radius: 0em @borderRadius @borderRadius 0em; 189 } 190 .ui.tag.labels .label:before, 191 .ui.tag.label:before { 192 position: absolute; 193 transform: translateY(-50%) translateX(50%) rotate(-45deg); 194 195 top: @tagTriangleTopOffset; 196 right: @tagTriangleRightOffset; 197 content: ''; 198 199 background-color: @backgroundColor; 200 background-image: @backgroundImage; 201 202 width: @tagTriangleSize; 203 height: @tagTriangleSize; 204 transition: @tagTransition; 205 } 206 207 208 .ui.tag.labels .label:after, 209 .ui.tag.label:after { 210 position: absolute; 211 content: ''; 212 top: 50%; 213 left: -(@tagCircleSize / 2); 214 215 margin-top: -(@tagCircleSize / 2); 216 background-color: @tagCircleColor !important; 217 width: @tagCircleSize; 218 height: @tagCircleSize; 219 220 box-shadow: @tagCircleBoxShadow; 221 border-radius: @circularRadius; 222 } 223 224 225 /*------------------- 226 Corner Label 227 --------------------*/ 228 229 .ui.corner.label { 230 position: absolute; 231 top: 0em; 232 right: 0em; 233 margin: 0em; 234 padding: 0em; 235 text-align: center; 236 237 width: @cornerTriangleSize; 238 height: @cornerTriangleSize; 239 z-index: @cornerTriangleZIndex; 240 transition: @cornerTriangleTransition; 241 } 242 243 /* Icon Label */ 244 .ui.corner.label{ 245 background-color: transparent !important; 246 } 247 .ui.corner.label:after { 248 position: absolute; 249 content: ""; 250 right: 0em; 251 top: 0em; 252 z-index: -1; 253 254 width: 0em; 255 height: 0em; 256 background-color: transparent !important; 257 258 border-top: 0em solid transparent; 259 border-right: @cornerTriangleSize solid transparent; 260 border-bottom: @cornerTriangleSize solid transparent; 261 border-left: 0em solid transparent; 262 263 border-right-color: inherit; 264 transition: @cornerTriangleTransition; 265 } 266 267 .ui.corner.label .icon { 268 position: relative; 269 top: @cornerIconTopOffset; 270 left: @cornerIconLeftOffset; 271 font-size: @cornerIconSize; 272 margin: 0em; 273 } 274 275 /* Left Corner */ 276 .ui.left.corner.label, 277 .ui.left.corner.label:after { 278 right: auto; 279 left: 0em; 280 } 281 .ui.left.corner.label:after { 282 border-top: @cornerTriangleSize solid transparent; 283 border-right: @cornerTriangleSize solid transparent; 284 border-bottom: 0em solid transparent; 285 border-left: 0em solid transparent; 286 287 border-top-color: inherit; 288 } 289 .ui.left.corner.label .icon { 290 left: -@cornerIconLeftOffset; 291 } 292 293 /* Segment */ 294 .ui.segment > .ui.corner.label { 295 top: -1px; 296 right: -1px; 297 } 298 .ui.segment > .ui.left.corner.label { 299 right: auto; 300 left: -1px; 301 } 302 303 /* Input */ 304 .ui.input > .ui.corner.label { 305 top: 1px; 306 right: 1px; 307 } 308 .ui.input > .ui.right.corner.label { 309 right: auto; 310 left: 1px; 311 } 312 313 314 /*------------------- 315 Ribbon 316 --------------------*/ 317 318 .ui.ribbon.label { 319 position: relative; 320 margin: 0em; 321 min-width: max-content; 322 border-radius: 0em @borderRadius @borderRadius 0em; 323 border-color: @ribbonShadowColor; 324 } 325 326 .ui.ribbon.label:after { 327 position: absolute; 328 content: ''; 329 330 top: 100%; 331 left: 0%; 332 background-color: transparent !important; 333 334 border-style: solid; 335 border-width: 0em @ribbonTriangleSize @ribbonTriangleSize 0em; 336 border-color: transparent; 337 border-right-color: inherit; 338 339 width: 0em; 340 height: 0em; 341 } 342 343 /* Right Ribbon */ 344 .ui[class*="right ribbon"].label { 345 text-align: left; 346 transform: translateX(-100%); 347 border-radius: @borderRadius 0em 0em @borderRadius; 348 padding-left: @horizontalPadding; 349 } 350 .ui[class*="right ribbon"].label:after { 351 left: auto; 352 right: 0%; 353 354 border-style: solid; 355 border-width: @ribbonTriangleSize @ribbonTriangleSize 0em 0em; 356 border-color: transparent; 357 border-top-color: inherit; 358 } 359 360 /* Positioning */ 361 .ui.ribbon.label { 362 left: @ribbonOffset; 363 margin-right: -@ribbonTriangleSize; 364 padding-left: @ribbonDistance; 365 } 366 .ui[class*="right ribbon"].label { 367 left: @rightRibbonOffset; 368 padding-right: @ribbonDistance; 369 } 370 371 372 /* Inside Image */ 373 .ui.image > .ribbon.label, 374 .ui.card .image > .ribbon.label { 375 position: absolute; 376 top: @ribbonImageTopDistance; 377 } 378 .ui.card .image > .ui.ribbon.label, 379 .ui.image > .ui.ribbon.label { 380 left: @ribbonImageOffset; 381 padding-left: @ribbonImageDistance; 382 } 383 .ui.card .image > .ui[class*="right ribbon"].label, 384 .ui.image > .ui[class*="right ribbon"].label { 385 left: @rightRibbonImageOffset; 386 padding-left: @horizontalPadding; 387 padding-right: @ribbonImageDistance; 388 } 389 390 391 /*------------------- 392 Attached 393 --------------------*/ 394 395 .ui.top.attached.label, 396 .ui.attached.label { 397 width: 100%; 398 position: absolute; 399 margin: 0em; 400 top: 0em; 401 left: 0em; 402 403 padding: @attachedVerticalPadding @attachedHorizontalPadding; 404 405 border-radius: @borderRadius @borderRadius 0em 0em; 406 } 407 .ui.bottom.attached.label { 408 top: auto; 409 bottom: 0em; 410 border-radius: 0em 0em @borderRadius @borderRadius; 411 } 412 413 .ui.top.left.attached.label { 414 width: auto; 415 margin-top: 0em !important; 416 border-radius: @borderRadius 0em @borderRadius 0em; 417 } 418 419 .ui.top.right.attached.label { 420 width: auto; 421 left: auto; 422 right: 0em; 423 border-radius: 0em @borderRadius 0em @borderRadius; 424 } 425 .ui.bottom.left.attached.label { 426 width: auto; 427 top: auto; 428 bottom: 0em; 429 border-radius: 0em @borderRadius 0em @borderRadius; 430 } 431 .ui.bottom.right.attached.label { 432 top: auto; 433 bottom: 0em; 434 left: auto; 435 right: 0em; 436 width: auto; 437 border-radius: @borderRadius 0em @borderRadius 0em; 438 } 439 440 441 /******************************* 442 States 443 *******************************/ 444 445 /*------------------- 446 Disabled 447 --------------------*/ 448 449 .ui.label.disabled { 450 opacity: 0.5; 451 } 452 453 /*------------------- 454 Hover 455 --------------------*/ 456 457 a.ui.labels .label:hover, 458 a.ui.label:hover { 459 background-color: @labelHoverBackgroundColor; 460 border-color: @labelHoverBackgroundColor; 461 462 background-image: @labelHoverBackgroundImage; 463 color: @labelHoverTextColor; 464 } 465 .ui.labels a.label:hover:before, 466 a.ui.label:hover:before { 467 background-color: @labelHoverBackgroundColor; 468 background-image: @labelHoverBackgroundImage; 469 color: @labelHoverTextColor; 470 } 471 472 /*------------------- 473 Visible 474 --------------------*/ 475 476 .ui.labels.visible .label, 477 .ui.label.visible { 478 display: inline-block !important; 479 } 480 481 /*------------------- 482 Hidden 483 --------------------*/ 484 485 .ui.labels.hidden .label, 486 .ui.label.hidden { 487 display: none !important; 488 } 489 490 491 /******************************* 492 Variations 493 *******************************/ 494 495 496 /*------------------- 497 Colors 498 --------------------*/ 499 500 /*--- Black ---*/ 501 .ui.black.labels .label, 502 .ui.black.label { 503 background-color: @black !important; 504 border-color: @black !important; 505 color: @invertedTextColor !important; 506 } 507 .ui.labels .black.label:before, 508 .ui.black.labels .label:before, 509 .ui.black.label:before { 510 background-color: @black !important; 511 } 512 a.ui.black.labels .label:hover, 513 a.ui.black.label:hover { 514 background-color: @blackHover !important; 515 border-color: @blackHover !important; 516 } 517 .ui.labels a.black.label:hover:before, 518 .ui.black.labels a.label:hover:before, 519 a.ui.black.label:hover:before { 520 background-color: @blackHover !important; 521 } 522 .ui.black.corner.label, 523 .ui.black.corner.label:hover { 524 background-color: transparent !important; 525 } 526 .ui.black.ribbon.label { 527 border-color: @blackRibbonShadow !important; 528 } 529 530 /*--- Blue ---*/ 531 .ui.blue.labels .label, 532 .ui.blue.label { 533 background-color: @blue !important; 534 border-color: @blue !important; 535 color: @invertedTextColor !important; 536 } 537 .ui.labels .blue.label:before, 538 .ui.blue.labels .label:before, 539 .ui.blue.label:before { 540 background-color: @blue !important; 541 } 542 a.ui.blue.labels .label:hover, 543 .ui.blue.labels a.label:hover, 544 a.ui.blue.label:hover { 545 background-color: @blueHover !important; 546 border-color: @blueHover !important; 547 color: @invertedTextColor !important; 548 } 549 .ui.labels a.blue.label:hover:before, 550 .ui.blue.labels a.label:hover:before, 551 a.ui.blue.label:hover:before { 552 background-color: @blueHover !important; 553 } 554 .ui.blue.corner.label, 555 .ui.blue.corner.label:hover { 556 background-color: transparent !important; 557 } 558 .ui.blue.ribbon.label { 559 border-color: @blueRibbonShadow !important; 560 } 561 562 /*--- Green ---*/ 563 .ui.green.labels .label, 564 .ui.green.label { 565 background-color: @green !important; 566 border-color: @green !important; 567 color: @invertedTextColor !important; 568 } 569 .ui.labels .green.label:before, 570 .ui.green.labels .label:before, 571 .ui.green.label:before { 572 background-color: @green !important; 573 } 574 575 a.ui.green.labels .label:hover, 576 a.ui.green.label:hover { 577 background-color: @greenHover !important; 578 border-color: @greenHover !important; 579 } 580 .ui.labels a.green.label:hover:before, 581 .ui.green.labels a.label:hover:before, 582 a.ui.green.label:hover:before { 583 background-color: @greenHover !important; 584 } 585 586 .ui.green.corner.label, 587 .ui.green.corner.label:hover { 588 background-color: transparent !important; 589 } 590 .ui.green.ribbon.label { 591 border-color: @greenRibbonShadow !important; 592 } 593 594 /*--- Orange ---*/ 595 .ui.orange.labels .label, 596 .ui.orange.label { 597 background-color: @orange !important; 598 border-color: @orange !important; 599 color: @invertedTextColor !important; 600 } 601 .ui.labels .orange.label:before, 602 .ui.orange.labels .label:before, 603 .ui.orange.label:before { 604 background-color: @orange !important; 605 } 606 a.ui.orange.labels .label:hover, 607 .ui.orange.labels a.label:hover, 608 a.ui.orange.label:hover { 609 background-color: @orangeHover !important; 610 border-color: @orangeHover !important; 611 color: @invertedTextColor !important; 612 } 613 .ui.labels a.orange.label:hover:before, 614 .ui.orange.labels a.label:hover:before, 615 a.ui.orange.label:hover:before { 616 background-color: @orangeHover !important; 617 } 618 .ui.orange.corner.label, 619 .ui.orange.corner.label:hover { 620 background-color: transparent !important; 621 } 622 .ui.orange.ribbon.label { 623 border-color: @orangeRibbonShadow !important; 624 } 625 626 /*--- Pink ---*/ 627 .ui.pink.labels .label, 628 .ui.pink.label { 629 background-color: @pink !important; 630 border-color: @pink !important; 631 color: @invertedTextColor !important; 632 } 633 .ui.labels .pink.label:before, 634 .ui.pink.labels .label:before, 635 .ui.pink.label:before { 636 background-color: @pink !important; 637 } 638 a.ui.pink.labels .label:hover, 639 .ui.pink.labels a.label:hover, 640 a.ui.pink.label:hover { 641 background-color: @pinkHover !important; 642 border-color: @pinkHover !important; 643 color: @invertedTextColor !important; 644 } 645 .ui.labels a.pink.label:hover:before, 646 .ui.pink.labels a.label:hover:before, 647 a.ui.pink.label:hover:before { 648 background-color: @pinkHover !important; 649 } 650 .ui.pink.corner.label, 651 .ui.pink.corner.label:hover { 652 background-color: transparent !important; 653 } 654 .ui.pink.ribbon.label { 655 border-color: @pinkRibbonShadow !important; 656 } 657 658 /*--- Purple ---*/ 659 .ui.purple.labels .label, 660 .ui.purple.label { 661 background-color: @purple !important; 662 border-color: @purple !important; 663 color: @invertedTextColor !important; 664 } 665 .ui.labels .purple.label:before, 666 .ui.purple.labels .label:before, 667 .ui.purple.label:before { 668 background-color: @purple !important; 669 } 670 a.ui.purple.labels .label:hover, 671 .ui.purple.labels a.label:hover, 672 a.ui.purple.label:hover { 673 background-color: @purpleHover !important; 674 border-color: @purpleHover !important; 675 color: @invertedTextColor !important; 676 } 677 .ui.labels a.purple.label:hover:before, 678 .ui.purple.labels a.label:hover:before, 679 a.ui.purple.label:hover:before { 680 background-color: @purpleHover !important; 681 } 682 .ui.purple.corner.label, 683 .ui.purple.corner.label:hover { 684 background-color: transparent !important; 685 } 686 .ui.purple.ribbon.label { 687 border-color: @purpleRibbonShadow !important; 688 } 689 690 /*--- Red ---*/ 691 .ui.red.labels .label, 692 .ui.red.label { 693 background-color: @red !important; 694 border-color: @red !important; 695 color: @invertedTextColor !important; 696 } 697 .ui.labels .red.label:before, 698 .ui.red.labels .label:before, 699 .ui.red.label:before { 700 background-color: @red !important; 701 } 702 .ui.red.corner.label, 703 .ui.red.corner.label:hover { 704 background-color: transparent !important; 705 } 706 707 a.ui.red.labels .label:hover, 708 a.ui.red.label:hover{ 709 background-color: @redHover !important; 710 border-color: @redHover !important; 711 color: @invertedTextColor !important; 712 } 713 .ui.labels a.red.label:hover:before, 714 .ui.red.labels a.label:hover:before, 715 a.ui.red.label:hover:before { 716 background-color: @redHover !important; 717 } 718 .ui.red.ribbon.label { 719 border-color: @redRibbonShadow !important; 720 } 721 722 /*--- Teal ---*/ 723 .ui.teal.labels .label, 724 .ui.teal.label { 725 background-color: @teal !important; 726 border-color: @teal !important; 727 color: @invertedTextColor !important; 728 } 729 .ui.labels .teal.label:before, 730 .ui.teal.labels .label:before, 731 .ui.teal.label:before { 732 background-color: @teal !important; 733 } 734 a.ui.teal.labels .label:hover, 735 .ui.teal.labels a.label:hover, 736 a.ui.teal.label:hover { 737 background-color: @tealHover !important; 738 border-color: @tealHover !important; 739 color: @invertedTextColor !important; 740 } 741 .ui.labels a.teal.label:hover:before, 742 .ui.teal.labels a.label:hover:before, 743 a.ui.teal.label:hover:before { 744 background-color: @tealHover !important; 745 } 746 .ui.teal.corner.label, 747 .ui.teal.corner.label:hover { 748 background-color: transparent !important; 749 } 750 .ui.teal.ribbon.label { 751 border-color: @tealRibbonShadow !important; 752 } 753 754 /*--- Yellow ---*/ 755 .ui.yellow.labels .label, 756 .ui.yellow.label { 757 background-color: @yellow !important; 758 border-color: @yellow !important; 759 color: @invertedTextColor !important; 760 } 761 .ui.labels .yellow.label:before, 762 .ui.yellow.labels .label:before, 763 .ui.yellow.label:before { 764 background-color: @yellow !important; 765 } 766 a.ui.yellow.labels .label:hover, 767 .ui.yellow.labels a.label:hover, 768 a.ui.yellow.label:hover { 769 background-color: @yellowHover !important; 770 border-color: @yellowHover !important; 771 color: @invertedTextColor !important; 772 } 773 .ui.labels a.yellow.label:hover:before, 774 .ui.yellow.labels a.label:hover:before, 775 a.ui.yellow.label:hover:before { 776 background-color: @yellowHover !important; 777 } 778 .ui.yellow.corner.label, 779 .ui.yellow.corner.label:hover { 780 background-color: transparent !important; 781 } 782 .ui.yellow.ribbon.label { 783 border-color: @yellowRibbonShadow !important; 784 } 785 786 /*------------------- 787 Fluid 788 --------------------*/ 789 790 .ui.label.fluid, 791 .ui.fluid.labels > .label { 792 width: 100%; 793 box-sizing: border-box; 794 } 795 796 /*------------------- 797 Inverted 798 --------------------*/ 799 800 .ui.inverted.labels .label, 801 .ui.inverted.label { 802 color: @invertedTextColor !important; 803 } 804 805 /*------------------- 806 Horizontal 807 --------------------*/ 808 809 .ui.horizontal.labels .label, 810 .ui.horizontal.label { 811 margin: 0em @horizontalLabelMargin 0em 0em; 812 813 padding: @horizontalLabelVerticalPadding @horizontalPadding; 814 min-width: @horizontalLabelMinWidth; 815 text-align: center; 816 } 817 818 819 /*------------------- 820 Circular 821 --------------------*/ 822 823 .ui.circular.labels .label, 824 .ui.circular.label { 825 min-width: @circularMinSize; 826 min-height: @circularMinSize; 827 828 padding: @circularPadding !important; 829 830 line-height: 1em; 831 text-align: center; 832 border-radius: @circularRadius; 833 } 834 .ui.empty.circular.labels .label, 835 .ui.empty.circular.label { 836 min-width: 0em; 837 min-height: 0em; 838 overflow: hidden; 839 width: @emptyCircleSize; 840 height: @emptyCircleSize; 841 vertical-align: baseline; 842 } 843 844 /*------------------- 845 Pointing 846 --------------------*/ 847 848 .ui.pointing.label { 849 position: relative; 850 } 851 .ui.attached.pointing.label { 852 position: absolute; 853 } 854 855 .ui.pointing.label:before { 856 position: absolute; 857 content: ''; 858 transform: rotate(45deg); 859 background-image: none; 860 861 z-index: @pointingTriangleZIndex; 862 width: @pointingTriangleSize; 863 height: @pointingTriangleSize; 864 transition: @pointingTriangleTransition; 865 } 866 /*--- Above ---*/ 867 .ui.pointing.label:before { 868 background-color: @backgroundColor; 869 background-image: @backgroundImage; 870 } 871 .ui.pointing.label, 872 .ui.pointing.above.label { 873 margin-top: @pointingVerticalDistance; 874 } 875 .ui.pointing.label:before, 876 .ui.pointing.above.label:before { 877 margin-left: -@pointingTriangleOffset; 878 top: -@pointingTriangleOffset; 879 left: 50%; 880 } 881 /*--- Below ---*/ 882 .ui.pointing.bottom.label, 883 .ui.pointing.below.label { 884 margin-top: 0em; 885 margin-bottom: @pointingVerticalDistance; 886 } 887 .ui.pointing.bottom.label:before, 888 .ui.pointing.below.label:before { 889 margin-left: -@pointingTriangleOffset; 890 top: auto; 891 right: auto; 892 bottom: -@pointingTriangleOffset; 893 left: 50%; 894 } 895 /*--- Left ---*/ 896 .ui.pointing.left.label { 897 margin-top: 0em; 898 margin-left: @pointingHorizontalDistance; 899 } 900 .ui.pointing.left.label:before { 901 margin-top: -@pointingTriangleOffset; 902 bottom: auto; 903 right: auto; 904 top: 50%; 905 left: 0em; 906 } 907 /*--- Right ---*/ 908 .ui.pointing.right.label { 909 margin-top: 0em; 910 margin-right: @pointingHorizontalDistance; 911 } 912 .ui.pointing.right.label:before { 913 margin-top: -@pointingTriangleOffset; 914 right: -@pointingTriangleOffset; 915 top: 50%; 916 bottom: auto; 917 left: auto; 918 } 919 920 /*------------------ 921 Floating Label 922 -------------------*/ 923 924 .ui.floating.label { 925 position: absolute; 926 z-index: @floatingZIndex; 927 top: @floatingTopOffset; 928 left: 100%; 929 margin: 0em 0em 0em @floatingLeftOffset !important; 930 } 931 932 /*------------------- 933 Sizes 934 --------------------*/ 935 936 .ui.mini.labels .label, 937 .ui.mini.label { 938 font-size: @mini; 939 } 940 .ui.tiny.labels .label, 941 .ui.tiny.label { 942 font-size: @tiny; 943 } 944 .ui.small.labels .label, 945 .ui.small.label { 946 font-size: @small; 947 } 948 .ui.labels .label, 949 .ui.label { 950 font-size: @medium; 951 } 952 .ui.large.labels .label, 953 .ui.large.label { 954 font-size: @large; 955 } 956 .ui.big.labels .label, 957 .ui.big.label { 958 font-size: @big; 959 } 960 .ui.huge.labels .label, 961 .ui.huge.label { 962 font-size: @huge; 963 } 964 .ui.massive.labels .label, 965 .ui.massive.label { 966 font-size: @massive; 967 } 968 969 .loadUIOverrides();