parent
							
								
									60937390c3
								
							
						
					
					
						commit
						eae8cfd193
					
				
				 4 changed files with 81 additions and 3 deletions
			
			
		@ -0,0 +1,55 @@ | 
				
			||||
.switch { | 
				
			||||
	position: relative; | 
				
			||||
   | 
				
			||||
  } | 
				
			||||
  .switch input[type="checkbox"] { | 
				
			||||
    visibility: hidden; | 
				
			||||
	position : absolute; | 
				
			||||
     | 
				
			||||
    } | 
				
			||||
    .switch input[type="checkbox"]:checked + label { | 
				
			||||
        transform: rotate(180deg); | 
				
			||||
         | 
				
			||||
    } | 
				
			||||
    .switch input[type="checkbox"]:before { | 
				
			||||
        transform: translateX(35.5px); | 
				
			||||
        background-color: #fff; | 
				
			||||
      } | 
				
			||||
 | 
				
			||||
 | 
				
			||||
 | 
				
			||||
.switch label { | 
				
			||||
    display: flex; | 
				
			||||
    width: 17px; | 
				
			||||
    height: 30px; | 
				
			||||
    border: 1px solid #E1E1E1; | 
				
			||||
    border-radius: 99em; | 
				
			||||
    position: relative; | 
				
			||||
    transition: transform 0.3s ease-in-out; | 
				
			||||
    transform-origin: 50% 50%; | 
				
			||||
} | 
				
			||||
.switch label:before { | 
				
			||||
      transition: transform 0.3s ease; | 
				
			||||
      transition-delay: 0s; | 
				
			||||
      content: ""; | 
				
			||||
      display: block; | 
				
			||||
      position: absolute; | 
				
			||||
      width: 15px; | 
				
			||||
      height: 15px; | 
				
			||||
      background-color: rgba(19,47,82,0.66); | 
				
			||||
      border-radius: 50%; | 
				
			||||
      top: 0px; | 
				
			||||
      left: 1px; | 
				
			||||
      animation: jump 0.8s infinite; | 
				
			||||
      transform: rotate(180deg); | 
				
			||||
      animation-fill-mode: both; | 
				
			||||
    } | 
				
			||||
    @keyframes jump { | 
				
			||||
        0% { transform: translate(0, 000%) ; } | 
				
			||||
        50% { transform: translate(0, 100%); } | 
				
			||||
        55% { transform: translate(0, 100%) rotate(15deg); } | 
				
			||||
        60% { transform: translate(0, 100%) rotate(-15deg); } | 
				
			||||
        65% { transform: translate(0, 100%) rotate(15deg); } | 
				
			||||
        70% { transform: translate(0, 100%) rotate(-15deg); } | 
				
			||||
        100% { transform: translate(0, 00%) ; } | 
				
			||||
    } | 
				
			||||
@ -0,0 +1,13 @@ | 
				
			||||
import React from "react"; | 
				
			||||
import "./switch.css"; | 
				
			||||
 | 
				
			||||
 const Switch = () => { | 
				
			||||
  return ( | 
				
			||||
    <div className="switch"> | 
				
			||||
      <input type="checkbox" id="toggle" /> | 
				
			||||
      <label for="toggle"></label> | 
				
			||||
    </div> | 
				
			||||
  ); | 
				
			||||
} | 
				
			||||
 | 
				
			||||
export default Switch; | 
				
			||||
					Loading…
					
					
				
		Reference in new issue