#e8e8e8
1.cl-checkbox { 2 position: relative; 3 display: inline-block; 4} 5 6/* Input */ 7.cl-checkbox > input { 8 appearance: none; 9 -moz-appearance: none; 10 -webkit-appearance: none; 11 z-index: -1; 12 position: absolute; 13 left: -10px; 14 top: -8px; 15 display: block; 16 margin: 0; 17 border-radius: 50%; 18 width: 40px; 19 height: 40px; 20 background-color: rgba(0, 0, 0, 0.6); 21 box-shadow: none; 22 outline: none; 23 opacity: 0; 24 transform: scale(1); 25 pointer-events: none; 26 transition: opacity 0.3s, transform 0.2s; 27} 28 29/* Span */ 30.cl-checkbox > span { 31 display: inline-block; 32 width: 100%; 33 cursor: pointer; 34} 35 36/* Box */ 37.cl-checkbox > span::before { 38 content: ""; 39 display: inline-block; 40 box-sizing: border-box; 41 margin: 3px 11px 3px 1px; 42 border: solid 2px; 43 /* Safari */ 44 border-color: rgba(0, 0, 0, 0.6); 45 border-radius: 2px; 46 width: 18px; 47 height: 18px; 48 vertical-align: top; 49 transition: border-color 0.2s, background-color 0.2s; 50} 51 52/* Checkmark */ 53.cl-checkbox > span::after { 54 content: ""; 55 display: block; 56 position: absolute; 57 top: 3px; 58 left: 1px; 59 width: 10px; 60 height: 5px; 61 border: solid 2px transparent; 62 border-right: none; 63 border-top: none; 64 transform: translate(3px, 4px) rotate(-45deg); 65} 66 67/* Checked, Indeterminate */ 68.cl-checkbox > input:checked, 69.cl-checkbox > input:indeterminate { 70 background-color: #018786; 71} 72 73.cl-checkbox > input:checked + span::before, 74.cl-checkbox > input:indeterminate + span::before { 75 border-color: #018786; 76 background-color: #018786; 77} 78 79.cl-checkbox > input:checked + span::after, 80.cl-checkbox > input:indeterminate + span::after { 81 border-color: #fff; 82} 83 84.cl-checkbox > input:indeterminate + span::after { 85 border-left: none; 86 transform: translate(4px, 3px); 87} 88 89/* Hover, Focus */ 90.cl-checkbox:hover > input { 91 opacity: 0.04; 92} 93 94.cl-checkbox > input:focus { 95 opacity: 0.12; 96} 97 98.cl-checkbox:hover > input:focus { 99 opacity: 0.16; 100} 101 102/* Active */ 103.cl-checkbox > input:active { 104 opacity: 1; 105 transform: scale(0); 106 transition: transform 0s, opacity 0s; 107} 108 109.cl-checkbox > input:active + span::before { 110 border-color: #85b8b7; 111} 112 113.cl-checkbox > input:checked:active + span::before { 114 border-color: transparent; 115 background-color: rgba(0, 0, 0, 0.6); 116} 117 118/* Disabled */ 119.cl-checkbox > input:disabled { 120 opacity: 0; 121} 122 123.cl-checkbox > input:disabled + span { 124 color: rgba(0, 0, 0, 0.38); 125 cursor: initial; 126} 127 128.cl-checkbox > input:disabled + span::before { 129 border-color: currentColor; 130} 131 132.cl-checkbox > input:checked:disabled + span::before, 133.cl-checkbox > input:indeterminate:disabled + span::before { 134 border-color: transparent; 135 background-color: currentColor; 136} 137
8.6K views
8.6K views
Comments
MIT License