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

Shopify’s product component library

.Polaris-Frame_2qi9y{ width:100%; min-height:100vh; display:flex; background-color:var(--p-background, #f4f6f8); }

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

@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:absolute; top:0; left:100%; width:3.2rem; height:3.2rem; margin:1.6rem; padding:0; border:none; 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.64, 0, 0.35, 1); }

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

.Polaris-Frame__NavigationDismiss_s8t2w svg{ fill:white; }

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

.Polaris-Frame__NavigationDismiss_s8t2w:focus{ border-radius:3px; background-color:var(--p-override-transparent, rgba(255, 255, 255, 0.16)); outline:none; }

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

.Polaris-Frame__Navigation--newDesignLanguage_68mzh .Polaris-Frame__NavigationDismiss_s8t2w{ border-radius:50%; }

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

.Polaris-Frame__Navigation--newDesignLanguage_68mzh .Polaris-Frame__NavigationDismiss_s8t2w:focus{ position:relative; position:absolute; }

.Polaris-Frame__Navigation--newDesignLanguage_68mzh .Polaris-Frame__NavigationDismiss_s8t2w:focus::after{ content:var(--p-non-null-content, none); 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--newDesignLanguage_68mzh .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(0px + constant(safe-area-inset-right)); padding-right:calc(0px + env(safe-area-inset-right)); padding-left:0px; padding-left:calc(0px + constant(safe-area-inset-left)); padding-left:calc(0px + env(safe-area-inset-left)); padding-bottom:0px; padding-bottom:calc(0px + constant(safe-area-inset-bottom)); padding-bottom:calc(0px + 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; } }

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

@media print and (min-width: 48.0625em){ .Polaris-Frame--hasNav_wlvjn .Polaris-Frame__Main--newDesignLanguage_129jf{ padding-left: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{ top:var(--p-override-zero, 5.6rem); 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; }