![](/build/_assets/logo-png-XGWSYHKJ.png)
Switch by
Galahhad
#212121
1/* checkbox settings ๐ */ 2 3.switch { 4 /* global */ 5 --total_transition_duration: .3s; 6 /* switch */ 7 --slider_width: 2.875em; 8 --slider_height: 1.5em; 9 --slider_light_bg: linear-gradient(90deg, #f32a85 0%, #f19d36 100%); 10 --slider_night_bg: linear-gradient(90deg, #1701a1 0%, #af0693 75%); 11 --slider_offset: calc((var(--slider_height) - var(--circle_diameter)) / 2); 12 --slider_radius: calc(var(--slider_height) / 2); 13 /* circle */ 14 --circle_diameter: 1.125em; 15 --circle_rotation: 360deg; 16 /* svg */ 17 --svg_width: var(--circle_diameter); 18 --sun-color: #fff; 19 --moon-color: #fff; 20} 21 22.switch input { 23 display: none; 24} 25 26.slider svg { 27 position: absolute; 28 height: auto; 29 color: var(--svg-color); 30 transition: var(--total_transition_duration) ease; 31 width: 100%; 32} 33 34.circle svg.sun { 35 transform: scale(1); 36 color: var(--sun-color); 37} 38 39.circle svg.moon { 40 transform: scale(0); 41 color: var(--moon-color); 42 width: calc(100% - 2px); 43} 44 45.slider { 46 display: inline-block; 47 width: var(--slider_width); 48 height: var(--slider_height); 49 border-radius: var(--slider_radius); 50 position: relative; 51 cursor: pointer; 52 transition: var(--total_transition_duration) ease; 53 overflow: hidden; 54} 55 56.slider::before, 57.slider::after { 58 content: ""; 59 position: absolute; 60 inset: 0; 61 transition: var(--total_transition_duration) ease; 62} 63 64/* ::before and ::after backgrounds are needed for smooth 65transition of gradients otherwise there is no way :\ */ 66.slider::before { 67 opacity: 0; 68 background: var(--slider_night_bg); 69} 70 71.slider::after { 72 opacity: 1; 73 background: var(--slider_light_bg); 74} 75 76/* ------------ */ 77 78.circle { 79 display: flex; 80 align-items: center; 81 justify-content: center; 82 width: var(--circle_diameter); 83 height: var(--circle_diameter); 84 position: absolute; 85 top: var(--slider_offset); 86 left: var(--slider_offset); 87 transition: var(--total_transition_duration) ease; 88 z-index: 10; 89} 90 91/* actions */ 92 93.switch input:checked+.slider::before { 94 opacity: 1; 95} 96 97.switch input:checked+.slider::after { 98 opacity: 0; 99} 100 101.switch input:active+.slider .circle { 102 transform: scale(0.9); 103} 104 105.switch input:checked+.slider .circle { 106 left: calc(100% - var(--circle_diameter) - var(--slider_offset)); 107} 108 109.switch input:checked+.slider .sun { 110 transform: scale(0) rotate(var(--circle_rotation)); 111} 112 113.switch input:checked+.slider .moon { 114 transform: scale(1) rotate(var(--circle_rotation)); 115}
ย
1.2K views
1.2K views
MIT License