You can not select more than 25 topics
			Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
		
		
		
		
		
			
		
			
				
					
					
						
							54 lines
						
					
					
						
							1.1 KiB
						
					
					
				
			
		
		
	
	
							54 lines
						
					
					
						
							1.1 KiB
						
					
					
				// *, *:after, *:before { | 
						|
// 	// box-sizing: border-box; | 
						|
// } | 
						|
 | 
						|
// body { | 
						|
// 	min-height: 100vh; | 
						|
// 	display: flex; | 
						|
// 	align-items: center; | 
						|
// 	justify-content: center; | 
						|
// } | 
						|
 | 
						|
.switchbox { | 
						|
  position: relative; | 
						|
  input[type="checkbox"] { | 
						|
    visibility: hidden; | 
						|
    position: absolute; | 
						|
    &:checked + label { | 
						|
      transform: rotate(0deg); | 
						|
      background-color: rgb(18, 207, 127); | 
						|
      border-color: rgb(18, 207, 127) !important; | 
						|
      &:before { | 
						|
        transform: translateX(24px); | 
						|
        background-color: #fff; | 
						|
        border-color: rgb(18, 207, 127) !important; | 
						|
      } | 
						|
    } | 
						|
  } | 
						|
 | 
						|
  label { | 
						|
    display: flex; | 
						|
    width: 50px; | 
						|
    height: 25px; | 
						|
    border: 3px solid #aaa; | 
						|
    border-radius: 99em; | 
						|
    position: relative; | 
						|
    transition: transform 0.3s ease-in-out; | 
						|
    transform-origin: 50% 50%; | 
						|
    cursor: pointer; | 
						|
 | 
						|
    &:before { | 
						|
      transition: transform 0.3s ease; | 
						|
      transition-delay: 0s; | 
						|
      content: ""; | 
						|
      display: block; | 
						|
      position: absolute; | 
						|
      width: 17px; | 
						|
      height: 17px; | 
						|
      background-color: #aaa; | 
						|
      border-radius: 50%; | 
						|
      top: 1px; | 
						|
      left: 1px; | 
						|
    } | 
						|
  } | 
						|
}
 | 
						|
 |