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

Shopify’s admin product component library

.Polaris-Frame_2qi9y{
  --pc-frame-button-size:var(--p-space-800);
  --pc-sidebar-width:calc(22.25rem + var(--p-space-400));
  width:100%;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  background-color:var(--p-color-bg);
}

@media print{

.Polaris-Frame_2qi9y{
    background-color:transparent;
}
  }

@media (min-width: 48em){

.Polaris-Frame_2qi9y{
    width:calc(100% - var(--pc-frame-offset, 0px));
    margin-left:var(--pc-frame-offset);
}
  }

.Polaris-Frame__ScrollbarAlwaysVisible_3bbj5{
  --pc-scrollbar-spacer:var(--p-space-050);
}

.Polaris-Frame__Navigation_1ajsq{
  position:fixed;
  z-index:var(--p-z-index-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: 48em){

.Polaris-Frame__Navigation_1ajsq{
    z-index:1;
    left:var(--pc-frame-offset);
    display:flex;
}

    .Polaris-Frame--hasTopBar_1162r .Polaris-Frame__Navigation_1ajsq{
      top:var(--pg-top-bar-height);
      height:calc(100% - var(--pg-top-bar-height));
    }
  }

.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-motion-duration-300) var(--p-motion-ease-out);
}

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

.Polaris-Frame__Navigation--exitActive_1q56k{
  transform:translateX(-100%);
  transition:transform var(--p-motion-duration-300) var(--p-motion-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-400);
  padding:0;
  border:none;
  border-radius:var(--p-border-radius-full);
  background:none;
  opacity:0;
  pointer-events:none;
  -webkit-backface-visibility:hidden;
          backface-visibility:hidden;
  will-change:opacity;
  cursor:pointer;
  transition:opacity var(--p-motion-duration-100) var(--p-motion-ease);
}

.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-color-border-focus);
  border-radius: var(--p-border-radius-100);
}

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

@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-100);
    outline:none;
  }

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

@media (min-width: 48em){

.Polaris-Frame__NavigationDismiss_s8t2w{
    display:none;
}
  }

.Polaris-Frame__NavigationDismiss_s8t2w:hover{
    background-color:rgba(255, 255, 255, 0.5);
  }

.Polaris-Frame__NavigationDismiss_s8t2w:active{
    background-color:rgba(255, 255, 255, 0.5);
  }

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

@media print{

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

@media (min-width: 48em){

.Polaris-Frame__TopBar_z6tf9{
    left:var(--pc-frame-offset);
    width:calc(100% - var(--pc-frame-offset, 0px));
}
  }

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

@media (min-width: 48em){

.Polaris-Frame__ContextualSaveBar_14m7v{
    left:var(--pc-frame-offset);
    width:calc(100% - var(--pc-frame-offset, 0px));
}
  }

.Polaris-Frame__Main_yj28s{
  flex:1 1;
  display:flex;
  align-items:stretch;
  border-inline-end:var(--p-border-width-025) solid var(--p-color-border);

  min-width:0;
}

@media (min-width: 30.625em){

.Polaris-Frame__Main_yj28s{
    max-width:calc(100vw - var(--pc-app-provider-scrollbar-width));
}
  }

.Polaris-Frame__Main_yj28s{
  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: 48em){
    .Polaris-Frame--hasNav_wlvjn .Polaris-Frame__Main_yj28s{
      padding-left:var(--pg-layout-width-nav-base);
      padding-left: var(--pg-layout-width-nav-base);
      padding-left: calc(var(--pg-layout-width-nav-base) + constant(safe-area-inset-left));
      padding-left: calc(var(--pg-layout-width-nav-base) + env(safe-area-inset-left));
    }
  }

.Polaris-Frame--hasTopBar_1162r .Polaris-Frame__Main_yj28s{
    padding-top:var(--pg-top-bar-height);
  }

@media print{

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

@media print{
    .Polaris-Frame--hasNav_wlvjn .Polaris-Frame__Main_yj28s{
      padding-left: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%;
}

@media screen and (min-width: 1200px){

.Polaris-Frame--hasSidebar_rqyuy .Polaris-Frame__Content_xd1mk{
      margin-right:var(--pc-sidebar-width);
  }
    }

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

@media (min-width: 48em){

.Polaris-Frame__GlobalRibbonContainer_1kirc{
    left:var(--pc-frame-offset);
}

    .Polaris-Frame--hasNav_wlvjn .Polaris-Frame__GlobalRibbonContainer_1kirc{
      left:calc(var(--pg-layout-width-nav-base) + var(--pc-frame-offset));
      left: calc(var(--pg-layout-width-nav-base) + var(--pc-frame-offset));
      left: calc(var(--pg-layout-width-nav-base) + var(--pc-frame-offset) + constant(safe-area-inset-left));
      left: calc(var(--pg-layout-width-nav-base) + var(--pc-frame-offset) + env(safe-area-inset-left));
      width:calc(100% - var(--pg-layout-width-nav-base) - var(--pc-frame-offset, 0px));
    }
  }

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

@media print{

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

@media (min-width: 48em){
    .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-index-6);
    }
  }

.Polaris-Frame__Skip_yj7bt{
  --pc-frame-skip-vertical-offset:0.625rem;
  position:fixed;
  z-index:var(--p-z-index-9);
  top:var(--pc-frame-skip-vertical-offset);
  left:calc(var(--p-space-200) + 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-color-border-focus);
  outline: var(--p-border-width-025) solid transparent;
}

.Polaris-Frame__Skip_yj7bt > a{
    position: relative;
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:1.75rem;
    min-width:1.75rem;
    margin:0;
    padding:var(--p-space-150) var(--p-space-300);
    background:var(--p-color-bg-fill);
    box-shadow:var(--p-shadow-200);
    border-radius:var(--p-border-radius-200);
    color:var(--p-color-text);
    border:none;
    line-height:1;
    text-align:center;
    cursor:pointer;
    -webkit-user-select:none;
            user-select:none;
    text-decoration:none;
    -webkit-tap-highlight-color:transparent;
    position: relative;
    color:var(--p-color-text);
  }

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

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

.Polaris-Frame__Skip_yj7bt > a:hover{
    background:var(--p-color-bg-fill-hover);
    outline:var(--p-border-width-025) solid transparent;
  }

.Polaris-Frame__Skip_yj7bt > a:focus-visible{
    box-shadow:var(--p-shadow-200);
    outline:var(--p-border-width-050) solid var(--p-color-border-focus);
    outline-offset:var(--p-space-025);
  }

.Polaris-Frame__Skip_yj7bt > a:focus-visible::after{
    content:none;
  }

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

.Polaris-Frame__Skip_yj7bt > a.Polaris-Frame--pressed_17w8v{
    background:var(--p-color-bg-fill-selected);
    box-shadow:var(--p-shadow-inset-200);
    color:var(--p-color-text);
    border-color:var(--p-color-border-inverse);
  }

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

.Polaris-Frame__Skip_yj7bt > a.Polaris-Frame--pressed_17w8v:hover{
      background:var(--p-color-bg-fill-tertiary-hover);
      box-shadow:var(--p-shadow-inset-200);
    }

.Polaris-Frame__Skip_yj7bt > a.Polaris-Frame--pressed_17w8v:active{
      background:var(--p-color-bg-fill-tertiary-active);
      box-shadow:var(--p-shadow-inset-200);
    }

@media (-ms-high-contrast: active){

.Polaris-Frame__Skip_yj7bt > a{
    border:var(--p-border-width-025) solid windowText;
  }
  }

.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-color-border-focus);
  border-radius: var(--p-border-radius-100);
}

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