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

Shopify’s admin product component library

/* stylelint-disable unit-disallowed-list */
/* stylelint-disable length-zero-no-unit */
/* Breakpoints - Aliases */
/* Breakpoints - Media conditions */
.Polaris-Frame_2qi9y { --pc-frame-button-size: var(--p-space-8); width: 100%; min-height: 100vh; display: flex; background-color: var(--p-background); }

@media print { .Polaris-Frame_2qi9y { background-color: transparent; } }

@media (min-width: 48.0625em) { .Polaris-Frame_2qi9y { width: calc(100% - var(--pc-frame-offset)); margin-left: var(--pc-frame-offset); } }

.Polaris-Frame__Navigation_1ajsq { position: fixed; z-index: var(--p-z-8); top: 0; left: 0; display: none; flex: 0 0 auto; align-items: stretch; height: 100%; outline: none; transform: translateX(0%); }

@media print { .Polaris-Frame__Navigation_1ajsq { display: none !important; } }

@media (min-width: 48.0625em) { .Polaris-Frame__Navigation_1ajsq { z-index: 1; left: var(--pc-frame-offset); display: flex; }
  .Polaris-Frame--hasTopBar_1162r .Polaris-Frame__Navigation_1ajsq { top: 3.5rem; height: calc(100% - 3.5rem); } }

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

.Polaris-Frame__Navigation--enter_145tn, .Polaris-Frame__Navigation--enterActive_sj3gh, .Polaris-Frame__Navigation--exit_t2g9y, .Polaris-Frame__Navigation--exitActive_1q56k { display: flex; }

.Polaris-Frame__Navigation--enter_145tn { transform: translateX(-100%); }

.Polaris-Frame__Navigation--enterActive_sj3gh { transform: translateX(0%); transition: transform var(--p-duration-300) var(--p-ease-out); }

.Polaris-Frame__Navigation--exit_t2g9y { transform: translateX(0%); }

.Polaris-Frame__Navigation--exitActive_1q56k { transform: translateX(-100%); transition: transform var(--p-duration-300) var(--p-ease-out); }

.Polaris-Frame__NavigationDismiss_s8t2w { position: relative; position: absolute; top: 0; left: 100%; width: var(--pc-frame-button-size); height: var(--pc-frame-button-size); margin: var(--p-space-4); padding: 0; border: none; border-radius: var(--p-border-radius-half); background: none; opacity: 0; pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: opacity; cursor: pointer; transition: opacity var(--p-duration-100) var(--p-ease); }

.Polaris-Frame__NavigationDismiss_s8t2w svg { fill: var(--p-surface); }

.Polaris-Frame__NavigationDismiss_s8t2w::after { content: ''; position: absolute; z-index: 1; top: -0.0625rem; right: -0.0625rem; bottom: -0.0625rem; left: -0.0625rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.0625rem var(--p-focused); transition: box-shadow var(--p-duration-100) var(--p-ease); border-radius: calc(var(--p-border-radius-1) + 0.0625rem); }

@media print { .Polaris-Frame__NavigationDismiss_s8t2w { display: none !important; } }

.Polaris-Frame__Navigation--visible_8qe5o .Polaris-Frame__NavigationDismiss_s8t2w { pointer-events: all; opacity: 1; }

.Polaris-Frame__NavigationDismiss_s8t2w:focus { position: absolute; border-radius: var(--p-border-radius-base); outline: none; }

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

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

.Polaris-Frame__NavigationDismiss_s8t2w:hover { background-color: var(--p-overlay); }

.Polaris-Frame__NavigationDismiss_s8t2w:active { background-color: var(--p-overlay); }

.Polaris-Frame__TopBar_z6tf9 { position: fixed; z-index: var(--p-z-4); top: 0; left: 0; width: 100%; height: 3.5rem; }

@media print { .Polaris-Frame__TopBar_z6tf9 { display: none !important; } }

@media (min-width: 48.0625em) { .Polaris-Frame__TopBar_z6tf9 { left: var(--pc-frame-offset); width: calc(100% - var(--pc-frame-offset)); } }

.Polaris-Frame__ContextualSaveBar_14m7v { position: fixed; z-index: var(--p-z-5); top: 0; left: 0; width: 100%; }

@media (min-width: 48.0625em) { .Polaris-Frame__ContextualSaveBar_14m7v { left: var(--pc-frame-offset); width: calc(100% - var(--pc-frame-offset)); } }

.Polaris-Frame__Main_yj28s { flex: 1 1; display: flex; align-items: stretch; min-width: 0; max-width: 100%; padding-right: 0; padding-right: calc(constant(safe-area-inset-right)); padding-right: calc(env(safe-area-inset-right)); padding-left: 0; padding-left: calc(constant(safe-area-inset-left)); padding-left: calc(env(safe-area-inset-left)); padding-bottom: 0; padding-bottom: calc(constant(safe-area-inset-bottom)); padding-bottom: calc(env(safe-area-inset-bottom)); }

@media (min-width: 48.0625em) { .Polaris-Frame--hasNav_wlvjn .Polaris-Frame__Main_yj28s { padding-left: 15rem; padding-left: 240px; padding-left: calc(15rem + constant(safe-area-inset-left)); padding-left: calc(15rem + env(safe-area-inset-left)); } }

@media print and (min-width: 48.0625em) { .Polaris-Frame--hasNav_wlvjn .Polaris-Frame__Main_yj28s { padding-left: 0; } }

.Polaris-Frame--hasTopBar_1162r .Polaris-Frame__Main_yj28s { padding-top: 3.5rem; }

@media print { .Polaris-Frame--hasTopBar_1162r .Polaris-Frame__Main_yj28s { padding-top: 0; } }

.Polaris-Frame__Content_xd1mk { position: relative; padding-bottom: var(--pc-frame-global-ribbon-height, 0); flex: 1 1; min-width: 0; max-width: 100%; }

.Polaris-Frame__GlobalRibbonContainer_1kirc { position: fixed; z-index: var(--p-z-3); bottom: 0; width: 100%; }

@media (min-width: 48.0625em) { .Polaris-Frame__GlobalRibbonContainer_1kirc { left: var(--pc-frame-offset); }
  .Polaris-Frame--hasNav_wlvjn .Polaris-Frame__GlobalRibbonContainer_1kirc { left: calc(15rem + var(--pc-frame-offset)); left: calc(240px + var(--pc-frame-offset)); left: calc(15rem + var(--pc-frame-offset) + constant(safe-area-inset-left)); left: calc(15rem + var(--pc-frame-offset) + env(safe-area-inset-left)); width: calc(100% - 15rem - var(--pc-frame-offset)); } }

.Polaris-Frame__LoadingBar_rnw3c { position: fixed; z-index: var(--p-z-6); top: 0; right: 0; left: 0; }

@media print { .Polaris-Frame__LoadingBar_rnw3c { display: none !important; } }

@media (min-width: 48.0625em) { .Polaris-Frame--hasNav_wlvjn .Polaris-Frame__LoadingBar_rnw3c { left: var(--pc-frame-offset); }
  .Polaris-Frame--hasTopBar_1162r .Polaris-Frame__LoadingBar_rnw3c { z-index: var(--p-z-6); } }

.Polaris-Frame__Skip_yj7bt { --pc-frame-skip-vertical-offset: 0.625rem; position: fixed; z-index: var(--p-z-9); top: var(--pc-frame-skip-vertical-offset); left: calc(var(--p-space-2) + var(--pc-frame-offset)); opacity: 0; pointer-events: none; }

.Polaris-Frame__Skip_yj7bt.Polaris-Frame--focused_17w4h { pointer-events: all; opacity: 1; }

.Polaris-Frame__Skip_yj7bt.Polaris-Frame--focused_17w4h > a::after { box-shadow: 0 0 0 0.125rem var(--p-focused); outline: var(--p-border-width-1) solid transparent; }

.Polaris-Frame__Skip_yj7bt > a { position: relative; position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: var(--p-line-height-6); min-width: var(--p-line-height-6); margin: 0; padding: calc((var(--p-line-height-6) - var(--p-line-height-2) - var(--p-space-05))/2) var(--p-space-4); background: var(--p-surface); box-shadow: var(--p-shadow-button); border-radius: var(--p-border-radius-1); color: var(--p-text); border: var(--p-border-width-1) solid var(--p-border-neutral-subdued); border-top-color: var(--p-border-subdued); border-bottom-color: var(--p-border-shadow-subdued); line-height: 1; text-align: center; cursor: pointer; -webkit-user-select: none; user-select: none; text-decoration: none; -webkit-tap-highlight-color: transparent; font-size: var(--p-font-size-4); font-weight: var(--p-font-weight-medium); line-height: var(--p-line-height-1); text-transform: initial; letter-spacing: initial; position: relative; color: var(--p-text); }

.Polaris-Frame__Skip_yj7bt > a svg { fill: var(--p-icon); }

.Polaris-Frame__Skip_yj7bt > a::after { content: ''; position: absolute; z-index: 1; top: calc(var(--p-border-width-1)*-1 + -0.0625rem); right: calc(var(--p-border-width-1)*-1 + -0.0625rem); bottom: calc(var(--p-border-width-1)*-1 + -0.0625rem); left: calc(var(--p-border-width-1)*-1 + -0.0625rem); display: block; pointer-events: none; box-shadow: 0 0 0 calc(var(--p-border-width-1)*-1 + -0.0625rem) var(--p-focused); transition: box-shadow var(--p-duration-100) var(--p-ease); border-radius: calc(var(--p-border-radius-1) + 0.0625rem); }

.Polaris-Frame__Skip_yj7bt > a:hover { background: var(--p-action-secondary-hovered); outline: var(--p-border-width-1) solid transparent; }

.Polaris-Frame__Skip_yj7bt > a:focus { box-shadow: var(--p-shadow-button); outline: 0; }

.Polaris-Frame__Skip_yj7bt > a:focus::after { box-shadow: 0 0 0 0.125rem var(--p-focused); outline: var(--p-border-width-1) solid transparent; }

.Polaris-Frame__Skip_yj7bt > a:active { background: var(--p-action-secondary-pressed); box-shadow: var(--p-shadow-button); }

.Polaris-Frame__Skip_yj7bt > a:active::after { border: none; box-shadow: none; }

.Polaris-Frame__Skip_yj7bt > a.Polaris-Frame--pressed_17w8v { background: var(--p-action-secondary-depressed); box-shadow: var(--p-shadows-inset-button-pressed); color: var(--p-text-on-primary); border-color: var(--p-border-depressed); }

.Polaris-Frame__Skip_yj7bt > a.Polaris-Frame--pressed_17w8v svg { fill: currentColor; }

@media (-ms-high-contrast: active) { .Polaris-Frame__Skip_yj7bt > a { border: var(--p-border-width-1) solid windowText; } }

@media (min-width: 40em) { .Polaris-Frame__Skip_yj7bt > a { font-size: var(--p-font-size-3); } }

.Polaris-Frame__Skip_yj7bt > a::after { content: ''; position: absolute; z-index: 1; top: -0.125rem; right: -0.125rem; bottom: -0.125rem; left: -0.125rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.125rem var(--p-focused); transition: box-shadow var(--p-duration-100) var(--p-ease); border-radius: calc(var(--p-border-radius-1) + 0.0625rem); }

.Polaris-Frame__Skip_yj7bt > a:focus { border-color: none; box-shadow: none; }