bootstrap/less/jumbotron.less

//
// Jumbotron
// --------------------------------------------------


.jumbotron {
  padding-top: @jumbotron-padding;
  padding-bottom: @jumbotron-padding;
  margin-bottom: @jumbotron-padding;
  color: @jumbotron-color;
  background-color: @jumbotron-bg;

  h1,
  .h1 {
    color: @jumbotron-heading-color;
  }

  p {
    margin-bottom: (@jumbotron-padding / 2);
    font-size: @jumbotron-font-size;
    font-weight: 200;
  }

  > hr {
    border-top-color: darken(@jumbotron-bg, 10%);
  }

  .container &,
  .container-fluid & {
    padding-right: (@grid-gutter-width / 2);
    padding-left: (@grid-gutter-width / 2);
    border-radius: @border-radius-large; // Only round corners at higher resolutions if contained in a container
  }

  .container {
    max-width: 100%;
  }

  @media screen and (min-width: @screen-sm-min) {
    padding-top: (@jumbotron-padding * 1.6);
    padding-bottom: (@jumbotron-padding * 1.6);

    .container &,
    .container-fluid & {
      padding-right: (@jumbotron-padding * 2);
      padding-left: (@jumbotron-padding * 2);
    }

    h1,
    .h1 {
      font-size: @jumbotron-heading-font-size;
    }
  }
}
standardize top level file comments 2012-06-29 12:46:45 +08:00			`//`
Rename .hero-unit to .jumbotron becaue fuck dashes in filenames and sports metaphors are cooler than ad ones 2012-12-20 13:37:16 +08:00			`// Jumbotron`
standardize top level file comments 2012-06-29 12:46:45 +08:00			`// --------------------------------------------------`

Move hero-unit css out of pattern.less and include it. Fixes #1185. 2012-01-27 07:51:11 +08:00
Rename .hero-unit to .jumbotron becaue fuck dashes in filenames and sports metaphors are cooler than ad ones 2012-12-20 13:37:16 +08:00			`.jumbotron {`
move from csslint to stylelint 2017-11-26 10:06:34 +08:00			`padding-top: @jumbotron-padding;`
Redo jumbotron padding - In general, there are very few instances that would require a jumbotron without a parent or child container. - Right now we account for that behavior though with some horizontal padding on the .jumbotron class. - This removes that horizontal padding as it narrows our grid classes unnecessarily and accounts for a super small use case. - It also improves consistency across breakpoints, in that padding isn't being added and removed. - In doing so, I also removed the shorthand padding property and went with the specific ones (because yay specificity). 2015-05-15 01:09:42 +08:00			`padding-bottom: @jumbotron-padding;`
save and recompile for that last commit 2013-08-19 23:51:25 +08:00			`margin-bottom: @jumbotron-padding;`
fix #9832 somewhat: more vars for jumbotron 2013-08-19 23:46:49 +08:00			`color: @jumbotron-color;`
-background to -bg on jumbotron vars 2013-04-01 08:19:47 +08:00			`background-color: @jumbotron-bg;`
Update jumbotron * Defaults to no rounded corners and full width in the viewport * When in a container, the jumbotron has extra padding and will have rounded corners * Updates default jumbotron example to show the full width default display Fixes #9759. 2013-08-18 11:33:52 +08:00
Support .h1 in place of h1 inside .jumbotron As in #7284, it can often be useful to style text like a heading in places where using the heading tag would be either semantically incorrect, less accessible, or otherwise invalid. Support this in .jumbotron as in the rest of the document by allowing elements with class .h1 to stand in for the h1 element. Signed-off-by: Kevin Locke <kevin@kevinlocke.name> 2013-10-31 08:37:17 +08:00			`h1,`
			`.h1 {`
Rename .hero-unit to .jumbotron becaue fuck dashes in filenames and sports metaphors are cooler than ad ones 2012-12-20 13:37:16 +08:00			`color: @jumbotron-heading-color;`
Move hero-unit css out of pattern.less and include it. Fixes #1185. 2012-01-27 07:51:11 +08:00			`}`
Trim whitespaces 2015-01-20 04:26:01 +08:00
Make jumbotron mo responsive 2013-01-17 07:07:57 +08:00			`p {`
Fixes #11588: Scope font-size to only p elements in a .jumbotron and remove the supersized line-height from the base class 2013-12-15 13:50:47 +08:00			`margin-bottom: (@jumbotron-padding / 2);`
			`font-size: @jumbotron-font-size;`
			`font-weight: 200;`
Make jumbotron mo responsive 2013-01-17 07:07:57 +08:00			`}`

Fixes #12914: Darken immediate children hr elements in jumbotrons 2014-03-05 05:54:09 +08:00			`> hr {`
			`border-top-color: darken(@jumbotron-bg, 10%);`
			`}`

Fixes #14337: Round .jumbotron corners within .container and .container-fluid 2014-08-28 14:01:58 +08:00			`.container &,`
			`.container-fluid & {`
fixes https://github.com/twbs/bootstrap/issues/16779 2015-07-08 04:50:09 +08:00			`padding-right: (@grid-gutter-width / 2);`
move from csslint to stylelint 2017-11-26 10:06:34 +08:00			`padding-left: (@grid-gutter-width / 2);`
			`border-radius: @border-radius-large; // Only round corners at higher resolutions if contained in a container`
Update jumbotron * Defaults to no rounded corners and full width in the viewport * When in a container, the jumbotron has extra padding and will have rounded corners * Updates default jumbotron example to show the full width default display Fixes #9759. 2013-08-18 11:33:52 +08:00			`}`

Fixes #11390: Add max-width to containers within jumbotrons to avoid horizontal scrollbar 2013-11-30 10:33:59 +08:00			`.container {`
			`max-width: 100%;`
			`}`

Rumbo Jumbo 2013-09-11 16:33:30 +08:00			`@media screen and (min-width: @screen-sm-min) {`
move from csslint to stylelint 2017-11-26 10:06:34 +08:00			`padding-top: (@jumbotron-padding * 1.6);`
Redo jumbotron padding - In general, there are very few instances that would require a jumbotron without a parent or child container. - Right now we account for that behavior though with some horizontal padding on the .jumbotron class. - This removes that horizontal padding as it narrows our grid classes unnecessarily and accounts for a super small use case. - It also improves consistency across breakpoints, in that padding isn't being added and removed. - In doing so, I also removed the shorthand padding property and went with the specific ones (because yay specificity). 2015-05-15 01:09:42 +08:00			`padding-bottom: (@jumbotron-padding * 1.6);`
Update jumbotron * Defaults to no rounded corners and full width in the viewport * When in a container, the jumbotron has extra padding and will have rounded corners * Updates default jumbotron example to show the full width default display Fixes #9759. 2013-08-18 11:33:52 +08:00
Fixes #14979: Override .jumbotron padding within .container-fluid to match .container 2014-11-08 15:01:20 +08:00			`.container &,`
			`.container-fluid & {`
save and recompile for that last commit 2013-08-19 23:51:25 +08:00			`padding-right: (@jumbotron-padding * 2);`
move from csslint to stylelint 2017-11-26 10:06:34 +08:00			`padding-left: (@jumbotron-padding * 2);`
Update jumbotron * Defaults to no rounded corners and full width in the viewport * When in a container, the jumbotron has extra padding and will have rounded corners * Updates default jumbotron example to show the full width default display Fixes #9759. 2013-08-18 11:33:52 +08:00			`}`

Support .h1 in place of h1 inside .jumbotron As in #7284, it can often be useful to style text like a heading in places where using the heading tag would be either semantically incorrect, less accessible, or otherwise invalid. Support this in .jumbotron as in the rest of the document by allowing elements with class .h1 to stand in for the h1 element. Signed-off-by: Kevin Locke <kevin@kevinlocke.name> 2013-10-31 08:37:17 +08:00			`h1,`
			`.h1 {`
Jumbotron: Putting heading font size in variables to allow for easier overrides. 2015-03-19 08:29:59 +08:00			`font-size: @jumbotron-heading-font-size;`
Make jumbotron mo responsive 2013-01-17 07:07:57 +08:00			`}`
Move hero-unit css out of pattern.less and include it. Fixes #1185. 2012-01-27 07:51:11 +08:00			`}`
			`}`