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

Shopify’s product component library

.Polaris-ResourceItem__CheckboxWrapper_11ah0{ display:flex; }

.Polaris-ResourceItem_1uu16{ position:relative; outline:none; cursor:pointer; }

.Polaris-ResourceItem_1uu16:not(.Polaris-ResourceItem--persistActions_1uj4i) .Polaris-ResourceItem__Actions_17m67{ right:1.6rem; }

.Polaris-ResourceItem_1uu16:hover:not(.Polaris-ResourceItem--newDesignLanguage_1rik8){ background-image:linear-gradient(rgba(223, 227, 232, 0.3), rgba(223, 227, 232, 0.3)); }

.Polaris-ResourceItem_1uu16:hover:not(.Polaris-ResourceItem--persistActions_1uj4i) .Polaris-ResourceItem__Actions_17m67{ clip:auto; overflow:visible; height:100%; }

@media (max-width: 45em), (min-width: 48.0625em) and (max-width: 61.5em){ [data-has-navigation] .Polaris-ResourceItem_1uu16:hover:not(.Polaris-ResourceItem--persistActions_1uj4i) .Polaris-ResourceItem__Actions_17m67{ display:none; } }

@media (max-width: 46.5em){ .Polaris-ResourceItem_1uu16:hover:not(.Polaris-ResourceItem--persistActions_1uj4i) .Polaris-ResourceItem__Actions_17m67{ display:none; } }

.Polaris-ResourceItem_1uu16:active:not(.Polaris-ResourceItem--newDesignLanguage_1rik8){ background-image:linear-gradient(rgba(179, 188, 245, 0.1), rgba(179, 188, 245, 0.1)); }

.Polaris-ResourceItem__ItemWrapper_1kbav{ overflow:hidden; max-width:100%; }

.Polaris-ResourceItem--selected_mijeo:not(.Polaris-ResourceItem--newDesignLanguage_1rik8){ background-image:linear-gradient(rgba(179, 188, 245, 0.15), rgba(179, 188, 245, 0.15)); }

.Polaris-ResourceItem--selected_mijeo:not(.Polaris-ResourceItem--newDesignLanguage_1rik8).Polaris-ResourceItem--focused_17w4h{ box-shadow:inset 0.2rem 0 0 #5c6ac4; background-image:linear-gradient(rgba(179, 188, 245, 0.15), rgba(179, 188, 245, 0.15)), linear-gradient(rgba(223, 227, 232, 0.3), rgba(223, 227, 232, 0.3)); }

.Polaris-ResourceItem--selected_mijeo:not(.Polaris-ResourceItem--newDesignLanguage_1rik8).Polaris-ResourceItem--focused_17w4h:hover{ box-shadow:inset 0.2rem 0 0 #5c6ac4; background-image:linear-gradient(rgba(179, 188, 245, 0.15), rgba(179, 188, 245, 0.15)), linear-gradient(rgba(223, 227, 232, 0.3), rgba(223, 227, 232, 0.3)), linear-gradient(rgba(223, 227, 232, 0.3), rgba(223, 227, 232, 0.3)); }

.Polaris-ResourceItem--selected_mijeo:not(.Polaris-ResourceItem--newDesignLanguage_1rik8):hover{ background-image:linear-gradient(rgba(179, 188, 245, 0.15), rgba(179, 188, 245, 0.15)), linear-gradient(rgba(223, 227, 232, 0.3), rgba(223, 227, 232, 0.3)); }

.Polaris-ResourceItem--selected_mijeo:not(.Polaris-ResourceItem--newDesignLanguage_1rik8):active{ background-image:linear-gradient(rgba(179, 188, 245, 0.15), rgba(179, 188, 245, 0.15)), linear-gradient(rgba(179, 188, 245, 0.1), rgba(179, 188, 245, 0.1)); }

.Polaris-ResourceItem--focused_17w4h:not(.Polaris-ResourceItem--newDesignLanguage_1rik8){ box-shadow:inset 0.2rem 0 0 #5c6ac4; background-image:linear-gradient(rgba(223, 227, 232, 0.3), rgba(223, 227, 232, 0.3)); }

.Polaris-ResourceItem--focused_17w4h:not(.Polaris-ResourceItem--newDesignLanguage_1rik8):hover{ box-shadow:inset 0.2rem 0 0 #5c6ac4; background-image:linear-gradient(rgba(223, 227, 232, 0.3), rgba(223, 227, 232, 0.3)), linear-gradient(rgba(223, 227, 232, 0.3), rgba(223, 227, 232, 0.3)); }

.Polaris-ResourceItem--focused_17w4h:not(.Polaris-ResourceItem--newDesignLanguage_1rik8):active{ box-shadow:inset 0.2rem 0 0 #5c6ac4; background-image:linear-gradient(rgba(223, 227, 232, 0.3), rgba(223, 227, 232, 0.3)), linear-gradient(rgba(179, 188, 245, 0.1), rgba(179, 188, 245, 0.1)); }

.Polaris-ResourceItem--focusedInner_426pi, .Polaris-ResourceItem--focusedInner_426pi.Polaris-ResourceItem--focused_17w4h, .Polaris-ResourceItem--focusedInner_426pi.Polaris-ResourceItem--focused_17w4h.Polaris-ResourceItem--selected_mijeo{ box-shadow:none; }

.Polaris-ResourceItem__Link_yj5sy, .Polaris-ResourceItem__Button_r99lw{ position:absolute; z-index:1; top:0; left:0; height:100%; width:100%; opacity:0; }

.Polaris-ResourceItem__Button_r99lw{ padding:0; border:none; }

.Polaris-ResourceItem__Container_13mbo{ position:relative; z-index:2; padding:1.2rem 1.6rem; min-height:4.4rem; display:flex; align-items:flex-start; }

@media (min-width: 28.625em){ .Polaris-ResourceItem__Container_13mbo{ padding:1.2rem 2rem; } }

.Polaris-ResourceItem--alignmentLeading_1pu7t{ align-items:flex-start; }

.Polaris-ResourceItem--alignmentTrailing_cp27m{ align-items:flex-end; }

.Polaris-ResourceItem--alignmentCenter_1rtaw{ align-items:center; }

.Polaris-ResourceItem--alignmentFill_m3d4l{ align-items:stretch; }

.Polaris-ResourceItem--alignmentBaseline_aupj5{ align-items:baseline; }

.Polaris-ResourceItem__Owned_2ppue{ display:flex; }

.Polaris-ResourceItem__OwnedNoMedia_19z6h{ padding-top:0.4rem; }

.Polaris-ResourceItem__Handle_ja6k3{ width:4.8rem; min-height:4.4rem; justify-content:center; align-items:center; margin:-1.2rem 0.4rem -1.2rem -1.2rem; display:flex; }

@media (max-width: 28.615em){ .Polaris-ResourceItem__Handle_ja6k3{ visibility:hidden; }
  .Polaris-ResourceItem--selectMode_4098j .Polaris-ResourceItem__Handle_ja6k3{ visibility:visible; } }

.Polaris-ResourceItem--selectable_1tkx2{ width:calc(100% + 4rem); transform:translateX(-4rem); transition:transform cubic-bezier(0.64, 0, 0.35, 1) 200ms; margin-right:-4rem; }

.Polaris-ResourceItem--selectable_1tkx2.Polaris-ResourceItem--selectMode_4098j{ transform:translateX(0); }

@media (min-width: 28.625em){ .Polaris-ResourceItem--selectable_1tkx2{ width:100%; transform:translateX(0); margin-right:0; } }

.Polaris-ResourceItem__Media_2t8qq{ flex:0 0 auto; margin-right:2rem; color:inherit; text-decoration:none; }

.Polaris-ResourceItem__Content_xd1mk{ min-width:0; max-width:100%; flex:1 1 auto; }

.Polaris-ResourceItem__Actions_17m67{ position:absolute; top:0; display:flex; pointer-events:initial; height:100%; max-height:5.6rem; clip:rect(1px, 1px, 1px, 1px); overflow:hidden; height:1px; }

.Polaris-ResourceItem--focused_17w4h .Polaris-ResourceItem__Actions_17m67{ clip:auto; overflow:visible; height:100%; }

@media (max-width: 45em), (min-width: 48.0625em) and (max-width: 61.5em){ [data-has-navigation] .Polaris-ResourceItem__Actions_17m67{ display:none; } }

@media (max-width: 46.5em){ .Polaris-ResourceItem__Actions_17m67{ display:none; } }

.Polaris-ResourceItem--persistActions_1uj4i .Polaris-ResourceItem__Actions_17m67{ position:relative; display:flex; flex:0 0 auto; flex-basis:auto; align-items:center; margin-top:0; margin-left:1.6rem; pointer-events:initial; height:100%; }

@media (max-width: 45em), (min-width: 48.0625em) and (max-width: 61.5em){ [data-has-navigation] .Polaris-ResourceItem--persistActions_1uj4i .Polaris-ResourceItem__Actions_17m67{ display:none; } }

@media (max-width: 46.5em){ .Polaris-ResourceItem--persistActions_1uj4i .Polaris-ResourceItem__Actions_17m67{ display:none; } }

.Polaris-ResourceItem__Disclosure_yr3nn{ position:relative; top:-1.2rem; right:-1.6rem; display:none; width:4.8rem; min-height:4.4rem; pointer-events:initial; }

.Polaris-ResourceItem--selectMode_4098j .Polaris-ResourceItem__Disclosure_yr3nn{ display:none; }

@media (max-width: 45em), (min-width: 48.0625em) and (max-width: 61.5em){ [data-has-navigation] .Polaris-ResourceItem__Disclosure_yr3nn{ display:flex; flex:0 0 4.8rem; justify-content:center; align-items:center; } }

@media (max-width: 46.5em){ .Polaris-ResourceItem__Disclosure_yr3nn{ display:flex; flex:0 0 4.8rem; justify-content:center; align-items:center; } }

.Polaris-ResourceItem--newDesignLanguage_1rik8.Polaris-ResourceItem--selected_mijeo{ background-color:var(--p-surface-selected); }

.Polaris-ResourceItem--newDesignLanguage_1rik8:hover{ background-color:var(--p-surface-selected-hovered); }

.Polaris-ResourceItem--newDesignLanguage_1rik8:active{ background-color:var(--p-surface-selected-pressed); }

.Polaris-ResourceItem__ListItem_wxd2m + .Polaris-ResourceItem__ListItem_wxd2m{ border-top:0.1rem solid var(--p-divider, #dfe3e8); }

.Polaris-ResourceItem__ListItem_wxd2m.Polaris-ResourceItem--newDesignLanguage_1rik8{ position:relative; position:relative; }

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

.Polaris-ResourceItem__ListItem_wxd2m.Polaris-ResourceItem--newDesignLanguage_1rik8::after{ border-radius:0.2rem; }

.Polaris-ResourceItem__ListItem_wxd2m.Polaris-ResourceItem--newDesignLanguage_1rik8:last-of-type.Polaris-ResourceItem--focused_17w4h::after{ border-bottom-left-radius:var(--p-border-radius-wide); border-bottom-right-radius:var(--p-border-radius-wide); }

.Polaris-ResourceItem__ListItem_wxd2m.Polaris-ResourceItem--newDesignLanguage_1rik8.Polaris-ResourceItem--focused_17w4h{ z-index:1; }

.Polaris-ResourceItem__ListItem_wxd2m.Polaris-ResourceItem--newDesignLanguage_1rik8.Polaris-ResourceItem--focused_17w4h::after{ box-shadow:0 0 0 0.2rem var(--p-focused); }

@media (-ms-high-contrast: active){ .Polaris-ResourceItem__ListItem_wxd2m.Polaris-ResourceItem--newDesignLanguage_1rik8.Polaris-ResourceItem--focused_17w4h::after{ outline:1px solid windowText; } }

* + ul > .Polaris-ResourceItem__ListItem_wxd2m.Polaris-ResourceItem--newDesignLanguage_1rik8:first-of-type.Polaris-ResourceItem--focused_17w4h::after{ top:0.1rem; }