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

Shopify’s admin product component library

.Polaris-Banner_z4w8k{ --p-rgb-text:33, 43, 54; position:relative; display:flex; }

.Polaris-Banner_z4w8k.Polaris-Banner--statusCritical_1iy3d .Polaris-Banner__PrimaryAction_eeemy .Polaris-Banner__Button_r99lw{ border-color:var(--p-border-critical-subdued); background:var(--p-surface-critical-subdued); }

.Polaris-Banner_z4w8k.Polaris-Banner--statusCritical_1iy3d .Polaris-Banner__PrimaryAction_eeemy .Polaris-Banner__Button_r99lw:hover{ border-color:var(--p-border-critical-subdued); background:var(--p-surface-critical-subdued-hovered); }

.Polaris-Banner_z4w8k.Polaris-Banner--statusCritical_1iy3d .Polaris-Banner__PrimaryAction_eeemy .Polaris-Banner__Button_r99lw:active{ border-color:var(--p-border-critical-subdued); background:var(--p-surface-critical-subdued-pressed); }

.Polaris-Banner_z4w8k.Polaris-Banner--statusCritical_1iy3d .Polaris-Banner__PrimaryAction_eeemy .Polaris-Banner__Button_r99lw:focus:not(:active){ border-color:var(--p-border-critical-subdued); background:var(--p-surface-critical-subdued); }

.Polaris-Banner_z4w8k.Polaris-Banner--statusWarning_1x66d .Polaris-Banner__PrimaryAction_eeemy .Polaris-Banner__Button_r99lw{ border-color:var(--p-border-warning-subdued); background:var(--p-surface-warning-subdued); }

.Polaris-Banner_z4w8k.Polaris-Banner--statusWarning_1x66d .Polaris-Banner__PrimaryAction_eeemy .Polaris-Banner__Button_r99lw:hover{ border-color:var(--p-border-warning-subdued); background:var(--p-surface-warning-subdued-hovered); }

.Polaris-Banner_z4w8k.Polaris-Banner--statusWarning_1x66d .Polaris-Banner__PrimaryAction_eeemy .Polaris-Banner__Button_r99lw:active{ border-color:var(--p-border-warning-subdued); background:var(--p-surface-warning-subdued-pressed); }

.Polaris-Banner_z4w8k.Polaris-Banner--statusWarning_1x66d .Polaris-Banner__PrimaryAction_eeemy .Polaris-Banner__Button_r99lw:focus:not(:active){ border-color:var(--p-border-warning-subdued); background:var(--p-surface-warning-subdued); }

.Polaris-Banner_z4w8k.Polaris-Banner--statusInfo_knr66 .Polaris-Banner__PrimaryAction_eeemy .Polaris-Banner__Button_r99lw{ border-color:var(--p-border-highlight-subdued); background:var(--p-surface-highlight-subdued); }

.Polaris-Banner_z4w8k.Polaris-Banner--statusInfo_knr66 .Polaris-Banner__PrimaryAction_eeemy .Polaris-Banner__Button_r99lw:hover{ border-color:var(--p-border-highlight-subdued); background:var(--p-surface-highlight-subdued-hovered); }

.Polaris-Banner_z4w8k.Polaris-Banner--statusInfo_knr66 .Polaris-Banner__PrimaryAction_eeemy .Polaris-Banner__Button_r99lw:active{ border-color:var(--p-border-highlight-subdued); background:var(--p-surface-highlight-subdued-pressed); }

.Polaris-Banner_z4w8k.Polaris-Banner--statusInfo_knr66 .Polaris-Banner__PrimaryAction_eeemy .Polaris-Banner__Button_r99lw:focus:not(:active){ border-color:var(--p-border-highlight-subdued); background:var(--p-surface-highlight-subdued); }

.Polaris-Banner_z4w8k.Polaris-Banner--statusSuccess_pc5rl .Polaris-Banner__PrimaryAction_eeemy .Polaris-Banner__Button_r99lw{ border-color:var(--p-border-success-subdued); background:var(--p-surface-success-subdued); }

.Polaris-Banner_z4w8k.Polaris-Banner--statusSuccess_pc5rl .Polaris-Banner__PrimaryAction_eeemy .Polaris-Banner__Button_r99lw:hover{ border-color:var(--p-border-success-subdued); background:var(--p-surface-success-subdued-hovered); }

.Polaris-Banner_z4w8k.Polaris-Banner--statusSuccess_pc5rl .Polaris-Banner__PrimaryAction_eeemy .Polaris-Banner__Button_r99lw:active{ border-color:var(--p-border-success-subdued); background:var(--p-surface-success-subdued-pressed); }

.Polaris-Banner_z4w8k.Polaris-Banner--statusSuccess_pc5rl .Polaris-Banner__PrimaryAction_eeemy .Polaris-Banner__Button_r99lw:focus:not(:active){ border-color:var(--p-border-success-subdued); background:var(--p-surface-success-subdued); }

.Polaris-Banner__ContentWrapper_1yvfo{ flex:1 1 auto; }

.Polaris-Banner--withinContentContainer_1uwmg{ padding:1.6rem 1.6rem 1.4rem; --p-banner-background:var(--p-background); --p-banner-border:var(--p-banner-border-default); transition:box-shadow 200ms cubic-bezier(0.25, 0.1, 0.25, 1); transition-delay:100ms; box-shadow:var(--p-banner-border); position:relative; border-radius:var(--p-border-radius-base); background-color:var(--p-banner-background); outline:0.1rem solid transparent; }

.Polaris-Banner--withinContentContainer_1uwmg .Polaris-Banner__ContentWrapper_1yvfo{ margin-top:-0.2rem; }

.Polaris-Banner--withinContentContainer_1uwmg .Polaris-Banner__Dismiss_z8d6a{ top:1.6rem; right:1.2rem; position:absolute; }

.Polaris-Banner--withinContentContainer_1uwmg .Polaris-Banner__Ribbon_r8z8p{ padding-right:1.6rem; }

.Polaris-Banner--withinContentContainer_1uwmg::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-Banner--withinContentContainer_1uwmg:focus{ outline:none; }

.Polaris-Banner--withinContentContainer_1uwmg.Polaris-Banner--keyFocused_1aqee{ box-shadow:var(--p-banner-border); }

.Polaris-Banner--withinContentContainer_1uwmg.Polaris-Banner--keyFocused_1aqee::after{ box-shadow:0 0 0 0.2rem var(--p-focused); outline:0.1rem solid transparent; }

.Polaris-Banner--withinContentContainer_1uwmg.Polaris-Banner--statusSuccess_pc5rl{ --p-banner-background:var(--p-surface-success-subdued); --p-banner-border:var(--p-banner-border-success); }

.Polaris-Banner--withinContentContainer_1uwmg.Polaris-Banner--statusInfo_knr66{ --p-banner-background:var(--p-surface-highlight-subdued); --p-banner-border:var(--p-banner-border-highlight); }

.Polaris-Banner--withinContentContainer_1uwmg.Polaris-Banner--statusWarning_1x66d{ --p-banner-background:var(--p-surface-warning-subdued); --p-banner-border:var(--p-banner-border-warning); }

.Polaris-Banner--withinContentContainer_1uwmg.Polaris-Banner--statusCritical_1iy3d{ --p-banner-background:var(--p-surface-critical-subdued); --p-banner-border:var(--p-banner-border-critical); }

.Polaris-Banner--withinContentContainer_1uwmg + .Polaris-Banner_z4w8k{ margin-top:0.8rem; }

.Polaris-Banner--withinContentContainer_1uwmg .Polaris-Banner__Actions_17m67{ padding:1.2rem 0 0.4rem 0; }

.Polaris-Banner--withinPage_kguwn{ border-radius:0 0 3px 3px; padding:2rem 2rem 1.8rem; --p-banner-background:var(--p-background); --p-banner-border:var(--p-banner-border-default); transition:box-shadow 200ms cubic-bezier(0.25, 0.1, 0.25, 1); transition-delay:100ms; box-shadow:var(--p-banner-border); position:relative; border-radius:var(--p-border-radius-wide); background-color:var(--p-banner-background); outline:0.1rem solid transparent; }

.Polaris-Banner--withinPage_kguwn .Polaris-Banner__ContentWrapper_1yvfo{ margin-top:-0.2rem; }

.Polaris-Banner--withinPage_kguwn::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-wide) + 0.1rem); }

.Polaris-Banner--withinPage_kguwn:focus{ outline:none; }

.Polaris-Banner--withinPage_kguwn.Polaris-Banner--keyFocused_1aqee{ box-shadow:var(--p-banner-border); }

.Polaris-Banner--withinPage_kguwn.Polaris-Banner--keyFocused_1aqee::after{ box-shadow:0 0 0 0.2rem var(--p-focused); outline:0.1rem solid transparent; }

.Polaris-Banner--withinPage_kguwn.Polaris-Banner--statusSuccess_pc5rl{ --p-banner-background:var(--p-surface-success-subdued); --p-banner-border:var(--p-banner-border-success); }

.Polaris-Banner--withinPage_kguwn.Polaris-Banner--statusInfo_knr66{ --p-banner-background:var(--p-surface-highlight-subdued); --p-banner-border:var(--p-banner-border-highlight); }

.Polaris-Banner--withinPage_kguwn.Polaris-Banner--statusWarning_1x66d{ --p-banner-background:var(--p-surface-warning-subdued); --p-banner-border:var(--p-banner-border-warning); }

.Polaris-Banner--withinPage_kguwn.Polaris-Banner--statusCritical_1iy3d{ --p-banner-background:var(--p-surface-critical-subdued); --p-banner-border:var(--p-banner-border-critical); }

.Polaris-Banner--withinPage_kguwn + .Polaris-Banner_z4w8k{ margin-top:2rem; }

.Polaris-Banner--withinPage_kguwn .Polaris-Banner__Ribbon_r8z8p{ padding-right:1.6rem; }

.Polaris-Banner--withinPage_kguwn .Polaris-Banner__Actions_17m67{ padding-top:1.6rem; }

.Polaris-Banner--withinPage_kguwn .Polaris-Banner__Dismiss_z8d6a{ right:1.6rem; top:2rem; position:absolute; }

.Polaris-Banner--hasDismiss_kf0ua{ padding-right:calc(3.2rem + var(--p-icon-size)); }

.Polaris-Banner__Heading_1brcv{ word-break:break-word; }

.Polaris-Banner__Content_xd1mk{ word-wrap:break-word; word-break:break-word; overflow-wrap:break-word; padding:0.2rem 0; }

.Polaris-Banner__Ribbon_r8z8p{ flex:0 0 3.2rem; }

.Polaris-Banner__PrimaryAction_eeemy{ margin-right:0.6rem; }

.Polaris-Banner__SecondaryAction_1dl4i{ -webkit-appearance:none; appearance:none; margin:0; padding:0; background:none; border:none; font-size:inherit; line-height:inherit; color:inherit; cursor:pointer; color:inherit; text-decoration:none; display:inline-block; text-align:left; margin:-0.8rem -0.6rem; padding:0.8rem 1.2rem; color:var(--p-text); padding-left:0.6rem; }

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

.Polaris-Banner__SecondaryAction_1dl4i:visited{ color:inherit; }

.Polaris-Banner__SecondaryAction_1dl4i:hover > .Polaris-Banner__Text_yj3uv{ box-shadow:0 -2px 0 0 rgba(var(--p-rgb-text), 0.75) inset; }

.Polaris-Banner__SecondaryAction_1dl4i:active > .Polaris-Banner__Text_yj3uv{ box-shadow:0 -2px 0 0 rgba(var(--p-rgb-text), 0) inset; }

.Polaris-Banner__SecondaryAction_1dl4i:focus > .Polaris-Banner__Text_yj3uv{ padding:2px 5px; margin:-2px -5px; background:var(--p-action-secondary-hovered); border-radius:3px; box-shadow:none; }

@media (-ms-high-contrast: active){ .Polaris-Banner__SecondaryAction_1dl4i:focus > .Polaris-Banner__Text_yj3uv{ outline:2px dotted; } }

.Polaris-Banner__Text_yj3uv{ box-shadow:0 -2px 0 0 rgba(var(--p-rgb-text), 0.25) inset; -webkit-backface-visibility:hidden; backface-visibility:hidden; will-change:box-shadow; transition:box-shadow 200ms cubic-bezier(0.25, 0.1, 0.25, 1); }

.Polaris-Banner__Button_r99lw{ 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-Banner__Button_r99lw svg{ fill:var(--p-icon); }

.Polaris-Banner__Button_r99lw::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-Banner__Button_r99lw:hover{ background:var(--p-action-secondary-hovered); outline:0.1rem solid transparent; }

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

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

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

.Polaris-Banner__Button_r99lw:active::after{ border:none; box-shadow:none; }

.Polaris-Banner__Button_r99lw.Polaris-Banner--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-Banner__Button_r99lw.Polaris-Banner--pressed_17w8v svg{ fill:currentColor; }

@media (-ms-high-contrast: active){ .Polaris-Banner__Button_r99lw{ border:1px solid windowText; } }

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

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

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

.Polaris-Banner--loading_1brcv{ position:relative; color:transparent; pointer-events:none; }

.Polaris-Banner__Spinner_mzr5w{ position:absolute; top:50%; left:50%; margin-top:-1rem; margin-left:-1rem; }