calcite-react/TopNav/TopNav-styled.js

Calcite components for React

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledTopNavTitle = exports.StyledTopNavList = exports.StyledTopNavLink = exports.StyledTopNavBrandImg = exports.StyledTopNavBrandLink = exports.StyledTopNavActions = exports.StyledTopNav = exports.StyledTopNavContainer = void 0;

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

var _helpers = require("../utils/helpers");

var _CalciteThemeProvider = require("../CalciteThemeProvider");

var _Elements = require("../Elements");

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

// Copyright 2019 Esri
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
// http://www.apache.org/licenses/LICENSE-2.0
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.​
// styled-components
// Utils, common elements
// Calcite theme and Esri colors
// Calcite components
// Icons
// Third party libraries
var StyledTopNavContainer = _styledComponents.default.header.withConfig({
  displayName: "StyledTopNavContainer",
  componentId: "sc-10bmdec-0"
})(["background-color:", ";border-bottom:1px solid ", ";position:relative;display:flex;width:100%;"], function (props) {
  return props.theme.palette.white;
}, function (props) {
  return props.theme.palette.lightestGray;
});

exports.StyledTopNavContainer = StyledTopNavContainer;
StyledTopNavContainer.defaultProps = {
  theme: _CalciteThemeProvider.CalciteTheme
};

var StyledTopNav = _styledComponents.default.div.withConfig({
  displayName: "StyledTopNav",
  componentId: "sc-10bmdec-1"
})(["display:flex;align-items:center;background-color:", ";width:", ";max-width:", ";padding:0 1rem;margin:0 auto;z-index:100;", ";"], function (props) {
  return props.theme.palette.white;
}, function (props) {
  return props.contentWidth || props.theme.contentWidth;
}, function (props) {
  return props.contentMaxWidth || props.theme.contentMaxWidth;
}, (0, _helpers.clearfix)());

exports.StyledTopNav = StyledTopNav;
StyledTopNav.defaultProps = {
  theme: _CalciteThemeProvider.CalciteTheme
};

var StyledTopNavActions = _styledComponents.default.div.withConfig({
  displayName: "StyledTopNavActions",
  componentId: "sc-10bmdec-2"
})(["display:flex;align-items:center;margin-left:auto;padding-left:", ";html[dir='rtl'] &{margin-left:initial;margin-right:auto;padding-left:initial;padding-right:", ";}> a,> button{margin-inline-start:0.75em;&:first-child{margin-inline-start:0;}}"], function (props) {
  return props.theme.baseline;
}, function (props) {
  return props.theme.baseline;
});

exports.StyledTopNavActions = StyledTopNavActions;
StyledTopNavActions.defaultProps = {
  theme: _CalciteThemeProvider.CalciteTheme
};

var StyledTopNavBrandLink = _styledComponents.default.a.withConfig({
  displayName: "StyledTopNavBrandLink",
  componentId: "sc-10bmdec-3"
})(["padding-right:", ";display:inline-flex;align-items:center;text-decoration:none;html[dir='rtl'] &{padding-right:initial;padding-left:", ";}"], function (props) {
  return props.theme.baseline;
}, function (props) {
  return props.theme.baseline;
});

exports.StyledTopNavBrandLink = StyledTopNavBrandLink;
StyledTopNavBrandLink.defaultProps = {
  theme: _CalciteThemeProvider.CalciteTheme
};

var StyledTopNavBrandImg = _styledComponents.default.img.withConfig({
  displayName: "StyledTopNavBrandImg",
  componentId: "sc-10bmdec-4"
})(["height:30px;"]);

exports.StyledTopNavBrandImg = StyledTopNavBrandImg;
StyledTopNavBrandImg.defaultProps = {
  theme: _CalciteThemeProvider.CalciteTheme
};
var StyledTopNavLink = (0, _styledComponents.default)(_Elements.CalciteA).withConfig({
  displayName: "StyledTopNavLink",
  componentId: "sc-10bmdec-5"
})(["", ";color:", ";padding-top:1.1625rem;padding-bottom:calc(1.1625rem - 4px);border-bottom:4px solid transparent;line-height:1.5rem;display:inline-flex;align-items:center;margin-left:0.75em;font-weight:300;html[dir='rtl'] &{margin-left:initial;margin-right:0.75em;}&:hover,&:focus{color:", ";border-bottom-color:", ";text-decoration:none;}&:focus{outline:none;}", ";&.active,.active > &{color:", ";border-bottom-color:", ";}"], (0, _helpers.fontSize)(0), function (props) {
  return props.theme.palette.darkGray;
}, function (props) {
  return props.theme.palette.blue;
}, function (props) {
  return props.theme.palette.blue;
}, function (props) {
  return props.active && (0, _styledComponents.css)(["color:", ";border-bottom-color:", ";"], function (props) {
    return props.theme.palette.offBlack;
  }, props.theme.palette.blue);
}, function (props) {
  return props.theme.palette.offBlack;
}, function (props) {
  return props.theme.palette.blue;
});
exports.StyledTopNavLink = StyledTopNavLink;
StyledTopNavLink.defaultProps = {
  theme: _CalciteThemeProvider.CalciteTheme
};

var StyledTopNavList = _styledComponents.default.nav.withConfig({
  displayName: "StyledTopNavList",
  componentId: "sc-10bmdec-6"
})(["padding:0;flex:1 0 auto;margin-left:-0.75em;html[dir='rtl'] &{margin-left:initial;margin-right:-0.75em;}", ";"], function (props) {
  return props.right && (0, _styledComponents.css)(["float:right;html[dir='rtl'] &{float:left;}"]);
});

exports.StyledTopNavList = StyledTopNavList;
StyledTopNavList.defaultProps = {
  theme: _CalciteThemeProvider.CalciteTheme
};
var StyledTopNavTitle = (0, _styledComponents.default)(_Elements.CalciteA).withConfig({
  displayName: "StyledTopNavTitle",
  componentId: "sc-10bmdec-7"
})(["margin-right:1.5rem;padding-top:1.125rem;padding-bottom:1.25rem;", ";color:", ";html[dir='rtl'] &{margin-right:initial;margin-left:1.5rem;}&:hover{text-decoration:none;}"], (0, _helpers.fontSize)(1), function (props) {
  return props.theme.palette.black;
});
exports.StyledTopNavTitle = StyledTopNavTitle;
StyledTopNavTitle.defaultProps = {
  theme: _CalciteThemeProvider.CalciteTheme
};