@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: 1rem 1rem 0.875rem; --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.0625rem solid transparent; }

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

.Polaris-Banner--withinContentContainer_1uwmg .Polaris-Banner__Dismiss_z8d6a { top: 1rem; right: 0.75rem; position: absolute; }

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

.Polaris-Banner--withinContentContainer_1uwmg::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 100ms var(--p-ease); border-radius: calc(var(--p-border-radius-base) + 0.0625rem); }

.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.125rem var(--p-focused); outline: 0.0625rem 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.5rem; }

.Polaris-Banner--withinContentContainer_1uwmg .Polaris-Banner__Actions_17m67 { padding: 0.75rem 0 0.25rem 0; }

.Polaris-Banner--withinPage_kguwn { border-radius: 0 0 0.1875rem 0.1875rem; padding: 1.25rem 1.25rem 1.125rem; --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.0625rem solid transparent; }

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

.Polaris-Banner--withinPage_kguwn::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 100ms var(--p-ease); border-radius: calc(var(--p-border-radius-wide) + 0.0625rem); }

.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.125rem var(--p-focused); outline: 0.0625rem 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: 1.25rem; }

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

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

.Polaris-Banner--withinPage_kguwn .Polaris-Banner__Dismiss_z8d6a { right: 1rem; top: 1.25rem; position: absolute; }

.Polaris-Banner--hasDismiss_kf0ua { padding-right: calc(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.125rem 0; }

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

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

.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.5rem -0.375rem; padding: 0.5rem 0.75rem; color: var(--p-text); padding-left: 0.375rem; }

.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 -0.125rem 0 0 rgba(var(--p-rgb-text), 0.75) inset; }

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

.Polaris-Banner__SecondaryAction_1dl4i:focus > .Polaris-Banner__Text_yj3uv { padding: 0.125rem 0.3125rem; margin: -0.125rem -0.3125rem; background: var(--p-action-secondary-hovered); border-radius: 0.1875rem; box-shadow: none; background-color: transparent; display: block; }

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

.Polaris-Banner__SecondaryAction_1dl4i:focus > .Polaris-Banner__Text_yj3uv::after { box-shadow: 0 0 0 0.125rem var(--p-focused); outline: 0.0625rem solid transparent; }

.Polaris-Banner__Text_yj3uv { position: relative; box-shadow: 0 -0.125rem 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__Text_yj3uv::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 100ms var(--p-ease); border-radius: calc(var(--p-border-radius-base) + 0.0625rem); }

.Polaris-Banner__Button_r99lw { position: relative; position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 2.25rem; min-width: 2.25rem; margin: 0; padding: 0.4375rem 1rem; background: var(--p-surface); box-shadow: var(--p-button-drop-shadow); border-radius: var(--p-border-radius-base); color: var(--p-text); border: 0.0625rem 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: 0.9375rem; font-weight: var(--p-button-font-weight); line-height: 1rem; 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.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 100ms var(--p-ease); border-radius: calc(var(--p-border-radius-base) + 0.0625rem); }

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

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

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

.Polaris-Banner__Button_r99lw:focus::after { box-shadow: 0 0 0 0.125rem var(--p-focused); outline: 0.0625rem 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: -0.625rem; margin-left: -0.625rem; }