@gssfed/vital-ui-kit-react/dist/Slider/styled.js

Vital UI Kit for React!

var _templateObject = _taggedTemplateLiteral(['\n  display: flex;\n  position: relative;\n  min-width: 200px;\n  align-items: center;\n\n  ', ';\n'], ['\n  display: flex;\n  position: relative;\n  min-width: 200px;\n  align-items: center;\n\n  ', ';\n']),
    _templateObject2 = _taggedTemplateLiteral(['\n      opacity: 0.6;\n    '], ['\n      opacity: 0.6;\n    ']),
    _templateObject3 = _taggedTemplateLiteral(['\n  display: block;\n  position: relative;\n  width: 100%;\n  height: ', ';\n'], ['\n  display: block;\n  position: relative;\n  width: 100%;\n  height: ', ';\n']),
    _templateObject4 = _taggedTemplateLiteral(['\n  top: 0;\n  position: absolute;\n  border-radius: 100%;\n  border-color: ', ';\n  background-color: ', ';\n  box-shadow: 0 0 0 1px rgba(196, 210, 235, 0.3);\n  text-indent: -3333px;\n  overflow: hidden;\n  text-decoration: none;\n  text-align: center;\n  outline: 0;\n  border-style: solid;\n  border-width: 1px;\n  width: ', ';\n  height: ', ';\n  cursor: pointer;\n\n  &:hover {\n    border-color: ', ';\n    background-color: ', ';\n    box-shadow: 0 0 0 2px rgba(196, 210, 235, 0.3);\n  }\n'], ['\n  top: 0;\n  position: absolute;\n  border-radius: 100%;\n  border-color: ', ';\n  background-color: ', ';\n  box-shadow: 0 0 0 1px rgba(196, 210, 235, 0.3);\n  text-indent: -3333px;\n  overflow: hidden;\n  text-decoration: none;\n  text-align: center;\n  outline: 0;\n  border-style: solid;\n  border-width: 1px;\n  width: ', ';\n  height: ', ';\n  cursor: pointer;\n\n  &:hover {\n    border-color: ', ';\n    background-color: ', ';\n    box-shadow: 0 0 0 2px rgba(196, 210, 235, 0.3);\n  }\n']),
    _templateObject5 = _taggedTemplateLiteral(['\n  flex: 0 0 auto;\n  width: 24px;\n  height: 24px;\n  display: flex;\n  justify-content: center;\n'], ['\n  flex: 0 0 auto;\n  width: 24px;\n  height: 24px;\n  display: flex;\n  justify-content: center;\n']);

function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

import styled, { css } from 'styled-components';
import { Button as ButtonBase } from '../Button';
import constants from './constants';

var Root = styled.div(_templateObject, function (_ref) {
  var disabled = _ref.disabled;
  return disabled && css(_templateObject2);
});

var Wrapper = styled.div(_templateObject3, function (props) {
  return constants[props.size].handlerSize;
});

var Handler = styled.div(_templateObject4, function (_ref2) {
  var theme = _ref2.theme;
  return theme.form.borderColor;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.white;
}, function (props) {
  return constants[props.size].handlerSize;
}, function (props) {
  return constants[props.size].handlerSize;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.form.focusBorderColor;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.white;
});

var Button = styled(ButtonBase)(_templateObject5);

export { Root, Wrapper, Handler, Button };