@helpscout/hsds-react/components/TabBar/TabBar.css.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.ToolbarUI = exports.SecContentUI = exports.TabBarUI = void 0;

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _Toolbar = _interopRequireDefault(require("../Toolbar"));

var _color = require("../../styles/utilities/color");

var _font = require("../../styles/utilities/font");

var getAlignment = function getAlignment(align) {
  switch (align) {
    case 'center':
      return 'center';

    default:
      return 'flex-start';
  }
};

var getDirection = function getDirection(align) {
  switch (align) {
    case 'right':
      return 'row-reverse';

    default:
      return 'row';
  }
};

var TabBarUI = (0, _styledComponents.default)('nav').withConfig({
  displayName: "TabBarcss__TabBarUI",
  componentId: "ardyeo-0"
})(["", ";display:flex;margin:0 auto;.c-Toolbar{justify-content:", ";flex-direction:", ";}.c-ToolbarWrapper{width:100%;}"], (0, _font.setFontSize)(14), function (props) {
  return getAlignment(props.align);
}, function (props) {
  return getDirection(props.align);
});
exports.TabBarUI = TabBarUI;
var SecContentUI = (0, _styledComponents.default)(_Toolbar.default.Item).withConfig({
  displayName: "TabBarcss__SecContentUI",
  componentId: "ardyeo-1"
})(["", ";color:", ";display:flex;align-items:center;margin-bottom:calc(8px * -1);&.is-defaultItem{margin-left:", ";margin-right:", ";}b,strong{font-weight:500;color:", ";}"], (0, _font.setFontSize)(14), (0, _color.getColor)('charcoal.200'), function (props) {
  return props.align !== 'right' ? 'auto' : '0';
}, function (props) {
  return props.align === 'right' ? 'auto' : '0';
}, (0, _color.getColor)('charcoal.600')); // adjust margin to have to active bar hover the toolbar border

exports.SecContentUI = SecContentUI;
var ToolbarUI = (0, _styledComponents.default)(_Toolbar.default).withConfig({
  displayName: "TabBarcss__ToolbarUI",
  componentId: "ardyeo-2"
})(["width:100%;padding-left:0;padding-right:0;&.is-placement-top.is-size-sm .c-Nav{}"]);
exports.ToolbarUI = ToolbarUI;