calcite-react/Form/Form-styled.js

Calcite components for React

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledFieldset = exports.StyledLegend = exports.StyledFormHelperText = exports.StyledFormControlLabelText = exports.StyledFormControlLabel = exports.StyledFormControl = exports.StyledForm = void 0;

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

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

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
var StyledForm = _styledComponents.default.form.withConfig({
  displayName: "StyledForm",
  componentId: "nukwx4-0"
})(["margin:0;padding:0;display:flex;flex-wrap:wrap;flex-direction:column;", ";"], function (props) {
  return props.horizontal && (0, _styledComponents.css)(["flex-direction:row;"]);
});

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

var StyledFormControl = _styledComponents.default.div.withConfig({
  displayName: "StyledFormControl",
  componentId: "nukwx4-1"
})(["position:relative;display:inline-flex;flex-direction:column;align-items:flex-start;margin:0 ", " ", " ", ";", ";", ";", ";"], function (props) {
  return (0, _helpers.unitCalc)(props.theme.baseline, 4, '/');
}, function (props) {
  return (0, _helpers.unitCalc)(props.theme.baseline, 1.25, '*');
}, function (props) {
  return (0, _helpers.unitCalc)(props.theme.baseline, 4, '/');
}, function (props) {
  return props.horizontal && (0, _styledComponents.css)(["flex-direction:row;align-items:baseline;margin:0 ", " ", " ", ";", "{margin-left:", ";html[dir='rtl'] &{margin-left:initial;margin-right:", ";}}"], function (props) {
    return (0, _helpers.unitCalc)(props.theme.baseline, 4, '/');
  }, function (props) {
    return (0, _helpers.unitCalc)(props.theme.baseline, 2, '/');
  }, function (props) {
    return (0, _helpers.unitCalc)(props.theme.baseline, 4, '/');
  }, StyledFormHelperText, function (props) {
    return (0, _helpers.unitCalc)(props.theme.baseline, 4, '/');
  }, function (props) {
    return (0, _helpers.unitCalc)(props.theme.baseline, 4, '/');
  });
}, function (props) {
  return props.noValidation && (0, _styledComponents.css)(["margin-bottom:", ";"], function (props) {
    return (0, _helpers.unitCalc)(props.theme.baseline, 4, '/');
  });
}, function (props) {
  return props.fullWidth && (0, _styledComponents.css)(["width:100%;"]);
});

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

var StyledFormControlLabel = _styledComponents.default.label.withConfig({
  displayName: "StyledFormControlLabel",
  componentId: "nukwx4-2"
})(["", " display:flex;flex-direction:column;", ";"], (0, _helpers.fontSize)(0), function (props) {
  return props.horizontal && (0, _styledComponents.css)(["flex-direction:row;align-items:center;"]);
});

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

var StyledFormControlLabelText = _styledComponents.default.span.withConfig({
  displayName: "StyledFormControlLabelText",
  componentId: "nukwx4-3"
})(["", ";"], function (props) {
  return props.horizontal && (0, _styledComponents.css)(["margin-right:", ";html[dir='rtl'] &{margin-right:initial;margin-left:", ";}"], function (props) {
    return (0, _helpers.unitCalc)(props.theme.baseline, 2, '/');
  }, function (props) {
    return (0, _helpers.unitCalc)(props.theme.baseline, 2, '/');
  });
});

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

var StyledFormHelperText = _styledComponents.default.span.withConfig({
  displayName: "StyledFormHelperText",
  componentId: "nukwx4-4"
})(["", ";color:", ";min-height:1.55em;margin-bottom:-1.55rem;", ";", ";"], (0, _helpers.fontSize)(-3), function (props) {
  return props.theme.palette.transparentBlack;
}, function (props) {
  return props.error && (0, _styledComponents.css)(["color:", ";"], function (props) {
    return props.theme.palette.red;
  });
}, function (props) {
  return props.success && (0, _styledComponents.css)(["color:", ";"], function (props) {
    return props.theme.palette.green;
  });
});

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

var StyledLegend = _styledComponents.default.legend.withConfig({
  displayName: "StyledLegend",
  componentId: "nukwx4-5"
})(["", " position:relative;display:block;margin-bottom:0.25rem;margin-right:", ";html[dir='rtl'] &{margin-right:initial;margin-left:", ";}", ";"], (0, _helpers.fontSize)(0), function (props) {
  return (0, _helpers.unitCalc)(props.theme.baseline, 2, '/');
}, function (props) {
  return (0, _helpers.unitCalc)(props.theme.baseline, 2, '/');
}, function (props) {
  return props.horizontal && (0, _styledComponents.css)(["margin-bottom:0;"]);
});

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

var StyledFieldset = _styledComponents.default.div.withConfig({
  displayName: "StyledFieldset",
  componentId: "nukwx4-6"
})(["margin:0;padding:0;border:none;display:flex;flex-direction:column;align-items:flex-start;", ";"], function (props) {
  return props.horizontal && (0, _styledComponents.css)(["flex-direction:row;"]);
});

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