@shopify/polaris/dist/esnext/components/TopBar/TopBar.css

Shopify’s product component library

.Polaris-TopBar_z6tf9{ position:relative; display:flex; height:5.6rem; background-color:var(--p-surface, var(--top-bar-background)); transition:200ms background-color ease-in-out; }

.Polaris-TopBar_z6tf9::after{ content:''; position:absolute; bottom:0; width:100%; border-bottom:1px solid transparent; }

.Polaris-TopBar__TopBar--newDesignLanguage_xnbkn{ box-shadow:var(--p-top-bar-shadow); }

.Polaris-TopBar__LogoContainer_szav1{ display:none; }

@media (min-width: 48.0625em){ .Polaris-TopBar__LogoContainer_szav1{ display:flex; flex:0 0 24rem; align-items:center; height:100%; padding:0 0.8rem 0 1.6rem; flex-basis:24rem; flex-basis:calc(24rem + constant(safe-area-inset-left)); flex-basis:calc(24rem + env(safe-area-inset-left)); padding-left:1.6rem; padding-left:calc(1.6rem + constant(safe-area-inset-left)); padding-left:calc(1.6rem + env(safe-area-inset-left)); } }

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

.Polaris-TopBar__ContextControl_3di0f{ display:none; }

@media (min-width: 48.0625em){ .Polaris-TopBar__ContextControl_3di0f{ width:24rem; display:block; } }

@media (min-width: 87.5em){ .Polaris-TopBar__ContextControl_3di0f{ width:24rem; } }

.Polaris-TopBar__NavigationIcon_1bdcy{ -webkit-appearance:none; -moz-appearance:none; appearance:none; margin:0; padding:0; background:none; border:none; font-size:inherit; line-height:inherit; cursor:pointer; position:relative; align-self:center; margin-left:1rem; margin-right:0.8rem; padding:0.8rem; border-radius:3px; fill:var(--p-icon, var(--top-bar-color)); transition:167ms fill cubic-bezier(0.64, 0, 0.35, 1) 33ms; }

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

.Polaris-TopBar__NavigationIcon_1bdcy.Polaris-TopBar--focused_17w4h{ background-color:var(--p-override-transparent, rgba(255, 255, 255, 0.16)); }

.Polaris-TopBar__NavigationIcon_1bdcy.Polaris-TopBar--focused_17w4h:active{ background-color:var(--p-surface-pressed, rgba(0, 0, 0, 0.28)); }

.Polaris-TopBar__NavigationIcon_1bdcy:hover{ background-color:var(--p-surface-hovered, rgba(255, 255, 255, 0.08)); }

.Polaris-TopBar__NavigationIcon_1bdcy::after{ content:''; position:absolute; top:-0.8rem; left:-0.8rem; width:calc(100% + 2rem); height:calc(100% + 2rem); }

@media (min-width: 48.0625em){ .Polaris-TopBar__NavigationIcon_1bdcy{ display:none; } }

.Polaris-TopBar__Contents_1u1wn{ z-index:10; display:flex; flex:1 1 auto; align-items:center; justify-content:flex-end; height:100%; }

@media (min-width: 42.5em){ .Polaris-TopBar__Contents_1u1wn{ position:relative; } }

.Polaris-TopBar__SearchField_ek145{ margin:0 auto; padding:0; max-width:99.8rem; position:relative; width:100%; margin:0; max-width:none; margin-left:calc((100% - 99.8rem)/2); }

@media (max-width: 48.0625em) and (min-width: 30.625em), (min-width: 45.625em){ [data-has-navigation] .Polaris-TopBar__SearchField_ek145{ padding:0 2rem; } }

@media (min-width: 30.625em){ .Polaris-TopBar__SearchField_ek145{ padding:0 2rem; } }

@media (max-width: 48.0625em) and (min-width: 46.5em), (min-width: 61.5em){ [data-has-navigation] .Polaris-TopBar__SearchField_ek145{ padding:0 3.2rem; } }

@media (min-width: 46.5em){ .Polaris-TopBar__SearchField_ek145{ padding:0 3.2rem; } }

@media (min-width: 87.5em){ .Polaris-TopBar__SearchField_ek145{ margin-left:calc((100% - 103.8rem)/2); } }

@media (max-width: 1268px){ .Polaris-TopBar__SearchField_ek145{ margin-left:0; margin-right:0.4rem; } }

.Polaris-TopBar__SecondaryMenu_7y4ay svg{ fill:var(--p-icon, var(--top-bar-color)); color:transparent; }