Modul .text

Blok s textem, který má trochu posunuté horizontální okraje dovnitř oproti třeba obrázkům.

TODO

  • .text_larger se vyskytuje i v jinych modulech kvuli obtekani .images_column
  • .text.narrow

Ukázka

Varianta: větší text

.text.text_larger

Obteka floatovany .images_column, proto je potreba upravit UL/LI seznamy atd. http://stackoverflow.com/questions/710158/why-do-my-list-item-bullets-overlap-floating-elements

Varianta: užší textový blok

Platí jen pro velké displeje.

.text.text_narrow a .text.text_narrower.

Například text v detailu kapacity.

.text {
  padding: 0 10px 0 5px;
  display: inline-block;
  // Fix kvuli problemu, kde nekde blbne display: block a
  // nekde display: inline-block (http://www.e-slovensko.cz/atrakce/)
  box-sizing: border-box;
  width: 100%;
}


.text_larger {
	font-size: @larger-font-size;
	line-height: @larger-line-height;

	// .text ma inline-block, protoze se zobrazuje i uvnitr komponent
	// v tehle variante to ovsem kvuli obtekani musime zrusit
	&.text {
		display: block;
	}

	// Kvuli obtekani .images_column:

	ul {
		list-style-position: inside; // IE10 nezvlada outside pri obtekani floatu
	}

	ul li,
	ol li {
	  position: relative;
  }

	ul ul li,
	ol ul li,
	ol ol li,
	ul ol li {
	  left: 18px;
  }
}


@media @large-start {

	.text_narrow,
	.text.narrow {
	  width: 470px;
	}

	.text_narrower {
		width: 580px;
	}

}