header.less after refactor

header.refactor.less

/* Website Header
   ==============
     
   Používá se na všech stránkách eshopu
   kromě košíku a nákupního procesu.
*/     


// Proměnné
// ---------

@headerCartWidth: 38px;


// Hlavní blok
// -----------

// [1] Jde o relativně pozicovaný kontejner, což využijeme
//       v komponentách z adresáře header/.
// [2] Flexbox potřebujeme kvůli layoutu vnitřních komponent 
//     a taky změně pořadí pro .header__top na 
//     @query-lg breakpointu.


.header {
	padding-bottom: @lineHeight / 2; 
	position: relative;  // [1]
	display: flex; // [2]
	flex-wrap: wrap;
	align-items: center;
	
	@media @query-lg {
		padding-bottom: @lineHeight;
	}	
}


// Blok Header Top
// ---------------

// Druhotná navigace nahoře (uživatel, podmínky nákupu…)

// [1] Je vidět jen od @query-lg dál 

.header__top {
	display: none; // [1]
	
	@media @query-lg {
		order: -1;
		display: flex;
		align-items: center;
		width: 100%;
		margin-bottom: @lineHeight / 2;

		&__left {
			flex: 1;
		}

		&__right {
			flex: 1;
		}
	}	
}



// Logo webu
// ---------

// [1] Od @query-lg dál přehazujeme pořadí

.header__logo {
	width: 100%;
	padding: @lineHeight / 2 10px;
	
	@media @query-lg {
		flex: 1; 
		order: 1; // [1]
		width: auto;
		padding-right: 20px;
	}	
}


// Plocha uprostřed hlavičky
// -------------------------

// Mohou zde být bannery, speciální nabídky…

.header__middle {
	width: 100%;
	margin: 10px 0;
	order: 2;
	
	@media @query-vl {
		width: 440px;
	}	
}


// Ikona košíku
// ------------

// Vždy v pravém horním rohu

.header__cart {
	width: @headerCartWidth;
	
	@media @query-lg {	
		padding-left: 20px;
		flex: 1;
		order: 3;
		text-align: right;
	}	
}


// Část jen pro smartphony
// -----------------------

// Doprava zarovnané s ikonou košíku v rohu

// [1] Fallback pro staré probhlížeče (co neumí calc()).
// [2] Nezobrazujeme na @query-lg a dalších.

.header__mobile {
	width: 80%; // [1]
	width: calc(~"100% - @{headerCartWidth}"); 
	text-align: right;
	
	@media @query-lg {
		display: none; // [2]
	}	
}