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

Shopify’s admin product component library

.Polaris-Frame_2qi9y{ 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(--p-frame-offset)); margin-left:var(--p-frame-offset); } }

.Polaris-Frame__Navigation_1ajsq{ position:fixed; z-index:516; 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(--p-frame-offset); display:flex; }
  .Polaris-Frame--hasTopBar_1162r .Polaris-Frame__Navigation_1ajsq{ top:5.6rem; height:calc(100% - 5.6rem); } }

.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 300ms cubic-bezier(0, 0, 0.42, 1); }

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

.Polaris-Frame__Navigation--exitActive_1q56k{ transform:translateX(-100%); transition:transform 300ms cubic-bezier(0, 0, 0.42, 1); }

.Polaris-Frame__NavigationDismiss_s8t2w{ position:relative; position:absolute; top:0; left:100%; width:3.2rem; height:3.2rem; margin:1.6rem; padding:0; border:none; border-radius:50%; background:none; opacity:0; pointer-events:none; -webkit-backface-visibility:hidden; backface-visibility:hidden; will-change:opacity; cursor:pointer; transition:opacity 100ms cubic-bezier(0.25, 0.1, 0.25, 1); }

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

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

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

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

.Polaris-Frame__NavigationDismiss_s8t2w:focus{ position:absolute; border-radius:3px; outline:none; }

.Polaris-Frame__NavigationDismiss_s8t2w:focus::after{ box-shadow:0 0 0 0.2rem var(--p-focused); outline:0.1rem 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:512; top:0; left:0; width:100%; height:5.6rem; }

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

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

.Polaris-Frame__ContextualSaveBar_14m7v{ position:fixed; z-index:513; top:0; left:0; width:100%; }

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

.Polaris-Frame__Main_yj28s{ flex:1 1; display:flex; align-items:stretch; min-width:0; max-width:100%; padding-right:0px; padding-right:calc(constant(safe-area-inset-right)); padding-right:calc(env(safe-area-inset-right)); padding-left:0px; padding-left:calc(constant(safe-area-inset-left)); padding-left:calc(env(safe-area-inset-left)); padding-bottom:0px; 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:24rem; padding-left:24rem; padding-left:calc(24rem + constant(safe-area-inset-left)); padding-left:calc(24rem + 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:5.6rem; }

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

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

.Polaris-Frame__GlobalRibbonContainer_1kirc{ position:fixed; z-index:510; bottom:0; width:100%; }

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

.Polaris-Frame__LoadingBar_rnw3c{ position:fixed; z-index:514; 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(--p-frame-offset); }
  .Polaris-Frame--hasTopBar_1162r .Polaris-Frame__LoadingBar_rnw3c{ z-index:var(--p-override-loading-z-index, 511); } }

.Polaris-Frame__Skip_yj7bt{ position:fixed; z-index:517; top:1rem; left:calc(0.8rem + var(--p-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.2rem var(--p-focused); outline:0.1rem solid transparent; }

.Polaris-Frame__Skip_yj7bt > a{ position:relative; position:relative; display:inline-flex; align-items:center; justify-content:center; min-height:3.6rem; min-width:3.6rem; margin:0; padding:0.7rem 1.6rem; background:var(--p-surface); box-shadow:var(--p-button-drop-shadow); border-radius:var(--p-border-radius-base); color:var(--p-text); border:1px 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:1.5rem; font-weight:var(--p-button-font-weight); line-height:1.6rem; 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:-0.2rem; right:-0.2rem; bottom:-0.2rem; left:-0.2rem; display:block; pointer-events:none; box-shadow:0 0 0 -0.2rem var(--p-focused); transition:box-shadow 100ms var(--p-ease); border-radius:calc(var(--p-border-radius-base) + 0.1rem); }

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

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

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

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

.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-button-pressed-inner-shadow); 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:1px solid windowText; } }

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

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

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