calcite-react/Checkbox/Checkbox-styled.js

Calcite components for React

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledCheckboxCheckIcon = exports.StyledCheckboxGroup = exports.StyledCheckboxLabel = exports.StyledCheckboxInput = exports.StyledDisplayCheckbox = void 0;

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

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

var _commonElements = require("../utils/commonElements");

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

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

// 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 StyledDisplayCheckbox = _styledComponents.default.div.withConfig({
  displayName: "StyledDisplayCheckbox",
  componentId: "sc-1cugyqs-0"
})(["width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:", ";border:1px solid ", ";color:", ";border-radius:2px;box-sizing:border-box;margin-top:0.135rem;margin-bottom:3px;margin-right:", ";margin-left:0.125rem;transition:all 150ms linear;cursor:pointer;html[dir='rtl'] &{margin-right:0.125rem;margin-left:", ";}> *{display:none;}input:hover ~ &,input:focus ~ &{box-shadow:rgba(0,0,0,0.075) 0px 1px 2px inset,rgba(81,167,232,0.5) 0px 0px 5px,rgba(81,167,232,0.5) 0px 0px 5px;}input:checked ~ &{background:", ";border-color:", ";> *{display:inline-block;}}input:disabled ~ &{opacity:0.3;background:", ";}input:disabled:checked ~ &{background:", ";}"], function (props) {
  return props.theme.palette.white;
}, function (props) {
  return props.theme.palette.gray;
}, function (props) {
  return props.theme.palette.white;
}, function (props) {
  return (0, _helpers.unitCalc)(props.theme.baseline, 4, '/');
}, function (props) {
  return (0, _helpers.unitCalc)(props.theme.baseline, 4, '/');
}, function (props) {
  return props.theme.palette.blue;
}, function (props) {
  return props.theme.palette.blue;
}, function (props) {
  return props.theme.palette.lightestGray;
}, function (props) {
  return props.theme.palette.blue;
});

exports.StyledDisplayCheckbox = StyledDisplayCheckbox;
var StyledCheckboxInput = (0, _styledComponents.default)(_commonElements.baseRadioCheckbox).withConfig({
  displayName: "StyledCheckboxInput",
  componentId: "sc-1cugyqs-1"
})(["position:absolute;left:0;opacity:0;-webkit-appearance:checkbox;width:16px;height:16px;cursor:pointer;html[dir='rtl'] &{margin-right:initial;margin-left:", ";}"], function (props) {
  return (0, _helpers.unitCalc)(props.theme.baseline, 4, '/');
});
exports.StyledCheckboxInput = StyledCheckboxInput;
StyledCheckboxInput.defaultProps = {
  theme: _CalciteThemeProvider.CalciteTheme
};

var StyledCheckboxLabel = _styledComponents.default.span.withConfig({
  displayName: "StyledCheckboxLabel",
  componentId: "sc-1cugyqs-2"
})(["", ";color:", ";width:auto;margin-right:", ";cursor:pointer;html[dir='rtl'] &{margin-right:initial;margin-left:", ";}"], (0, _helpers.fontSize)(-1), function (props) {
  return props.theme.palette.darkestGray;
}, function (props) {
  return props.theme.baseline;
}, function (props) {
  return props.theme.baseline;
});

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

var StyledCheckboxGroup = _styledComponents.default.label.withConfig({
  displayName: "StyledCheckboxGroup",
  componentId: "sc-1cugyqs-3"
})(["display:flex;align-items:center;position:relative;"]);

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

var StyledCheckboxCheckIcon = _styledComponents.default.svg.attrs({
  viewBox: '0 0 16 16'
}).withConfig({
  displayName: "StyledCheckboxCheckIcon",
  componentId: "sc-1cugyqs-4"
})(["height:16px;width:16px;"]);

exports.StyledCheckboxCheckIcon = StyledCheckboxCheckIcon;