calcite-react/ActionBar/ActionBar-styled.js

Calcite components for React

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.TooltipWrapperStyles = exports.StyledAction = exports.StyledCollapseAction = exports.StyledActionBarCollapseContainer = exports.StyledBottomActionGroup = exports.StyledActionGroup = exports.StyledActionBar = void 0;

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

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

var _Button = _interopRequireDefault(require("../Button"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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 librarie
var StyledActionGroup = _styledComponents.default.div.withConfig({
  displayName: "StyledActionGroup",
  componentId: "sc-1lu3rct-0"
})(["width:100%;flex:0 0 auto;border-bottom:1px solid ", ";"], function (props) {
  return props.theme.palette.lightestGray;
});

exports.StyledActionGroup = StyledActionGroup;

var StyledBottomActionGroup = _styledComponents.default.div.withConfig({
  displayName: "StyledBottomActionGroup",
  componentId: "sc-1lu3rct-1"
})(["width:100%;flex:1 0 auto;display:flex;flex-direction:column;justify-content:flex-end;"]);

exports.StyledBottomActionGroup = StyledBottomActionGroup;

var StyledActionBar = _styledComponents.default.div.withConfig({
  displayName: "StyledActionBar",
  componentId: "sc-1lu3rct-2"
})(["height:100%;width:180px;flex:0 0 180px;display:flex;flex-direction:column;background-color:", ";border-right:1px solid ", ";align-items:flex-start;html[dir='rtl'] &{border-right:none;border-left:1px solid ", ";}", ";", ";"], function (props) {
  return props.theme.palette.white;
}, function (props) {
  return props.theme.palette.lightestGray;
}, function (props) {
  return props.theme.palette.lightestGray;
}, function (props) {
  return props.dark && (0, _styledComponents.css)(["background-color:", ";", "{border-bottom-color:", ";}"], function (props) {
    return props.theme.palette.offBlack;
  }, StyledActionGroup, function (props) {
    return props.theme.palette.black;
  });
}, function (props) {
  return props.collapsed && (0, _styledComponents.css)(["width:49px;flex:0 0 49px;"]);
});

exports.StyledActionBar = StyledActionBar;

var StyledActionBarCollapseContainer = _styledComponents.default.div.withConfig({
  displayName: "StyledActionBarCollapseContainer",
  componentId: "sc-1lu3rct-3"
})(["width:100%;flex:1 0 auto;display:flex;flex-direction:column;justify-content:flex-end;", " + &{flex:0 0 auto;}"], StyledBottomActionGroup);

exports.StyledActionBarCollapseContainer = StyledActionBarCollapseContainer;
var StyledCollapseAction = (0, _styledComponents.default)(_Button.default).attrs(function (_ref) {
  var collapsed = _ref.collapsed;
  return {
    white: true,
    iconButton: collapsed,
    iconPosition: 'before',
    fullWidth: true,
    extraSmall: true
  };
}).withConfig({
  displayName: "StyledCollapseAction",
  componentId: "sc-1lu3rct-4"
})(["height:48px;color:", ";padding:", ";border:none;white-space:normal;text-align:start;line-height:1rem;background:transparent;", ";&:hover{color:", ";background:", ";", ";}", ";svg{flex-shrink:0;margin-left:0 !important;", ";html[dir='rtl'] &{margin-left:", " !important;margin-right:0 !important;transform:rotate(180deg);", ";", ";}}"], function (props) {
  return props.theme.palette.black;
}, function (props) {
  return (0, _helpers.unitCalc)(props.theme.baseline, 3, '/');
}, function (props) {
  return props.dark && (0, _styledComponents.css)(["color:", ";"], function (props) {
    return props.theme.palette.white;
  });
}, function (props) {
  return props.theme.palette.black;
}, function (props) {
  return props.theme.palette.lightestGray;
}, function (props) {
  return props.dark && (0, _styledComponents.css)(["color:", ";background:", ";"], function (props) {
    return props.theme.palette.white;
  }, function (props) {
    return props.theme.palette.black;
  });
}, function (props) {
  return !props.collapsed && (0, _styledComponents.css)(["display:flex;justify-content:flex-start;padding:", ";padding-left:", ";html[dir='rtl'] &{padding-left:", ";padding-right:", ";}"], function (props) {
    return (0, _helpers.unitCalc)(props.theme.baseline, 3, '/');
  }, function (props) {
    return (0, _helpers.unitCalc)(props.theme.baseline, 1.5, '/');
  }, function (props) {
    return (0, _helpers.unitCalc)(props.theme.baseline, 3, '/');
  }, function (props) {
    return (0, _helpers.unitCalc)(props.theme.baseline, 1.5, '/');
  });
}, function (props) {
  return props.position === 'end' && (0, _styledComponents.css)(["transform:rotate(180deg);"]);
}, function (props) {
  return (0, _helpers.unitCalc)(props.theme.baseline, 2, '/');
}, function (props) {
  return props.position === 'end' && (0, _styledComponents.css)(["transform:rotate(0deg);"]);
}, function (props) {
  return props.collapsed && (0, _styledComponents.css)(["margin-left:0 !important;"]);
});
exports.StyledCollapseAction = StyledCollapseAction;
var StyledAction = (0, _styledComponents.default)(StyledCollapseAction).withConfig({
  displayName: "StyledAction",
  componentId: "sc-1lu3rct-5"
})(["", ";&{position:relative;", ";}svg{transform:rotate(0deg) !important;}"], function (props) {
  return props.active && (0, _styledComponents.css)(["&,&:hover{color:", ";background:", ";", ";}"], props.theme.palette.darkBlue, props.theme.palette.lightestBlue, props.dark && (0, _styledComponents.css)(["color:", ";background:#151515;"], props.theme.palette.Brand_Blue_120));
}, function (props) {
  return props.hasNotification && (0, _styledComponents.css)(["&::after{content:'';border:3px solid ", ";position:absolute;bottom:6px;right:6px;width:8px;height:8px;border-radius:50%;background-color:", ";html[dir='rtl'] &{right:auto;left:6px;}}"], function (props) {
    return props.theme.palette.blue;
  }, function (props) {
    return props.theme.palette.white;
  });
});
exports.StyledAction = StyledAction;
var TooltipWrapperStyles = {
  width: '100%'
};
exports.TooltipWrapperStyles = TooltipWrapperStyles;