github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/src/definitions/elements/header.less (about) 1 /*! 2 * # Semantic UI - Header 3 * http://github.com/semantic-org/semantic-ui/ 4 * 5 * 6 * Copyright 2014 Contributors 7 * Released under the MIT license 8 * http://opensource.org/licenses/MIT 9 * 10 */ 11 12 13 /******************************* 14 Theme 15 *******************************/ 16 17 @type : 'element'; 18 @element : 'header'; 19 20 @import (multiple) '../../theme.config'; 21 22 23 /******************************* 24 Header 25 *******************************/ 26 27 /* Standard */ 28 .ui.header { 29 border: none; 30 margin: @margin; 31 padding: @verticalPadding @horizontalPadding; 32 font-family: @fontFamily; 33 font-weight: @fontWeight; 34 line-height: @lineHeight; 35 text-transform: @textTransform; 36 color: @textColor; 37 } 38 39 .ui.header:first-child { 40 margin-top: @firstMargin; 41 } 42 .ui.header:last-child { 43 margin-bottom: @lastMargin; 44 } 45 46 /*-------------- 47 Sub Header 48 ---------------*/ 49 50 .ui.header .sub.header { 51 font-weight: normal; 52 margin: 0em; 53 padding: 0em; 54 font-size: @subHeaderFontSize; 55 line-height: @subHeaderLineHeight; 56 color: @subHeaderColor; 57 } 58 59 /*-------------- 60 Icon 61 ---------------*/ 62 63 .ui.header > .icon { 64 display: table-cell; 65 opacity: @iconOpacity; 66 font-size: @iconSize; 67 padding-top: @iconOffset; 68 vertical-align: @iconAlignment; 69 } 70 71 /* With Text Node */ 72 .ui.header .icon:only-child { 73 display: inline-block; 74 padding: 0em; 75 margin-right: @iconMargin; 76 } 77 78 /*------------------- 79 Image 80 --------------------*/ 81 82 .ui.header > .image, 83 .ui.header > img { 84 display: inline-block; 85 margin-top: @imageOffset; 86 width: @imageWidth; 87 height: @imageHeight; 88 vertical-align: @imageAlignment; 89 } 90 .ui.header > .image:only-child, 91 .ui.header > img:only-child { 92 margin-right: @imageMargin; 93 } 94 95 /*-------------- 96 Content 97 ---------------*/ 98 99 .ui.header .content { 100 display: inline-block; 101 vertical-align: @contentAlignment; 102 } 103 104 /* After Image */ 105 .ui.header > img + .content, 106 .ui.header > .image + .content { 107 padding-left: @imageMargin; 108 vertical-align: @contentImageAlignment; 109 } 110 111 /* After Icon */ 112 .ui.header > .icon + .content { 113 padding-left: @iconMargin; 114 display: table-cell; 115 vertical-align: @contentIconAlignment; 116 } 117 118 119 /*-------------- 120 Loose Coupling 121 ---------------*/ 122 123 .ui.header .ui.label { 124 font-size: @labelSize; 125 margin: 0em 0em 0em @labelDistance; 126 vertical-align: @labelVerticalAlign; 127 } 128 129 /* Positioning */ 130 .ui.header + p { 131 margin-top: @nextParagraphDistance; 132 } 133 134 135 136 /******************************* 137 Types 138 *******************************/ 139 140 141 /*-------------- 142 Page 143 ---------------*/ 144 145 h1.ui.header { 146 font-size: @h1; 147 } 148 h2.ui.header { 149 font-size: @h2; 150 } 151 h3.ui.header { 152 font-size: @h3; 153 } 154 h4.ui.header { 155 font-size: @h4; 156 } 157 h5.ui.header { 158 font-size: @h5; 159 } 160 161 162 /* Sub Header */ 163 h1.ui.header .sub.header { 164 font-size: @h1SubHeaderFontSize; 165 } 166 h2.ui.header .sub.header { 167 font-size: @h2SubHeaderFontSize; 168 } 169 h3.ui.header .sub.header { 170 font-size: @h3SubHeaderFontSize; 171 } 172 h4.ui.header .sub.header { 173 font-size: @h4SubHeaderFontSize; 174 } 175 h5.ui.header .sub.header { 176 font-size: @h5SubHeaderFontSize; 177 } 178 179 180 /*-------------- 181 Content Heading 182 ---------------*/ 183 184 .ui.huge.header { 185 min-height: 1em; 186 font-size: @huge; 187 } 188 .ui.large.header { 189 font-size: @large; 190 } 191 .ui.medium.header { 192 font-size: @medium; 193 } 194 .ui.small.header { 195 font-size: @small; 196 } 197 .ui.tiny.header { 198 font-size: @tiny; 199 } 200 201 /* Sub Header */ 202 .ui.huge.header .sub.header { 203 font-size: @hugeSubHeaderFontSize; 204 } 205 .ui.large.header .sub.header { 206 font-size: @hugeSubHeaderFontSize; 207 } 208 .ui.header .sub.header { 209 font-size: @subHeaderFontSize; 210 } 211 .ui.small.header .sub.header { 212 font-size: @smallSubHeaderFontSize; 213 } 214 .ui.tiny.header .sub.header { 215 font-size: @tinySubHeaderFontSize; 216 } 217 218 /*------------------- 219 Icon 220 --------------------*/ 221 222 .ui.icon.header { 223 display: inline-block; 224 text-align: center; 225 margin: @iconHeaderTopMargin 0em @iconHeaderBottomMargin; 226 } 227 .ui.icon.header:after { 228 content: ''; 229 display: block; 230 height: 0px; 231 clear: both; 232 visibility: hidden; 233 } 234 235 .ui.icon.header:first-child { 236 margin-top: @iconHeaderFirstMargin; 237 } 238 .ui.icon.header .icon { 239 float: none; 240 display: block; 241 width: auto; 242 height: auto; 243 padding: 0em; 244 font-size: @iconHeaderSize; 245 margin: 0em auto @iconHeaderMargin; 246 opacity: @iconHeaderOpacity; 247 } 248 .ui.icon.header .content { 249 display: block; 250 } 251 .ui.icon.header .circular.icon { 252 font-size: @circularHeaderIconSize; 253 } 254 .ui.icon.header .square.icon { 255 font-size: @squareHeaderIconSize; 256 } 257 .ui.block.icon.header .icon { 258 margin-bottom: 0em; 259 } 260 .ui.icon.header.aligned { 261 margin-left: auto; 262 margin-right: auto; 263 display: block; 264 } 265 266 /******************************* 267 States 268 *******************************/ 269 270 .ui.disabled.header { 271 opacity: @disabledOpacity; 272 } 273 274 275 /******************************* 276 Variations 277 *******************************/ 278 279 280 /*------------------- 281 Colors 282 --------------------*/ 283 284 .ui.black.header { 285 color: @black !important; 286 } 287 a.ui.black.header:hover { 288 color: @blackHover !important; 289 } 290 291 .ui.blue.header { 292 color: @blue !important; 293 } 294 a.ui.blue.header:hover { 295 color: @blueHover !important; 296 } 297 298 .ui.green.header { 299 color: @green !important; 300 } 301 a.ui.green.header:hover { 302 color: @greenHover !important; 303 } 304 305 .ui.orange.header { 306 color: @orange !important; 307 } 308 a.ui.orange.header:hover { 309 color: @orangeHover !important; 310 } 311 312 .ui.pink.header { 313 color: @pink !important; 314 } 315 a.ui.pink.header:hover { 316 color: @pinkHover !important; 317 } 318 319 .ui.purple.header { 320 color: @purple !important; 321 } 322 a.ui.purple.header:hover { 323 color: @purpleHover !important; 324 } 325 326 .ui.red.header { 327 color: @red !important; 328 } 329 a.ui.red.header:hover { 330 color: @redHover !important; 331 } 332 333 .ui.teal.header { 334 color: @teal !important; 335 } 336 a.ui.teal.header:hover { 337 color: @tealHover !important; 338 } 339 340 .ui.yellow.header { 341 color: @yellow !important; 342 } 343 a.ui.yellow.header:hover { 344 color: @yellowHover !important; 345 } 346 347 .ui.black.dividing.header { 348 border-bottom: @dividedColoredBorderWidth solid @blackDividedBorderColor; 349 } 350 .ui.blue.dividing.header { 351 border-bottom: @dividedColoredBorderWidth solid @blueDividedBorderColor; 352 } 353 .ui.green.dividing.header { 354 border-bottom: @dividedColoredBorderWidth solid @greenDividedBorderColor; 355 } 356 .ui.orange.dividing.header { 357 border-bottom: @dividedColoredBorderWidth solid @orangeDividedBorderColor; 358 } 359 .ui.pink.dividing.header { 360 border-bottom: @dividedColoredBorderWidth solid @pinkDividedBorderColor; 361 } 362 .ui.purple.dividing.header { 363 border-bottom: @dividedColoredBorderWidth solid @purpleDividedBorderColor; 364 } 365 .ui.red.dividing.header { 366 border-bottom: @dividedColoredBorderWidth solid @redDividedBorderColor; 367 } 368 .ui.teal.dividing.header { 369 border-bottom: @dividedColoredBorderWidth solid @tealDividedBorderColor; 370 } 371 .ui.yellow.dividing.header { 372 border-bottom: @dividedColoredBorderWidth solid @yellowDividedBorderColor; 373 } 374 375 /*------------------- 376 Inverted 377 --------------------*/ 378 379 .ui.inverted.header { 380 color: @invertedColor; 381 } 382 .ui.inverted.header .sub.header { 383 color: @invertedSubHeaderColor; 384 } 385 .ui.inverted.attached.header { 386 background: @invertedAttachedBackground; 387 box-shadow: none; 388 } 389 .ui.inverted.block.header { 390 background: @invertedBlockBackground; 391 box-shadow: none; 392 } 393 394 395 /*------------------- 396 Inverted Colors 397 --------------------*/ 398 399 .ui.inverted.black.header { 400 color: @darkGrey !important; 401 } 402 a.ui.inverted.black.header:hover { 403 color: @darkGreyHover !important; 404 } 405 406 .ui.inverted.blue.header { 407 color: @lightBlue !important; 408 } 409 a.ui.inverted.blue.header:hover { 410 color: @lightBlueHover !important; 411 } 412 413 .ui.inverted.green.header { 414 color: @lightGreen !important; 415 } 416 a.ui.inverted.green.header:hover { 417 color: @lightGreenHover !important; 418 } 419 420 .ui.inverted.orange.header { 421 color: @lightOrange !important; 422 } 423 a.ui.inverted.orange.header:hover { 424 color: @lightOrangeHover !important; 425 } 426 427 .ui.inverted.pink.header { 428 color: @lightPink !important; 429 } 430 a.ui.inverted.pink.header:hover { 431 color: @lightPinkHover !important; 432 } 433 434 .ui.inverted.purple.header { 435 color: @lightPurple !important; 436 } 437 a.ui.inverted.purple.header:hover { 438 color: @lightPurpleHover !important; 439 } 440 441 .ui.inverted.red.header { 442 color: @lightRed !important; 443 } 444 a.ui.inverted.red.header:hover { 445 color: @lightRedHover !important; 446 } 447 448 .ui.inverted.teal.header { 449 color: @lightTeal !important; 450 } 451 a.ui.inverted.teal.header:hover { 452 color: @lightTealHover !important; 453 } 454 455 .ui.inverted.yellow.header { 456 color: @lightYellow !important; 457 } 458 a.ui.inverted.yellow.header:hover { 459 color: @lightYellowHover !important; 460 } 461 462 .ui.inverted.block.header { 463 border-bottom: none; 464 } 465 466 /*------------------- 467 Aligned 468 --------------------*/ 469 470 .ui.left.aligned.header { 471 text-align: left; 472 } 473 .ui.right.aligned.header { 474 text-align: right; 475 } 476 .ui.centered.header, 477 .ui.center.aligned.header { 478 text-align: center; 479 } 480 .ui.justified.header { 481 text-align: justify; 482 } 483 .ui.justified.header:after { 484 display: inline-block; 485 content: ''; 486 width: 100%; 487 } 488 489 /*------------------- 490 Floated 491 --------------------*/ 492 493 .ui.floated.header, 494 .ui[class*="left floated"].header { 495 float: left; 496 margin-top: 0em; 497 margin-right: @floatedMargin; 498 } 499 .ui[class*="right floated"].header { 500 float: right; 501 margin-top: 0em; 502 margin-left: @floatedMargin; 503 } 504 505 /*------------------- 506 Fittted 507 --------------------*/ 508 509 .ui.fitted.header { 510 padding: 0em; 511 } 512 513 514 /*------------------- 515 Dividing 516 --------------------*/ 517 518 .ui.dividing.header { 519 padding-bottom: @dividedBorderPadding; 520 border-bottom: @dividedBorder; 521 } 522 .ui.dividing.header .sub.header { 523 padding-bottom: @dividedSubHeaderPadding; 524 } 525 .ui.dividing.header .icon { 526 margin-bottom: @dividedIconPadding; 527 } 528 529 .ui.inverted.dividing.header { 530 border-bottom-color: @invertedDividedBorderColor; 531 } 532 533 534 /*------------------- 535 Block 536 --------------------*/ 537 538 .ui.block.header { 539 background: @blockBackground; 540 padding: @blockVerticalPadding @blockHorizontalPadding; 541 box-shadow: @blockBoxShadow; 542 border: @blockBorder; 543 border-radius: @blockBorderRadius; 544 } 545 546 .ui.tiny.block.header { 547 font-size: @tinyBlock; 548 } 549 .ui.small.block.header { 550 font-size: @smallBlock; 551 } 552 .ui.block.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) { 553 font-size: @mediumBlock; 554 } 555 .ui.large.block.header { 556 font-size: @largeBlock; 557 } 558 .ui.huge.block.header { 559 font-size: @hugeBlock; 560 } 561 562 /*------------------- 563 Attached 564 --------------------*/ 565 566 .ui.attached.header { 567 background: @attachedBackground; 568 padding: @attachedVerticalPadding @attachedHorizontalPadding; 569 margin-left: @attachedOffset; 570 margin-right: @attachedOffset; 571 box-shadow: @attachedBoxShadow; 572 border: @attachedBorder; 573 } 574 .ui.attached.block.header { 575 background: @blockBackground; 576 } 577 578 .ui.attached:not(.top):not(.bottom).header { 579 margin-top: 0em; 580 margin-bottom: 0em; 581 border-top: none; 582 border-bottom: none; 583 border-radius: 0em; 584 } 585 .ui.top.attached.header { 586 margin-bottom: 0em; 587 border-bottom: none; 588 border-radius: @attachedBorderRadius @attachedBorderRadius 0em 0em; 589 } 590 .ui.bottom.attached.header { 591 margin-top: 0em; 592 border-top: none; 593 border-radius: 0em 0em @attachedBorderRadius @attachedBorderRadius; 594 } 595 596 /* Attached Sizes */ 597 .ui.tiny.attached.header { 598 font-size: @tinyAttached; 599 } 600 .ui.small.attached.header { 601 font-size: @smallAttached; 602 } 603 .ui.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) { 604 font-size: @mediumAttached; 605 } 606 .ui.large.attached.header { 607 font-size: @largeAttached; 608 } 609 .ui.huge.attached.header { 610 font-size: @hugeAttached; 611 } 612 613 /*------------------- 614 Sizing 615 --------------------*/ 616 617 .ui.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) { 618 font-size: @medium; 619 } 620 621 .loadUIOverrides();