@gsretail.com/gui-core/build/core/Tabs/GuiTabs.styled.js

A skeleton to create your own React component library using Rollup, TypeScript, Sass and Storybook

import{__makeTemplateObject as n}from"../../node_modules/tslib/tslib.es6.js";import i from"@emotion/styled";var e,t=function(t){return i(t)(e||(e=n(["\n\n  &.gui-tabs {\n    align-items: center;\n\n    // design default\n    & .MuiTabs-root {\n      .MuiTab-root {\n        padding: 5px 16px 4px;\n        text-transform: none;\n        font-weight: 500;\n        font-size: 0.875rem;  // 14px\n\n        &.Mui-selected {\n          z-index: 1;\n\n          &:hover {\n            background-color: transparent;\n          }\n        }\n\n        &:not(.Mui-selected):hover {\n          color: ",";\n        }\n      }\n    }\n\n    &.design-contained {\n      & .MuiTabs-root {\n        & .MuiTab-root {\n          &.Mui-selected {\n            color: ",";\n          }\n        }\n      }\n      & .MuiTabs-indicator {\n        height: 100%;\n        background-color: ",";\n      }\n    }\n\n    &.design-outlined {\n      & .MuiTabs-indicator {\n        height: 100%;\n        background-color: transparent;\n        border: 1px solid ",";\n      }\n    }\n\n    &.size-small {\n      & .MuiTabs-root {\n        min-height: 32px;\n\n        & .MuiTab-root {\n          min-height: 32px;\n          border-radius: 4px;\n        }\n      }\n      & .MuiTabs-indicator {\n        border-radius: 4px;\n      }\n    }\n\n    &.size-medium {\n      & .MuiTabs-root {\n        min-height: 36px;\n\n        & .MuiTab-root {\n          min-height: 36px;\n          border-radius: 6px;\n        }\n      }\n      & .MuiTabs-indicator {\n        border-radius: 6px;\n      }\n    }\n\n    &.size-large {\n      & .MuiTabs-root {\n        min-height: 40px;\n\n        & .MuiTab-root {\n          min-height: 40px;\n          border-radius: 8px;\n        }\n      }\n      & .MuiTabs-indicator {\n        border-radius: 8px;\n      }\n    }\n\n    & .MuiGrid-item:first-of-type {\n      flex-basis: auto;\n      flex-grow: 0;\n\n      & .MuiTabs-flexContainer {\n        align-items: center;\n      }\n    }\n    & .sideSection {\n      display: flex;\n      flex-wrap: wrap;\n      align-items: center;\n      justify-content: flex-end;\n      flex-grow: 1;\n      gap: 6px;\n\n      @media (max-width: ","px) {\n        justify-content: flex-start;\n        flex-wrap: wrap;\n        padding-top: 8px;\n      }\n    }\n  }\n"],["\n\n  &.gui-tabs {\n    align-items: center;\n\n    // design default\n    & .MuiTabs-root {\n      .MuiTab-root {\n        padding: 5px 16px 4px;\n        text-transform: none;\n        font-weight: 500;\n        font-size: 0.875rem;  // 14px\n\n        &.Mui-selected {\n          z-index: 1;\n\n          &:hover {\n            background-color: transparent;\n          }\n        }\n\n        &:not(.Mui-selected):hover {\n          color: ",";\n        }\n      }\n    }\n\n    &.design-contained {\n      & .MuiTabs-root {\n        & .MuiTab-root {\n          &.Mui-selected {\n            color: ",";\n          }\n        }\n      }\n      & .MuiTabs-indicator {\n        height: 100%;\n        background-color: ",";\n      }\n    }\n\n    &.design-outlined {\n      & .MuiTabs-indicator {\n        height: 100%;\n        background-color: transparent;\n        border: 1px solid ",";\n      }\n    }\n\n    &.size-small {\n      & .MuiTabs-root {\n        min-height: 32px;\n\n        & .MuiTab-root {\n          min-height: 32px;\n          border-radius: 4px;\n        }\n      }\n      & .MuiTabs-indicator {\n        border-radius: 4px;\n      }\n    }\n\n    &.size-medium {\n      & .MuiTabs-root {\n        min-height: 36px;\n\n        & .MuiTab-root {\n          min-height: 36px;\n          border-radius: 6px;\n        }\n      }\n      & .MuiTabs-indicator {\n        border-radius: 6px;\n      }\n    }\n\n    &.size-large {\n      & .MuiTabs-root {\n        min-height: 40px;\n\n        & .MuiTab-root {\n          min-height: 40px;\n          border-radius: 8px;\n        }\n      }\n      & .MuiTabs-indicator {\n        border-radius: 8px;\n      }\n    }\n\n    & .MuiGrid-item:first-of-type {\n      flex-basis: auto;\n      flex-grow: 0;\n\n      & .MuiTabs-flexContainer {\n        align-items: center;\n      }\n    }\n    & .sideSection {\n      display: flex;\n      flex-wrap: wrap;\n      align-items: center;\n      justify-content: flex-end;\n      flex-grow: 1;\n      gap: 6px;\n\n      @media (max-width: ","px) {\n        justify-content: flex-start;\n        flex-wrap: wrap;\n        padding-top: 8px;\n      }\n    }\n  }\n"])),(function(n){return n.theme.palette.common.black}),(function(n){return n.theme.palette.common.white}),(function(n){return n.theme.palette.primary.main}),(function(n){return n.theme.palette.primary.main}),(function(n){return n.theme.breakpoints.values.lg}))};export{t as default};