@stokr/components-library/dist/components/TabsNav/TabsNav.styles.js

STOKR - Components Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.TabsWrapper = exports.StyledTabs = exports.StyledTab = exports.Scroll = exports.LinkText = void 0;
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _rwd = _interopRequireDefault(require("../../styles/rwd"));
var _theme = _interopRequireDefault(require("../../styles/theme"));
var _templateObject, _templateObject2, _templateObject3;
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
const StyledTabs = exports.StyledTabs = _styledComponents.default.div.withConfig({
  displayName: "TabsNavstyles__StyledTabs",
  componentId: "sc-opeopg-0"
})(["position:relative;border-bottom:1px solid ", ";", ""], _theme.default.cLightGrey, props => props.noBorderBottom && "\n    border-bottom: none;\n  ");
const Scroll = exports.Scroll = _styledComponents.default.div.withConfig({
  displayName: "TabsNavstyles__Scroll",
  componentId: "sc-opeopg-1"
})(["position:relative;overflow:hidden;overflow-x:auto;"]);
const TabsWrapper = exports.TabsWrapper = _styledComponents.default.div.withConfig({
  displayName: "TabsNavstyles__TabsWrapper",
  componentId: "sc-opeopg-2"
})(["position:relative;white-space:nowrap;padding:12px 0;", " ", ""], _rwd.default.Medium(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    padding: 24px;\n  "]))), props => props.noWrapperPadding && "\n    padding: 0 !important;\n  ");
const LinkText = exports.LinkText = _styledComponents.default.span.withConfig({
  displayName: "TabsNavstyles__LinkText",
  componentId: "sc-opeopg-3"
})(["display:block;position:relative;font-family:'Open Sans';font-size:11px;letter-spacing:2px;line-height:20px;text-transform:uppercase;padding:8px 0;&:before{content:'';width:100%;height:8px;background-color:transparent;position:absolute;top:100%;left:0%;transition:background-color 0.2s;}"]);
const StyledTab = exports.StyledTab = _styledComponents.default.button.withConfig({
  displayName: "TabsNavstyles__StyledTab",
  componentId: "sc-opeopg-4"
})(["display:inline-block;position:relative;cursor:pointer;outline:none;visibility:visible;padding:12px;color:", ";transition:opacity 0.2s;", " ", " &:focus,&:hover{opacity:0.6;}", " ", ""], props => _theme.default.cBlack, _rwd.default.Medium(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    padding: 24px;\n  "]))), _rwd.default.Large(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    padding: 32px 40px;\n  "]))), props => props.isActive && "\n    &:focus ,\n    &:hover {\n      opacity: 1;\n    }\n\n    ".concat(LinkText, " {\n      font-weight: bold;\n\n      &:before {\n        background-color: ").concat(_theme.default.cPrimary, "!important;\n      }\n    }\n  "), props => props.customStyles);