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

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.ErrorWrapperUI = exports.GhostTitleUI = exports.ContentUI = exports.ItemUI = exports.IndicatorUI = exports.TitleUI = exports.ListUI = exports.NavUI = exports.config = void 0;

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

var _Flexy = _interopRequireDefault(require("../Flexy"));

var _Text = _interopRequireDefault(require("../Text"));

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

var config = {
  indicatorTransition: 'opacity 100ms ease',
  padding: '10px'
};
exports.config = config;
var NavUI = (0, _styledComponents.default)('nav').withConfig({
  displayName: "Navcss__NavUI",
  componentId: "wvfmfg-0"
})(["--HSDSGlobalFontSize:14px;display:flex;margin:0 auto;"]);
exports.NavUI = NavUI;
var ListUI = (0, _styledComponents.default)('ul').withConfig({
  displayName: "Navcss__ListUI",
  componentId: "wvfmfg-1"
})(["display:flex;list-style:none;margin:0 auto;padding:0;"]);
exports.ListUI = ListUI;
var TitleUI = (0, _styledComponents.default)(_Text.default).withConfig({
  displayName: "Navcss__TitleUI",
  componentId: "wvfmfg-2"
})(["display:block;min-height:14px;"]);
exports.TitleUI = TitleUI;
var IndicatorUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Navcss__IndicatorUI",
  componentId: "wvfmfg-3"
})(["background:", ";border-radius:9999px;bottom:-1px;height:2px;opacity:0;left:0;right:0;position:absolute;transition:", ";will-change:opacity;"], (0, _color.getColor)('blue.500'), config.indicatorTransition);
exports.IndicatorUI = IndicatorUI;
var ItemUI = (0, _styledComponents.default)('li').withConfig({
  displayName: "Navcss__ItemUI",
  componentId: "wvfmfg-4"
})(["padding:0;transform:translateZ(0);&.is-disabled{pointer-events:none;opacity:0.6;}.c-NavItemLink{color:", ";display:block;text-decoration:none !important;padding:0 ", ";&:hover{color:", ";}&.is-active{color:", ";", "{font-weight:500;}", "{opacity:1;}}}"], (0, _color.getColor)('charcoal.200'), config.padding, (0, _color.getColor)('charcoal.300'), (0, _color.getColor)('charcoal.500'), TitleUI, IndicatorUI);
exports.ItemUI = ItemUI;
var ContentUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Navcss__ContentUI",
  componentId: "wvfmfg-5"
})(["padding:20px 7px 20px 5px;position:relative;text-align:center;"]);
exports.ContentUI = ContentUI;
var GhostTitleUI = (0, _styledComponents.default)(_Text.default).withConfig({
  displayName: "Navcss__GhostTitleUI",
  componentId: "wvfmfg-6"
})(["display:block;font-weight:500;height:0;visibility:hidden;"]);
exports.GhostTitleUI = GhostTitleUI;
var ErrorWrapperUI = (0, _styledComponents.default)(_Flexy.default.Item).withConfig({
  displayName: "Navcss__ErrorWrapperUI",
  componentId: "wvfmfg-7"
})(["height:0;position:relative;top:-10px;width:20px;"]);
exports.ErrorWrapperUI = ErrorWrapperUI;