jobiqo-cl/lib/src/components/02-atoms/01-forms/10-toggle/styles.js

[](https://circleci.com/gh/jobiqo/jobiqo-cl)

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var styled = require('styled-components');
var styled__default = _interopDefault(styled);

const ToggleGroup = styled__default.div `
  position: relative;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  opacity: ${props => (props.disabled ? '0.5' : '1')};

  .onoffswitch {
    position: relative;

    .onoffswitch-label {
      overflow: hidden;
      border-radius: ${props => props.theme.toggle.borderRadius};
      background-color: ${props => props.checked
    ? props.theme.toggle.backgroundColor[props.switchStyle]
    : props.theme.colors.gray2};
      margin: 0;
      padding-right: 0.5rem;
      padding-left: 0.5rem;
    }

    .onoffswitch-inner {
      transition: all 0.15s ease-in-out;
      margin-left: ${props => props.theme.toggle.circleWidth};
      font-size: 0.7rem;
      height: ${props => props.theme.toggle.height};
      line-height: ${props => props.theme.toggle.height};
      color: ${props => props.checked
    ? props.theme.toggle.color[props.switchStyle]
    : props.theme.font.color};
    }

    .onoffswitch-switch {
      width: ${props => props.theme.toggle.circleWidth};
      height: ${props => props.theme.toggle.circleHeight};
      margin: 0;
      background: ${props => props.theme.toggle.circleBackground[props.switchStyle]};
      box-shadow: ${props => props.theme.toggle.boxShadow};
      border-radius: ${props => props.theme.toggle.switchBorderRadius};
      position: absolute;
      top: 0;
      bottom: 0;
      transform: translateX(-0.5rem);
      transition: all 0.15s ease-in-out;
    }
  }
`;
const ToggleLabel = styled__default.label `
  width: auto;
  position: relative;
  padding-left: ${props => props.width}px;
  left: -${props => props.width}px;
  line-height: ${props => props.theme.toggle.height};
  height: auto;
  cursor: pointer;
  margin-left: 0.5rem;
  z-index: 1;
`;
const ToggleInput = styled__default.input `
  visibility: hidden;
  opacity: 0;
  position: absolute;

  &:checked ~ .onoffswitch .onoffswitch-label .onoffswitch-switch {
    transform: translateX(100%);
    box-shadow: ${props => props.theme.toggle.boxShadow};
  }

  &:checked ~ .onoffswitch .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
    margin-right: ${props => props.theme.toggle.circleWidth};
  }
`;

exports.ToggleGroup = ToggleGroup;
exports.ToggleInput = ToggleInput;
exports.ToggleLabel = ToggleLabel;