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

Shopify’s admin 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); 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__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; appearance:none; margin:0; padding:0; background:none; border:none; font-size:inherit; line-height:inherit; color:inherit; cursor:pointer; font-size:1.5rem; font-weight:400; line-height:2rem; text-transform:initial; letter-spacing:initial; color:var(--p-text-subdued); color:var(--p-text); position:relative; justify-content:center; width:100%; min-width:100%; margin-top:1px; margin-bottom:-1px; padding:0.8rem 0.4rem; 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); background-color:transparent; }

.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:active .Polaris-Tabs__Title_2qj8j::before{ background:var(--p-surface-primary-selected-pressed); }

.Polaris-Tabs__Tab_375k2:focus .Polaris-Tabs__Title_2qj8j{ font-weight:400; color:var(--p-text); }

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

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

.Polaris-Tabs__Tab--selected_11sap:focus .Polaris-Tabs__Title_2qj8j{ outline:0.3rem solid transparent; }

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

.Polaris-Tabs__Tab--selected_11sap .Polaris-Tabs__Title_2qj8j{ outline:0.3rem solid transparent; color:var(--p-text); }

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

.Polaris-Tabs__Title_2qj8j{ position:relative; border-radius:var(--p-border-radius-base); display:block; padding:0.8rem 1.6rem; min-width:5rem; color:var(--p-text-subdued); }

.Polaris-Tabs__Title_2qj8j::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-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--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; }

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

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

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

.Polaris-Tabs__Item_yiyol::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-Tabs__Item_yiyol::-moz-focus-inner{ border:none; }

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

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

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

.Polaris-Tabs__DisclosureTab_1qbhg{ display:none; }

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

.Polaris-Tabs__DisclosureActivator_1mita{ position:relative; height:100%; background-color:transparent; cursor:pointer; border:none; outline:none; margin:1px 1px -1px 0; }

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

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

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

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