@shopify/polaris/build/esnext/components/TopBar/TopBar.out.css

Shopify’s admin product component library

.Polaris-TopBar_z6tf9{
  position:relative;
  height:var(--pg-top-bar-height);
  box-shadow:var(--p-shadow-100);
  background-color:var(--p-color-bg-inverse);
  gap:var(--p-space-100);
}

@media (min-width: 48em){

.Polaris-TopBar_z6tf9{
    gap:var(--p-space-600);
    grid-template-columns:minmax(15rem, 1fr) minmax(auto, 30rem) 1fr;
}
  }

.Polaris-TopBar_z6tf9::after{
    content:'';
    position:absolute;
    bottom:0;
    width:100%;
    border-bottom:var(--p-border-width-025) solid transparent;
  }

.Polaris-TopBar__Container_13mbo{
  display:grid;
  grid-template-columns:1fr minmax(auto, 30rem) 1fr;
  align-items:center;
  width:calc(100vw - var(--pc-app-provider-scrollbar-width));
}

.Polaris-TopBar__LogoDisplayControl_upvcc{
  display:none;
}

@media (min-width: 48em){

.Polaris-TopBar__LogoDisplayControl_upvcc{
    display:flex;
}
  }

.Polaris-TopBar__LogoDisplayContainer_ym5v1{
  display:flex;
}

.Polaris-TopBar__LogoContainer_szav1{
  flex:0 0 var(--pg-layout-width-nav-base);
  align-items:center;
  height:100%;
  padding:0 var(--p-space-200) 0 var(--p-space-400);
  flex-basis: var(--pg-layout-width-nav-base);
  flex-basis: calc(var(--pg-layout-width-nav-base) + constant(safe-area-inset-left));
  flex-basis: calc(var(--pg-layout-width-nav-base) + env(safe-area-inset-left));
  padding-left: var(--p-space-400);
  padding-left: calc(var(--p-space-400) + constant(safe-area-inset-left));
  padding-left: calc(var(--p-space-400) + env(safe-area-inset-left));
}

.Polaris-TopBar__LogoContainer_szav1.Polaris-TopBar--hasLogoSuffix_1x6t8{
    gap:var(--p-space-200);
  }

.Polaris-TopBar__Logo_yj38q,
.Polaris-TopBar__LogoLink_eekya{
  display:block;
}

.Polaris-TopBar__Logo_yj38q:focus-visible, .Polaris-TopBar__LogoLink_eekya:focus-visible{
    outline:var(--p-border-width-050) solid var(--p-color-border-focus);
    outline-offset:var(--p-space-150);
    border-radius:var(--p-border-radius-200);
  }

.Polaris-TopBar__ContextControl_3di0f{
  display:none;
}

@media (min-width: 48em){

.Polaris-TopBar__ContextControl_3di0f{
    width:var(--pg-layout-width-nav-base);
    display:block;
}
  }

@media (min-width: 90em){

.Polaris-TopBar__ContextControl_3di0f{
    width:var(--pg-layout-width-nav-base);
}
  }

.Polaris-TopBar__NavigationIcon_1bdcy{
  -webkit-appearance:none;
          appearance:none;
  margin:0;
  padding:0;
  background:none;
  border:none;
  font-size:inherit;
  line-height:inherit;
  color:inherit;
  cursor:pointer;
  position:relative;
  align-self:center;
  margin-left:calc(var(--p-space-200) + var(--p-space-050));
  margin-right:var(--p-space-200);
  padding:var(--p-space-200);
  border-radius:var(--p-border-radius-100);
  color:var(--p-color-icon-inverse);
  transition:var(--p-motion-duration-150) color var(--p-motion-ease) var(--p-motion-duration-50);
}

.Polaris-TopBar__NavigationIcon_1bdcy:focus{
    outline:none;
  }

.Polaris-TopBar__NavigationIcon_1bdcy.Polaris-TopBar--focused_17w4h:active{
    background-color:var(--p-color-bg-fill-inverse-hover);
  }

.Polaris-TopBar__NavigationIcon_1bdcy:hover{
    background-color:var(--p-color-bg-fill-inverse-hover);
  }

.Polaris-TopBar__NavigationIcon_1bdcy::after{
    content:'';
    position:absolute;
    top:calc(var(--p-space-200)*-1);
    left:calc(var(--p-space-200)*-1);
    width:calc(100% + var(--p-space-500));
    height:calc(100% + var(--p-space-500));
  }

@media (min-width: 48em){

.Polaris-TopBar__NavigationIcon_1bdcy{
    display:none;
}
  }

.Polaris-TopBar__NavigationIcon_1bdcy .Polaris-TopBar__IconWrapper_1kb6z{
    position: relative;
  }

.Polaris-TopBar__NavigationIcon_1bdcy .Polaris-TopBar__IconWrapper_1kb6z::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -0.4375rem;
  right: -0.4375rem;
  bottom: -0.4375rem;
  left: -0.4375rem;
  display: block;
  pointer-events: none;
  box-shadow: 0 0 0 -0.4375rem var(--p-color-border-focus);
  border-radius: var(--p-border-radius-100);
}

.Polaris-TopBar__NavigationIcon_1bdcy:focus-visible:not(:active) .Polaris-TopBar__IconWrapper_1kb6z::after {
  box-shadow: 0 0 0 0.125rem var(--p-color-border-focus);
  outline: var(--p-border-width-025) solid transparent;
}

.Polaris-TopBar__LeftContent_1rxtg{
  display:flex;
}

.Polaris-TopBar__Search_q76sw{
  z-index:var(--p-z-index-1);
  display:flex;
  flex:1 1 auto;
  align-items:center;
  justify-content:center;
  height:100%;
}

@media (min-width: 48em){

.Polaris-TopBar__Search_q76sw{
    position:relative;
}
  }

.Polaris-TopBar__RightContent_1e3it{
  display:flex;
  justify-content:flex-end;
}

.Polaris-TopBar__SecondaryMenu_7y4ay{
  margin-left:var(--p-space-200);
}

.Polaris-TopBar__SecondaryMenu_7y4ay svg{
  fill:var(--p-color-icon-inverse);
}