@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.0625rem solid var(--p-divider); padding: 0 0.5rem; }

.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.5rem 1rem; }

.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: 0.9375rem; font-weight: 400; line-height: 1.25rem; 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: 0.0625rem; margin-bottom: -0.0625rem; padding: 0.5rem 0.25rem; 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: 0.875rem; } }

.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.125rem var(--p-focused); outline: 0.0625rem 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.1875rem 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.1875rem 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.5rem 1rem; min-width: 3.125rem; color: var(--p-text-subdued); }

.Polaris-Tabs__Title_2qj8j::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-Tabs__Title_2qj8j::before { content: ''; position: absolute; bottom: -0.5rem; left: 0; right: 0; height: 0.1875rem; 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.5rem; }

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

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