Modul Out Of Box

Řádka layoutu, která vystupuje z řady spacingem nebo podbarvením.

Používáme na homepage nebo na o-nas stránce.

Základní .out-of-box

Normálně nic nedělá, protože záporný margin doplňuje zpět paddingem.

Vnitřní prvky

Nadpis

Varianta nadpis s větším odsazením zezhora i zezdola

Varianta: poslední na stránce

Je přilepenější k patičce TODO Proč nefičí #content_body > .out-of-box:last-child ?

Varianta: s čárou dole

TODO elegantnější čára a ne přes celou šířku

Varianta: s šedivou barvou pozadí .out-of-box--colored

Varianta: s tmavým pozadím .out-of-box--inverted

A bílými texty:

Varianta: s pozadím s přechodem .out-of-box--gradient

A bílými texty:

Varianta: větší vertikální padding .out-of-box--tall

Varianta: s obrázkovým patternem na pozadí .out-of-box--pattern

Varianta: se záporným marginem zezhora .out-of-box--mt-negative

(Viz helper .margin_top_negative)

TODO

  • zpočítáno podle reálného užití (/ubytovani/), potřeba přepsat systematicky podle proměnných pro výšku řádku

Varianta: se žádným marginem zezhora .out-of-box--mt-zero

Např. http://hotelyjeseniky.cz/

Varianta: s rozmazaným obrázkem na pozadí

.out-of-box {
	margin: -35px -8px 27px -30px;
	width: auto;
	padding: 35px 8px 27px 30px;
}




.out-of-box__heading { }


.out-of-box__heading-spaced {
  top: -10px;
  position: relative;

  &.h1 {
    top: 0;
  }

  .out-of-box--tall & {
    top: -30px;
  }

  .out-of-box--tall &.h1 {
    top: -18px;
  }
}




.out-of-box--last {
  margin-bottom: -5*@base-line-height;
}




.out-of-box--bottomrule {
  border-bottom: 1px solid #ddd;
}




.out-of-box--colored {
	background: @color-light;

	.out-of-box__heading {
		top: -30px;
		position: relative;
	}
}




.out-of-box--inverted {
  background-color: @color-dark;
  .out-of-box-white-text;
}




.out-of-box--gradient {
  background-color: @color-beta;
  background-image: linear-gradient(to bottom, @color-beta, darken(@color-beta, 10%));

  .out-of-box-white-text;
}



.out-of-box--tall {
	padding-top: 70px;
	padding-bottom: 62px;
}




.out-of-box--pattern {
  background: #f8f8f8 url(http://dovolena.ck-rekrea.cz/images/creampaper.png) repeat;
}






.out-of-box--mt-negative {
  margin-top: -40px;
}



.out-of-box--mt-zero {
  margin-top: 0;
}




.out-of-box--blur {
  background-color: #0058a6;

  .out-of-box-white-text;

  @media @large-start {
    background-image: url('http://dovolena.ck-rekrea.cz/images/out-of-box-blur-supetar.jpg');
    background-attachment: fixed;
    background-size: auto 100%;
    background-repeat: no-repeat;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
      src='http://dovolena.ck-rekrea.cz/images/out-of-box-blur-supetar.jpg',
      sizingMethod='scale');
  }
}