ui-neu/dist/components/forms/Toggle.js

Neu UI, a responsive React component library.

import _taggedTemplateLiteral from "/home/runner/work/neu_ui/neu_ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/taggedTemplateLiteral";

function _templateObject5() {
  var data = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  width: 5em;\n\n  ", ":checked ~ ", ">", " {\n    -webkit-transform: translateX(1.25em);\n    -ms-transform: translateX(1.25em);\n    transform: translateX(1.25em);\n  }\n    \n  ", ":checked ~ ", " {\n    width: 0.6rem;\n    height: 0.6rem;\n    background-color: ", ";\n  }\n"]);

  _templateObject5 = function _templateObject5() {
    return data;
  };

  return data;
}

function _templateObject4() {
  var data = _taggedTemplateLiteral(["\n  position: absolute;\n  opacity: 0;\n  cursor: pointer;\n  height: 0;\n  width: 0;\n"]);

  _templateObject4 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3() {
  var data = _taggedTemplateLiteral(["\n  width: 0.7rem;\n  height: 0.7rem;\n  border-radius: 1rem;\n  background-color: rgb(223, 223, 223);\n"]);

  _templateObject3 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteral(["\n  box-shadow: 6px 6px 10px 0 rgba(0, 0, 0, 0.2);\n  border-radius: 1.25rem;\n  height: 1.25em;\n  width: 1.25em;\n  border: none;\n  outline: none;\n  background-color: #edf2f4;\n  font-size: 1rem;\n  transition: 0.5s;\n  -webkit-transform: translateX(0);\n  -ms-transform: translateX(0);\n  transform: translateX(0);\n"]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  margin-right: 1rem;\n  background-color: rgba(204, 218, 226, 0.349);\n  border-radius: 2rem;\n  display: flex;\n  height: 1.25em;\n  width: 2.5em;\n  border: none;\n  outline: none;\n  font-size: 1rem;\n  cursor: pointer;\n  box-shadow: inset -8px -8px 16px 0px rgba(255, 255, 255, 0.5),\n    inset 6px 6px 10px 0px rgba(0, 0, 0, 0.2);\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

import React from "react";
import styled from "styled-components";
var Switch = styled.div(_templateObject());
var Slider = styled.div(_templateObject2());
var Indicator = styled.div(_templateObject3());
var Checkbox = styled.input.attrs({
  type: 'checkbox'
})(_templateObject4());
var ToggleWrapper = styled.label(_templateObject5(), Checkbox, Switch, Slider, Checkbox, Indicator, function (props) {
  return props.indicatorColor;
});
export var Toggle = function Toggle(_ref) {
  var indicatorColor = _ref.indicatorColor;
  return /*#__PURE__*/React.createElement(ToggleWrapper, {
    indicatorColor: indicatorColor
  }, /*#__PURE__*/React.createElement(Checkbox, null), /*#__PURE__*/React.createElement(Switch, null, /*#__PURE__*/React.createElement(Slider, null)), /*#__PURE__*/React.createElement(Indicator, null));
};
Toggle.defaultProps = {
  indicatorColor: 'rgba(245, 203, 122, 1)'
};