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

Shopify’s product component library

.Polaris-Tabs_yjc8o{ display:flex; flex-wrap:wrap; margin:0; padding:0; list-style:none; }

.Polaris-Tabs__Wrapper_mkrm3{ border-bottom:0.1rem solid var(--p-divider, #dfe3e8); }

.Polaris-Tabs__Wrapper_mkrm3.Polaris-Tabs--newDesignLanguage_1rik8{ padding:0 0.8rem; }

.Polaris-Tabs--fitted_ijluy{ flex-wrap:nowrap; }

.Polaris-Tabs--fitted_ijluy .Polaris-Tabs__TabContainer_dsj6d{ flex:1 1 100%; }

.Polaris-Tabs--fitted_ijluy .Polaris-Tabs__Tab_375k2{ padding:0; }

.Polaris-Tabs--fitted_ijluy .Polaris-Tabs__Title_2qj8j{ width:100%; padding:0.8rem 1.6rem; }

.Polaris-Tabs--fillSpace_yc42y .Polaris-Tabs__TabContainer_dsj6d{ flex:1 1 auto; }

.Polaris-Tabs__TabContainer_dsj6d{ display:flex; margin:0; padding:0; }

.Polaris-Tabs__Tab_375k2{ color:inherit; text-decoration:none; -webkit-appearance:none; -moz-appearance:none; appearance:none; margin:0; padding:0; background:none; border:none; font-size:inherit; line-height:inherit; cursor:pointer; font-size:1.5rem; font-weight:400; line-height:2rem; text-transform:initial; letter-spacing:initial; color:var(--p-text-subdued, #637381); color:var(--p-text, #637381); position:relative; justify-content:center; width:100%; min-width:100%; margin-top:1px; margin-bottom:-1px; padding:0 1.6rem; outline:none; text-align:center; white-space:nowrap; text-decoration:none; cursor:pointer; }

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

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

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

.Polaris-Tabs__Tab_375k2:hover{ text-decoration:none; }

.Polaris-Tabs__Tab_375k2:hover .Polaris-Tabs__Title_2qj8j{ font-weight:400; color:var(--p-text, #212b36); background-color:transparent; border-bottom:var(--p-override-none, 0.3rem) solid #dfe3e8; }

.Polaris-Tabs__Tab_375k2:hover .Polaris-Tabs__Title_2qj8j::before{ background-color:var(--p-border-hovered); }

.Polaris-Tabs__Tab_375k2:active .Polaris-Tabs__Title_2qj8j{ background-color:transparent; }

.Polaris-Tabs__Tab_375k2:focus{ box-shadow:var(--p-override-none, inset 0 0 2px 0 rgba(0, 0, 0, 0.8), 0 0 2px 0 rgba(0, 0, 0, 0.8)); }

.Polaris-Tabs__Tab_375k2:focus .Polaris-Tabs__Title_2qj8j{ font-weight:400; color:var(--p-text, #212b36); border-bottom:var(--p-override-none, 0.3rem) solid #b3bcf5; }

.Polaris-Tabs__Tab_375k2:focus:not(:active) .Polaris-Tabs__Title_2qj8j::after{ box-shadow:0 0 0 0.2rem var(--p-focused); }

@media (-ms-high-contrast: active){ .Polaris-Tabs__Tab_375k2:focus:not(:active) .Polaris-Tabs__Title_2qj8j::after{ outline:1px solid windowText; } }

.Polaris-Tabs__Tab_375k2.Polaris-Tabs__Tab--selected_11sap .Polaris-Tabs__Title_2qj8j{ border-bottom:var(--p-override-none, 0.3rem) solid #5c6ac4; }

@media (-ms-high-contrast: active){ .Polaris-Tabs__Tab_375k2.Polaris-Tabs__Tab--selected_11sap .Polaris-Tabs__Title_2qj8j{ outline:1px solid; } }

.Polaris-Tabs__Tab--selected_11sap{ font-weight:400; color:var(--p-text, #212b36); }

.Polaris-Tabs__Title_2qj8j{ position:relative; border-radius:var(--p-border-radius-base, 0); display:block; padding:1.6rem 0 1.3rem 0; border-bottom:var(--p-override-none, 0.3rem) solid transparent; min-width:5rem; }

.Polaris-Tabs__Title_2qj8j::after{ content:var(--p-non-null-content, none); 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-Tabs--titleWithIcon_11lkm{ display:flex; }

.Polaris-Tabs__Panel_2vct4{ display:block; }

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

.Polaris-Tabs__Panel--hidden_1h4kj{ display:none; }

.Polaris-Tabs__List_yj3nl{ list-style:none; margin:0; padding:0.8rem 0; }

.Polaris-Tabs__List_yj3nl.Polaris-Tabs--newDesignLanguage_1rik8{ padding:0.8rem; }

.Polaris-Tabs__Item_yiyol{ color:inherit; text-decoration:none; -webkit-appearance:none; -moz-appearance:none; appearance:none; margin:0; padding:0; background:none; border:none; font-size:inherit; line-height:inherit; cursor:pointer; display:block; width:100%; min-height:1.6rem; padding:0.8rem 1.6rem; text-align:left; cursor:pointer; }

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

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

.Polaris-Tabs__Item_yiyol::-moz-focus-inner{ border:none; }

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

.Polaris-Tabs__Item_yiyol:not(.Polaris-Tabs--newDesignLanguage_1rik8):active:hover{ background-image:linear-gradient(rgba(179, 188, 245, 0.1), rgba(179, 188, 245, 0.1)), linear-gradient(rgba(223, 227, 232, 0.3), rgba(223, 227, 232, 0.3)); }

.Polaris-Tabs__Item_yiyol:not(.Polaris-Tabs--newDesignLanguage_1rik8):active:hover:focus{ box-shadow:inset 0.2rem 0 0 #5c6ac4; background-image:linear-gradient(rgba(179, 188, 245, 0.1), rgba(179, 188, 245, 0.1)), 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-Tabs__Item_yiyol:not(.Polaris-Tabs--newDesignLanguage_1rik8):hover{ background-image:linear-gradient(rgba(223, 227, 232, 0.3), rgba(223, 227, 232, 0.3)); }

.Polaris-Tabs__Item_yiyol:not(.Polaris-Tabs--newDesignLanguage_1rik8):hover:focus{ 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-Tabs__Item_yiyol:not(.Polaris-Tabs--newDesignLanguage_1rik8):focus{ 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-Tabs__Item_yiyol.Polaris-Tabs--newDesignLanguage_1rik8{ border-radius:var(--p-border-radius-base); position:relative; }

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

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

.Polaris-Tabs__Item_yiyol.Polaris-Tabs--newDesignLanguage_1rik8::after{ content:var(--p-non-null-content, none); 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-Tabs__Item_yiyol.Polaris-Tabs--newDesignLanguage_1rik8:focus:not(:active)::after{ box-shadow:0 0 0 0.2rem var(--p-focused); }

@media (-ms-high-contrast: active){ .Polaris-Tabs__Item_yiyol.Polaris-Tabs--newDesignLanguage_1rik8:focus:not(:active)::after{ outline:1px solid windowText; } }

.Polaris-Tabs__DisclosureTab_1qbhg{ display:none; }

.Polaris-Tabs__DisclosureTab--visible_1v5xr{ display:flex; }

.Polaris-Tabs__DisclosureActivator_1mita{ position:relative; display:block; justify-content:center; height:100%; margin:1px 1px -1px 0; padding:0 1.6rem; background-color:transparent; cursor:pointer; border:none; outline:none; text-align:center; }

.Polaris-Tabs__DisclosureActivator_1mita svg{ fill:var(--p-icon-subdued, #637381); }

.Polaris-Tabs__DisclosureActivator_1mita:hover .Polaris-Tabs__Title_2qj8j{ background-color:var(--p-surface-hovered, transparent); border-bottom:var(--p-override-none, 0.3rem) solid #dfe3e8; }

.Polaris-Tabs__DisclosureActivator_1mita:hover .Polaris-Tabs__Title_2qj8j svg{ fill:var(--p-icon, #637381); }

.Polaris-Tabs__DisclosureActivator_1mita:focus{ box-shadow:var(--p-override-none, inset 0 0 2px 0 rgba(0, 0, 0, 0.8), 0 0 2px 0 rgba(0, 0, 0, 0.8)); }

.Polaris-Tabs__DisclosureActivator_1mita:focus .Polaris-Tabs__Title_2qj8j{ border-bottom:var(--p-override-none, 0.3rem) solid #b3bcf5; }

.Polaris-Tabs__DisclosureActivator_1mita:active .Polaris-Tabs__Title_2qj8j{ background-color:var(--p-surface-pressed, transparent); }

.Polaris-Tabs__TabMeasurer_1aget{ display:flex; visibility:hidden; height:0; }

.Polaris-Tabs--newDesignLanguage_1rik8 .Polaris-Tabs__Title_2qj8j{ color:var(--p-text-subdued); padding:0.8rem 1.6rem; }

.Polaris-Tabs--newDesignLanguage_1rik8 .Polaris-Tabs__Title_2qj8j::before{ content:''; position:absolute; bottom:-0.8rem; left:0; right:0; height:0.3rem; border-top-left-radius:var(--p-border-radius-base); border-top-right-radius:var(--p-border-radius-base); }

.Polaris-Tabs--newDesignLanguage_1rik8 .Polaris-Tabs__Tab_375k2{ padding:0.8rem 0.4rem; }

.Polaris-Tabs--newDesignLanguage_1rik8 .Polaris-Tabs__Tab_375k2:focus .Polaris-Tabs__Title_2qj8j::before{ background:var(--p-border-hovered); }

.Polaris-Tabs--newDesignLanguage_1rik8 .Polaris-Tabs__Tab_375k2:active .Polaris-Tabs__Title_2qj8j::before{ background:var(--p-surface-primary-selected-pressed); }

.Polaris-Tabs--newDesignLanguage_1rik8 .Polaris-Tabs__DisclosureActivator_1mita{ margin:1px 0 -1px; padding:0.8rem 0.8rem 0.8rem 0; }

.Polaris-Tabs--newDesignLanguage_1rik8 .Polaris-Tabs__Tab--selected_11sap .Polaris-Tabs__Title_2qj8j{ color:var(--p-text); }

.Polaris-Tabs--newDesignLanguage_1rik8 .Polaris-Tabs__Tab--selected_11sap .Polaris-Tabs__Title_2qj8j::before{ background:var(--p-action-primary); }

@media (-ms-high-contrast: active){ .Polaris-Tabs--newDesignLanguage_1rik8 .Polaris-Tabs__Tab--selected_11sap .Polaris-Tabs__Title_2qj8j::before{ display:none; } }