VNT-B2B Header

Header - celek

{* Header *}

<header class="header header--top header--fixed">
	<div class="header__content --flex --flex-wrap">

		{* Header | Top *}


		<div class="header__top --flex-centre-y">

				{* Header | Logo *}


				<div class="header__logo --flex-inline --flex-wrap">
						<a class="header__logo-link" href="/{$lang}">
							<img class="header__logo-img"
											width="205"
											height="45"
											src="/img/b2b-logo.svg"
											alt="{$web['DEFAULT_TITLE']}">
						</a>
            	</div>

            	{* Header | Search *}

            	<div class="header__search">
					<div class="header__search-wrap">
							<svg class="header__search-icon">
								<use xlink:href="/assets/front/sprite.svg#search"></use>
							</svg>
						<form class="header__form form form--nav">
							<label for="text" class="label label--nav">
							</label>
							<input type="text" class="input input--nav" placeholder="Zadejte hledaný výraz: PLU, EAN nebo část názvu produktu">
						</form>
					</div>
					<a class="header__button button button--brand">
						Hledat
					</a>
				</div>

				{* Header | Contact *}

				{include "../modules/contact-box.latte"}

				{* Header | Account *}

				{include "../modules/account-header.latte"}

		    		{* Header | Language *}

				{* <div class="header__lang --flex-inline --flex-wrap --flex-centre-y" n:if="count($activeLangs) > 1">
					{include 'lang.latte'}
				</div> *}

				<div class="header__langs-wrapper ">
					<div href="#" class="header__active-lang">
						<div class="header__lang-figure">
							<img src="/img/flags/cs.svg" class="header__lang-img" alt="cs">
						</div>
						{* <span class="header__lang-language">CS</span> *}
						<span class="header__lang-arrow"></span>
					</div>

					<div class="header__other-langs">
						<a href="#" class="header__lang-ico header__lang-ico--drop">
							<div class="header__lang-figure header__lang-figure--drop">
								<img src="/img/flags/cs.svg" class="header__lang-img" alt="cs">
							</div>
							CS
						</a>

						<a href="#" class="header__lang-ico header__lang-ico--drop">
							<div class="header__lang-figure header__lang-figure--drop">
								<img src="/img/flags/en.svg" class="header__lang-img" alt="en">
							</div>
							EN
						</a>
					</div>
				</div>

				{include "../modules/basket.latte"}

        </div>

			{* Header | Bottom *}
			<div class="header__bottom --flex-inline --flex-wrap --flex-centre-y">

				{* Header | Logo *}

				<div class="header__logo --flex-inline header__mobile-part">
					<a class="header__logo-link" href="/{$lang}">
						<img class="header__logo-img" src="/img/b2b-logo.svg"
										alt="{$web['DEFAULT_TITLE']}">
					</a>
				</div>

				{* Header | Search mobile *}
				<div class="header__bottom-right">
						<div class="header__search--mobile">
							<div class="header__search-icon-wrapper">
								<svg class="header__search-icon header__search-icon--mobile">
									<use xlink:href="/assets/front/sprite.svg#search"></use>
								</svg>
							</div>

							<div class="header__search-wrap--mobile">
								<form class="header__form form form--nav">
									<label for="text" class="label label--nav">
									</label>
									<input type="text" class="input input--nav" placeholder="Zadejte hledaný výraz: PLU, EAN nebo část názvu produktu">
								</form>
								<a class="header__button button button--brand">
									Hledat
								</a>
							</div>

						</div>

						<div class="header__search--medium">
							<div class="header__search-wrap">
								<svg class="header__search-icon">
									<use xlink:href="/assets/front/sprite.svg#search"></use>
								</svg>
								<form class="header__form form form--nav">
									<label for="text" class="label label--nav">
									</label>
									<input type="text" class="input input--nav" placeholder="Zadejte hledaný výraz: PLU, EAN nebo část názvu produktu">
								</form>
							</div>
							<a class="header__button button button--brand">
								Hledat
							</a>
						</div>
						<div class="header__contact-box-wrap">
							{include "../modules/contact-box.latte"}
						</div>

						<div class="header__langs-wrapper ">
							<div href="#" class="header__active-lang">
								<div class="header__lang-figure">
									<img src="/img/flags/cs.svg" class="header__lang-img" alt="cs">
								</div>
								{* <span class="header__lang-language">CS</span> *}
								<span class="header__lang-arrow"></span>
							</div>

							<div class="header__other-langs">
								<a href="#" class="header__lang-ico header__lang-ico--drop">
									<div class="header__lang-figure header__lang-figure--drop">
										<img src="/img/flags/cs.svg" class="header__lang-img" alt="cs">
									</div>
								</a>

								<a href="#" class="header__lang-ico header__lang-ico--drop">
									<div class="header__lang-figure header__lang-figure--drop">
										<img src="/img/flags/en.svg" class="header__lang-img" alt="en">
									</div>
								</a>
							</div>
						</div>

						{include "../modules/account-header.latte"}

						{include "../modules/basket.latte"}
				</div>

			</div>
	</div>
</header>

.header {
	background: $color__header;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 100;
	overflow: visible;
	box-shadow: 0 0.4rem 1.3rem 0px rgba(129,113,180,0.2);
}

.header__content{
	max-width: 1490px;
	margin: 0 auto;
	display: flex;
	padding: 0 1rem;
}


.header--fixed{
	position: fixed;
	left:0;
	top:0;
	right:0;
}


.header--hide {
	top: -100%;
}


.header__top{
	padding: 1.5rem 0 1.8rem;
	font-size: 1.4rem;
	display: none;
	width: 100%;
	justify-content: space-between;
	@include media($large){
		display: flex;
	}
}

.header__button{
	width: 100%;
	flex-direction: row;
	padding: 4px 11px;

	@include media(375px){
		padding: 8px 17px;
	}

	@include media($large){
		padding: 8px 32px;
	}
}

.header__button-bar-wrap{
	margin-right: 10px;
	pointer-events: none;
}

.header__button-bar{
	display: block;
	background: white;
	width: 18px;
	height: 2px;

	&:not(:last-of-type){
		margin-bottom: 3px;
	}
}

.header__bottom{
	align-items: center;
	width: 100%;
	justify-content: space-between;
	padding: 0 0.5rem;

}

.header__bottom-right{
	display: flex;
	align-items: center;
	column-gap: 0.5rem;

	@include media($small){
		column-gap: 1rem;
	}
}

.header__menu{
	position: relative;

	.header__top &{
		display: none;

		@include media($large){
			display: flex;
		}
	}

	.header__bottom &{
		max-height: 0;
		transition: max-height 0.3s ease-in-out;
		overflow: hidden;
		right: 0rem;
		left: 0rem;
		position: absolute;
		z-index: 4;

		@include media($large){
			left: 0;
			right: auto;
			width: 100%;
			display: none;
		}
	}
}

.header__bottom{

	@include media($large){
		display: none;
	}

}
.header__mobile-part{
	display: initial;

	@include media($large){
		display: none;
	}
}

.header__desktop-part{
	display: none;

	@include media($large){
		display: initial;
	}
}


.header__logo{
	width: 11rem;
	margin-right:1.5rem;


	@include media(375px){
		width: 13rem;
	}

	@include media($large){
		margin-right: 2.5rem;
	}
	@include media($xlarge){
		margin-right: 4rem;
		width: 19rem;
	}
}

.header__contact-box-wrap{
	display: none;

	@include media($small){
		display: flex;
		flex-shrink: 0;
	}
}

// Header - Search

.header__search{
	align-items: center;
	column-gap: 0.5rem;
	display: none;

	@include media($large){
		display: flex;
	}
}

.header__search-wrap{
	align-items: center;
	border-radius: 0.4rem;
	border: 0.1rem solid $color__brand;
	padding: 11px 11px 11px 12px;
	min-height: 4.8rem;
	display: flex;
	min-width: 15rem;
	margin-right: 1.5rem;


	@include media($large){
		min-width: 30.5rem;
		margin-right: 0;
	}

	@include media($xlarge){
		min-width: 36.5rem;
	}
}

.header__search-icon{
	width: 1.5rem;
	height: 1.5rem;
	margin-right: 1.2rem;
	fill: $color__brand;
	flex-shrink: 0;

	@include media($small){
		width: 1.9rem;
		height: 1.9rem;
	}
}

.header__search-icon--mobile{
	margin: 0;
}


.header__search-icon-wrapper{
	position: relative;
	width: 3rem;
	height: 3rem;
	border: 0.1rem solid $color__brand;
	border-radius: 0.4rem;
	display: flex;
	align-items: center;
	justify-content: center;

	@include media($small){
		width: 4rem;
		height: 4rem;
	}

	@include media($medium){
		display: none;
	}
}

.header__search--mobile:hover .header__search-wrap--mobile,
.header__search--mobile:focus .header__search-wrap--mobile,
.header__search--mobile:active .header__search-wrap--mobile{
	display: flex;
	flex-direction: column;
}

.header__search-wrap--mobile{
	display: none;
	position: fixed;
	width: 100vw;
	row-gap: 1rem;
	padding: 1rem;
	background: $color__bg;
	border: 1px solid $color__border;
	z-index: 1;
	top: 7rem;
	left: 0;

	@include media($medium){
		width: 28rem;
		position: absolute;
		right: 0;
	}
}

.header__search--medium{
	display: none;

	@include media($medium){
		display: flex;
	}
}



//Lang

.header__lang-figure{
	width: 21px;
}

.header__lang-img{
	aspect-ratio: 1/1;
	width: 100%;
}

.header__lang-arrow{
	position: relative;
	top: -0.2rem;
	margin-left: 0.3rem;
	display: none;

	&::before{
		@include pseudo(block, static);
		width: 1.1rem;
		height: 1.1rem;
		border: 0.2rem solid $color__secondary;
		border-left: 0;
		border-top: 0;
		transform: rotate(45deg);;
	}

	@include media($medium){
		display: initial;
	}
}

.header__lang-language {
	font-size: 1.3rem;
	line-height: 0.7;
	color: $color__secondary;
}

.header__other-langs{
	display: none;
	gap: 0.7rem;
	position: absolute;
	top:0;
	left:0;
	right:0;
	padding-top: 5rem;
	padding-right: 0.2rem;
	padding-left: 0.2rem;
	padding-bottom: 1rem;
	flex-direction: column;
	background: $color__bg;
	box-shadow: 0 0.3rem 1rem 0 rgb(48 57 75 / 10%);
	z-index: -1;
	width: 3.3rem;

	@include media($medium){
		padding: 5rem 1rem 1rem;
		width: 7.2rem;
	}
}

.header__active-lang{
	display: flex;
	align-items: center;
	position: relative;
	gap: 0.5rem;

	@include media($medium){
		gap: 1.5rem;
	}
}

.header__langs-wrapper{
	display: flex;
	align-items: center;
	position: relative;
	padding: 0.5rem;
	z-index: 2;
	transition: $ease;
	border-radius: 0.8rem;
	border: 0.1rem solid $color__border-h;

	@include media($medium){
		padding: 0.5rem 1rem;
	}

	&:hover, &:focus{
		.header__other-langs{
			display: flex;
			border-radius: 0.8rem;
			border: 0.1rem solid $color__border-h;

		}
		.header__lang-language{
			color: $color__secondary;
		}
		.header__lang-arrow{
			&:before{
				border-color: $color__secondary;
			}
		}
	}

}

.header__lang-ico{
	display: flex;
	align-items: center;
	gap: 0.7rem;
}

.header__logo-lang-wrap{
	position: relative;
	display: flex;
	align-items: center;
	z-index: 5;

}

.header__lang-ico--drop{
	opacity: 0.75;
	color: $color__secondary;
	font-size: 1.3rem;

	&:hover{
		opacity: 1;
		color: $color__secondary;
	}
}

Header - account

<div class="account-header">
    <div class="account-header__wrap">
        <a href="#" class="account-header__link">
            <svg class="account-header__icon">
                <use xlink:href="/assets/front/sprite.svg#user"></use>
            </svg>
        </a>
        <a href="#" class="account-header__link account-header__link--large">
            <svg class="account-header__icon">
                <use xlink:href="/assets/front/sprite.svg#user"></use>
            </svg>
            Můj účet
        </a>
        <div class="account-header__login">
            <form class="account-header__form form form--account">
                <label for="text" class="account-header__label label label--account">
                    Váš email
                </label>
                <input type="text" class="account-header__input input input--account">
            </form>
            <form class="account-header__form form form--account">
                <label for="text" class="account-header__label label label--account">
                    Vaše heslo
                </label>
                <input type="text" class="account-header__input input input--account">
            </form>
            <a href="#" class="account-header__button button button--brand">
                Přihlásit se
            </a>
            <div class="account-header__help">
                <a href="#" class="account-header__registration">
                    Registrovat
                </a>
                <a href="#" class="account-header__forgotten">
                    Zapomenuté heslo
                </a>
            </div>
        </div>
    </div>
</div>

.account-header__wrap{
  position: relative;
  padding-left: 1rem;
  padding-right: 1rem;
  border-right: 1px solid $color__border-h;
  border-left: 1px solid $color__border-h;
  min-height: 7.5rem;
  display: flex;
  align-items: center;

  @include media($large){
    padding-left: 3rem;
    padding-right: 3.5rem;
  }
}

.account-header__wrap:hover .account-header__login,
.account-header__wrap:focus .account-header__login,
.account-header__wrap:active .account-header__login,
.account-header__wrap:focus-within .account-header__login{
  display: flex;
}

.account-header__login{
  position: fixed;
  display: none;
  flex-direction: column;
  top: 7.5rem;
  background: $color__bg;
  padding: 0.5rem;
  border: 0.1rem solid $color__border;
  border-radius: 0.4rem;
  width: 100vw;
  left: 0;


  @include media($medium){
    width: 28rem;
    left: auto;
    right: 0;
  }
  @include media($large){
    padding: 2rem;
    right: 0;
    position: absolute;
    top: 8rem;
  }
}


.account-header__button{
  margin-bottom: 1rem;
}

.account-header__help{
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  row-gap: 1rem;
}

.account-header__forgotten, .account-header__registration{
  text-decoration: underline;
}

.account-header__icon{
  width: 1.5rem;
  height: 1.5rem;

  @include media($small){
    width: 3rem;
    height: 3rem;
  }

  @include media($large){
    margin-right: 1.5rem;
  }
}

.account-header__link{
  font-size: 2rem;
  display: flex;
  align-items: center;
  color: $color__text-dark;

  @include media($large){
    display: none;
  }
}

.label--account{
  color: $color__text-dark;
  font-size: 1.6rem;
}


.account-header__link--large{
  display: none;

  @include media($large){
    display: flex;
  }
}

Header - Basket

<div class="basket">
    <div class="basket__wrapper">
        <div class="basket__left-wrap">
            <div class="basket__icon-wrap">
                <svg class="basket__icon">
                    <use xlink:href="/assets/front/sprite.svg#basket"></use>
                </svg>
            </div>
            <div class="basket__number">
                1
            </div>
        </div>
        <div class="basket__right-wrap">
            <div class="basket__info">
                <div class="basket__price">
                    30 990 Kč
                </div>
                <div class="basket__tax">
                    bez DPH
                </div>
            </div>
        </div>
        <div class="basket__box">
            <div class="basket__box-title">
                V košíku máte
            </div>
            <ul class="basket__box-list">
                <div class="basket__box-item">
                    <a href="#" class="basket__box-figure">
                        <img class="basket__box-img" src="/userfiles/images/gen_mini.jpg" alt="foto produktu">
                    </a>
                    <div class="basket__box-item-info">
                        <a href="#" class="basket__box-item-title">
                            Krátký název
                        </a>
                        <div class="basket-box__item-wrap">
                            <div class="counter --flex-inline --flex-nowrap --flex-centre-y">
                                <span class="counter__button counter__button--minus">
                                    <svg class="counter__minus-icon">
                                         <use xlink:href="/assets/front/sprite.svg#minus"></use>
                                     </svg>
                                </span>
                                <input class="counter__value">
                                <span class="counter__button counter__button--plus">
                                    <svg class="counter__plus-icon">
                                         <use xlink:href="/assets/front/sprite.svg#plus"></use>
                                     </svg>
                                </span>
                            </div>
                            <span class="basket__box-item-price">
                                3990 Kč
                            </span>
                        </div>
                    </div>
                </div>
                <div class="basket__box-item">
                    <a href="#" class="basket__box-figure">
                        <img class="basket__box-img" src="/userfiles/images/gen_mini.jpg" alt="foto produktu">
                    </a>
                    <div class="basket__box-item-info">
                        <a href="#" class="basket__box-item-title">
                            Produkt s delším názvem <br>na dva řádky
                        </a>
                        <div class="basket-box__item-wrap">
                            <div class="counter --flex-inline --flex-nowrap --flex-centre-y">
                                <span class="counter__button counter__button--minus">
                                    <svg class="counter__minus-icon">
                                         <use xlink:href="/assets/front/sprite.svg#minus"></use>
                                     </svg>
                                </span>
                                <input class="counter__value">
                                <span class="counter__button counter__button--plus">
                                    <svg class="counter__plus-icon">
                                         <use xlink:href="/assets/front/sprite.svg#plus"></use>
                                     </svg>
                                </span>
                            </div>
                            <span class="basket__box-item-price">
                                3990 Kč
                            </span>
                        </div>
                    </div>
                </div>
            </ul>
            <div class="basket__box-final-price">
                <div class="basket__box-price">
                    Celková cena
                    <span class="basket__box-price-number">
                        30 990 Kč
                    </span>
                </div>
                <div class="basket__box-taxed">
                    Celková cena s DPH
                    <span class="basket__box-taxed-number">
                        37 498 Kč
                    </span>
                </div>
            </div>
            <a href="#" class="basket__button button button--brand">
                Otevřít košík
            </a>
        </div>


    </div>
</div>

.basket__wrapper{
  display: flex;
  align-items: center;
  position: relative;
  padding: 1rem 0;
  min-height: 7.5rem;
}

.basket__wrapper:focus .basket__box,
.basket__wrapper:focus-within .basket__box,
.basket__wrapper:hover .basket__box,
.basket__wrapper:active .basket__box{
  display: flex;
}

.basket__box{
  display: none;
  flex-direction: column;
  position: fixed;
  top: 7.5rem;
  right: 0;
  padding: 1rem;
  background: $color__bg;
  width: 100vw;
  border: 1px solid $color__border;
  border-radius: 4px;

  @include media($medium){
    position: absolute;
    width: 28rem;
  }

  @include media($large){
    top: 8rem;
    right: 0rem;

  }
}

.basket__icon-wrap{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 2rem;
}

.basket__left-wrap{
  position: relative;
}

.basket__icon{
  height: 2.7rem;
  width: 3rem;
  fill: $color__text-dark;

  @include media($small){
    height: 3.6rem;
    width: 3.9rem;
  }
}

.basket__number{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: $color__brand;
  color: $color__text-light;
  width: 2.4rem;
  height: 2.4rem;
  font-size: 1.6rem;
  border-radius: 50%;
  position: absolute;
  top: -1rem;
  right: 1rem;
}

.basket__box-list{
  display: flex;
  flex-direction: column;
}
.basket__box-item{
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  border-radius: 0.4rem;
  border: 0.1rem solid $color__border;
  width: 100%;
  padding: 0.5rem 1rem;
  min-height: 9.1rem;
}

.basket__box-figure{
  max-width: 5rem;
  max-height: 5rem;
  margin-right: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

}

.basket__box-figure:hover .basket__box-img,
.basket__box-figure:focus .basket__box-img,
.basket__box-figure:active .basket__box-img{
  scale: 1.2;
}

.basket__box-img{
  width: 100%;
  height: 100%;
  transition: $ease;

}

.basket-box__item-wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: auto;
}

.basket__box-item-info{
  display: flex;
  flex-direction: column;
  width: 100%;

}

.basket__box-item-title{
  margin-bottom: 1rem;
  text-decoration: underline;
  font-weight: 700;
}

.basket__box-final-price{
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
  margin-bottom: 1rem;
}

.basket__box-price, .basket__box-taxed{
  display: flex;
  justify-content: space-between;
}

.basket__box-price{
  font-weight: 700;
  font-size: 1.8rem;
  text-decoration: underline;

}

.basket__box-item-price{
  font-weight: 700;
}

.basket__price{
  font-size: 1.8rem;
  color: $color__text-dark;
}

.basket__tax{
  font-size: 1.4rem;
}

.basket__right-wrap{
  display: none;

  @include media($large){
    display: flex;
  }

}