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

Shopify’s admin product component library

/* stylelint-disable unit-disallowed-list */
/* stylelint-disable length-zero-no-unit */
/* Breakpoints - Aliases */
/* Breakpoints - Media conditions */
.Polaris-TopBar_z6tf9 { position: relative; display: flex; height: 3.5rem; box-shadow: var(--p-shadow-top-bar); background-color: var(--p-surface); transition: var(--p-duration-200) background-color var(--p-ease-in-out); }

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

.Polaris-TopBar__LogoDisplayControl_upvcc { display: none; }

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

.Polaris-TopBar__LogoDisplayContainer_ym5v1 { display: flex; }

.Polaris-TopBar__LogoContainer_szav1 { flex: 0 0 15rem; align-items: center; height: 100%; padding: 0 var(--p-space-2) 0 var(--p-space-4); flex-basis: 15rem; flex-basis: calc(15rem + constant(safe-area-inset-left)); flex-basis: calc(15rem + env(safe-area-inset-left)); padding-left: var(--p-space-4); padding-left: calc(var(--p-space-4) + constant(safe-area-inset-left)); padding-left: calc(var(--p-space-4) + 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: 15rem; display: block; } }

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

.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-2) + var(--p-space-05)); margin-right: var(--p-space-2); padding: var(--p-space-2); border-radius: var(--p-border-radius-base); fill: var(--p-icon); transition: var(--p-duration-150) fill var(--p-ease) var(--p-duration-50); }

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

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

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

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

@media (min-width: 48.0625em) { .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-focused); transition: box-shadow var(--p-duration-100) var(--p-ease); border-radius: calc(var(--p-border-radius-1) + 0.0625rem); }

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

.Polaris-TopBar__Contents_1u1wn { z-index: var(--p-z-1); 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: 62.375rem; position: relative; width: 100%; margin: 0; max-width: none; margin-left: calc(50% - 31.1875rem); }

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

@media (min-width: 30.625em) { .Polaris-TopBar__SearchField_ek145 { padding: 0 var(--p-space-6); } }

@media (max-width: 1238px) { .Polaris-TopBar__SearchField_ek145 { margin-left: 0; margin-right: var(--p-space-1); } }

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