phoenix-components-library/react/components/Switch/Switch.css

Component library for Phoenix Frontend Projects.

.es-switch {
  position: relative;
  display: inline-block;
  width: 55px;
  height: 24px; }
  .es-switch input {
    display: none; }
  .es-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid #6db749;
    transition: 0.4s;
    border-radius: 34px; }
    .es-switch .slider:before {
      position: absolute;
      content: "";
      height: 16px;
      width: 16px;
      left: 2px;
      bottom: 2px;
      border: 1px solid #6db749;
      border-radius: 50%;
      transition: 0.4s; }
  .es-switch input:checked + .slider {
    background-color: #6db749; }
    .es-switch input:checked + .slider:before {
      background-color: #fff; }
  .es-switch input:checked + .slider:before {
    transform: translateX(30px); }
  .es-switch input:disabled + .slider {
    opacity: 0.5;
    filter: grayscale(100%); }
  .es-switch .on {
    display: none; }
  .es-switch .on {
    color: #fff;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 30%;
    font-size: 10px;
    font-family: Verdana, sans-serif; }
  .es-switch .off {
    color: #6db749;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    right: 0%;
    font-size: 10px;
    font-family: Verdana, sans-serif; }
  .es-switch input:checked + .slider .on {
    display: block; }
  .es-switch input:checked + .slider .off {
    display: none; }
  .es-switch.small {
    width: 27px;
    height: 12px;
    min-width: 27px; }
    .es-switch.small .slider:before {
      height: 9px;
      width: 9px;
      left: -1px;
      bottom: 0px; }
    .es-switch.small input:checked + .slider:before {
      transform: translateX(16px); }
    .es-switch.small .on {
      color: transparent; }
    .es-switch.small .off {
      color: transparent; }