github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/dist/components/segment.css (about) 1 /*! 2 * # Semantic UI x.x - Segment 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 Segment 15 *******************************/ 16 17 .ui.segment { 18 position: relative; 19 background-color: #ffffff; 20 box-shadow: 0px 0px 0px 1px rgba(39, 41, 43, 0.15), 0px 1px 2px 0 rgba(0, 0, 0, 0.05); 21 margin: 1rem 0em; 22 padding: 1em 1em; 23 border-radius: 0.2857rem; 24 border: none; 25 } 26 .ui.segment:first-child { 27 margin-top: 0em; 28 } 29 .ui.segment:last-child { 30 margin-bottom: 0em; 31 } 32 .ui.segment:after { 33 content: ''; 34 display: block; 35 height: 0px; 36 clear: both; 37 visibility: hidden; 38 } 39 40 /* Vertical */ 41 .ui[class*="vertical segment"] { 42 margin: 0em; 43 padding-left: 0em; 44 padding-right: 0em; 45 background-color: transparent; 46 border-radius: 0px; 47 border: none; 48 box-shadow: 0px -1px 0px rgba(39, 41, 43, 0.15) inset; 49 } 50 .ui[class*="vertical segment"]:last-child { 51 box-shadow: none; 52 } 53 54 /* Horizontal */ 55 .ui[class*="horizontal segment"] { 56 margin: 0em; 57 padding-top: 0em; 58 padding-bottom: 0em; 59 background-color: transparent; 60 border-radius: 0px; 61 border: none; 62 box-shadow: 1px 0px 0px rgba(39, 41, 43, 0.15); 63 } 64 65 /*------------------- 66 Loose Coupling 67 --------------------*/ 68 69 70 /* Header */ 71 .ui.inverted.segment > .ui.header { 72 color: #ffffff; 73 } 74 75 /* Label */ 76 .ui[class*="bottom attached"].segment > [class*="top attached"].label { 77 border-top-left-radius: 0em; 78 border-top-right-radius: 0em; 79 } 80 .ui[class*="top attached"].segment > [class*="bottom attached"].label { 81 border-bottom-left-radius: 0em; 82 border-bottom-right-radius: 0em; 83 } 84 .ui.attached.segment:not(.top):not(.bottom) > [class*="top attached"].label { 85 border-top-left-radius: 0em; 86 border-top-right-radius: 0em; 87 } 88 .ui.attached.segment:not(.top):not(.bottom) > [class*="bottom attached"].label { 89 border-bottom-left-radius: 0em; 90 border-bottom-right-radius: 0em; 91 } 92 93 /* Grid */ 94 .ui.page.grid.segment, 95 .ui.grid .ui.segment.column { 96 padding-top: 2em; 97 padding-bottom: 2em; 98 } 99 .ui.grid.segment { 100 margin: 1rem 0rem; 101 border-radius: 0.2857rem; 102 } 103 104 /* Table */ 105 .ui.basic.table.segment { 106 background: #ffffff; 107 border: none; 108 box-shadow: 0px 0px 0px 1px rgba(39, 41, 43, 0.15), 0px 1px 2px 0 rgba(0, 0, 0, 0.05); 109 } 110 .ui[class*="very basic"].table.segment { 111 padding: 1em 1em; 112 } 113 114 115 /******************************* 116 Types 117 *******************************/ 118 119 120 /*------------------- 121 Piled 122 --------------------*/ 123 124 .ui.piled.segment { 125 margin: 3em 0em; 126 box-shadow: 0px 0px 1px 1px rgba(39, 41, 43, 0.15); 127 z-index: auto; 128 } 129 .ui.piled.segment:first-child { 130 margin-top: 0em; 131 } 132 .ui.piled.segment:last-child { 133 margin-bottom: 0em; 134 } 135 .ui.piled.segment:after, 136 .ui.piled.segment:before { 137 background-color: #ffffff; 138 visibility: visible; 139 content: ''; 140 display: block; 141 height: 100%; 142 left: 0px; 143 position: absolute; 144 width: 100%; 145 box-shadow: 0px 0px 1px 1px rgba(39, 41, 43, 0.15); 146 } 147 .ui.piled.segment:after { 148 -webkit-transform: rotate(1.2deg); 149 -ms-transform: rotate(1.2deg); 150 transform: rotate(1.2deg); 151 top: 0; 152 z-index: -1; 153 } 154 .ui.piled.segment:before { 155 -webkit-transform: rotate(-1.2deg); 156 -ms-transform: rotate(-1.2deg); 157 transform: rotate(-1.2deg); 158 top: 0; 159 z-index: -2; 160 } 161 162 /* Piled Attached */ 163 .ui[class*="top attached"].piled.segment { 164 margin-top: 3em; 165 margin-bottom: 0em; 166 } 167 .ui.piled.segment[class*="top attached"]:first-child { 168 margin-top: 0em; 169 } 170 .ui.piled.segment[class*="bottom attached"] { 171 margin-top: 0em; 172 margin-bottom: 3em; 173 } 174 .ui.piled.segment[class*="bottom attached"]:last-child { 175 margin-bottom: 0em; 176 } 177 178 /*------------------- 179 Stacked 180 --------------------*/ 181 182 .ui.stacked.segment { 183 padding-bottom: 1.4em; 184 } 185 .ui.stacked.segment:after, 186 .ui.stacked.segment:before { 187 content: ''; 188 position: absolute; 189 bottom: -3px; 190 left: 0%; 191 border-top: 1px solid rgba(39, 41, 43, 0.15); 192 background-color: rgba(0, 0, 0, 0.03); 193 width: 100%; 194 height: 6px; 195 visibility: visible; 196 } 197 .ui.stacked.segment:before { 198 display: none; 199 } 200 201 /* Add additional page */ 202 .ui.tall.stacked.segment:before { 203 display: block; 204 bottom: 0px; 205 } 206 207 /* Inverted */ 208 .ui.stacked.inverted.segment:after, 209 .ui.stacked.inverted.segment:before { 210 background-color: rgba(0, 0, 0, 0.03); 211 border-top: 1px solid rgba(39, 41, 43, 0.3); 212 } 213 214 /*------------------- 215 Compact 216 --------------------*/ 217 218 .ui.compact.segment { 219 display: table; 220 } 221 222 /*------------------- 223 Circular 224 --------------------*/ 225 226 .ui.circular.segment { 227 display: table-cell; 228 padding: 2em; 229 text-align: center; 230 vertical-align: middle; 231 border-radius: 500em; 232 } 233 234 /*------------------- 235 Raised 236 --------------------*/ 237 238 .ui.raised.segment { 239 box-shadow: 0px 0px 0px 1px rgba(39, 41, 43, 0.15), 0px 1px 4px 0px rgba(0, 0, 0, 0.15); 240 } 241 242 243 /******************************* 244 States 245 *******************************/ 246 247 248 /*-------------- 249 Disabled 250 ---------------*/ 251 252 .ui.disabled.segment { 253 opacity: 0.3; 254 color: rgba(40, 40, 40, 0.3); 255 } 256 257 /*-------------- 258 Loading 259 ---------------*/ 260 261 .ui.loading.segment { 262 position: relative; 263 cursor: default; 264 point-events: none; 265 text-shadow: none !important; 266 color: transparent !important; 267 -webkit-transition: all 0s linear; 268 transition: all 0s linear; 269 } 270 .ui.loading.segment:before { 271 position: absolute; 272 content: ''; 273 top: 0%; 274 left: 0%; 275 background: rgba(255, 255, 255, 0.8); 276 width: 100%; 277 height: 100%; 278 border-radius: 0.2857rem; 279 z-index: 100; 280 } 281 .ui.loading.segment:after { 282 position: absolute; 283 content: ''; 284 top: 50%; 285 left: 50%; 286 margin: -1.5em 0em 0em -1.5em; 287 width: 3em; 288 height: 3em; 289 -webkit-animation: segment-spin 0.6s linear; 290 animation: segment-spin 0.6s linear; 291 -webkit-animation-iteration-count: infinite; 292 animation-iteration-count: infinite; 293 border-radius: 500rem; 294 border-color: #aaaaaa rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1); 295 border-style: solid; 296 border-width: 0.2em; 297 box-shadow: 0px 0px 0px 1px transparent; 298 visibility: visible; 299 z-index: 101; 300 } 301 @-webkit-keyframes segment-spin { 302 from { 303 -webkit-transform: rotate(0deg); 304 transform: rotate(0deg); 305 } 306 to { 307 -webkit-transform: rotate(360deg); 308 transform: rotate(360deg); 309 } 310 } 311 @keyframes segment-spin { 312 from { 313 -webkit-transform: rotate(0deg); 314 transform: rotate(0deg); 315 } 316 to { 317 -webkit-transform: rotate(360deg); 318 transform: rotate(360deg); 319 } 320 } 321 322 323 /******************************* 324 Variations 325 *******************************/ 326 327 328 /*------------------- 329 Basic 330 --------------------*/ 331 332 .ui.basic.segment { 333 position: relative; 334 background-color: transparent; 335 box-shadow: none; 336 border-radius: 0px; 337 } 338 339 /*------------------- 340 Fittted 341 --------------------*/ 342 343 .ui.fitted.segment { 344 padding: 0em; 345 } 346 347 /*------------------- 348 Colors 349 --------------------*/ 350 351 .ui.black.segment:not(.inverted) { 352 border-top: 2px solid #1b1c1d; 353 } 354 .ui.blue.segment:not(.inverted) { 355 border-top: 2px solid #006e93; 356 } 357 .ui.green.segment:not(.inverted) { 358 border-top: 2px solid #5bbd72; 359 } 360 .ui.orange.segment:not(.inverted) { 361 border-top: 2px solid #e07b53; 362 } 363 .ui.pink.segment:not(.inverted) { 364 border-top: 2px solid #d9499a; 365 } 366 .ui.purple.segment:not(.inverted) { 367 border-top: 2px solid #564f8a; 368 } 369 .ui.red.segment:not(.inverted) { 370 border-top: 2px solid #d95c5c; 371 } 372 .ui.teal.segment:not(.inverted) { 373 border-top: 2px solid #00b5ad; 374 } 375 .ui.yellow.segment:not(.inverted) { 376 border-top: 2px solid #f2c61f; 377 } 378 .ui.black.segment:not(.inverted):not(.attached) { 379 border-top-left-radius: 0.2857rem !important; 380 border-top-right-radius: 0.2857rem !important; 381 } 382 .ui.blue.segment:not(.inverted):not(.attached) { 383 border-top-left-radius: 0.2857rem !important; 384 border-top-right-radius: 0.2857rem !important; 385 } 386 .ui.green.segment:not(.inverted):not(.attached) { 387 border-top-left-radius: 0.2857rem !important; 388 border-top-right-radius: 0.2857rem !important; 389 } 390 .ui.orange.segment:not(.inverted):not(.attached) { 391 border-top-left-radius: 0.2857rem !important; 392 border-top-right-radius: 0.2857rem !important; 393 } 394 .ui.pink.segment:not(.inverted):not(.attached) { 395 border-top-left-radius: 0.2857rem !important; 396 border-top-right-radius: 0.2857rem !important; 397 } 398 .ui.purple.segment:not(.inverted):not(.attached) { 399 border-top-left-radius: 0.2857rem !important; 400 border-top-right-radius: 0.2857rem !important; 401 } 402 .ui.red.segment:not(.inverted):not(.attached) { 403 border-top-left-radius: 0.2857rem !important; 404 border-top-right-radius: 0.2857rem !important; 405 } 406 .ui.teal.segment:not(.inverted):not(.attached) { 407 border-top-left-radius: 0.2857rem !important; 408 border-top-right-radius: 0.2857rem !important; 409 } 410 .ui.yellow.segment:not(.inverted):not(.attached) { 411 border-top-left-radius: 0.2857rem !important; 412 border-top-right-radius: 0.2857rem !important; 413 } 414 415 /*------------------- 416 Inverted Colors 417 --------------------*/ 418 419 .ui.inverted.segment, 420 .ui.inverted.black.segment { 421 background-color: #1b1c1d !important; 422 color: #ffffff !important; 423 } 424 .ui.inverted.blue.segment { 425 background-color: #006e93 !important; 426 color: #ffffff !important; 427 } 428 .ui.inverted.green.segment { 429 background-color: #5bbd72 !important; 430 color: #ffffff !important; 431 } 432 .ui.inverted.orange.segment { 433 background-color: #e07b53 !important; 434 color: #ffffff !important; 435 } 436 .ui.inverted.pink.segment { 437 background-color: #d9499a !important; 438 color: #ffffff !important; 439 } 440 .ui.inverted.purple.segment { 441 background-color: #564f8a !important; 442 color: #ffffff !important; 443 } 444 .ui.inverted.red.segment { 445 background-color: #d95c5c !important; 446 color: #ffffff !important; 447 } 448 .ui.inverted.teal.segment { 449 background-color: #00b5ad !important; 450 color: #ffffff !important; 451 } 452 .ui.inverted.yellow.segment { 453 background-color: #f2c61f !important; 454 color: #ffffff !important; 455 } 456 457 /*------------------- 458 Aligned 459 --------------------*/ 460 461 .ui[class*="left aligned"].segment { 462 text-align: left; 463 } 464 .ui[class*="right aligned"].segment { 465 text-align: right; 466 } 467 .ui[class*="center aligned"].segment { 468 text-align: center; 469 } 470 471 /*------------------- 472 Floated 473 --------------------*/ 474 475 .ui.floated.segment, 476 .ui[class*="left floated"].segment { 477 float: left; 478 margin-right: 1rem; 479 } 480 .ui[class*="right floated"].segment { 481 float: right; 482 margin-left: 1rem; 483 } 484 485 /*------------------- 486 Inverted 487 --------------------*/ 488 489 .ui.inverted.segment { 490 border: none; 491 box-shadow: none; 492 } 493 .ui.inverted.segment .segment { 494 color: rgba(0, 0, 0, 0.8); 495 } 496 .ui.inverted.segment .inverted.segment { 497 color: #ffffff; 498 } 499 .ui.inverted.segment, 500 .ui.primary.inverted.segment { 501 background-color: #1b1c1d; 502 color: #ffffff; 503 } 504 .ui.inverted.block.segment, 505 .ui.inverted.attached.segment { 506 border-color: #555555; 507 } 508 509 /*------------------- 510 Ordinality 511 --------------------*/ 512 513 .ui.secondary.segment { 514 background: #faf9fa; 515 color: rgba(0, 0, 0, 0.8); 516 } 517 .ui.tertiary.segment { 518 background: #ebebeb; 519 color: rgba(0, 0, 0, 0.8); 520 } 521 .ui.secondary.inverted.segment { 522 background: -webkit-linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%); 523 background: linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%); 524 color: #fafafa; 525 } 526 .ui.tertiary.inverted.segment { 527 background: -webkit-linear-gradient(rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%); 528 background: linear-gradient(rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%); 529 color: #f0f0f0; 530 } 531 532 /*------------------- 533 Attached 534 --------------------*/ 535 536 .ui.segment.attached { 537 top: 0px; 538 bottom: 0px; 539 margin: 0em -1px; 540 width: -webkit-calc(100% + 2px ); 541 width: calc(100% + 2px ); 542 max-width: -webkit-calc(100% + 2px ); 543 max-width: calc(100% + 2px ); 544 border-radius: 0px; 545 box-shadow: none; 546 border: 1px solid #d4d4d5; 547 } 548 .ui.segment.attached + .ui.segment.attached:not(.top) { 549 border-top: none; 550 } 551 552 /* Top */ 553 .ui[class*="top attached"].segment { 554 top: 0px; 555 bottom: 0px; 556 margin-top: 1rem; 557 margin-bottom: 0em; 558 border-radius: 0.2857rem 0.2857rem 0em 0em; 559 } 560 .ui.segment[class*="top attached"]:first-child { 561 margin-top: 0em; 562 } 563 564 /* Bottom */ 565 .ui.segment[class*="bottom attached"] { 566 top: 0px; 567 bottom: 0px; 568 margin-top: 0em; 569 margin-bottom: 1rem; 570 box-shadow: none, 0px 1px 2px 0 rgba(0, 0, 0, 0.05); 571 border-radius: 0em 0em 0.2857rem 0.2857rem; 572 } 573 .ui.segment[class*="bottom attached"]:last-child { 574 margin-bottom: 0em; 575 } 576 577 /*------------------- 578 Groups 579 --------------------*/ 580 581 .ui.segments { 582 margin: 1rem 0em; 583 } 584 .ui.segments:first-child { 585 margin-top: 0em; 586 } 587 .ui.segments:last-child { 588 margin-bottom: 0em; 589 } 590 .ui.segments > .segment { 591 top: 0px; 592 bottom: 0px; 593 margin: 0em -1px; 594 width: -webkit-calc(100% + 2px ); 595 width: calc(100% + 2px ); 596 max-width: -webkit-calc(100% + 2px ); 597 max-width: calc(100% + 2px ); 598 border-radius: 0px; 599 box-shadow: none; 600 border: 1px solid #d4d4d5; 601 } 602 .ui.segments > .segment:not(:first-child) { 603 border-top: none; 604 } 605 606 /* Top */ 607 .ui.segments > .segment:first-child { 608 margin-top: 0em; 609 bottom: 0px; 610 margin-bottom: 0em; 611 top: 0px; 612 border-radius: 0.2857rem 0.2857rem 0em 0em; 613 } 614 615 /* Bottom */ 616 .ui.segments > .segment:last-child { 617 bottom: 0px; 618 margin-top: 0em; 619 margin-bottom: 0em; 620 top: 0px; 621 box-shadow: none, 0px 1px 2px 0 rgba(0, 0, 0, 0.05); 622 border-radius: 0em 0em 0.2857rem 0.2857rem; 623 } 624 625 626 /******************************* 627 Theme Overrides 628 *******************************/ 629 630 631 632 /******************************* 633 Site Overrides 634 *******************************/ 635