github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/src/definitions/collections/grid.less (about) 1 /*! 2 * # Semantic UI - Grid 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 Theme 14 *******************************/ 15 16 @type : 'collection'; 17 @element : 'grid'; 18 19 @import (multiple) '../../theme.config'; 20 21 /******************************* 22 Standard 23 *******************************/ 24 25 .ui.grid { 26 display: block; 27 text-align: left; 28 29 font-size: 0em; 30 padding: 0em; 31 } 32 33 .ui.grid:after, 34 .ui.grid > .row:after { 35 content: ''; 36 display: block; 37 height: 0px; 38 clear: both; 39 visibility: hidden; 40 } 41 42 /*---------------------- 43 Remove Gutters 44 -----------------------*/ 45 46 .ui.grid { 47 margin-top: -(@rowSpacing / 2); 48 margin-bottom: -(@rowSpacing / 2); 49 margin-left: -(@gutterWidth / 2); 50 margin-right: -(@gutterWidth / 2); 51 } 52 .ui.relaxed.grid { 53 margin-left: -(@relaxedGutterWidth / 2); 54 margin-right: -(@relaxedGutterWidth / 2); 55 } 56 .ui[class*="very relaxed"].grid { 57 margin-left: -(@veryRelaxedGutterWidth / 2); 58 margin-right: -(@veryRelaxedGutterWidth / 2); 59 } 60 61 62 /* Collapse Margins on Consecutive Grids */ 63 .ui.grid + .grid { 64 margin-top: (@rowSpacing / 2); 65 } 66 67 /*------------------- 68 Columns 69 --------------------*/ 70 71 /* Standard 16 column */ 72 .ui.grid > .column:not(.row), 73 .ui.grid > .row > .column { 74 position: relative; 75 display: inline-block; 76 font-size: 1rem; 77 78 width: @oneWide; 79 padding-left: (@gutterWidth / 2); 80 padding-right: (@gutterWidth / 2); 81 vertical-align: top; 82 } 83 84 .ui.grid > * { 85 padding-left: (@gutterWidth / 2); 86 padding-right: (@gutterWidth / 2); 87 } 88 89 /*------------------- 90 Rows 91 --------------------*/ 92 93 .ui.grid > .row { 94 position: relative; 95 display: block; 96 width: auto !important; 97 padding: 0rem; 98 font-size: 0rem; 99 padding-top: (@rowSpacing / 2); 100 padding-bottom: (@rowSpacing / 2); 101 } 102 103 /*------------------- 104 Columns 105 --------------------*/ 106 107 /* Vertical padding when no rows */ 108 .ui.grid > .column:not(.row) { 109 padding-top: (@rowSpacing / 2); 110 padding-bottom: (@rowSpacing / 2); 111 } 112 .ui.grid > .row > .column { 113 margin-top: 0em; 114 margin-bottom: 0em; 115 } 116 117 /*------------------- 118 Content 119 --------------------*/ 120 121 .ui.grid > .row > img, 122 .ui.grid > .row > .column > img { 123 max-width: @columnMaxImageWidth; 124 } 125 126 /*------------------- 127 Loose Coupling 128 --------------------*/ 129 130 .ui.grid .row + .ui.divider { 131 margin: (@rowSpacing / 2) (@gutterWidth / 2); 132 } 133 134 /* remove Border on last horizontal segment */ 135 .ui.grid > .row > .column:last-child > .horizontal.segment, 136 .ui.grid > .column:last-child > .horizontal.segment { 137 box-shadow: none; 138 } 139 140 /******************************* 141 Variations 142 *******************************/ 143 144 145 /*----------------------- 146 Page Grid 147 -------------------------*/ 148 149 .ui.page.grid { 150 padding-left: @computerGutter; 151 padding-right: @computerGutter; 152 width: @computerWidth; 153 } 154 155 /* Collapse Margin */ 156 .ui.grid > .ui.grid:first-child { 157 margin-top: 0em; 158 } 159 .ui.grid > .ui.grid:last-child { 160 margin-bottom: 0em; 161 } 162 163 @media only screen and (max-width: (@largestMobileScreen)) { 164 .ui.page.grid { 165 width: @mobileWidth; 166 padding-left: @mobileGutter; 167 padding-right: @mobileGutter; 168 margin-left: 0em; 169 margin-right: 0em; 170 } 171 } 172 @media only screen and (min-width: @tabletBreakpoint ) { 173 .ui.page.grid { 174 width: @tabletWidth; 175 margin-left: @tabletMargin; 176 margin-right: @tabletMargin; 177 padding-left: @tabletGutter; 178 padding-right: @tabletGutter; 179 } 180 } 181 @media only screen and (min-width: @computerBreakpoint) { 182 .ui.page.grid { 183 width: @computerWidth; 184 margin-left: @computerMargin; 185 margin-right: @computerMargin; 186 padding-left: @computerGutter; 187 padding-right: @computerGutter; 188 } 189 } 190 @media only screen and (min-width: @largeMonitorBreakpoint) { 191 .ui.page.grid { 192 width: @largeMonitorWidth; 193 margin-left: @largeMonitorMargin; 194 margin-right: @largeMonitorMargin; 195 padding-left: @largeMonitorGutter; 196 padding-right: @largeMonitorGutter; 197 } 198 } 199 @media only screen and (min-width: @widescreenMonitorBreakpoint) { 200 .ui.page.grid { 201 width: @widescreenMonitorWidth; 202 margin-left: @widescreenMargin; 203 margin-right: @widescreenMargin; 204 padding-left: @widescreenMonitorGutter; 205 padding-right: @widescreenMonitorGutter; 206 } 207 } 208 209 210 /*------------------- 211 Column Count 212 --------------------*/ 213 214 /* Assume full width with one column */ 215 .ui.grid > .column:only-child, 216 .ui.grid > .row > .column:only-child { 217 width: @oneColumn; 218 } 219 220 /* Grid Based */ 221 .ui[class*="one column"].grid > .row > .column, 222 .ui[class*="one column"].grid > .column { 223 width: @oneColumn; 224 } 225 .ui[class*="two column"].grid > .row > .column, 226 .ui[class*="two column"].grid > .column { 227 width: @twoColumn; 228 } 229 .ui[class*="three column"].grid > .row > .column, 230 .ui[class*="three column"].grid > .column { 231 width: @threeColumn; 232 } 233 .ui[class*="four column"].grid > .row > .column, 234 .ui[class*="four column"].grid > .column { 235 width: @fourColumn; 236 } 237 .ui[class*="five column"].grid > .row > .column, 238 .ui[class*="five column"].grid > .column { 239 width: @fiveColumn; 240 } 241 .ui[class*="six column"].grid > .row > .column, 242 .ui[class*="six column"].grid > .column { 243 width: @sixColumn; 244 } 245 .ui[class*="seven column"].grid > .row > .column, 246 .ui[class*="seven column"].grid > .column { 247 width: @sevenColumn; 248 } 249 .ui[class*="eight column"].grid > .row > .column, 250 .ui[class*="eight column"].grid > .column { 251 width: @eightColumn; 252 } 253 .ui[class*="nine column"].grid > .row > .column, 254 .ui[class*="nine column"].grid > .column { 255 width: @nineColumn; 256 } 257 .ui[class*="ten column"].grid > .row > .column, 258 .ui[class*="ten column"].grid > .column { 259 width: @tenColumn; 260 } 261 .ui[class*="eleven column"].grid > .row > .column, 262 .ui[class*="eleven column"].grid > .column { 263 width: @elevenColumn; 264 } 265 .ui[class*="twelve column"].grid > .row > .column, 266 .ui[class*="twelve column"].grid > .column { 267 width: @twelveColumn; 268 } 269 .ui[class*="thirteen column"].grid > .row > .column, 270 .ui[class*="thirteen column"].grid > .column { 271 width: @thirteenColumn; 272 } 273 .ui[class*="fourteen column"].grid > .row > .column, 274 .ui[class*="fourteen column"].grid > .column { 275 width: @fourteenColumn; 276 } 277 .ui[class*="fifteen column"].grid > .row > .column, 278 .ui[class*="fifteen column"].grid > .column { 279 width: @fifteenColumn; 280 } 281 .ui[class*="sixteen column"].grid > .row > .column, 282 .ui[class*="sixteen column"].grid > .column { 283 width: @sixteenColumn; 284 } 285 286 /* Row Based Overrides */ 287 .ui.grid > [class*="one column"].row > .column { 288 width: @oneColumn !important; 289 } 290 .ui.grid > [class*="two column"].row > .column { 291 width: @twoColumn !important; 292 } 293 .ui.grid > [class*="three column"].row > .column { 294 width: @threeColumn !important; 295 } 296 .ui.grid > [class*="four column"].row > .column { 297 width: @fourColumn !important; 298 } 299 .ui.grid > [class*="five column"].row > .column { 300 width: @fiveColumn !important; 301 } 302 .ui.grid > [class*="six column"].row > .column { 303 width: @sixColumn !important; 304 } 305 .ui.grid > [class*="seven column"].row > .column { 306 width: @sevenColumn !important; 307 } 308 .ui.grid > [class*="eight column"].row > .column { 309 width: @eightColumn !important; 310 } 311 .ui.grid > [class*="nine column"].row > .column { 312 width: @nineColumn !important; 313 } 314 .ui.grid > [class*="ten column"].row > .column { 315 width: @tenColumn !important; 316 } 317 .ui.grid > [class*="eleven column"].row > .column { 318 width: @elevenColumn !important; 319 } 320 .ui.grid > [class*="twelve column"].row > .column { 321 width: @twelveColumn !important; 322 } 323 .ui.grid > [class*="thirteen column"].row > .column { 324 width: @thirteenColumn !important; 325 } 326 .ui.grid > [class*="fourteen column"].row > .column { 327 width: @fourteenColumn !important; 328 } 329 .ui.grid > [class*="fifteen column"].row > .column { 330 width: @fifteenColumn !important; 331 } 332 .ui.grid > [class*="sixteen column"].row > .column { 333 width: @sixteenColumn !important; 334 } 335 336 337 /*------------------- 338 Column Width 339 --------------------*/ 340 341 /* Sizing Combinations */ 342 .ui.grid > .row > [class*="one wide"].column, 343 .ui.grid > .column.row > [class*="one wide"].column, 344 .ui.grid > [class*="one wide"].column, 345 .ui.column.grid > [class*="one wide"].column { 346 width: @oneWide !important; 347 } 348 .ui.grid > .row > [class*="two wide"].column, 349 .ui.grid > .column.row > [class*="two wide"].column, 350 .ui.grid > [class*="two wide"].column, 351 .ui.column.grid > [class*="two wide"].column { 352 width: @twoWide !important; 353 } 354 .ui.grid > .row > [class*="three wide"].column, 355 .ui.grid > .column.row > [class*="three wide"].column, 356 .ui.grid > [class*="three wide"].column, 357 .ui.column.grid > [class*="three wide"].column { 358 width: @threeWide !important; 359 } 360 .ui.grid > .row > [class*="four wide"].column, 361 .ui.grid > .column.row > [class*="four wide"].column, 362 .ui.grid > [class*="four wide"].column, 363 .ui.column.grid > [class*="four wide"].column { 364 width: @fourWide !important; 365 } 366 .ui.grid > .row > [class*="five wide"].column, 367 .ui.grid > .column.row > [class*="five wide"].column, 368 .ui.grid > [class*="five wide"].column, 369 .ui.column.grid > [class*="five wide"].column { 370 width: @fiveWide !important; 371 } 372 .ui.grid > .row > [class*="six wide"].column, 373 .ui.grid > .column.row > [class*="six wide"].column, 374 .ui.grid > [class*="six wide"].column, 375 .ui.column.grid > [class*="six wide"].column { 376 width: @sixWide !important; 377 } 378 .ui.grid > .row > [class*="seven wide"].column, 379 .ui.grid > .column.row > [class*="seven wide"].column, 380 .ui.grid > [class*="seven wide"].column, 381 .ui.column.grid > [class*="seven wide"].column { 382 width: @sevenWide !important; 383 } 384 .ui.grid > .row > [class*="eight wide"].column, 385 .ui.grid > .column.row > [class*="eight wide"].column, 386 .ui.grid > [class*="eight wide"].column, 387 .ui.column.grid > [class*="eight wide"].column { 388 width: @eightWide !important; 389 } 390 .ui.grid > .row > [class*="nine wide"].column, 391 .ui.grid > .column.row > [class*="nine wide"].column, 392 .ui.grid > [class*="nine wide"].column, 393 .ui.column.grid > [class*="nine wide"].column { 394 width: @nineWide !important; 395 } 396 .ui.grid > .row > [class*="ten wide"].column, 397 .ui.grid > .column.row > [class*="ten wide"].column, 398 .ui.grid > [class*="ten wide"].column, 399 .ui.column.grid > [class*="ten wide"].column { 400 width: @tenWide !important; 401 } 402 .ui.grid > .row > [class*="eleven wide"].column, 403 .ui.grid > .column.row > [class*="eleven wide"].column, 404 .ui.grid > [class*="eleven wide"].column, 405 .ui.column.grid > [class*="eleven wide"].column { 406 width: @elevenWide !important; 407 } 408 .ui.grid > .row > [class*="twelve wide"].column, 409 .ui.grid > .column.row > [class*="twelve wide"].column, 410 .ui.grid > [class*="twelve wide"].column, 411 .ui.column.grid > [class*="twelve wide"].column { 412 width: @twelveWide !important; 413 } 414 .ui.grid > .row > [class*="thirteen wide"].column, 415 .ui.grid > .column.row > [class*="thirteen wide"].column, 416 .ui.grid > [class*="thirteen wide"].column, 417 .ui.column.grid > [class*="thirteen wide"].column { 418 width: @thirteenWide !important; 419 } 420 .ui.grid > .row > [class*="fourteen wide"].column, 421 .ui.grid > .column.row > [class*="fourteen wide"].column, 422 .ui.grid > [class*="fourteen wide"].column, 423 .ui.column.grid > [class*="fourteen wide"].column { 424 width: @fourteenWide !important; 425 } 426 .ui.grid > .row > [class*="fifteen wide"].column, 427 .ui.grid > .column.row > [class*="fifteen wide"].column, 428 .ui.grid > [class*="fifteen wide"].column, 429 .ui.column.grid > [class*="fifteen wide"].column { 430 width: @fifteenWide !important; 431 } 432 .ui.grid > .row > [class*="sixteen wide"].column, 433 .ui.grid > .column.row > [class*="sixteen wide"].column, 434 .ui.grid > [class*="sixteen wide"].column, 435 .ui.column.grid > [class*="sixteen wide"].column { 436 width: @sixteenWide !important; 437 } 438 439 /*---------------------- 440 Width per Device 441 -----------------------*/ 442 443 /* Mobile Sizing Combinations */ 444 @media only screen and (min-width: @mobileBreakpoint) and (max-width: @largestMobileScreen) { 445 .ui.grid > .row > [class*="one wide mobile"].column, 446 .ui.grid > .column.row > [class*="one wide mobile"].column, 447 .ui.grid > [class*="one wide mobile"].column, 448 .ui.column.grid > [class*="one wide mobile"].column { 449 width: @oneWide !important; 450 } 451 .ui.grid > .row > [class*="two wide mobile"].column, 452 .ui.grid > .column.row > [class*="two wide mobile"].column, 453 .ui.grid > [class*="two wide mobile"].column, 454 .ui.column.grid > [class*="two wide mobile"].column { 455 width: @twoWide !important; 456 } 457 .ui.grid > .row > [class*="three wide mobile"].column, 458 .ui.grid > .column.row > [class*="three wide mobile"].column, 459 .ui.grid > [class*="three wide mobile"].column, 460 .ui.column.grid > [class*="three wide mobile"].column { 461 width: @threeWide !important; 462 } 463 .ui.grid > .row > [class*="four wide mobile"].column, 464 .ui.grid > .column.row > [class*="four wide mobile"].column, 465 .ui.grid > [class*="four wide mobile"].column, 466 .ui.column.grid > [class*="four wide mobile"].column { 467 width: @fourWide !important; 468 } 469 .ui.grid > .row > [class*="five wide mobile"].column, 470 .ui.grid > .column.row > [class*="five wide mobile"].column, 471 .ui.grid > [class*="five wide mobile"].column, 472 .ui.column.grid > [class*="five wide mobile"].column { 473 width: @fiveWide !important; 474 } 475 .ui.grid > .row > [class*="six wide mobile"].column, 476 .ui.grid > .column.row > [class*="six wide mobile"].column, 477 .ui.grid > [class*="six wide mobile"].column, 478 .ui.column.grid > [class*="six wide mobile"].column { 479 width: @sixWide !important; 480 } 481 .ui.grid > .row > [class*="seven wide mobile"].column, 482 .ui.grid > .column.row > [class*="seven wide mobile"].column, 483 .ui.grid > [class*="seven wide mobile"].column, 484 .ui.column.grid > [class*="seven wide mobile"].column { 485 width: @sevenWide !important; 486 } 487 .ui.grid > .row > [class*="eight wide mobile"].column, 488 .ui.grid > .column.row > [class*="eight wide mobile"].column, 489 .ui.grid > [class*="eight wide mobile"].column, 490 .ui.column.grid > [class*="eight wide mobile"].column { 491 width: @eightWide !important; 492 } 493 .ui.grid > .row > [class*="nine wide mobile"].column, 494 .ui.grid > .column.row > [class*="nine wide mobile"].column, 495 .ui.grid > [class*="nine wide mobile"].column, 496 .ui.column.grid > [class*="nine wide mobile"].column { 497 width: @nineWide !important; 498 } 499 .ui.grid > .row > [class*="ten wide mobile"].column, 500 .ui.grid > .column.row > [class*="ten wide mobile"].column, 501 .ui.grid > [class*="ten wide mobile"].column, 502 .ui.column.grid > [class*="ten wide mobile"].column { 503 width: @tenWide !important; 504 } 505 .ui.grid > .row > [class*="eleven wide mobile"].column, 506 .ui.grid > .column.row > [class*="eleven wide mobile"].column, 507 .ui.grid > [class*="eleven wide mobile"].column, 508 .ui.column.grid > [class*="eleven wide mobile"].column { 509 width: @elevenWide !important; 510 } 511 .ui.grid > .row > [class*="twelve wide mobile"].column, 512 .ui.grid > .column.row > [class*="twelve wide mobile"].column, 513 .ui.grid > [class*="twelve wide mobile"].column, 514 .ui.column.grid > [class*="twelve wide mobile"].column { 515 width: @twelveWide !important; 516 } 517 .ui.grid > .row > [class*="thirteen wide mobile"].column, 518 .ui.grid > .column.row > [class*="thirteen wide mobile"].column, 519 .ui.grid > [class*="thirteen wide mobile"].column, 520 .ui.column.grid > [class*="thirteen wide mobile"].column { 521 width: @thirteenWide !important; 522 } 523 .ui.grid > .row > [class*="fourteen wide mobile"].column, 524 .ui.grid > .column.row > [class*="fourteen wide mobile"].column, 525 .ui.grid > [class*="fourteen wide mobile"].column, 526 .ui.column.grid > [class*="fourteen wide mobile"].column { 527 width: @fourteenWide !important; 528 } 529 .ui.grid > .row > [class*="fifteen wide mobile"].column, 530 .ui.grid > .column.row > [class*="fifteen wide mobile"].column, 531 .ui.grid > [class*="fifteen wide mobile"].column, 532 .ui.column.grid > [class*="fifteen wide mobile"].column { 533 width: @fifteenWide !important; 534 } 535 .ui.grid > .row > [class*="sixteen wide mobile"].column, 536 .ui.grid > .column.row > [class*="sixteen wide mobile"].column, 537 .ui.grid > [class*="sixteen wide mobile"].column, 538 .ui.column.grid > [class*="sixteen wide mobile"].column { 539 width: @sixteenWide !important; 540 } 541 } 542 543 /* Tablet Sizing Combinations */ 544 @media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) { 545 .ui.grid > .row > [class*="one wide tablet"].column, 546 .ui.grid > .column.row > [class*="one wide tablet"].column, 547 .ui.grid > [class*="one wide tablet"].column, 548 .ui.column.grid > [class*="one wide tablet"].column { 549 width: @oneWide !important; 550 } 551 .ui.grid > .row > [class*="two wide tablet"].column, 552 .ui.grid > .column.row > [class*="two wide tablet"].column, 553 .ui.grid > [class*="two wide tablet"].column, 554 .ui.column.grid > [class*="two wide tablet"].column { 555 width: @twoWide !important; 556 } 557 .ui.grid > .row > [class*="three wide tablet"].column, 558 .ui.grid > .column.row > [class*="three wide tablet"].column, 559 .ui.grid > [class*="three wide tablet"].column, 560 .ui.column.grid > [class*="three wide tablet"].column { 561 width: @threeWide !important; 562 } 563 .ui.grid > .row > [class*="four wide tablet"].column, 564 .ui.grid > .column.row > [class*="four wide tablet"].column, 565 .ui.grid > [class*="four wide tablet"].column, 566 .ui.column.grid > [class*="four wide tablet"].column { 567 width: @fourWide !important; 568 } 569 .ui.grid > .row > [class*="five wide tablet"].column, 570 .ui.grid > .column.row > [class*="five wide tablet"].column, 571 .ui.grid > [class*="five wide tablet"].column, 572 .ui.column.grid > [class*="five wide tablet"].column { 573 width: @fiveWide !important; 574 } 575 .ui.grid > .row > [class*="six wide tablet"].column, 576 .ui.grid > .column.row > [class*="six wide tablet"].column, 577 .ui.grid > [class*="six wide tablet"].column, 578 .ui.column.grid > [class*="six wide tablet"].column { 579 width: @sixWide !important; 580 } 581 .ui.grid > .row > [class*="seven wide tablet"].column, 582 .ui.grid > .column.row > [class*="seven wide tablet"].column, 583 .ui.grid > [class*="seven wide tablet"].column, 584 .ui.column.grid > [class*="seven wide tablet"].column { 585 width: @sevenWide !important; 586 } 587 .ui.grid > .row > [class*="eight wide tablet"].column, 588 .ui.grid > .column.row > [class*="eight wide tablet"].column, 589 .ui.grid > [class*="eight wide tablet"].column, 590 .ui.column.grid > [class*="eight wide tablet"].column { 591 width: @eightWide !important; 592 } 593 .ui.grid > .row > [class*="nine wide tablet"].column, 594 .ui.grid > .column.row > [class*="nine wide tablet"].column, 595 .ui.grid > [class*="nine wide tablet"].column, 596 .ui.column.grid > [class*="nine wide tablet"].column { 597 width: @nineWide !important; 598 } 599 .ui.grid > .row > [class*="ten wide tablet"].column, 600 .ui.grid > .column.row > [class*="ten wide tablet"].column, 601 .ui.grid > [class*="ten wide tablet"].column, 602 .ui.column.grid > [class*="ten wide tablet"].column { 603 width: @tenWide !important; 604 } 605 .ui.grid > .row > [class*="eleven wide tablet"].column, 606 .ui.grid > .column.row > [class*="eleven wide tablet"].column, 607 .ui.grid > [class*="eleven wide tablet"].column, 608 .ui.column.grid > [class*="eleven wide tablet"].column { 609 width: @elevenWide !important; 610 } 611 .ui.grid > .row > [class*="twelve wide tablet"].column, 612 .ui.grid > .column.row > [class*="twelve wide tablet"].column, 613 .ui.grid > [class*="twelve wide tablet"].column, 614 .ui.column.grid > [class*="twelve wide tablet"].column { 615 width: @twelveWide !important; 616 } 617 .ui.grid > .row > [class*="thirteen wide tablet"].column, 618 .ui.grid > .column.row > [class*="thirteen wide tablet"].column, 619 .ui.grid > [class*="thirteen wide tablet"].column, 620 .ui.column.grid > [class*="thirteen wide tablet"].column { 621 width: @thirteenWide !important; 622 } 623 .ui.grid > .row > [class*="fourteen wide tablet"].column, 624 .ui.grid > .column.row > [class*="fourteen wide tablet"].column, 625 .ui.grid > [class*="fourteen wide tablet"].column, 626 .ui.column.grid > [class*="fourteen wide tablet"].column { 627 width: @fourteenWide !important; 628 } 629 .ui.grid > .row > [class*="fifteen wide tablet"].column, 630 .ui.grid > .column.row > [class*="fifteen wide tablet"].column, 631 .ui.grid > [class*="fifteen wide tablet"].column, 632 .ui.column.grid > [class*="fifteen wide tablet"].column { 633 width: @fifteenWide !important; 634 } 635 .ui.grid > .row > [class*="sixteen wide tablet"].column, 636 .ui.grid > .column.row > [class*="sixteen wide tablet"].column, 637 .ui.grid > [class*="sixteen wide tablet"].column, 638 .ui.column.grid > [class*="sixteen wide tablet"].column { 639 width: @sixteenWide !important; 640 } 641 } 642 643 /* Computer/Desktop Sizing Combinations */ 644 @media only screen and (min-width: @computerBreakpoint) { 645 .ui.grid > .row > [class*="one wide computer"].column, 646 .ui.grid > .column.row > [class*="one wide computer"].column, 647 .ui.grid > [class*="one wide computer"].column, 648 .ui.column.grid > [class*="one wide computer"].column { 649 width: @oneWide !important; 650 } 651 .ui.grid > .row > [class*="two wide computer"].column, 652 .ui.grid > .column.row > [class*="two wide computer"].column, 653 .ui.grid > [class*="two wide computer"].column, 654 .ui.column.grid > [class*="two wide computer"].column { 655 width: @twoWide !important; 656 } 657 .ui.grid > .row > [class*="three wide computer"].column, 658 .ui.grid > .column.row > [class*="three wide computer"].column, 659 .ui.grid > [class*="three wide computer"].column, 660 .ui.column.grid > [class*="three wide computer"].column { 661 width: @threeWide !important; 662 } 663 .ui.grid > .row > [class*="four wide computer"].column, 664 .ui.grid > .column.row > [class*="four wide computer"].column, 665 .ui.grid > [class*="four wide computer"].column, 666 .ui.column.grid > [class*="four wide computer"].column { 667 width: @fourWide !important; 668 } 669 .ui.grid > .row > [class*="five wide computer"].column, 670 .ui.grid > .column.row > [class*="five wide computer"].column, 671 .ui.grid > [class*="five wide computer"].column, 672 .ui.column.grid > [class*="five wide computer"].column { 673 width: @fiveWide !important; 674 } 675 .ui.grid > .row > [class*="six wide computer"].column, 676 .ui.grid > .column.row > [class*="six wide computer"].column, 677 .ui.grid > [class*="six wide computer"].column, 678 .ui.column.grid > [class*="six wide computer"].column { 679 width: @sixWide !important; 680 } 681 .ui.grid > .row > [class*="seven wide computer"].column, 682 .ui.grid > .column.row > [class*="seven wide computer"].column, 683 .ui.grid > [class*="seven wide computer"].column, 684 .ui.column.grid > [class*="seven wide computer"].column { 685 width: @sevenWide !important; 686 } 687 .ui.grid > .row > [class*="eight wide computer"].column, 688 .ui.grid > .column.row > [class*="eight wide computer"].column, 689 .ui.grid > [class*="eight wide computer"].column, 690 .ui.column.grid > [class*="eight wide computer"].column { 691 width: @eightWide !important; 692 } 693 .ui.grid > .row > [class*="nine wide computer"].column, 694 .ui.grid > .column.row > [class*="nine wide computer"].column, 695 .ui.grid > [class*="nine wide computer"].column, 696 .ui.column.grid > [class*="nine wide computer"].column { 697 width: @nineWide !important; 698 } 699 .ui.grid > .row > [class*="ten wide computer"].column, 700 .ui.grid > .column.row > [class*="ten wide computer"].column, 701 .ui.grid > [class*="ten wide computer"].column, 702 .ui.column.grid > [class*="ten wide computer"].column { 703 width: @tenWide !important; 704 } 705 .ui.grid > .row > [class*="eleven wide computer"].column, 706 .ui.grid > .column.row > [class*="eleven wide computer"].column, 707 .ui.grid > [class*="eleven wide computer"].column, 708 .ui.column.grid > [class*="eleven wide computer"].column { 709 width: @elevenWide !important; 710 } 711 .ui.grid > .row > [class*="twelve wide computer"].column, 712 .ui.grid > .column.row > [class*="twelve wide computer"].column, 713 .ui.grid > [class*="twelve wide computer"].column, 714 .ui.column.grid > [class*="twelve wide computer"].column { 715 width: @twelveWide !important; 716 } 717 .ui.grid > .row > [class*="thirteen wide computer"].column, 718 .ui.grid > .column.row > [class*="thirteen wide computer"].column, 719 .ui.grid > [class*="thirteen wide computer"].column, 720 .ui.column.grid > [class*="thirteen wide computer"].column { 721 width: @thirteenWide !important; 722 } 723 .ui.grid > .row > [class*="fourteen wide computer"].column, 724 .ui.grid > .column.row > [class*="fourteen wide computer"].column, 725 .ui.grid > [class*="fourteen wide computer"].column, 726 .ui.column.grid > [class*="fourteen wide computer"].column { 727 width: @fourteenWide !important; 728 } 729 .ui.grid > .row > [class*="fifteen wide computer"].column, 730 .ui.grid > .column.row > [class*="fifteen wide computer"].column, 731 .ui.grid > [class*="fifteen wide computer"].column, 732 .ui.column.grid > [class*="fifteen wide computer"].column { 733 width: @fifteenWide !important; 734 } 735 .ui.grid > .row > [class*="sixteen wide computer"].column, 736 .ui.grid > .column.row > [class*="sixteen wide computer"].column, 737 .ui.grid > [class*="sixteen wide computer"].column, 738 .ui.column.grid > [class*="sixteen wide computer"].column { 739 width: @sixteenWide !important; 740 } 741 } 742 743 /* Large Monitor Sizing Combinations */ 744 @media only screen and (min-width: @largeMonitorBreakpoint) and (max-width: @largestLargeMonitor){ 745 .ui.grid > .row > [class*="one wide large screen"].column, 746 .ui.grid > .column.row > [class*="one wide large screen"].column, 747 .ui.grid > [class*="one wide large screen"].column, 748 .ui.column.grid > [class*="one wide large screen"].column { 749 width: @oneWide !important; 750 } 751 .ui.grid > .row > [class*="two wide large screen"].column, 752 .ui.grid > .column.row > [class*="two wide large screen"].column, 753 .ui.grid > [class*="two wide large screen"].column, 754 .ui.column.grid > [class*="two wide large screen"].column { 755 width: @twoWide !important; 756 } 757 .ui.grid > .row > [class*="three wide large screen"].column, 758 .ui.grid > .column.row > [class*="three wide large screen"].column, 759 .ui.grid > [class*="three wide large screen"].column, 760 .ui.column.grid > [class*="three wide large screen"].column { 761 width: @threeWide !important; 762 } 763 .ui.grid > .row > [class*="four wide large screen"].column, 764 .ui.grid > .column.row > [class*="four wide large screen"].column, 765 .ui.grid > [class*="four wide large screen"].column, 766 .ui.column.grid > [class*="four wide large screen"].column { 767 width: @fourWide !important; 768 } 769 .ui.grid > .row > [class*="five wide large screen"].column, 770 .ui.grid > .column.row > [class*="five wide large screen"].column, 771 .ui.grid > [class*="five wide large screen"].column, 772 .ui.column.grid > [class*="five wide large screen"].column { 773 width: @fiveWide !important; 774 } 775 .ui.grid > .row > [class*="six wide large screen"].column, 776 .ui.grid > .column.row > [class*="six wide large screen"].column, 777 .ui.grid > [class*="six wide large screen"].column, 778 .ui.column.grid > [class*="six wide large screen"].column { 779 width: @sixWide !important; 780 } 781 .ui.grid > .row > [class*="seven wide large screen"].column, 782 .ui.grid > .column.row > [class*="seven wide large screen"].column, 783 .ui.grid > [class*="seven wide large screen"].column, 784 .ui.column.grid > [class*="seven wide large screen"].column { 785 width: @sevenWide !important; 786 } 787 .ui.grid > .row > [class*="eight wide large screen"].column, 788 .ui.grid > .column.row > [class*="eight wide large screen"].column, 789 .ui.grid > [class*="eight wide large screen"].column, 790 .ui.column.grid > [class*="eight wide large screen"].column { 791 width: @eightWide !important; 792 } 793 .ui.grid > .row > [class*="nine wide large screen"].column, 794 .ui.grid > .column.row > [class*="nine wide large screen"].column, 795 .ui.grid > [class*="nine wide large screen"].column, 796 .ui.column.grid > [class*="nine wide large screen"].column { 797 width: @nineWide !important; 798 } 799 .ui.grid > .row > [class*="ten wide large screen"].column, 800 .ui.grid > .column.row > [class*="ten wide large screen"].column, 801 .ui.grid > [class*="ten wide large screen"].column, 802 .ui.column.grid > [class*="ten wide large screen"].column { 803 width: @tenWide !important; 804 } 805 .ui.grid > .row > [class*="eleven wide large screen"].column, 806 .ui.grid > .column.row > [class*="eleven wide large screen"].column, 807 .ui.grid > [class*="eleven wide large screen"].column, 808 .ui.column.grid > [class*="eleven wide large screen"].column { 809 width: @elevenWide !important; 810 } 811 .ui.grid > .row > [class*="twelve wide large screen"].column, 812 .ui.grid > .column.row > [class*="twelve wide large screen"].column, 813 .ui.grid > [class*="twelve wide large screen"].column, 814 .ui.column.grid > [class*="twelve wide large screen"].column { 815 width: @twelveWide !important; 816 } 817 .ui.grid > .row > [class*="thirteen wide large screen"].column, 818 .ui.grid > .column.row > [class*="thirteen wide large screen"].column, 819 .ui.grid > [class*="thirteen wide large screen"].column, 820 .ui.column.grid > [class*="thirteen wide large screen"].column { 821 width: @thirteenWide !important; 822 } 823 .ui.grid > .row > [class*="fourteen wide large screen"].column, 824 .ui.grid > .column.row > [class*="fourteen wide large screen"].column, 825 .ui.grid > [class*="fourteen wide large screen"].column, 826 .ui.column.grid > [class*="fourteen wide large screen"].column { 827 width: @fourteenWide !important; 828 } 829 .ui.grid > .row > [class*="fifteen wide large screen"].column, 830 .ui.grid > .column.row > [class*="fifteen wide large screen"].column, 831 .ui.grid > [class*="fifteen wide large screen"].column, 832 .ui.column.grid > [class*="fifteen wide large screen"].column { 833 width: @fifteenWide !important; 834 } 835 .ui.grid > .row > [class*="sixteen wide large screen"].column, 836 .ui.grid > .column.row > [class*="sixteen wide large screen"].column, 837 .ui.grid > [class*="sixteen wide large screen"].column, 838 .ui.column.grid > [class*="sixteen wide large screen"].column { 839 width: @sixteenWide !important; 840 } 841 } 842 843 /* Widescreen Sizing Combinations */ 844 @media only screen and (min-width: @widescreenMonitorBreakpoint) { 845 .ui.grid > .row > [class*="one wide widescreen"].column, 846 .ui.grid > .column.row > [class*="one wide widescreen"].column, 847 .ui.grid > [class*="one wide widescreen"].column, 848 .ui.column.grid > [class*="one wide widescreen"].column { 849 width: @oneWide !important; 850 } 851 .ui.grid > .row > [class*="two wide widescreen"].column, 852 .ui.grid > .column.row > [class*="two wide widescreen"].column, 853 .ui.grid > [class*="two wide widescreen"].column, 854 .ui.column.grid > [class*="two wide widescreen"].column { 855 width: @twoWide !important; 856 } 857 .ui.grid > .row > [class*="three wide widescreen"].column, 858 .ui.grid > .column.row > [class*="three wide widescreen"].column, 859 .ui.grid > [class*="three wide widescreen"].column, 860 .ui.column.grid > [class*="three wide widescreen"].column { 861 width: @threeWide !important; 862 } 863 .ui.grid > .row > [class*="four wide widescreen"].column, 864 .ui.grid > .column.row > [class*="four wide widescreen"].column, 865 .ui.grid > [class*="four wide widescreen"].column, 866 .ui.column.grid > [class*="four wide widescreen"].column { 867 width: @fourWide !important; 868 } 869 .ui.grid > .row > [class*="five wide widescreen"].column, 870 .ui.grid > .column.row > [class*="five wide widescreen"].column, 871 .ui.grid > [class*="five wide widescreen"].column, 872 .ui.column.grid > [class*="five wide widescreen"].column { 873 width: @fiveWide !important; 874 } 875 .ui.grid > .row > [class*="six wide widescreen"].column, 876 .ui.grid > .column.row > [class*="six wide widescreen"].column, 877 .ui.grid > [class*="six wide widescreen"].column, 878 .ui.column.grid > [class*="six wide widescreen"].column { 879 width: @sixWide !important; 880 } 881 .ui.grid > .row > [class*="seven wide widescreen"].column, 882 .ui.grid > .column.row > [class*="seven wide widescreen"].column, 883 .ui.grid > [class*="seven wide widescreen"].column, 884 .ui.column.grid > [class*="seven wide widescreen"].column { 885 width: @sevenWide !important; 886 } 887 .ui.grid > .row > [class*="eight wide widescreen"].column, 888 .ui.grid > .column.row > [class*="eight wide widescreen"].column, 889 .ui.grid > [class*="eight wide widescreen"].column, 890 .ui.column.grid > [class*="eight wide widescreen"].column { 891 width: @eightWide !important; 892 } 893 .ui.grid > .row > [class*="nine wide widescreen"].column, 894 .ui.grid > .column.row > [class*="nine wide widescreen"].column, 895 .ui.grid > [class*="nine wide widescreen"].column, 896 .ui.column.grid > [class*="nine wide widescreen"].column { 897 width: @nineWide !important; 898 } 899 .ui.grid > .row > [class*="ten wide widescreen"].column, 900 .ui.grid > .column.row > [class*="ten wide widescreen"].column, 901 .ui.grid > [class*="ten wide widescreen"].column, 902 .ui.column.grid > [class*="ten wide widescreen"].column { 903 width: @tenWide !important; 904 } 905 .ui.grid > .row > [class*="eleven wide widescreen"].column, 906 .ui.grid > .column.row > [class*="eleven wide widescreen"].column, 907 .ui.grid > [class*="eleven wide widescreen"].column, 908 .ui.column.grid > [class*="eleven wide widescreen"].column { 909 width: @elevenWide !important; 910 } 911 .ui.grid > .row > [class*="twelve wide widescreen"].column, 912 .ui.grid > .column.row > [class*="twelve wide widescreen"].column, 913 .ui.grid > [class*="twelve wide widescreen"].column, 914 .ui.column.grid > [class*="twelve wide widescreen"].column { 915 width: @twelveWide !important; 916 } 917 .ui.grid > .row > [class*="thirteen wide widescreen"].column, 918 .ui.grid > .column.row > [class*="thirteen wide widescreen"].column, 919 .ui.grid > [class*="thirteen wide widescreen"].column, 920 .ui.column.grid > [class*="thirteen wide widescreen"].column { 921 width: @thirteenWide !important; 922 } 923 .ui.grid > .row > [class*="fourteen wide widescreen"].column, 924 .ui.grid > .column.row > [class*="fourteen wide widescreen"].column, 925 .ui.grid > [class*="fourteen wide widescreen"].column, 926 .ui.column.grid > [class*="fourteen wide widescreen"].column { 927 width: @fourteenWide !important; 928 } 929 .ui.grid > .row > [class*="fifteen wide widescreen"].column, 930 .ui.grid > .column.row > [class*="fifteen wide widescreen"].column, 931 .ui.grid > [class*="fifteen wide widescreen"].column, 932 .ui.column.grid > [class*="fifteen wide widescreen"].column { 933 width: @fifteenWide !important; 934 } 935 .ui.grid > .row > [class*="sixteen wide widescreen"].column, 936 .ui.grid > .column.row > [class*="sixteen wide widescreen"].column, 937 .ui.grid > [class*="sixteen wide widescreen"].column, 938 .ui.column.grid > [class*="sixteen wide widescreen"].column { 939 width: @sixteenWide !important; 940 } 941 } 942 943 /*---------------------- 944 Centered 945 -----------------------*/ 946 947 .ui.centered.grid, 948 .ui.centered.grid > .row, 949 .ui.grid > .centered.row { 950 text-align: center; 951 justify-content: center; 952 } 953 .ui.centered.grid > .column:not(.aligned):not(.row), 954 .ui.centered.grid > .row > .column:not(.aligned), 955 .ui.grid .centered.row > .column:not(.aligned) { 956 text-align: left; 957 } 958 959 .ui.grid > .centered.column, 960 .ui.grid > .row > .centered.column { 961 display: block; 962 margin-left: auto; 963 margin-right: auto; 964 } 965 966 /*---------------------- 967 Relaxed 968 -----------------------*/ 969 970 .ui.relaxed.grid > .column:not(.row), 971 .ui.relaxed.grid > .row > .column, 972 .ui.grid > .relaxed.row > .column { 973 padding-left: (@relaxedGutterWidth / 2); 974 padding-right: (@relaxedGutterWidth / 2); 975 } 976 977 .ui[class*="very relaxed"].grid > .column:not(.row), 978 .ui[class*="very relaxed"].grid > .row > .column, 979 .ui.grid > [class*="very relaxed"].row > .column { 980 padding-left: (@veryRelaxedGutterWidth / 2); 981 padding-right: (@veryRelaxedGutterWidth / 2); 982 } 983 984 /* Coupling with UI Divider */ 985 .ui.relaxed.grid .row + .ui.divider, 986 .ui.grid .relaxed.row + .ui.divider { 987 margin-left: (@relaxedGutterWidth / 2); 988 margin-right: (@relaxedGutterWidth / 2); 989 } 990 .ui[class*="very relaxed"].grid .row + .ui.divider, 991 .ui.grid [class*="very relaxed"].row + .ui.divider { 992 margin-left: (@veryRelaxedGutterWidth / 2); 993 margin-right: (@veryRelaxedGutterWidth / 2); 994 } 995 996 997 /*---------------------- 998 Padded 999 -----------------------*/ 1000 1001 .ui.padded.grid:not(.vertically):not(.horizontally) { 1002 margin: 0em !important; 1003 } 1004 [class*="horizontally padded"].ui.grid { 1005 margin-left: 0em !important; 1006 margin-right: 0em !important; 1007 } 1008 [class*="vertically padded"].ui.grid { 1009 margin-top: 0em !important; 1010 margin-bottom: 0em !important; 1011 } 1012 1013 /*---------------------- 1014 "Floated" 1015 -----------------------*/ 1016 1017 .ui.grid [class*="left floated"].column { 1018 float: left; 1019 } 1020 .ui.grid [class*="right floated"].column { 1021 float: right; 1022 } 1023 1024 1025 /*---------------------- 1026 Divided 1027 -----------------------*/ 1028 1029 .ui.divided.grid:not([class*="vertically divided"]) > .column:not(.row), 1030 .ui.divided.grid:not([class*="vertically divided"]) > .row > .column { 1031 box-shadow: @dividedBorder; 1032 } 1033 1034 /* Swap from padding to margin on columns to have dividers align */ 1035 .ui[class*="vertically divided"].grid > .column:not(.row), 1036 .ui[class*="vertically divided"].grid > .row > .column { 1037 margin-top: (@rowSpacing / 2); 1038 margin-bottom: (@rowSpacing / 2); 1039 padding-top: 0rem; 1040 padding-bottom: 0rem; 1041 } 1042 .ui[class*="vertically divided"].grid > .row { 1043 margin-top: 0em; 1044 margin-bottom: 0em; 1045 padding-top: 0em; 1046 padding-bottom: 0em; 1047 } 1048 1049 /* No divider on first column on row */ 1050 .ui.divided.grid:not([class*="vertically divided"]) > .column:first-child, 1051 .ui.divided.grid:not([class*="vertically divided"]) > .row > .column:first-child { 1052 box-shadow: none; 1053 } 1054 1055 /* Divided Row */ 1056 .ui.grid > .divided.row > .column { 1057 box-shadow: @dividedBorder; 1058 } 1059 .ui.grid > .divided.row > .column:first-child { 1060 box-shadow: none; 1061 } 1062 1063 /* Vertically Divided */ 1064 .ui[class*="vertically divided"].grid > .row { 1065 position: relative; 1066 } 1067 .ui[class*="vertically divided"].grid > .row:before { 1068 position: absolute; 1069 content: ""; 1070 top: 0em; 1071 left: 0px; 1072 1073 width: ~"calc(100% - "@gutterWidth~")"; 1074 height: 1px; 1075 1076 margin: 0% (@gutterWidth / 2); 1077 box-shadow: @verticallyDividedBorder; 1078 } 1079 1080 /* Padded Horizontally Divided */ 1081 [class*="horizontally padded"].ui.divided.grid, 1082 .ui.padded.divided.grid:not(.vertically):not(.horizontally) { 1083 width: 100%; 1084 } 1085 1086 /* First Row Vertically Divided */ 1087 .ui[class*="vertically divided"].grid > .row:first-child:before { 1088 box-shadow: none; 1089 } 1090 1091 /* Inverted Divided */ 1092 .ui.inverted.divided.grid:not([class*="vertically divided"]) > .column:not(.row), 1093 .ui.inverted.divided.grid:not([class*="vertically divided"]) > .row > .column { 1094 box-shadow: @dividedInvertedBorder; 1095 } 1096 .ui.inverted.divided.grid:not([class*="vertically divided"]) > .column:not(.row):first-child, 1097 .ui.inverted.divided.grid:not([class*="vertically divided"]) > .row > .column:first-child { 1098 box-shadow: none; 1099 } 1100 .ui.inverted[class*="vertically divided"].grid > .row:before { 1101 box-shadow: @verticallyDividedInvertedBorder; 1102 } 1103 1104 /* Relaxed */ 1105 .ui.relaxed[class*="vertically divided"].grid > .row:before { 1106 margin-left: (@relaxedGutterWidth / 2); 1107 margin-right: (@relaxedGutterWidth / 2); 1108 width: ~"calc(100% - "@relaxedGutterWidth~")"; 1109 } 1110 .ui[class*="very relaxed"][class*="vertically divided"].grid > .row:before { 1111 margin-left: @veryRelaxedGutterWidth; 1112 margin-right: @veryRelaxedGutterWidth; 1113 width: ~"calc(100% - "@veryRelaxedGutterWidth~")"; 1114 } 1115 1116 /*---------------------- 1117 Celled 1118 -----------------------*/ 1119 1120 .ui.celled.grid { 1121 display: table; 1122 table-layout: fixed; 1123 width: 100%; 1124 margin: @celledMargin; 1125 box-shadow: 0px 0px 0px @celledWidth @celledBorderColor; 1126 } 1127 .ui.celled.grid > .row, 1128 .ui.celled.grid > .column.row, 1129 .ui.celled.grid > .column.row:first-child { 1130 display: table; 1131 table-layout: fixed; 1132 width: 100% !important; 1133 margin: 0em; 1134 padding: 0em; 1135 box-shadow: 0px (-@celledWidth) 0px 0px @celledBorderColor; 1136 } 1137 .ui.celled.grid > .column:not(.row), 1138 .ui.celled.grid > .row > .column { 1139 display: table-cell; 1140 box-shadow: (-@celledWidth) 0px 0px 0px @celledBorderColor; 1141 } 1142 .ui.celled.grid > .column:first-child, 1143 .ui.celled.grid > .row > .column:first-child { 1144 box-shadow: none; 1145 } 1146 .ui.celled.page.grid { 1147 box-shadow: none; 1148 } 1149 1150 .ui.celled.grid > .column:not(.row), 1151 .ui.celled.grid > .row > .column { 1152 padding: @celledPadding; 1153 } 1154 .ui.relaxed.celled.grid > .column:not(.row), 1155 .ui.relaxed.celled.grid > .row > .column { 1156 padding: @celledRelaxedPadding; 1157 } 1158 .ui[class*="very relaxed"].celled.grid > .column:not(.row), 1159 .ui[class*="very relaxed"].celled.grid > .row > .column { 1160 padding: @celledVeryRelaxedPadding; 1161 } 1162 1163 /* Internally Celled */ 1164 .ui[class*="internally celled"].grid { 1165 box-shadow: none; 1166 } 1167 .ui[class*="internally celled"].grid > .row:first-child { 1168 box-shadow: none; 1169 } 1170 .ui[class*="internally celled"].grid > .row > .column:first-child { 1171 box-shadow: none; 1172 } 1173 1174 /*---------------------- 1175 Horizontally Centered 1176 -----------------------*/ 1177 1178 /* Left Aligned */ 1179 .ui[class*="left aligned"].grid, 1180 .ui[class*="left aligned"].grid > .row > .column, 1181 .ui[class*="left aligned"].grid > .column, 1182 .ui.grid [class*="left aligned"].column, 1183 .ui.grid > [class*="left aligned"].row > .column { 1184 text-align: left; 1185 align-items: flex-start !important; 1186 } 1187 .ui.grid [class*="left aligned"].column{ 1188 text-align: left !important; 1189 } 1190 1191 /* Center Aligned */ 1192 .ui[class*="center aligned"].grid, 1193 .ui[class*="center aligned"].grid > .row > .column, 1194 .ui[class*="center aligned"].grid > .column, 1195 .ui.grid > [class*="center aligned"].row > .column { 1196 text-align: center; 1197 align-items: center !important; 1198 } 1199 .ui.grid [class*="center aligned"].column{ 1200 text-align: center !important; 1201 } 1202 1203 /* Right Aligned */ 1204 .ui[class*="right aligned"].grid, 1205 .ui[class*="right aligned"].grid > .row > .column, 1206 .ui[class*="right aligned"].grid > .column, 1207 .ui.grid > [class*="right aligned"].row > .column { 1208 text-align: right; 1209 align-items: flex-end !important; 1210 } 1211 .ui.grid [class*="right aligned"].column{ 1212 text-align: right !important; 1213 } 1214 1215 /* Justified */ 1216 .ui.justified.grid, 1217 .ui.justified.grid > .row > .column, 1218 .ui.justified.grid > .column, 1219 .ui.grid .justified.column, 1220 .ui.grid > .justified.row > .column { 1221 text-align: justify; 1222 hyphens: auto; 1223 } 1224 .ui.grid .justified.column { 1225 text-align: justify !important; 1226 hyphens: auto !important; 1227 } 1228 1229 /*---------------------- 1230 Vertically Aligned 1231 -----------------------*/ 1232 1233 /* Top Aligned */ 1234 .ui[class*="top aligned"].grid, 1235 .ui[class*="top aligned"].grid > .row > .column, 1236 .ui[class*="top aligned"].grid > .column, 1237 .ui.grid [class*="top aligned"].column, 1238 .ui.grid > [class*="top aligned"].row > .column { 1239 vertical-align: top; 1240 justify-content: flex-start !important; 1241 } 1242 .ui.grid [class*="top aligned"].column { 1243 vertical-align: top !important; 1244 justify-content: flex-start !important; 1245 } 1246 1247 .ui.stretched.grid > .row > .column, 1248 .ui.stretched.grid > .column:not(.row), 1249 .ui.grid .stretched.column, 1250 .ui.grid > .stretched.row > .column { 1251 display: flex !important; 1252 flex-direction: column; 1253 } 1254 .ui.stretched.grid > .row > .column > *, 1255 .ui.stretched.grid > .column > *, 1256 .ui.grid .stretched.column > *, 1257 .ui.grid > .stretched.row > .column > * { 1258 flex-grow: 1; 1259 } 1260 1261 /* Middle Aligned */ 1262 .ui[class*="middle aligned"].grid, 1263 .ui[class*="middle aligned"].grid > .row > .column, 1264 .ui[class*="middle aligned"].grid > .column, 1265 .ui.grid > [class*="middle aligned"].row > .column { 1266 vertical-align: middle; 1267 justify-content: center !important; 1268 } 1269 .ui.grid [class*="middle aligned"].column{ 1270 vertical-align: middle !important; 1271 justify-content: center !important; 1272 } 1273 1274 /* Bottom Aligned */ 1275 .ui[class*="bottom aligned"].grid, 1276 .ui[class*="bottom aligned"].grid > .row > .column, 1277 .ui[class*="bottom aligned"].grid > .column, 1278 .ui.grid > [class*="bottom aligned"].row > .column { 1279 vertical-align: bottom; 1280 justify-content: flex-end !important; 1281 } 1282 .ui.grid [class*="bottom aligned"].column { 1283 justify-content: flex-end !important; 1284 vertical-align: bottom !important; 1285 } 1286 1287 /*---------------------- 1288 Colored 1289 -----------------------*/ 1290 1291 .ui.grid > .white.row, 1292 .ui.grid > .row > .white.column { 1293 background-color: @white !important; 1294 color: @textColor; 1295 } 1296 .ui.grid > .row > .white.column { 1297 margin-top: -(@rowSpacing / 2); 1298 margin-bottom: -(@rowSpacing / 2); 1299 padding-top: (@rowSpacing / 2); 1300 padding-bottom: (@rowSpacing / 2); 1301 } 1302 1303 .ui.grid > .black.row, 1304 .ui.grid > .row > .black.column { 1305 background-color: @black !important; 1306 color: @white; 1307 } 1308 .ui.grid > .row > .black.column { 1309 margin-top: -(@rowSpacing / 2); 1310 margin-bottom: -(@rowSpacing / 2); 1311 padding-top: (@rowSpacing / 2); 1312 padding-bottom: (@rowSpacing / 2); 1313 } 1314 1315 .ui.grid > .blue.row, 1316 .ui.grid > .row > .blue.column { 1317 background-color: @blue !important; 1318 color: @white; 1319 } 1320 .ui.grid > .row > .blue.column { 1321 margin-top: -(@rowSpacing / 2); 1322 margin-bottom: -(@rowSpacing / 2); 1323 padding-top: (@rowSpacing / 2); 1324 padding-bottom: (@rowSpacing / 2); 1325 } 1326 1327 .ui.grid > .green.row, 1328 .ui.grid > .row > .green.column { 1329 background-color: @green !important; 1330 color: @white; 1331 } 1332 .ui.grid > .row > .green.column { 1333 margin-top: -(@rowSpacing / 2); 1334 margin-bottom: -(@rowSpacing / 2); 1335 padding-top: (@rowSpacing / 2); 1336 padding-bottom: (@rowSpacing / 2); 1337 } 1338 1339 .ui.grid > .orange.row, 1340 .ui.grid > .row > .orange.column { 1341 background-color: @orange !important; 1342 color: @white; 1343 } 1344 .ui.grid > .row > .orange.column { 1345 margin-top: -(@rowSpacing / 2); 1346 margin-bottom: -(@rowSpacing / 2); 1347 padding-top: (@rowSpacing / 2); 1348 padding-bottom: (@rowSpacing / 2); 1349 } 1350 1351 .ui.grid > .pink.row, 1352 .ui.grid .pink.column { 1353 background-color: @pink !important; 1354 color: @white; 1355 } 1356 .ui.grid > .row > .pink.column { 1357 margin-top: -(@rowSpacing / 2); 1358 margin-bottom: -(@rowSpacing / 2); 1359 padding-top: (@rowSpacing / 2); 1360 padding-bottom: (@rowSpacing / 2); 1361 } 1362 1363 .ui.grid > .purple.row, 1364 .ui.grid > .row > .purple.column { 1365 background-color: @purple !important; 1366 color: @white; 1367 } 1368 .ui.grid > .row > .purple.column { 1369 margin-top: -(@rowSpacing / 2); 1370 margin-bottom: -(@rowSpacing / 2); 1371 padding-top: (@rowSpacing / 2); 1372 padding-bottom: (@rowSpacing / 2); 1373 } 1374 1375 .ui.grid > .red.row, 1376 .ui.grid > .row > .red.column { 1377 background-color: @red !important; 1378 color: @white; 1379 } 1380 .ui.grid > .row > .red.column { 1381 margin-top: -(@rowSpacing / 2); 1382 margin-bottom: -(@rowSpacing / 2); 1383 padding-top: (@rowSpacing / 2); 1384 padding-bottom: (@rowSpacing / 2); 1385 } 1386 1387 .ui.grid > .teal.row, 1388 .ui.grid > .row > .teal.column { 1389 background-color: @teal !important; 1390 color: @white; 1391 } 1392 .ui.grid > .row > .teal.column { 1393 margin-top: -(@rowSpacing / 2); 1394 margin-bottom: -(@rowSpacing / 2); 1395 padding-top: (@rowSpacing / 2); 1396 padding-bottom: (@rowSpacing / 2); 1397 } 1398 1399 .ui.grid > .yellow.row, 1400 .ui.grid > .row > .yellow.column { 1401 background-color: @yellow !important; 1402 color: @white; 1403 } 1404 .ui.grid > .row > .yellow.column { 1405 margin-top: -(@rowSpacing / 2); 1406 margin-bottom: -(@rowSpacing / 2); 1407 padding-top: (@rowSpacing / 2); 1408 padding-bottom: (@rowSpacing / 2); 1409 } 1410 1411 /*---------------------- 1412 Equal Width 1413 -----------------------*/ 1414 1415 .ui[class*="equal width"].grid { 1416 display: table; 1417 table-layout: fixed; 1418 } 1419 .ui[class*="equal width"].grid > .row, 1420 .ui.grid > [class*="equal width"].row { 1421 display: table; 1422 table-layout: fixed; 1423 width: 100% !important; 1424 } 1425 .ui[class*="equal width"].grid > .column:not(.row), 1426 .ui[class*="equal width"].grid > .row > .column, 1427 .ui.grid > [class*="equal width"].row > .column { 1428 display: table-cell; 1429 } 1430 1431 /* Flexbox (Experimental / Overrides Where Supported) */ 1432 .ui[class*="equal width"].grid, 1433 .ui[class*="equal width"].grid > .row, 1434 .ui.grid > [class*="equal width"].row { 1435 display: flex; 1436 flex-direction: row; 1437 flex-wrap: wrap; 1438 } 1439 .ui[class*="equal width"].grid > .column:not(.row), 1440 .ui[class*="equal width"].grid > .row > .column, 1441 .ui.grid > [class*="equal width"].row > .column { 1442 display: block; 1443 flex-grow: 1; 1444 } 1445 1446 1447 /*---------------------- 1448 Equal Height Columns 1449 -----------------------*/ 1450 1451 .ui[class*="equal height"].grid { 1452 display: table; 1453 table-layout: fixed; 1454 } 1455 .ui[class*="equal height"].grid > .row, 1456 .ui.grid > [class*="equal height"].row { 1457 display: table; 1458 table-layout: fixed; 1459 width: 100% !important; 1460 } 1461 .ui[class*="equal height"].grid > .column:not(.row), 1462 .ui[class*="equal height"].grid > .row > .column, 1463 .ui.grid > [class*="equal height"].row > .column { 1464 display: table-cell; 1465 } 1466 1467 /* Flexbox (Experimental / Overrides Where Supported) */ 1468 .ui[class*="equal height"].grid, 1469 .ui[class*="equal height"].grid > .row, 1470 .ui.grid > [class*="equal height"].row { 1471 display: flex; 1472 flex-direction: row; 1473 flex-wrap: wrap; 1474 } 1475 .ui[class*="equal height"].grid > .column:not(.row), 1476 .ui[class*="equal height"].grid > .row > .column, 1477 .ui.grid > [class*="equal height"].row > .column { 1478 display: block; 1479 flex-direction: column; 1480 flex-grow: 1; 1481 } 1482 1483 1484 1485 /*------------------- 1486 Doubling 1487 --------------------*/ 1488 1489 /* Tablet Only */ 1490 @media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) { 1491 .ui.doubling.grid { 1492 width: 100% !important; 1493 } 1494 .ui.grid > .doubling.row, 1495 .ui.doubling.grid > .row { 1496 margin: 0em !important; 1497 padding: 0em !important; 1498 } 1499 .ui.grid > .doubling.row > .column, 1500 .ui.doubling.grid > .row > .column { 1501 display: inline-block !important; 1502 padding-top: (@rowSpacing / 2) !important; 1503 padding-bottom: (@rowSpacing / 2) !important; 1504 margin: 0em; 1505 } 1506 .ui[class*="two column"].doubling.grid > .row > .column, 1507 .ui[class*="two column"].doubling.grid > .column, 1508 .ui.grid > [class*="two column"].doubling.row > .column { 1509 width: @oneColumn !important; 1510 } 1511 .ui[class*="three column"].doubling.grid > .row > .column, 1512 .ui[class*="three column"].doubling.grid > .column, 1513 .ui.grid > [class*="three column"].doubling.row > .column { 1514 width: @twoColumn !important; 1515 } 1516 .ui[class*="four column"].doubling.grid > .row > .column, 1517 .ui[class*="four column"].doubling.grid > .column, 1518 .ui.grid > [class*="four column"].doubling.row > .column { 1519 width: @twoColumn !important; 1520 } 1521 .ui[class*="five column"].doubling.grid > .row > .column, 1522 .ui[class*="five column"].doubling.grid > .column, 1523 .ui.grid > [class*="five column"].doubling.row > .column { 1524 width: @threeColumn !important; 1525 } 1526 .ui[class*="six column"].doubling.grid > .row > .column, 1527 .ui[class*="six column"].doubling.grid > .column, 1528 .ui.grid > [class*="six column"].doubling.row > .column { 1529 width: @threeColumn !important; 1530 } 1531 .ui[class*="seven column"].doubling.grid > .row > .column, 1532 .ui[class*="seven column"].doubling.grid > .column, 1533 .ui.grid > [class*="seven column"].doubling.row > .column { 1534 width: @threeColumn !important; 1535 } 1536 .ui[class*="eight column"].doubling.grid > .row > .column, 1537 .ui[class*="eight column"].doubling.grid > .column, 1538 .ui.grid > [class*="eight column"].doubling.row > .column { 1539 width: @fourColumn !important; 1540 } 1541 .ui[class*="nine column"].doubling.grid > .row > .column, 1542 .ui[class*="nine column"].doubling.grid > .column, 1543 .ui.grid > [class*="nine column"].doubling.row > .column { 1544 width: @fourColumn !important; 1545 } 1546 .ui[class*="ten column"].doubling.grid > .row > .column, 1547 .ui[class*="ten column"].doubling.grid > .column, 1548 .ui.grid > [class*="ten column"].doubling.row > .column { 1549 width: @fiveColumn !important; 1550 } 1551 .ui[class*="eleven column"].doubling.grid > .row > .column, 1552 .ui[class*="eleven column"].doubling.grid > .column, 1553 .ui.grid > [class*="eleven column"].doubling.row > .column { 1554 width: @fiveColumn !important; 1555 } 1556 .ui[class*="twelve column"].doubling.grid > .row > .column, 1557 .ui[class*="twelve column"].doubling.grid > .column, 1558 .ui.grid > [class*="twelve column"].doubling.row > .column { 1559 width: @sixColumn !important; 1560 } 1561 .ui[class*="thirteen column"].doubling.grid > .row > .column, 1562 .ui[class*="thirteen column"].doubling.grid > .column, 1563 .ui.grid > [class*="thirteen column"].doubling.row > .column { 1564 width: @sixColumn !important; 1565 } 1566 .ui[class*="fourteen column"].doubling.grid > .row > .column, 1567 .ui[class*="fourteen column"].doubling.grid > .column, 1568 .ui.grid > [class*="fourteen column"].doubling.row > .column { 1569 width: @sevenColumn !important; 1570 } 1571 .ui[class*="fifteen column"].doubling.grid > .row > .column, 1572 .ui[class*="fifteen column"].doubling.grid > .column, 1573 .ui.grid > [class*="fifteen column"].doubling.row > .column { 1574 width: @sevenColumn !important; 1575 } 1576 .ui[class*="sixteen column"].doubling.grid > .row > .column, 1577 .ui[class*="sixteen column"].doubling.grid > .column, 1578 .ui.grid > [class*="sixteen column"].doubling.row > .column { 1579 width: @eightColumn !important; 1580 } 1581 } 1582 1583 /* Mobily Only */ 1584 @media only screen and (max-width: @largestMobileScreen) { 1585 .ui.grid > .doubling.row, 1586 .ui.doubling.grid > .row { 1587 display: block !important; 1588 margin: 0em !important; 1589 padding: 0em !important; 1590 } 1591 .ui.grid > .doubling.row > .column, 1592 .ui.doubling.grid > .row > .column { 1593 display: inline-block !important; 1594 padding-top: (@rowSpacing / 2) !important; 1595 padding-bottom: (@rowSpacing / 2) !important; 1596 margin: 0em !important; 1597 } 1598 .ui[class*="two column"].doubling:not(.stackable).grid > .row > .column, 1599 .ui[class*="two column"].doubling:not(.stackable).grid > .column, 1600 .ui.grid > [class*="two column"].doubling:not(.stackable).row > .column { 1601 width: @oneColumn !important; 1602 } 1603 .ui[class*="three column"].doubling:not(.stackable).grid > .row > .column, 1604 .ui[class*="three column"].doubling:not(.stackable).grid > .column, 1605 .ui.grid > [class*="three column"].doubling:not(.stackable).row > .column { 1606 width: @twoColumn !important; 1607 } 1608 .ui[class*="four column"].doubling:not(.stackable).grid > .row > .column, 1609 .ui[class*="four column"].doubling:not(.stackable).grid > .column, 1610 .ui.grid > [class*="four column"].doubling:not(.stackable).row > .column { 1611 width: @twoColumn !important; 1612 } 1613 .ui[class*="five column"].doubling:not(.stackable).grid > .row > .column, 1614 .ui[class*="five column"].doubling:not(.stackable).grid > .column, 1615 .ui.grid > [class*="five column"].doubling:not(.stackable).row > .column { 1616 width: @twoColumn !important; 1617 } 1618 .ui[class*="six column"].doubling:not(.stackable).grid > .row > .column, 1619 .ui[class*="six column"].doubling:not(.stackable).grid > .column, 1620 .ui.grid > [class*="six column"].doubling:not(.stackable).row > .column { 1621 width: @twoColumn !important; 1622 } 1623 .ui[class*="seven column"].doubling:not(.stackable).grid > .row > .column, 1624 .ui[class*="seven column"].doubling:not(.stackable).grid > .column, 1625 .ui.grid > [class*="seven column"].doubling:not(.stackable).row > .column { 1626 width: @twoColumn !important; 1627 } 1628 .ui[class*="eight column"].doubling:not(.stackable).grid > .row > .column, 1629 .ui[class*="eight column"].doubling:not(.stackable).grid > .column, 1630 .ui.grid > [class*="eight column"].doubling:not(.stackable).row > .column { 1631 width: @twoColumn !important; 1632 } 1633 .ui[class*="nine column"].doubling:not(.stackable).grid > .row > .column, 1634 .ui[class*="nine column"].doubling:not(.stackable).grid > .column, 1635 .ui.grid > [class*="nine column"].doubling:not(.stackable).row > .column { 1636 width: @threeColumn !important; 1637 } 1638 .ui[class*="ten column"].doubling:not(.stackable).grid > .row > .column, 1639 .ui[class*="ten column"].doubling:not(.stackable).grid > .column, 1640 .ui.grid > [class*="ten column"].doubling:not(.stackable).row > .column { 1641 width: @threeColumn !important; 1642 } 1643 .ui[class*="eleven column"].doubling:not(.stackable).grid > .row > .column, 1644 .ui[class*="eleven column"].doubling:not(.stackable).grid > .column, 1645 .ui.grid > [class*="eleven column"].doubling:not(.stackable).row > .column { 1646 width: @threeColumn !important; 1647 } 1648 .ui[class*="twelve column"].doubling:not(.stackable).grid > .row > .column, 1649 .ui[class*="twelve column"].doubling:not(.stackable).grid > .column, 1650 .ui.grid > [class*="twelve column"].doubling:not(.stackable).row > .column { 1651 width: @threeColumn !important; 1652 } 1653 .ui[class*="thirteen column"].doubling:not(.stackable).grid > .row > .column, 1654 .ui[class*="thirteen column"].doubling:not(.stackable).grid > .column, 1655 .ui.grid > [class*="thirteen column"].doubling:not(.stackable).row > .column { 1656 width: @threeColumn !important; 1657 } 1658 .ui[class*="fourteen column"].doubling:not(.stackable).grid > .row > .column, 1659 .ui[class*="fourteen column"].doubling:not(.stackable).grid > .column, 1660 .ui.grid > [class*="fourteen column"].doubling:not(.stackable).row > .column { 1661 width: @fourColumn !important; 1662 } 1663 .ui[class*="fifteen column"].doubling:not(.stackable).grid > .row > .column, 1664 .ui[class*="fifteen column"].doubling:not(.stackable).grid > .column, 1665 .ui.grid > [class*="fifteen column"].doubling:not(.stackable).row > .column { 1666 width: @fourColumn !important; 1667 } 1668 .ui[class*="sixteen column"].doubling:not(.stackable).grid > .row > .column, 1669 .ui[class*="sixteen column"].doubling:not(.stackable).grid > .column, 1670 .ui.grid > [class*="sixteen column"].doubling:not(.stackable).row > .column { 1671 width: @fourColumn !important; 1672 } 1673 } 1674 1675 /*------------------- 1676 Stackable 1677 --------------------*/ 1678 1679 @media only screen and (max-width: @largestMobileScreen) { 1680 .ui.stackable.grid { 1681 display: block !important; 1682 width: auto; 1683 margin-left: 0em !important; 1684 margin-right: 0em !important; 1685 padding: 0em; 1686 } 1687 .ui.stackable.grid > .row > .wide.column, 1688 .ui.stackable.grid > .wide.column, 1689 .ui.stackable.grid > .column.grid > .column, 1690 .ui.stackable.grid > .column.row > .column, 1691 .ui.stackable.grid > .row > .column, 1692 .ui.stackable.grid > .column:not(.row) { 1693 display: block !important; 1694 width: auto !important; 1695 margin: 0em 0em !important; 1696 box-shadow: none !important; 1697 float: none !important; 1698 padding: (@stackableRowSpacing / 2) (@stackableGutter / 2) !important; 1699 } 1700 .ui.stackable.grid > .row { 1701 display: block !important; 1702 margin: 0em; 1703 padding: 0em; 1704 } 1705 1706 /* Don't pad inside segment or nested grid */ 1707 .ui.grid .ui.stackable.grid, 1708 .ui.segment:not(.vertical) .ui.stackable.page.grid { 1709 margin-left: -(@stackableGutter / 2) !important; 1710 margin-right: -(@stackableGutter / 2) !important; 1711 } 1712 1713 /* Equal Height Stackable */ 1714 .ui[class*="equal height"].stackable.page.grid { 1715 display: block !important; 1716 } 1717 1718 /* Divided Stackable */ 1719 .ui.stackable.divided.grid > .row:first-child > .column:first-child, 1720 .ui.stackable.celled.grid > .row:first-child > .column:first-child, 1721 .ui.stackable.divided.grid > .column:not(.row):first-child, 1722 .ui.stackable.celled.grid > .column:not(.row):first-child { 1723 border-top: none !important; 1724 } 1725 .ui.inverted.stackable.celled.grid > .column:not(.row), 1726 .ui.inverted.stackable.divided.grid > .column:not(.row), 1727 .ui.inverted.stackable.celled.grid > .row > .column, 1728 .ui.inverted.stackable.divided.grid > .row > .column { 1729 border-top: @stackableInvertedMobileBorder; 1730 } 1731 1732 .ui.stackable.celled.grid > .column:not(.row), 1733 .ui.stackable.divided.grid > .column:not(.row), 1734 .ui.stackable.celled.grid > .row > .column, 1735 .ui.stackable.divided.grid > .row > .column { 1736 border-top: @stackableMobileBorder; 1737 box-shadow: none !important; 1738 padding-top: @stackableRowSpacing !important; 1739 padding-bottom: @stackableRowSpacing !important; 1740 } 1741 1742 } 1743 1744 /*---------------------- 1745 Only (Device) 1746 -----------------------*/ 1747 1748 1749 /* These include arbitrary class repetitions for forced specificity */ 1750 1751 /* Mobile Only Hide */ 1752 @media only screen and ( max-width: @largestMobileScreen ) { 1753 .ui.tablet:not(.mobile).only.grid.grid.grid, 1754 .ui.grid.grid.grid > [class*="tablet only"].row:not(.mobile), 1755 .ui.grid.grid.grid > [class*="tablet only"].column:not(.mobile), 1756 .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.mobile) { 1757 display: none !important; 1758 } 1759 .ui[class*="computer only"].grid.grid.grid:not(.mobile), 1760 .ui.grid.grid.grid > [class*="computer only"].row:not(.mobile), 1761 .ui.grid.grid.grid > [class*="computer only"].column:not(.mobile), 1762 .ui.grid.grid.grid > .row > [class*="computer only"].column:not(.mobile) { 1763 display: none !important; 1764 } 1765 } 1766 /* Tablet Only Hide */ 1767 @media only screen and (min-width: @tabletBreakpoint ) and (max-width: @largestTabletScreen) { 1768 .ui[class*="mobile only"].grid.grid.grid:not(.tablet), 1769 .ui.grid.grid.grid > [class*="mobile only"].row:not(.tablet), 1770 .ui.grid.grid.grid > [class*="mobile only"].column:not(.tablet), 1771 .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.tablet) { 1772 display: none !important; 1773 } 1774 .ui[class*="computer only"].grid.grid.grid:not(.tablet), 1775 .ui.grid.grid.grid > [class*="computer only"].row:not(.tablet), 1776 .ui.grid.grid.grid > [class*="computer only"].column:not(.tablet), 1777 .ui.grid.grid.grid > .row > [class*="computer only"].column:not(.tablet) { 1778 display: none !important; 1779 } 1780 } 1781 1782 /* Computer Only Hide */ 1783 @media only screen and ( min-width: (@computerBreakpoint) ) { 1784 .ui[class*="mobile only"].grid.grid.grid:not(.computer), 1785 .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer), 1786 .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer), 1787 .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) { 1788 display: none !important; 1789 } 1790 .ui[class*="tablet only"].grid.grid.grid:not(.computer), 1791 .ui.grid.grid.grid > [class*="tablet only"].row:not(.computer), 1792 .ui.grid.grid.grid > [class*="tablet only"].column:not(.computer), 1793 .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) { 1794 display: none !important; 1795 } 1796 } 1797 1798 .loadUIOverrides();