@vtmn/css-navbar/dist/index-with-vars.css

Decathlon Design System - Vitamin specific CSS styles for navbar component

.vtmn-navbar{
  box-sizing:border-box;
  inline-size:100%;
  block-size:5.125rem;
  background:var(--vtmn-semantic-color_background-primary);
  padding-block:0.75rem;
  padding-inline:1rem;
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  align-items:center;
}

.vtmn-navbar span[class^='vtmx-']{
  font-size:var(--vtmn-typo_title-5-font-size);
}

.vtmn-navbar_left-navigation{
  block-size:3rem;
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  align-items:center;
  color:var(--vtmn-semantic-color_content-primary);
  fill:var(--vtmn-semantic-color_content-primary);
}

.vtmn-navbar_left-navigation > *{
  block-size:100%;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  -webkit-margin-end:0.5rem;
          margin-inline-end:0.5rem;
}

.vtmn-navbar_logo{
  block-size:100%;
  height:3rem;
  -webkit-margin-end:0.5rem;
          margin-inline-end:0.5rem;
  display:flex;
  align-items:center;
  outline:0;
}

.vtmn-navbar_logo:focus-visible{
  box-shadow:var(--vtmn-shadow_focus-visible);
  transition:var(--vtmn-transition_focus-visible);
}

.vtmn-navbar_logo > *{
  block-size:100%;
}

.vtmn-navbar_middle-area{
  inline-size:100%;
  -webkit-margin-end:0.5rem;
          margin-inline-end:0.5rem;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
}

.vtmn-navbar_middle-area .vtmn-text-input_container{
  inline-size:100%;
}

.vtmn-navbar_middle-area .vtmn-text-input_container input{
  min-block-size:100%;
  inline-size:100%;
  margin:0;
}

.vtmn-navbar_middle-area .vtmn-text-input_container span[class^='vtmx-'],
.vtmn-navbar_middle-area .vtmn-text-input_container svg{
  position:absolute;
  inset-block-start:0;
  inset-block-end:initial;
  transform:translate(0, 50%);
  color:var(--vtmn-semantic-color_content-primary);
}

.vtmn-navbar_right-navigation{
  block-size:4.625rem;
  display:flex;
  flex-flow:row wrap;
  justify-content:flex-end;
  min-inline-size:-moz-fit-content;
  min-inline-size:fit-content;
  align-items:center;
  -webkit-margin-start:0.25rem;
          margin-inline-start:0.25rem;
  color:var(--vtmn-semantic-color_content-primary);
  fill:var(--vtmn-semantic-color_content-primary);
}

.vtmn-navbar_right-navigation > *{
  block-size:100%;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  min-inline-size:-moz-fit-content;
  min-inline-size:fit-content;
}

.vtmn-navbar_link{
  position:relative;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  height:100%;
  min-width:3rem;
  max-width:6.5rem;
  padding:0.75rem;
  font-size:var(--vtmn-typo_text-3-font-size);
  line-height:var(--vtmn-typo_text-3-line-height);
  outline:0;
  border-radius:var(--vtmn-radius_100);
  text-decoration:none;
  text-align:center;
  font-family:var(--vtmn-typo_font-family);
  color:var(--vtmn-semantic-color_content-primary);
}

.vtmn-navbar_link:hover{
  background-color:var(--vtmn-semantic-color_hover-primary);
}

.vtmn-navbar_link:active{
  background-color:var(--vtmn-semantic-color_active-primary);
}

.vtmn-navbar_link:focus-visible{
  box-shadow:var(--vtmn-shadow_focus-visible);
  transition:var(--vtmn-transition_focus-visible);
}

.vtmn-navbar_link span:not([class^='vtmn-badge']){
  margin-top:0.25rem;
  width:6.5rem;
}

.vtmn-navbar_link span[class^='vtmx-']{
  font-size:1.5rem;
  width:inherit;
  margin-top:0;
}

.vtmn-navbar_link .vtmn-badge{
  position:absolute;
  bottom:1rem;
  left:50%;
}

.vtmn-navbar_link > div:first-of-type{
  position:relative;
}

@media screen and (min-width: 600px) and (max-width: 899px){
}

@media screen and (min-width: 900px) and (max-width: 1199px){
}

@media screen and (min-width: 1200px) and (max-width: 1799px){
}

@media screen and (min-width: 1800px){
}