calcite-react/Button/Button-styled.js

Calcite components for React

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledIconClass = exports.StyledButtonGroup = exports.StyledButton = void 0;

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

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

var _polished = require("polished");

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

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
// Just used to generate a unique className we can use on
// cloned instances of components
var StyledIconClass = _styledComponents.default.svg.withConfig({
  displayName: "StyledIconClass",
  componentId: "gqzbmz-0"
})([""]);

exports.StyledIconClass = StyledIconClass;

var StyledButton = _styledComponents.default.button.withConfig({
  displayName: "StyledButton",
  componentId: "gqzbmz-1"
})(["position:relative;display:inline-flex;align-items:center;justify-content:center;padding:", " 0.9rem;width:auto;margin:0;color:", ";border:1px solid ", ";border-radius:", ";background-color:", ";box-sizing:border-box;transition:all 0.15s ease-in-out;cursor:pointer;white-space:nowrap;", ";letter-spacing:0em;font-family:inherit;text-decoration:none;&:hover{background-color:", ";border-color:", ";color:", ";}.", "{fill:currentColor;vertical-align:bottom;", ";", ";", ";}", ";", ";", ";", ";", ";", ";", ";", ";", ";", ";", ";", ";", ";", ";", ";", ";", ";", ";", ";", ";", ";"], function (props) {
  return (0, _helpers.unitCalc)(props.theme.baseline, 5, '/');
}, function (props) {
  return props.theme.palette.white;
}, function (props) {
  return props.theme.palette.blue;
}, function (props) {
  return props.theme.borderRadius;
}, function (props) {
  return props.theme.palette.blue;
}, (0, _helpers.fontSize)(-1), function (props) {
  return props.theme.palette.lightBlue;
}, function (props) {
  return props.theme.palette.lightBlue;
}, function (props) {
  return props.theme.palette.white;
}, StyledIconClass.styledComponentId, function (props) {
  return props.iconPosition === 'after' && (0, _styledComponents.css)(["margin-left:", ";margin-right:-0.25rem;html[dir='rtl'] &{margin-left:-0.25rem;margin-right:", ";}"], props.transparent ? '0.5em' : '0.75em', props.transparent ? '0.5em' : '0.75em');
}, function (props) {
  return props.iconPosition === 'before' && (0, _styledComponents.css)(["margin-left:-0.25rem;margin-right:", ";html[dir='rtl'] &{margin-left:", ";margin-right:-0.25rem;}"], props.transparent ? '0.5em' : '0.75em', props.transparent ? '0.5em' : '0.75em');
}, function (props) {
  return props.iconButton && (0, _styledComponents.css)(["&,html[dir='rtl'] &{margin-left:0;margin-right:0;}"]);
}, function (props) {
  return props.isAdornment && (0, _styledComponents.css)(["margin:", " 0 0 0;", ";", ";", ";"], (0, _helpers.unitCalc)(props.theme.baseline, 6, '/'), function (props) {
    return props.minimal && (0, _styledComponents.css)(["background:none;color:", ";border:none;border-bottom:1px solid ", ";&:hover{color:", ";background:none;text-decoration:underline;}"], props.theme.linkColor, props.theme.palette.lighterGray, props.theme.linkHover);
  }, function (props) {
    return props.adornmentDirection === 'left' && (0, _styledComponents.css)(["border-top-right-radius:0;border-bottom-right-radius:0;"]);
  }, function (props) {
    return props.adornmentDirection === 'right' && (0, _styledComponents.css)(["border-top-left-radius:0;border-bottom-left-radius:0;"]);
  });
}, function (props) {
  return props.disabled && (0, _styledComponents.css)(["cursor:not-allowed;pointer-events:none;opacity:0.3;"]);
}, function (props) {
  return props.transparent && (0, _styledComponents.css)(["background:none;color:", ";border:none;&:hover{color:", ";background:none;text-decoration:underline;}"], props.theme.linkColor, props.theme.linkHover);
}, function (props) {
  return props.inline && (0, _styledComponents.css)(["display:inline;padding:0;outline:none;border:none;font-weight:500;white-space:initial;user-select:text;color:", ";background-color:transparent;position:relative;background-image:linear-gradient(currentColor,currentColor),linear-gradient( ", ",", " );background-position:0% 100%,100% 100%;background-repeat:no-repeat,no-repeat;background-size:0% 1px,100% 1px;transition:all 0.15s ease-in-out,background-size 0.3s ease-in-out;&:hover,&:focus{color:", ";background-color:transparent;background-size:100% 1px,100% 1px;.", "{fill:", ";}}&:active{color:", ";background-size:100% 1px,100% 1px;}.", "{fill:currentColor;vertical-align:middle;", ";", ";}"], props.theme.linkColor, (0, _polished.transparentize)(0.8, props.theme.linkColor), (0, _polished.transparentize)(0.8, props.theme.linkColor), props.theme.linkHover, StyledIconClass.styledComponentId, props.theme.linkHover, props.theme.linkColor, StyledIconClass.styledComponentId, function (props) {
    return props.iconPosition === 'after' && (0, _styledComponents.css)(["margin-left:0.33em;margin-right:0;html[dir='rtl'] &{margin-left:0;margin-right:0.33em;}"]);
  }, function (props) {
    return props.iconPosition === 'before' && (0, _styledComponents.css)(["margin-left:0;margin-right:0.33em;html[dir='rtl'] &{margin-left:0.33em;margin-right:0;}"]);
  });
}, function (props) {
  return props.clear && (0, _styledComponents.css)(["color:", ";background:", ";border-color:", ";&:hover{color:", ";background:", ";border-color:", ";}"], props.theme.palette.blue, props.theme.palette.white, props.theme.palette.blue, props.theme.palette.white, props.theme.palette.darkBlue, props.theme.palette.darkBlue);
}, function (props) {
  return props.clearGray && (0, _styledComponents.css)(["background:none;color:", ";border-color:", ";&:hover{color:", ";background:", ";border-color:", ";}"], props.theme.palette.gray, props.theme.palette.gray, props.theme.palette.white, props.theme.palette.darkGray, props.theme.palette.darkGray);
}, function (props) {
  return props.clearWhite && (0, _styledComponents.css)(["background:none;color:", ";border:1px solid ", ";&:hover{color:", ";background:", ";border-color:", ";}"], props.theme.palette.white, props.theme.palette.white, props.theme.palette.gray, props.theme.palette.white, props.theme.palette.white);
}, function (props) {
  return props.white && (0, _styledComponents.css)(["background:", ";color:", ";border:1px solid ", ";&:hover{color:", ";background:", ";border-color:", ";}"], props.theme.palette.white, props.theme.palette.offBlack, props.theme.palette.white, props.theme.palette.offBlack, props.theme.palette.lightestGray, props.theme.palette.lightestGray);
}, function (props) {
  return props.halo && (0, _styledComponents.css)(["color:", ";background:transparent;border-color:", ";box-shadow:inset 0 0 0 0 ", ";&:hover{color:", ";background:transparent;border-color:", ";box-shadow:inset 0 0 0 2px ", ";}"], props.theme.palette.blue, props.theme.palette.blue, props.theme.palette.blue, props.theme.palette.blue, props.theme.palette.blue, props.theme.palette.blue);
}, function (props) {
  return props.extraSmall && (0, _styledComponents.css)(["", ";padding:0.12rem 0.375rem;"], (0, _helpers.fontSize)(-3));
}, function (props) {
  return props.small && (0, _styledComponents.css)(["", ";padding:0.2325rem 0.675rem;"], (0, _helpers.fontSize)(-2));
}, function (props) {
  return props.large && (0, _styledComponents.css)(["", ";padding:0.5rem 1rem 0.5rem;"], (0, _helpers.fontSize)(0));
}, function (props) {
  return props.extraLarge && (0, _styledComponents.css)(["font-size:17px;line-height:20px;padding:0.85rem 1.2rem 0.85rem;font-weight:300;"]);
}, function (props) {
  return props.fullWidth && (0, _styledComponents.css)(["width:100%;text-align:center;"]);
}, function (props) {
  return props.half && (0, _styledComponents.css)(["width:50%;text-align:center;"]);
}, function (props) {
  return props.red && (0, _styledComponents.css)(["color:", ";background:transparent;border-color:", ";&:hover{color:", ";background:", ";border-color:", ";}"], props.theme.palette.red, props.theme.palette.red, props.theme.palette.white, props.theme.palette.darkRed, props.theme.palette.darkRed);
}, function (props) {
  return props.green && (0, _styledComponents.css)(["color:", ";background:", ";border-color:", ";&:hover{color:", ";background:", ";border-color:", ";}"], props.theme.palette.white, props.theme.palette.green, props.theme.palette.green, props.theme.palette.white, props.theme.palette.darkGreen, props.theme.palette.darkGreen);
}, function (props) {
  return props.iconButton && (0, _styledComponents.css)(["background:transparent;color:", ";border:none;padding:", ";", ";&:hover{color:", ";background:transparent;", ";}"], props.theme.palette.darkGray, (0, _helpers.unitCalc)(props.theme.baseline, 5, '/'), function (props) {
    return props.white && (0, _styledComponents.css)(["color:", ";"], props.theme.palette.white);
  }, props.theme.palette.offBlack, function (props) {
    return props.white && (0, _styledComponents.css)(["color:", ";"], props.theme.palette.lightestGray);
  });
}, function (props) {
  return props.grouped && (0, _styledComponents.css)(["margin-left:-1px;border-radius:0;html[dir='rtl'] &{margin-right:-1px;margin-left:initial;}&:first-child{margin-left:0;border-top-left-radius:", ";border-bottom-left-radius:", ";html[dir='rtl'] &{margin-right:0;margin-left:initial;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:", ";border-bottom-right-radius:", ";}}&:last-child{border-top-right-radius:", ";border-bottom-right-radius:", ";html[dir='rtl'] &{border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:", ";border-bottom-left-radius:", ";}}", ";", ";"], props.theme.borderRadius, props.theme.borderRadius, props.theme.borderRadius, props.theme.borderRadius, props.theme.borderRadius, props.theme.borderRadius, props.theme.borderRadius, props.theme.borderRadius, function (props) {
    return props.isToggle && !props.clear && (0, _styledComponents.css)(["cursor:default;&:hover{background-color:", ";}"], props.theme.palette.blue);
  }, function (props) {
    return !props.isToggle && !props.clear && (0, _styledComponents.css)(["margin-left:1px;html[dir='rtl'] &{margin-right:1px;margin-left:initial;}&:first-of-type{margin-left:0;html[dir='rtl'] &{margin-right:0;}}"]);
  });
}, function (props) {
  return props.grouped && props.half && (0, _styledComponents.css)(["margin-left:0;html[dir='rtl'] &{margin-left:inherit;margin-right:0;}"]);
}, function (props) {
  return props.noBorderRadius && (0, _styledComponents.css)(["border-radius:0;"]);
});

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

var StyledButtonGroup = _styledComponents.default.nav.withConfig({
  displayName: "StyledButtonGroup",
  componentId: "gqzbmz-2"
})(["display:inline-flex;justify-content:space-between;"]);

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