calcite-react/Menu/Menu-styled.js

Calcite components for React

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledMenuItemSubtitle = exports.StyledMenuTitle = exports.StyledMenuItem = exports.StyledMenu = void 0;

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

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

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

var _SideNavStyled = require("../SideNav/SideNav-styled");

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 StyledMenu = (0, _styledComponents.default)(_SideNavStyled.StyledSideNav).withConfig({
  displayName: "StyledMenu",
  componentId: "sc-1hku2rj-0"
})(["min-width:200px;box-shadow:", ";z-index:1000;overflow:auto;", " ", ";", ";", ";", ";", ";"], function (props) {
  return props.theme.boxShadow;
}, (0, _helpers.fontSize)(0), function (props) {
  return props.right && (0, _styledComponents.css)(["right:0;"]);
}, function (props) {
  return props.extraSmall && (0, _styledComponents.css)(["width:200px;", ";"], (0, _helpers.fontSize)(-3));
}, function (props) {
  return props.small && (0, _styledComponents.css)(["width:220px;", ";"], (0, _helpers.fontSize)(-2));
}, function (props) {
  return props.large && (0, _styledComponents.css)(["width:240px;", ";"], (0, _helpers.fontSize)(1));
}, function (props) {
  return props.extraLarge && (0, _styledComponents.css)(["width:280px;", ";"], (0, _helpers.fontSize)(2));
});
exports.StyledMenu = StyledMenu;
StyledMenu.defaultProps = {
  theme: _CalciteThemeProvider.CalciteTheme
};
var StyledMenuItem = (0, _styledComponents.default)(_Elements.CalciteA).withConfig({
  displayName: "StyledMenuItem",
  componentId: "sc-1hku2rj-1"
})(["position:relative;display:flex;justify-content:space-between;min-height:42px;box-sizing:border-box;font-size:0.9em;padding:", ";color:", ";background-color:", ";border-top:1px solid ", ";white-space:nowrap;cursor:pointer;", ";", ";&:hover{background-color:", ";text-decoration:none;color:", ";}", ";", ";", ";", ";", ";"], function (props) {
  return (0, _helpers.unitCalc)(props.theme.baseline, 3, '/');
}, function (props) {
  return props.theme.palette.darkerGray;
}, function (props) {
  return props.theme.palette.white;
}, function (props) {
  return props.theme.palette.lightestGray;
}, function (props) {
  return props.disabled && (0, _styledComponents.css)(["pointer-events:none;opacity:0.7;"]);
}, function (props) {
  return props.active && (0, _styledComponents.css)(["background-color:", ";text-decoration:none;color:", ";"], function (props) {
    return props.theme.palette.offWhite;
  }, function (props) {
    return props.theme.palette.darkerGray;
  });
}, function (props) {
  return props.theme.palette.offWhite;
}, function (props) {
  return props.theme.palette.darkerGray;
}, function (props) {
  return props.selected && (0, _styledComponents.css)(["&,&:focus,&:hover{text-indent:-3px;border-left:3px solid ", ";html[dir='rtl'] &{border-left:none;border-right:3px solid ", ";}}"], function (props) {
    return props.theme.palette.blue;
  }, function (props) {
    return props.theme.palette.blue;
  });
}, function (props) {
  return props.extraSmall && (0, _styledComponents.css)(["min-height:auto;padding:0 ", ";"], function (props) {
    return (0, _helpers.unitCalc)(props.theme.baseline, 6, '/');
  });
}, function (props) {
  return props.small && (0, _styledComponents.css)(["min-height:", ";padding:", " ", ";"], function (props) {
    return (0, _helpers.unitCalc)(props.theme.baseline, 4, '/');
  }, function (props) {
    return (0, _helpers.unitCalc)(props.theme.baseline, 6, '/');
  }, function (props) {
    return (0, _helpers.unitCalc)(props.theme.baseline, 4, '/');
  });
}, function (props) {
  return props.large && (0, _styledComponents.css)(["min-height:", ";padding:", ";"], function (props) {
    return (0, _helpers.unitCalc)(props.theme.baseline, 2, '/');
  }, function (props) {
    return (0, _helpers.unitCalc)(props.theme.baseline, 2, '/');
  });
}, function (props) {
  return props.extraLarge && (0, _styledComponents.css)(["line-height:20px;padding:", ";font-weight:300;"], function (props) {
    return (0, _helpers.unitCalc)(props.theme.baseline, 1.5, '/');
  });
});
exports.StyledMenuItem = StyledMenuItem;
StyledMenuItem.defaultProps = {
  theme: _CalciteThemeProvider.CalciteTheme
};
var StyledMenuTitle = (0, _styledComponents.default)(StyledMenuItem).withConfig({
  displayName: "StyledMenuTitle",
  componentId: "sc-1hku2rj-2"
})(["font-size:1em;background-color:", ";cursor:auto;"], function (props) {
  return props.theme.palette.offWhite;
});
exports.StyledMenuTitle = StyledMenuTitle;
StyledMenuTitle.defaultProps = {
  theme: _CalciteThemeProvider.CalciteTheme
};

var StyledMenuItemSubtitle = _styledComponents.default.span.withConfig({
  displayName: "StyledMenuItemSubtitle",
  componentId: "sc-1hku2rj-3"
})(["font-size:0.85em;color:", ";*:hover > &{color:", ";}"], function (props) {
  return props.theme.palette.lighterGray;
}, function (props) {
  return props.theme.palette.lightGray;
});

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