media-stream-player/dist/esm/components/Switch.js

Player built on top of media-stream-library

import React from 'react';
import styled from 'styled-components';
const Container = styled.label `
  position: relative;
  display: inline-block;
  width: 28px;
  height: 16px;
`;
const Input = styled.input `
  opacity: 0;
  width: 0;
  height: 0;
`;
const Slider = styled.span `
  border-radius: 16px;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #ccc;
  transition: 0.4s;

  &:before {
    border-radius: 50%;
    content: '';
    position: absolute;
    height: 12px;
    width: 12px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: 0.4s;
  }

  ${Input}:checked + & {
    background-color: #2196f3;
  }

  ${Input}:checked + &:before {
    transform: translateX(12px);
  }

  ${Input}:focus + & {
    box-shadow: 0 0 1px #2196f3;
  }
`;
export const Switch = (props) => {
    return (React.createElement(Container, null,
        React.createElement(Input, { type: "checkbox", ...props }),
        React.createElement(Slider, null)));
};
//# sourceMappingURL=Switch.js.map