github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/src/definitions/collections/table.less (about) 1 /*! 2 * # Semantic UI - Table 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 : 'table'; 19 20 @import (multiple) '../../theme.config'; 21 22 /******************************* 23 Table 24 *******************************/ 25 26 /* Prototype */ 27 .ui.table { 28 width: 100%; 29 background: @background; 30 margin: @margin; 31 border: @border; 32 box-shadow: @boxShadow; 33 border-radius: @borderRadius; 34 color: @color; 35 border-collapse: @borderCollapse; 36 border-spacing: @borderSpacing; 37 } 38 39 .ui.table:first-child { 40 margin-top: 0em; 41 } 42 .ui.table:last-child { 43 margin-bottom: 0em; 44 } 45 46 /******************************* 47 Parts 48 *******************************/ 49 50 /* Table Content */ 51 .ui.table th, 52 .ui.table td { 53 transition: @transition; 54 } 55 56 /* Headers */ 57 .ui.table thead { 58 box-shadow: @headerBoxShadow; 59 } 60 .ui.table thead th { 61 cursor: auto; 62 background: @headerBackground; 63 text-align: @headerAlign; 64 color: @headerColor; 65 padding: @headerVerticalPadding @headerHorizontalPadding; 66 vertical-align: @headerVerticalAlign; 67 font-style: @headerFontStyle; 68 font-weight: @headerFontWeight; 69 text-transform: @headerTextTransform; 70 border-bottom: @headerBorder; 71 border-left: @headerDivider; 72 } 73 74 .ui.table thead tr > th:first-child { 75 border-left: none; 76 } 77 78 .ui.table thead tr:first-child > th:first-child { 79 border-radius: @borderRadius 0em 0em 0em; 80 } 81 .ui.table thead tr:first-child > th:last-child { 82 border-radius: 0em @borderRadius 0em 0em; 83 } 84 .ui.table thead tr:first-child > th:only-child { 85 border-radius: @borderRadius @borderRadius 0em 0em; 86 } 87 88 /* Footer */ 89 .ui.table tfoot { 90 box-shadow: @footerBoxShadow; 91 } 92 .ui.table tfoot th { 93 cursor: auto; 94 border-top: @footerBorder; 95 background: @footerBackground; 96 text-align: @footerAlign; 97 color: @footerColor; 98 padding: @footerVerticalPadding @footerHorizontalPadding; 99 vertical-align: @footerVerticalAlign; 100 font-style: @footerFontStyle; 101 font-weight: @footerFontWeight; 102 text-transform: @footerTextTransform; 103 } 104 .ui.table tfoot tr > th:first-child { 105 border-left: none; 106 } 107 .ui.table tfoot tr:first-child > th:first-child { 108 border-radius: 0em 0em 0em @borderRadius; 109 } 110 .ui.table tfoot tr:first-child > th:last-child { 111 border-radius: 0em 0em @borderRadius 0em; 112 } 113 .ui.table tfoot tr:first-child > th:only-child { 114 border-radius: 0em 0em @borderRadius @borderRadius; 115 } 116 117 /* Table Row */ 118 .ui.table tr td { 119 border-top: @rowBorder; 120 } 121 .ui.table tr:first-child td { 122 border-top: none; 123 } 124 125 /* Table Cells */ 126 .ui.table td { 127 padding: @cellVerticalPadding @cellHorizontalPadding; 128 text-align: @cellTextAlign; 129 vertical-align: @cellVerticalAlign; 130 } 131 132 /* Icons */ 133 .ui.table > .icon { 134 vertical-align: @iconVerticalAlign; 135 } 136 .ui.table > .icon:only-child { 137 margin: 0em; 138 } 139 140 /* Table Segment */ 141 .ui.table.segment { 142 padding: 0em; 143 } 144 .ui.table.segment:after { 145 display: none; 146 } 147 .ui.table.segment.stacked:after { 148 display: block; 149 } 150 151 152 /* Responsive */ 153 @media only screen and (max-width : @largestMobileScreen) { 154 .ui.table:not(.unstackable) { 155 width: 100%; 156 } 157 .ui.table:not(.unstackable) tbody, 158 .ui.table:not(.unstackable) tr, 159 .ui.table:not(.unstackable) tr > th, 160 .ui.table:not(.unstackable) tr > td { 161 display: block !important; 162 width: auto !important; 163 display: block !important; 164 } 165 166 .ui.table:not(.unstackable) { 167 padding: 0em; 168 } 169 .ui.table:not(.unstackable) thead { 170 display: @responsiveHeaderDisplay; 171 } 172 .ui.table:not(.unstackable) tfoot { 173 display: @responsiveFooterDisplay; 174 } 175 .ui.table:not(.unstackable) tr > th, 176 .ui.table:not(.unstackable) tr > td { 177 background: none; 178 border: none !important; 179 padding: @responsiveCellVerticalPadding @responsiveCellHorizontalPadding; 180 box-shadow: @responsiveCellBoxShadow; 181 } 182 .ui.table:not(.unstackable) th:first-child, 183 .ui.table:not(.unstackable) td:first-child { 184 font-weight: bold; 185 padding-top: @responsiveRowVerticalPadding; 186 } 187 .ui.table:not(.unstackable) th:last-child, 188 .ui.table:not(.unstackable) td:last-child { 189 box-shadow: @responsiveRowBoxShadow; 190 padding-bottom: @responsiveRowVerticalPadding; 191 } 192 193 /* Clear BG Colors */ 194 .ui.table:not(.unstackable) tr > td.warning, 195 .ui.table:not(.unstackable) tr > td.error, 196 .ui.table:not(.unstackable) tr > td.active, 197 .ui.table:not(.unstackable) tr > td.positive, 198 .ui.table:not(.unstackable) tr > td.negative { 199 background-color: @responsiveStatusColor !important; 200 } 201 202 /* Definition Table */ 203 .ui.definition.table:not(.unstackable) thead th:first-child { 204 box-shadow: none !important; 205 } 206 .ui.definition.table:not(.unstackable) tr td:first-child { 207 padding-bottom: @responsiveRowVerticalPadding; 208 } 209 .ui.definition.table:not(.unstackable) tr td:nth-child(n+2) { 210 padding-top: @responsiveRowVerticalPadding; 211 } 212 213 } 214 215 216 /******************************* 217 Coupling 218 *******************************/ 219 220 /* UI Image */ 221 .ui.table th .image, 222 .ui.table th .image img, 223 .ui.table td .image, 224 .ui.table td .image img { 225 max-width: none; 226 } 227 228 229 /******************************* 230 Types 231 *******************************/ 232 233 /*-------------- 234 Complex 235 ---------------*/ 236 237 .ui.structured.table { 238 border-collapse: collapse; 239 } 240 .ui.structured.table thead th { 241 border-left: @headerDivider; 242 border-right: @headerDivider; 243 } 244 .ui.structured.sortable.table thead th { 245 border-left: @sortableBorder; 246 border-right: @sortableBorder; 247 } 248 .ui.structured.basic.table th { 249 border-left: @basicTableHeaderDivider; 250 border-right: @basicTableHeaderDivider; 251 } 252 .ui.structured.celled.table tr th, 253 .ui.structured.celled.table tr td { 254 border-left: @cellBorder; 255 border-right: @cellBorder; 256 } 257 258 /*-------------- 259 Definition 260 ---------------*/ 261 262 .ui.definition.table thead:not(.full-width) th:first-child { 263 pointer-events: none; 264 background: @definitionHeaderBackground; 265 font-weight: @definitionHeaderFontWeight; 266 color: @definitionHeaderColor; 267 box-shadow: -@borderWidth -@borderWidth 0px @borderWidth @definitionPageBackground; 268 } 269 270 .ui.definition.table tfoot:not(.full-width) th:first-child { 271 pointer-events: none; 272 background: @definitionFooterBackground; 273 font-weight: @definitionFooterColor; 274 color: @definitionFooterFontWeight; 275 box-shadow: @borderWidth @borderWidth 0px @borderWidth @definitionPageBackground; 276 } 277 278 /* Remove Border */ 279 .ui.celled.definition.table thead:not(.full-width) th:first-child { 280 box-shadow: 0px -@borderWidth 0px @borderWidth @definitionPageBackground; 281 } 282 .ui.celled.definition.table tfoot:not(.full-width) th:first-child { 283 box-shadow: 0px @borderWidth 0px @borderWidth @definitionPageBackground; 284 } 285 286 /* Highlight Defining Column */ 287 .ui.definition.table tr td:first-child { 288 background: @definitionColumnBackground; 289 font-weight: @definitionColumnFontWeight; 290 color: @definitionColumnColor; 291 } 292 293 /* Fix 2nd Column */ 294 .ui.definition.table thead:not(.full-width) th:nth-child(2) { 295 border-left: @borderWidth solid @borderColor; 296 } 297 .ui.definition.table tfoot:not(.full-width) th:nth-child(2) { 298 border-left: @borderWidth solid @borderColor; 299 } 300 .ui.definition.table td:nth-child(2) { 301 border-left: @borderWidth solid @borderColor; 302 } 303 304 305 /******************************* 306 States 307 *******************************/ 308 309 /*-------------- 310 Positive 311 ---------------*/ 312 313 .ui.table tr.positive, 314 .ui.table td.positive { 315 box-shadow: @positiveBoxShadow; 316 } 317 .ui.table tr.positive td, 318 .ui.table td.positive { 319 background: @positiveBackgroundColor !important; 320 color: @positiveColor !important; 321 } 322 .ui.celled.table tr.positive:hover td, 323 .ui.celled.table tr:hover td.positive { 324 background: @positiveBackgroundHover !important; 325 color: @positiveColorHover !important; 326 } 327 328 /*-------------- 329 Negative 330 ---------------*/ 331 332 .ui.table tr.negative, 333 .ui.table td.negative { 334 box-shadow: @negativeBoxShadow; 335 } 336 .ui.table tr.negative td, 337 .ui.table td.negative { 338 background: @negativeBackgroundColor !important; 339 color: @negativeColor !important; 340 } 341 .ui.celled.table tr.negative:hover td, 342 .ui.celled.table tr:hover td.negative { 343 background: @negativeBackgroundHover !important; 344 color: @negativeColorHover !important; 345 } 346 347 /*-------------- 348 Error 349 ---------------*/ 350 351 .ui.table tr.error, 352 .ui.table td.error { 353 box-shadow: @errorBoxShadow; 354 } 355 .ui.table tr.error td, 356 .ui.table td.error { 357 background: @errorBackgroundColor !important; 358 color: @errorColor !important; 359 } 360 .ui.celled.table tr.error:hover td, 361 .ui.celled.table tr:hover td.error { 362 background: @errorBackgroundHover !important; 363 color: @errorColorHover !important; 364 } 365 366 /*-------------- 367 Warning 368 ---------------*/ 369 370 .ui.table tr.warning, 371 .ui.table td.warning { 372 box-shadow: @warningBoxShadow; 373 } 374 .ui.table tr.warning td, 375 .ui.table td.warning { 376 background: @warningBackgroundColor !important; 377 color: @warningColor !important; 378 } 379 .ui.celled.table tr.warning:hover td, 380 .ui.celled.table tr:hover td.warning { 381 background: @warningBackgroundHover !important; 382 color: @warningColorHover !important; 383 } 384 385 /*-------------- 386 Active 387 ---------------*/ 388 389 .ui.table tr.active, 390 .ui.table td.active { 391 box-shadow: @activeBoxShadow; 392 } 393 .ui.table tr.active td, 394 .ui.table td.active { 395 background: @activeBackgroundColor !important; 396 color: @activeColor !important; 397 } 398 .ui.celled.table tr.active:hover td, 399 .ui.celled.table tr:hover td.active { 400 background: @activeBackgroundColor !important; 401 color: @activeColor !important; 402 } 403 404 405 /*-------------- 406 Disabled 407 ---------------*/ 408 409 .ui.table tr.disabled td, 410 .ui.table tr td.disabled, 411 .ui.table tr.disabled:hover td, 412 .ui.table tr:hover td.disabled { 413 pointer-events: none; 414 color: @disabledTextColor; 415 } 416 417 /******************************* 418 Variations 419 *******************************/ 420 421 /*-------------- 422 Stackable 423 ---------------*/ 424 425 @media only screen and (max-width : @largestTabletScreen) { 426 427 .ui[class*="tablet stackable"].table, 428 .ui[class*="tablet stackable"].table tbody, 429 .ui[class*="tablet stackable"].table tr, 430 .ui[class*="tablet stackable"].table tr > th, 431 .ui[class*="tablet stackable"].table tr > td { 432 display: block !important; 433 width: 100% !important; 434 display: block !important; 435 } 436 437 .ui[class*="tablet stackable"].table { 438 padding: 0em; 439 } 440 .ui[class*="tablet stackable"].table thead { 441 display: @responsiveHeaderDisplay; 442 } 443 .ui[class*="tablet stackable"].table tfoot { 444 display: @responsiveFooterDisplay; 445 } 446 .ui[class*="tablet stackable"].table tr > th, 447 .ui[class*="tablet stackable"].table tr > td { 448 background: none; 449 border: none !important; 450 padding: @responsiveCellVerticalPadding @responsiveCellHorizontalPadding; 451 box-shadow: @responsiveCellBoxShadow; 452 } 453 .ui[class*="tablet stackable"].table th:first-child, 454 .ui[class*="tablet stackable"].table td:first-child { 455 font-weight: bold; 456 padding-top: @responsiveRowVerticalPadding; 457 } 458 .ui[class*="tablet stackable"].table th:last-child, 459 .ui[class*="tablet stackable"].table td:last-child { 460 box-shadow: @responsiveRowBoxShadow; 461 padding-bottom: @responsiveRowVerticalPadding; 462 } 463 464 /* Clear BG Colors */ 465 .ui[class*="tablet stackable"].table tr > td.warning, 466 .ui[class*="tablet stackable"].table tr > td.error, 467 .ui[class*="tablet stackable"].table tr > td.active, 468 .ui[class*="tablet stackable"].table tr > td.positive, 469 .ui[class*="tablet stackable"].table tr > td.negative { 470 background-color: @responsiveStatusColor !important; 471 } 472 473 /* Definition Table */ 474 .ui.definition[class*="tablet stackable"].table thead th:first-child { 475 box-shadow: none !important; 476 } 477 .ui.definition[class*="tablet stackable"].table tr td:first-child { 478 padding-bottom: @responsiveRowVerticalPadding; 479 } 480 .ui.definition[class*="tablet stackable"].table tr td:nth-child(n+2) { 481 padding-top: @responsiveRowVerticalPadding; 482 } 483 484 } 485 486 /*-------------- 487 Aligned 488 ---------------*/ 489 490 .ui.table[class*="left aligned"], 491 .ui.table [class*="left aligned"] { 492 text-align: left; 493 } 494 .ui.table[class*="center aligned"], 495 .ui.table [class*="center aligned"] { 496 text-align: center; 497 } 498 .ui.table[class*="right aligned"], 499 .ui.table [class*="right aligned"] { 500 text-align: right; 501 } 502 503 /*-------------- 504 Collapsing 505 ---------------*/ 506 507 .ui.table th.collapsing, 508 .ui.table td.collapsing { 509 width: 1px; 510 white-space: nowrap; 511 } 512 513 514 /*-------------- 515 Attached 516 ---------------*/ 517 518 519 /* All */ 520 .ui.attached.table { 521 width: @attachedTableWidth; 522 margin: 0em @attachedHorizontalOffset; 523 border-radius: 0px; 524 box-shadow: @attachedBoxShadow; 525 } 526 527 /* Top */ 528 .ui[class*="top attached"].table { 529 margin-top: @margin; 530 border-radius: @borderRadius @borderRadius 0em 0em; 531 } 532 .ui.table[class*="top attached"]:first-child { 533 margin-top: 0em; 534 } 535 536 /* Bottom */ 537 .ui.table[class*="bottom attached"] { 538 margin-top: 0em; 539 margin-bottom: @margin; 540 border-radius: 0em 0em @borderRadius @borderRadius; 541 } 542 .ui.table[class*="bottom attached"]:last-child { 543 margin-bottom: 0em; 544 } 545 546 /*-------------- 547 Striped 548 ---------------*/ 549 550 /* Table Striping */ 551 .ui.striped.table > tr:nth-child(2n), 552 .ui.striped.table tbody tr:nth-child(2n) { 553 background-color: @stripedBackground; 554 } 555 556 /* Stripes */ 557 .ui.inverted.striped.table > tr:nth-child(2n), 558 .ui.inverted.striped.table tbody tr:nth-child(2n) { 559 background-color: @invertedStripedBackground; 560 } 561 562 563 /*------------------- 564 Colors 565 --------------------*/ 566 567 .ui.black.table { 568 border-top: @coloredBorderSize solid @black; 569 } 570 .ui.blue.table { 571 border-top: @coloredBorderSize solid @blue; 572 } 573 .ui.green.table { 574 border-top: @coloredBorderSize solid @green; 575 } 576 .ui.orange.table { 577 border-top: @coloredBorderSize solid @orange; 578 } 579 .ui.pink.table { 580 border-top: @coloredBorderSize solid @pink; 581 } 582 .ui.purple.table { 583 border-top: @coloredBorderSize solid @purple; 584 } 585 .ui.red.table { 586 border-top: @coloredBorderSize solid @red; 587 } 588 .ui.teal.table { 589 border-top: @coloredBorderSize solid @teal; 590 } 591 .ui.yellow.table { 592 border-top: @coloredBorderSize solid @yellow; 593 } 594 595 /*------------------- 596 Inverted Colors 597 --------------------*/ 598 599 .ui.inverted.table, 600 .ui.inverted.black.table { 601 background-color: @black !important; 602 color: @white !important; 603 } 604 .ui.inverted.blue.table { 605 background-color: @blue !important; 606 color: @white !important; 607 } 608 .ui.inverted.green.table { 609 background-color: @green !important; 610 color: @white !important; 611 } 612 .ui.inverted.orange.table { 613 background-color: @orange !important; 614 color: @white !important; 615 } 616 .ui.inverted.pink.table { 617 background-color: @pink !important; 618 color: @white !important; 619 } 620 .ui.inverted.purple.table { 621 background-color: @purple !important; 622 color: @white !important; 623 } 624 .ui.inverted.red.table { 625 background-color: @red !important; 626 color: @white !important; 627 } 628 .ui.inverted.teal.table { 629 background-color: @teal !important; 630 color: @white !important; 631 } 632 .ui.inverted.yellow.table { 633 background-color: @yellow !important; 634 color: @white !important; 635 } 636 637 638 /*-------------- 639 Column Count 640 ---------------*/ 641 642 /* Grid Based */ 643 .ui.one.column.table td { 644 width: @oneColumn; 645 } 646 .ui.two.column.table td { 647 width: @twoColumn; 648 } 649 .ui.three.column.table td { 650 width: @threeColumn; 651 } 652 .ui.four.column.table td { 653 width: @fourColumn; 654 } 655 .ui.five.column.table td { 656 width: @fiveColumn; 657 } 658 .ui.six.column.table td { 659 width: @sixColumn; 660 } 661 .ui.seven.column.table td { 662 width: @sevenColumn; 663 } 664 .ui.eight.column.table td { 665 width: @eightColumn; 666 } 667 .ui.nine.column.table td { 668 width: @nineColumn; 669 } 670 .ui.ten.column.table td { 671 width: @tenColumn; 672 } 673 .ui.eleven.column.table td { 674 width: @elevenColumn; 675 } 676 .ui.twelve.column.table td { 677 width: @twelveColumn; 678 } 679 .ui.thirteen.column.table td { 680 width: @thirteenColumn; 681 } 682 .ui.fourteen.column.table td { 683 width: @fourteenColumn; 684 } 685 .ui.fifteen.column.table td { 686 width: @fifteenColumn; 687 } 688 .ui.sixteen.column.table td { 689 width: @sixteenColumn; 690 } 691 692 /* Column Width */ 693 .ui.table th.one.wide, 694 .ui.table td.one.wide { 695 width: @oneWide; 696 } 697 .ui.table th.two.wide, 698 .ui.table td.two.wide { 699 width: @twoWide; 700 } 701 .ui.table th.three.wide, 702 .ui.table td.three.wide { 703 width: @threeWide; 704 } 705 .ui.table th.four.wide, 706 .ui.table td.four.wide { 707 width: @fourWide; 708 } 709 .ui.table th.five.wide, 710 .ui.table td.five.wide { 711 width: @fiveWide; 712 } 713 .ui.table th.six.wide, 714 .ui.table td.six.wide { 715 width: @sixWide; 716 } 717 .ui.table th.seven.wide, 718 .ui.table td.seven.wide { 719 width: @sevenWide; 720 } 721 .ui.table th.eight.wide, 722 .ui.table td.eight.wide { 723 width: @eightWide; 724 } 725 .ui.table th.nine.wide, 726 .ui.table td.nine.wide { 727 width: @nineWide; 728 } 729 .ui.table th.ten.wide, 730 .ui.table td.ten.wide { 731 width: @tenWide; 732 } 733 .ui.table th.eleven.wide, 734 .ui.table td.eleven.wide { 735 width: @elevenWide; 736 } 737 .ui.table th.twelve.wide, 738 .ui.table td.twelve.wide { 739 width: @twelveWide; 740 } 741 .ui.table th.thirteen.wide, 742 .ui.table td.thirteen.wide { 743 width: @thirteenWide; 744 } 745 .ui.table th.fourteen.wide, 746 .ui.table td.fourteen.wide { 747 width: @fourteenWide; 748 } 749 .ui.table th.fifteen.wide, 750 .ui.table td.fifteen.wide { 751 width: @fifteenWide; 752 } 753 .ui.table th.sixteen.wide, 754 .ui.table td.sixteen.wide { 755 width: @sixteenWide; 756 } 757 758 /*-------------- 759 Sortable 760 ---------------*/ 761 762 .ui.sortable.table thead th { 763 cursor: pointer; 764 white-space: nowrap; 765 border-left: @sortableBorder; 766 color: @sortableColor; 767 } 768 .ui.sortable.table thead th:first-child { 769 border-left: none; 770 } 771 .ui.sortable.table thead th.sorted, 772 .ui.sortable.table thead th.sorted:hover { 773 user-select: none; 774 } 775 776 .ui.sortable.table thead th:after { 777 display: inline-block; 778 content: ''; 779 width: @sortableIconWidth; 780 height: 1em; 781 opacity: @sortableIconOpacity; 782 783 margin: 0em 0em 0em @sortableIconDistance; 784 785 font-family: @sortableIconFont; 786 font-style: normal; 787 font-weight: normal; 788 text-decoration: inherit; 789 } 790 .ui.sortable.table thead th.ascending:after { 791 content: @sortableIconAscending; 792 } 793 .ui.sortable.table thead th.descending:after { 794 content: @sortableIconDescending; 795 } 796 797 /* Hover */ 798 .ui.sortable.table th.disabled:hover { 799 cursor: auto; 800 color: @sortableDisabledColor; 801 } 802 .ui.sortable.table thead th:hover { 803 background: @sortableHoverBackground; 804 color: @sortableHoverColor; 805 } 806 807 /* Sorted */ 808 .ui.sortable.table thead th.sorted { 809 background: @sortableActiveBackground; 810 color: @sortableActiveColor; 811 } 812 813 /* Sorted Hover */ 814 .ui.sortable.table thead th.sorted:hover { 815 background: @sortableActiveHoverBackground; 816 color: @sortableActiveHoverColor; 817 } 818 819 /* Inverted */ 820 .ui.inverted.sortable.table thead th.sorted { 821 background: @sortableInvertedActiveBackground; 822 color: @sortableInvertedActiveColor; 823 } 824 .ui.inverted.sortable.table thead th:hover { 825 background: @sortableInvertedHoverBackground; 826 color: @sortableInvertedHoverColor; 827 } 828 .ui.inverted.sortable.table thead th { 829 border-left-color: @sortableInvertedBorderColor; 830 border-right-color: @sortableInvertedBorderColor; 831 } 832 833 834 /*-------------- 835 Inverted 836 ---------------*/ 837 838 /* Text Color */ 839 .ui.inverted.table { 840 background: @invertedBackground; 841 color: @invertedCellColor; 842 border: @invertedBorder; 843 } 844 .ui.inverted.table th { 845 background-color: @invertedHeaderBackground; 846 border-color: @invertedCellBorderColor !important; 847 color: @invertedHeaderColor; 848 } 849 .ui.inverted.table tr td { 850 border-color: @invertedCellBorderColor !important; 851 } 852 853 .ui.inverted.table tr.disabled td, 854 .ui.inverted.table tr td.disabled, 855 .ui.inverted.table tr.disabled:hover td, 856 .ui.inverted.table tr:hover td.disabled { 857 pointer-events: none; 858 color: @invertedDisabledTextColor; 859 } 860 861 /* Definition */ 862 .ui.inverted.definition.table tfoot:not(.full-width) th:first-child, 863 .ui.inverted.definition.table thead:not(.full-width) th:first-child { 864 background: @definitionPageBackground; 865 } 866 .ui.inverted.definition.table tr td:first-child { 867 background: @invertedDefinitionColumnBackground; 868 color: @invertedDefinitionColumnColor; 869 } 870 871 /*-------------- 872 Collapsing 873 ---------------*/ 874 875 .ui.collapsing.table { 876 width: auto; 877 } 878 879 /*-------------- 880 Basic 881 ---------------*/ 882 883 .ui.basic.table { 884 background: @basicTableBackground; 885 border: @basicTableBorder; 886 box-shadow: @basicBoxShadow; 887 } 888 .ui.basic.table thead, 889 .ui.basic.table tfoot { 890 box-shadow: none; 891 } 892 .ui.basic.table th { 893 background: @basicTableHeaderBackground; 894 border-left: @basicTableHeaderDivider; 895 } 896 .ui.basic.table tbody tr { 897 border-bottom: @basicTableCellBorder; 898 } 899 .ui.basic.table td { 900 background: @basicTableCellBackground; 901 } 902 .ui.basic.striped.table tbody tr:nth-child(2n) { 903 background-color: @basicTableStripedBackground !important; 904 } 905 906 /* Very Basic */ 907 .ui[class*="very basic"].table { 908 border: none; 909 } 910 .ui[class*="very basic"].table:not(.sortable):not(.striped) th, 911 .ui[class*="very basic"].table:not(.sortable):not(.striped) td { 912 padding: @basicTableCellVerticalPadding @basicTableCellHorizontalPadding; 913 } 914 .ui[class*="very basic"].table:not(.sortable):not(.striped) th:first-child, 915 .ui[class*="very basic"].table:not(.sortable):not(.striped) td:first-child { 916 padding-left: 0em; 917 } 918 .ui[class*="very basic"].table:not(.sortable):not(.striped) th:last-child, 919 .ui[class*="very basic"].table:not(.sortable):not(.striped) td:last-child { 920 padding-right: 0em; 921 } 922 .ui[class*="very basic"].table:not(.sortable):not(.striped) thead tr:first-child th { 923 padding-top: 0em; 924 } 925 926 /*-------------- 927 Celled 928 ---------------*/ 929 930 .ui.celled.table tr th, 931 .ui.celled.table tr td { 932 border-left: @cellBorder; 933 } 934 .ui.celled.table tr th:first-child, 935 .ui.celled.table tr td:first-child { 936 border-left: none; 937 } 938 939 /*-------------- 940 Padded 941 ---------------*/ 942 943 .ui.padded.table th { 944 padding-left: @paddedHorizontalPadding; 945 padding-right: @paddedHorizontalPadding; 946 } 947 .ui.padded.table th, 948 .ui.padded.table td { 949 padding: @paddedVerticalPadding @paddedHorizontalPadding; 950 } 951 952 /* Very */ 953 .ui[class*="very padded"].table th { 954 padding-left: @veryPaddedHorizontalPadding; 955 padding-right: @veryPaddedHorizontalPadding; 956 } 957 .ui[class*="very padded"].table td { 958 padding: @veryPaddedVerticalPadding @veryPaddedHorizontalPadding; 959 } 960 961 /*-------------- 962 Compact 963 ---------------*/ 964 965 .ui.compact.table th { 966 padding-left: @compactHorizontalPadding; 967 padding-right: @compactHorizontalPadding; 968 } 969 .ui.compact.table td { 970 padding: @compactVerticalPadding @compactHorizontalPadding; 971 } 972 973 /* Very */ 974 .ui[class*="very compact"].table th { 975 padding-left: @veryCompactHorizontalPadding; 976 padding-right: @veryCompactHorizontalPadding; 977 } 978 .ui[class*="very compact"].table td { 979 padding: @veryCompactVerticalPadding @veryCompactHorizontalPadding; 980 } 981 982 /*-------------- 983 Sizes 984 ---------------*/ 985 986 /* Small */ 987 .ui.small.table { 988 font-size: @small; 989 } 990 991 /* Standard */ 992 .ui.table { 993 font-size: @medium; 994 } 995 996 /* Large */ 997 .ui.large.table { 998 font-size: @large; 999 } 1000 1001 .loadUIOverrides();