calcite-react/Slider/Slider-styled.js

Calcite components for React

"use strict";

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

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

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

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

var _polished = require("polished");

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 rangeProps = {
  rangeBorder: '1px solid transparent',
  trackBgColor: _CalciteThemeProvider.CalciteTheme.palette.lighterGray,
  trackErrorBgColor: _CalciteThemeProvider.CalciteTheme.palette.lightRed,
  trackHeight: '2px',
  trackHoverBgcolor: _CalciteThemeProvider.CalciteTheme.palette.lightGray,
  trackErrorHoverBgcolor: _CalciteThemeProvider.CalciteTheme.palette.darkRed,
  trackActiveBgcolor: _CalciteThemeProvider.CalciteTheme.palette.gray,
  trackErrorActiveBgcolor: _CalciteThemeProvider.CalciteTheme.palette.red,
  thumbHeight: '18px',
  thumbWidth: '18px',
  thumbBorder: '2px solid',
  thumbBorderColor: _CalciteThemeProvider.CalciteTheme.palette.gray,
  thumbErrorBorderColor: _CalciteThemeProvider.CalciteTheme.palette.darkRed,
  thumbBorderHoverColor: _CalciteThemeProvider.CalciteTheme.palette.Brand_Blue_200,
  thumbErrorBorderHoverColor: _CalciteThemeProvider.CalciteTheme.palette.darkRed,
  thumbShadowHover: "0 0 4px 1px ".concat((0, _polished.transparentize)(0.1, _CalciteThemeProvider.CalciteTheme.palette.lighterGray)),
  thumbShadowActive: "0 0 4px 1px ".concat((0, _polished.transparentize)(0.1, _CalciteThemeProvider.CalciteTheme.palette.lightestGray)),
  thumbBgDefault: _CalciteThemeProvider.CalciteTheme.palette.white,
  thumbBgHover: _CalciteThemeProvider.CalciteTheme.palette.Brand_Blue_200,
  thumbErrorBgHover: _CalciteThemeProvider.CalciteTheme.palette.darkRed,
  thumbBgActive: _CalciteThemeProvider.CalciteTheme.palette.brandPress,
  thumbErrorBgActive: _CalciteThemeProvider.CalciteTheme.palette.red
};

var rangeStyle = function rangeStyle() {
  return "\n    border: ".concat(rangeProps.rangeBorder, ";\n    background-color: transparent;\n    box-shadow: none;\n    margin-top: 0;\n    padding: 0;\n    z-index: 1;\n    cursor: pointer;\n  ");
};

var trackStyle = function trackStyle(error) {
  return "\n    width: 100%;\n    height: ".concat(rangeProps.trackHeight, ";\n    z-index: 2;\n    background-color: ").concat(error ? rangeProps.trackErrorBgColor : rangeProps.trackBgColor, ";\n  ");
};

var thumbStyle = function thumbStyle(error) {
  return "\n  height: ".concat(rangeProps.thumbHeight, ";\n  width: ").concat(rangeProps.thumbWidth, ";\n  border-radius: 50px;\n  margin-top: -8px;\n  cursor: pointer;\n  background-color: ").concat(rangeProps.thumbBgDefault, ";\n  border: ").concat(rangeProps.thumbBorder, ";\n  border-color: ").concat(error ? rangeProps.thumbErrorBorderColor : rangeProps.thumbBorderColor, ";\n  z-index: 3;\n  -webkit-appearance: none;\n  ");
};

var thumbHoverStyle = function thumbHoverStyle(error) {
  return "\n    background-color: ".concat(error ? rangeProps.thumbErrorBgHover : rangeProps.thumbBgHover, ";\n    border-color: ").concat(error ? rangeProps.thumbErrorBorderHoverColor : rangeProps.thumbBorderHoverColor, ";\n    box-shadow: ").concat(rangeProps.thumbShadowHover, ";\n  ");
};

var thumbFocusStyle = function thumbFocusStyle(error) {
  return "\n    background-color: ".concat(error ? rangeProps.thumbErrorBgActive : rangeProps.thumbBgActive, ";\n    border-color: ").concat(error ? rangeProps.thumbErrorBorderHoverColor : rangeProps.thumbBorderHoverColor, ";\n    box-shadow: ").concat(rangeProps.thumbShadowActive, ";\n  ");
};

var rangeHoverThumbStyle = function rangeHoverThumbStyle(error) {
  return "\n    background-color: ".concat(rangeProps.thumbBgDefault, ";\n    border-color: ").concat(error ? rangeProps.thumbErrorBorderHoverColor : rangeProps.thumbBorderHoverColor, ";\n    box-shadow: ").concat(rangeProps.thumbShadowHover, ";\n  ");
};

var rangeFocusThumbStyle = function rangeFocusThumbStyle(error) {
  return "\n    background-color: ".concat(error ? rangeProps.thumbErrorBgHover : rangeProps.thumbBgHover, ";\n    border-color: ").concat(error ? rangeProps.thumbErrorBorderHoverColor : rangeProps.thumbBorderHoverColor, ";\n    outline: none;\n    box-shadow: ").concat(rangeProps.thumbShadowActive, ";\n  ");
};

var rangeFocusThumbHoverStyle = function rangeFocusThumbHoverStyle(error) {
  return "\n    background-color: ".concat(error ? rangeProps.thumbErrorBgActive : rangeProps.thumbBgActive, ";\n    border-color: ").concat(error ? rangeProps.thumbErrorBorderHoverColor : rangeProps.thumbBorderHoverColor, ";\n  ");
};

var thumbFocusHoverStyle = function thumbFocusHoverStyle(error) {
  return "\n    background-color: ".concat(error ? rangeProps.thumbErrorBgActive : rangeProps.thumbBgActive, ";\n    border-color: ").concat(error ? rangeProps.thumbErrorBorderHoverColor : rangeProps.thumbBorderHoverColor, ";\n    box-shadow: ").concat(rangeProps.thumbShadowActive, ";\n  ");
};

var StyledSlider = (0, _styledComponents.default)(_commonElements.CalciteInput).withConfig({
  displayName: "StyledSlider",
  componentId: "mxufas-0"
})(["transition:all 250ms cubic-bezier(0.4,0,0.2,1);", ";", ";&:hover{&::-webkit-slider-runnable-track{background-color:", ";}&::-webkit-slider-thumb{", ";}&::-moz-range-track{background-color:", ";}&::-moz-range-thumb{", ";}&::-ms-fill-upper{background-color:", ";}&::-ms-fill-lower{background-color:", ";}&::-ms-thumb{", ";}}&:focus,&:active{border-color:transparent;box-shadow:none;&::-webkit-slider-runnable-track{background-color:", ";}&::-webkit-slider-thumb{", ";}&::-webkit-slider-thumb:hover{", ";}&::-moz-range-track{background-color:", ";}&::-moz-range-thumb{", ";}&::-moz-range-thumb:hover{", ";}&::-ms-fill-upper{background-color:", ";}&::-ms-fill-lower{background-color:", ";}&::-ms-thumb{", ";}&::-ms-thumb:hover{", ";}}&::-webkit-slider-runnable-track{background-color:red;", ";}&::-webkit-slider-thumb{", ";&:hover{", ";}&:focus,&:active{", ";&:hover{", ";}}}@supports (-webkit-overflow-scrolling:touch){&::-webkit-slider-thumb{height:20px;width:20px;margin-top:-9px;}}&::-moz-range-track{", ";}&::-moz-range-thumb{", ";height:14px;width:14px;&:hover{", ";}&:focus,&:active{", ";&:hover{", ";}}}&::-ms-fill-upper,&::-ms-fill-lower{background-color:", ";}&::-ms-track{", ";height:", ";border:0px solid transparent;color:transparent;}&::-ms-thumb{", ";height:14px;width:14px;margin-top:0px;&:hover{", ";}&:focus,&:active{", ";&:hover{", ";}}}"], rangeStyle(), function (props) {
  return (props.error || props.success) && (0, _styledComponents.css)(["border-color:transparent;padding-right:0;background-image:none;html[dir='rtl'] &{padding-left:0;}&:focus{border-color:transparent;box-shadow:none;}"]);
}, function (props) {
  return props.error ? rangeProps.trackErrorHoverBgcolor : rangeProps.trackHoverBgcolor;
}, function (props) {
  return rangeHoverThumbStyle(props.error);
}, function (props) {
  return props.error ? rangeProps.trackErrorHoverBgcolor : rangeProps.trackHoverBgcolor;
}, function (props) {
  return rangeHoverThumbStyle(props.error);
}, function (props) {
  return props.error ? rangeProps.trackErrorHoverBgcolor : rangeProps.trackHoverBgcolor;
}, function (props) {
  return props.error ? rangeProps.trackErrorHoverBgcolor : rangeProps.trackHoverBgcolor;
}, function (props) {
  return rangeHoverThumbStyle(props.error);
}, function (props) {
  return props.error ? rangeProps.trackErrorHoverBgcolor : rangeProps.trackHoverBgcolor;
}, function (props) {
  return rangeFocusThumbStyle(props.error);
}, function (props) {
  return rangeFocusThumbHoverStyle(props.error);
}, function (props) {
  return props.error ? rangeProps.trackErrorHoverBgcolor : rangeProps.trackHoverBgcolor;
}, function (props) {
  return rangeFocusThumbStyle(props.error);
}, function (props) {
  return rangeFocusThumbHoverStyle(props.error);
}, function (props) {
  return props.error ? rangeProps.trackErrorHoverBgcolor : rangeProps.trackHoverBgcolor;
}, function (props) {
  return props.error ? rangeProps.trackErrorHoverBgcolor : rangeProps.trackHoverBgcolor;
}, function (props) {
  return rangeFocusThumbStyle(props.error);
}, function (props) {
  return rangeFocusThumbHoverStyle(props.error);
}, function (props) {
  return trackStyle(props.error);
}, function (props) {
  return thumbStyle(props.error);
}, function (props) {
  return thumbHoverStyle(props.error);
}, function (props) {
  return thumbFocusStyle(props.error);
}, function (props) {
  return thumbFocusHoverStyle(props.error);
}, function (props) {
  return trackStyle(props.error);
}, function (props) {
  return trackStyle(props.error);
}, function (props) {
  return thumbHoverStyle(props.error);
}, function (props) {
  return thumbFocusStyle(props.error);
}, function (props) {
  return thumbFocusHoverStyle(props.error);
}, rangeProps.trackBgcolor, function (props) {
  return trackStyle(props.error);
}, rangeProps.trackHeight, function (props) {
  return thumbStyle(props.error);
}, function (props) {
  return thumbHoverStyle(props.error);
}, function (props) {
  return thumbFocusStyle(props.error);
}, function (props) {
  return thumbFocusHoverStyle(props.error);
});
exports.StyledSlider = StyledSlider;
StyledSlider.defaultProps = {
  theme: _CalciteThemeProvider.CalciteTheme
};