calcite-react/SubNav/SubNav-styled.js

Calcite components for React

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledMultiRowActions = exports.StyledSubNavActions = exports.StyledSubNavTitle = exports.StyledSubNavList = exports.StyledSubNavLink = exports.StyledSubNavContent = exports.StyledSubNav = void 0;

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

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

var _BreadcrumbsStyled = require("../Breadcrumbs/Breadcrumbs-styled");

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

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

var _color = require("../utils/color");

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 StyledSubNav = _styledComponents.default.header.withConfig({
  displayName: "StyledSubNav",
  componentId: "rv6lg3-0"
})(["position:relative;display:flex;width:100%;", ""], function (props) {
  return props.legacy ? // ----- LEGACY STYLES -----
  (0, _styledComponents.css)(["flex-wrap:wrap;background-color:", ";", ""], props.blue ? props.theme.palette.darkerBlue : props.theme.palette.lightestGray, props.backgroundImage && (0, _helpers.backgroundGradient)(props.backgroundImage, props.gradientFromColor, props.gradientToColor, props.overlayGradient)) : // ----- MODERN STYLES -----
  (0, _styledComponents.css)(["background-color:", ";"], props.theme.palette[props.backgroundColor] || props.backgroundColor);
});

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

var StyledSubNavContent = _styledComponents.default.div.withConfig({
  displayName: "StyledSubNavContent",
  componentId: "rv6lg3-1"
})(["display:flex;justify-content:space-between;", ""], function (props) {
  return props.legacy ? // ----- LEGACY STYLES -----
  (0, _styledComponents.css)(["flex-direction:column;flex:1 0 200px;"]) : // ----- MODERN STYLES -----
  (0, _styledComponents.css)(["width:", ";max-width:", ";height:56px;margin:0 auto;padding:0 1rem;"], props.contentWidth || props.theme.contentWidth, props.contentMaxWidth || props.theme.contentMaxWidth);
});

exports.StyledSubNavContent = StyledSubNavContent;
StyledSubNavContent.defaultProps = {
  theme: _CalciteThemeProvider.CalciteTheme
};
var StyledSubNavLink = (0, _styledComponents.default)(_Elements.CalciteA).withConfig({
  displayName: "StyledSubNavLink",
  componentId: "rv6lg3-2"
})(["font-family:", ";transition:background-color ", ",color ", ";box-sizing:border-box;display:inline-block;", ";", " ", ""], function (props) {
  return props.theme.avenirFamily;
}, (0, _helpers.transition)(), (0, _helpers.transition)('150ms'), (0, _helpers.fontSize)(-1), function (props) {
  return props.disabled && (0, _styledComponents.css)(["opacity:0.5;pointer-events:none;"]);
}, function (props) {
  return props.legacy ? // ----- LEGACY STYLES -----
  (0, _styledComponents.css)(["padding:0.25em 0.75em;margin:0 0 0 0.25em;color:", ";background-color:", ";border-radius:", " ", " 0 0;html[dir='rtl'] &{margin:0 0.25em 0 0;}&:hover,&:focus{background-color:", ";color:", ";text-decoration:none;", ";}", " .active > &,.active > &:hover,.active > &:focus{background-color:", ";color:", ";}"], props.theme.palette.offWhite, props.theme.palette.transparentOffBlack, props.theme.borderRadius, props.theme.borderRadius, props.theme.palette.transparentDarkerGray, props.theme.palette.white, (0, _helpers.subNavUnderline)(props), props.active && (0, _styledComponents.css)(["&,&:hover,&:focus{background-color:", ";color:", ";}"], props.theme.palette.white, props.theme.palette.offBlack), props.theme.palette.white, props.theme.palette.offBlack) : // ----- MODERN STYLES -----
  (0, _styledComponents.css)(["display:flex;align-items:center;box-sizing:border-box;color:", ";border-bottom:4px solid transparent;padding-right:", ";padding-left:", ";", " &:hover,&:focus,.active > &,.active > &:hover,.active > &:focus{", "}"], props.theme.palette.white, props.theme.baseline, props.theme.baseline, props.active && (0, _styledComponents.css)(["&,&:hover,&:focus{", "}"], (0, _helpers.subNavLinkActive)(props)), (0, _helpers.subNavLinkActive)(props));
});
exports.StyledSubNavLink = StyledSubNavLink;
StyledSubNavLink.defaultProps = {
  theme: _CalciteThemeProvider.CalciteTheme
};

var StyledSubNavList = _styledComponents.default.nav.withConfig({
  displayName: "StyledSubNavList",
  componentId: "rv6lg3-3"
})(["display:flex;margin-top:0em;box-sizing:border-box;padding-left:0.25em;html[dir='rtl'] &{padding-left:0;padding-right:0.25em;}", ""], function (props) {
  return !props.legacy && (0, _styledComponents.css)(["margin-left:auto;html[dir='rtl'] &{margin-left:0;margin-right:auto;}"]);
});

exports.StyledSubNavList = StyledSubNavList;
StyledSubNavList.defaultProps = {
  theme: _CalciteThemeProvider.CalciteTheme
};
var StyledSubNavTitle = (0, _styledComponents.default)(_Elements.CalciteH1).withConfig({
  displayName: "StyledSubNavTitle",
  componentId: "rv6lg3-4"
})(["box-sizing:border-box;", ""], function (props) {
  return props.legacy ? // ----- LEGACY STYLES -----
  (0, _styledComponents.css)(["", ";line-height:1.25;padding-left:0.25em;margin-top:", ";margin-bottom:", ";", ";html[dir='rtl'] &{padding-left:0;padding-right:0.25em;}"], (0, _helpers.fontSize)(4), (0, _helpers.unitCalc)(props.theme.baseline, 2, '/'), (0, _helpers.unitCalc)(props.theme.baseline, 2, '/'), props.blue && (0, _styledComponents.css)(["color:", ";"], props.theme.palette.white)) : // ----- MODERN STYLES -----
  (0, _styledComponents.css)(["", ";display:flex;align-items:center;color:", ";margin-bottom:0;", ",", "{color:", ";", ";&::before{color:", ";}}", "{", ";}html[dir='rtl'] &{padding-left:0;padding-right:", ";}"], (0, _helpers.fontSize)(2), props.theme.palette.white, _BreadcrumbsStyled.StyledSpanCrumb, _BreadcrumbsStyled.StyledCrumb, props.theme.palette.white, (0, _color.linkColor)(props.theme.palette.white, props.theme.palette.lightestGray), props.theme.palette.white, _BreadcrumbsStyled.StyledBreadcrumbs, (0, _helpers.fontSize)(1), (0, _helpers.unitCalc)(props.theme.baseline, 3, '/'));
});
exports.StyledSubNavTitle = StyledSubNavTitle;
StyledSubNavTitle.defaultProps = {
  theme: _CalciteThemeProvider.CalciteTheme
};

var StyledSubNavActions = _styledComponents.default.nav.withConfig({
  displayName: "StyledSubNavActions",
  componentId: "rv6lg3-5"
})(["margin:0.5em;display:flex;justify-content:flex-end;align-items:center;"]);

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

var StyledMultiRowActions = _styledComponents.default.div.withConfig({
  displayName: "StyledMultiRowActions",
  componentId: "rv6lg3-6"
})(["display:flex;flex-direction:column;"]);

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