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

Shopify’s admin product component library

/* stylelint-disable unit-disallowed-list */
/* stylelint-disable length-zero-no-unit */
/* Breakpoints - Aliases */
/* Breakpoints - Media conditions */
.Polaris-Banner_z4w8k { --pc-banner-secondary-action-horizontal-padding: var(--p-space-3); --pc-banner-secondary-action-vertical-padding: calc((var(--p-line-height-6) - var(--p-line-height-2))*0.5); 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 { margin-top: calc(var(--p-space-05)*-1); flex: 1 1 auto; }

.Polaris-Banner--withinContentContainer_1uwmg { padding: var(--p-space-4); --pc-banner-background: var(--p-background); --pc-banner-border: var(--p-banner-border-default); transition: box-shadow var(--p-duration-200) var(--p-ease); transition-delay: var(--p-duration-100); box-shadow: var(--pc-banner-border); outline: var(--p-border-width-1) solid transparent; position: relative; border-radius: var(--p-border-radius-1); background-color: var(--pc-banner-background); }

.Polaris-Banner--withinContentContainer_1uwmg .Polaris-Banner__Dismiss_z8d6a { top: var(--p-space-4); right: var(--p-space-3); position: absolute; }

.Polaris-Banner--withinContentContainer_1uwmg .Polaris-Banner__Ribbon_r8z8p { padding-right: var(--p-space-4); }

.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 var(--p-duration-100) var(--p-ease); border-radius: calc(var(--p-border-radius-1) + 0.0625rem); }

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

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

.Polaris-Banner--withinContentContainer_1uwmg.Polaris-Banner--keyFocused_1aqee::after { box-shadow: 0 0 0 0.125rem var(--p-focused); outline: var(--p-border-width-1) solid transparent; }

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

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

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

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

.Polaris-Banner--withinContentContainer_1uwmg + .Polaris-Banner_z4w8k { margin-top: var(--p-space-2); }

.Polaris-Banner--withinContentContainer_1uwmg .Polaris-Banner__Actions_17m67 { padding: var(--p-space-3) 0 var(--p-space-1) 0; }

.Polaris-Banner--withinPage_kguwn { border-radius: 0 0 var(--p-border-radius-base) var(--p-border-radius-base); padding: var(--p-space-5); --pc-banner-background: var(--p-background); --pc-banner-border: var(--p-banner-border-default); transition: box-shadow var(--p-duration-200) var(--p-ease); transition-delay: var(--p-duration-100); box-shadow: var(--pc-banner-border); outline: var(--p-border-width-1) solid transparent; position: relative; border-radius: var(--p-border-radius-2); background-color: var(--pc-banner-background); }

.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 var(--p-duration-100) var(--p-ease); border-radius: calc(var(--p-border-radius-2) + 0.0625rem); }

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

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

.Polaris-Banner--withinPage_kguwn.Polaris-Banner--keyFocused_1aqee::after { box-shadow: 0 0 0 0.125rem var(--p-focused); outline: var(--p-border-width-1) solid transparent; }

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

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

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

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

.Polaris-Banner--withinPage_kguwn + .Polaris-Banner_z4w8k { margin-top: var(--p-space-5); }

.Polaris-Banner--withinPage_kguwn .Polaris-Banner__Ribbon_r8z8p { padding-right: var(--p-space-4); }

.Polaris-Banner--withinPage_kguwn .Polaris-Banner__Actions_17m67 { padding-top: var(--p-space-4); }

.Polaris-Banner--withinPage_kguwn .Polaris-Banner__Dismiss_z8d6a { right: var(--p-space-4); top: var(--p-space-5); position: absolute; }

.Polaris-Banner--hasDismiss_kf0ua { padding-right: calc(var(--p-space-8) + var(--p-icon-size-small)); }

.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: var(--p-space-05) 0; }

.Polaris-Banner__Ribbon_r8z8p { flex: 0 0 var(--p-space-8); }

.Polaris-Banner__PrimaryAction_eeemy { margin-right: var(--p-space-2); }

.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; display: inline-block; text-align: left; text-decoration: none; margin: calc(var(--pc-banner-secondary-action-vertical-padding)*-1) calc(var(--pc-banner-secondary-action-horizontal-padding)*-0.5); padding: var(--pc-banner-secondary-action-vertical-padding) var(--pc-banner-secondary-action-horizontal-padding); color: var(--p-text); padding-left: var(--p-space-2); }

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

.Polaris-Banner__SecondaryAction_1dl4i:hover > .Polaris-Banner__Text_yj3uv { text-decoration: underline; }

.Polaris-Banner__SecondaryAction_1dl4i:active > .Polaris-Banner__Text_yj3uv { text-decoration: underline; }

.Polaris-Banner__SecondaryAction_1dl4i:focus > .Polaris-Banner__Text_yj3uv { padding: var(--p-space-05) var(--p-space-1); margin: calc(var(--p-space-05)*-1) calc(var(--p-space-1)*-1); background: transparent; border-radius: var(--p-border-radius-base); box-shadow: none; text-decoration: underline; }

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

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

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

.Polaris-Banner__Text_yj3uv { position: relative; }

.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 var(--p-duration-100) var(--p-ease); border-radius: calc(var(--p-border-radius-1) + 0.0625rem); }

.Polaris-Banner__Button_r99lw { position: relative; position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: var(--p-line-height-6); min-width: var(--p-line-height-6); margin: 0; padding: calc((var(--p-line-height-6) - var(--p-line-height-2) - var(--p-space-05))/2) var(--p-space-4); background: var(--p-surface); box-shadow: var(--p-shadow-button); border-radius: var(--p-border-radius-1); color: var(--p-text); border: var(--p-border-width-1) 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: var(--p-font-size-4); font-weight: var(--p-font-weight-medium); line-height: var(--p-line-height-1); 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: calc(var(--p-border-width-1)*-1 + -0.0625rem); right: calc(var(--p-border-width-1)*-1 + -0.0625rem); bottom: calc(var(--p-border-width-1)*-1 + -0.0625rem); left: calc(var(--p-border-width-1)*-1 + -0.0625rem); display: block; pointer-events: none; box-shadow: 0 0 0 calc(var(--p-border-width-1)*-1 + -0.0625rem) var(--p-focused); transition: box-shadow var(--p-duration-100) var(--p-ease); border-radius: calc(var(--p-border-radius-1) + 0.0625rem); }

.Polaris-Banner__Button_r99lw:hover { background: var(--p-action-secondary-hovered); outline: var(--p-border-width-1) solid transparent; }

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

.Polaris-Banner__Button_r99lw:focus::after { box-shadow: 0 0 0 0.125rem var(--p-focused); outline: var(--p-border-width-1) solid transparent; }

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

.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-shadows-inset-button-pressed); 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: var(--p-border-width-1) solid windowText; } }

@media (min-width: 40em) { .Polaris-Banner__Button_r99lw { font-size: var(--p-font-size-3); } }

.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 var(--p-duration-100) var(--p-ease); border-radius: calc(var(--p-border-radius-1) + 0.0625rem); }

.Polaris-Banner__Button_r99lw:focus::after { box-shadow: 0 0 0 0.125rem var(--p-focused); outline: var(--p-border-width-1) solid transparent; }

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

.Polaris-Banner__Spinner_mzr5w { --pc-spinner-size: var(--p-space-5); position: absolute; top: 50%; left: 50%; margin-top: calc((var(--pc-spinner-size)/2)*-1); margin-left: calc((var(--pc-spinner-size)/2)*-1); }