toggle.css (1456B)
1 input[type=checkbox] { 2 visibility: hidden; 3 height: 0; 4 width: 0; 5 margin: 0; 6 } 7 8 .rst-versions .rst-current-version { 9 padding: 10px; 10 display: flex; 11 justify-content: space-between; 12 } 13 14 .rst-versions .rst-current-version .fa-book, 15 .rst-versions .rst-current-version .fa-v, 16 .rst-versions .rst-current-version .fa-caret-down { 17 height: 24px; 18 line-height: 24px; 19 vertical-align: middle; 20 } 21 22 .rst-versions .rst-current-version .fa-element { 23 width: 80px; 24 text-align: center; 25 } 26 27 .rst-versions .rst-current-version .fa-book { 28 text-align: left; 29 } 30 31 .rst-versions .rst-current-version .fa-v { 32 color: #27AE60; 33 text-align: right; 34 } 35 36 label { 37 margin: 0 auto; 38 display: inline-block; 39 justify-content: center; 40 align-items: right; 41 border-radius: 100px; 42 position: relative; 43 cursor: pointer; 44 text-indent: -9999px; 45 width: 50px; 46 height: 21px; 47 background: #000; 48 } 49 50 label:after { 51 border-radius: 50%; 52 position: absolute; 53 content: ''; 54 background: #fff; 55 width: 15px; 56 height: 15px; 57 top: 3px; 58 left: 3px; 59 transition: ease-in-out 200ms; 60 } 61 62 input:checked+label { 63 background: #3a7ca8; 64 } 65 66 input:checked+label:after { 67 left: calc(100% - 5px); 68 transform: translateX(-100%); 69 } 70 71 html.transition, 72 html.transition *, 73 html.transition *:before, 74 html.transition *:after { 75 transition: ease-in-out 200ms !important; 76 transition-delay: 0 !important; 77 }