#212121
1.rating { 2 cursor: pointer; 3} 4 5.card { 6 display: -webkit-box; 7 display: -ms-flexbox; 8 display: flex; 9 margin: auto; 10 -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 16, 0.19), 0 0.3rem 0.3rem rgba(0, 0, 16, 0.23); 11 box-shadow: 0 0.5rem 1rem rgba(0, 0, 16, 0.19), 0 0.3rem 0.3rem rgba(0, 0, 16, 0.23); 12 background-color: rgb(255, 255, 255); 13 padding: 0.8rem; 14 width: 33rem; 15} 16 17.rating-container { 18 display: -webkit-box; 19 display: -ms-flexbox; 20 display: flex; 21 -webkit-box-pack: justify; 22 -ms-flex-pack: justify; 23 justify-content: space-between; 24 padding: 0.4rem 0.8rem; 25 width: 100%; 26} 27 28.rating { 29 background-color: rgba(0, 0, 16, 0.8); 30 padding: 0.4rem 0.4rem 0.1rem 0.4rem; 31 border-radius: 2.2rem; 32} 33 34.rating-form { 35 display: flex; 36 flex-wrap: wrap; 37 justify-content: center; 38} 39 40.svg { 41 fill: rgb(242, 242, 242); 42 height: 3.6rem; 43 width: 3.6rem; 44 margin: 0.2rem; 45 align-items: center; 46 justify-content: center; 47 cursor: pointer; 48} 49 50.rating-form-2 svg { 51 height: 3rem; 52 width: 3rem; 53 margin: 0.5rem; 54} 55 56#radios label { 57 position: relative; 58} 59 60.super-happy, [type="radio"] { 61 position: absolute; 62 opacity: 0; 63} 64 65.input ,[type="radio"] + svg { 66 -webkit-transition: all 0.2s; 67 transition: all 0.2s; 68} 69 70.super-happy[class="super-happy"]:hover + svg, 71.super-happy[class="super-happy"]:checked + svg, 72.super-happy[class="super-happy"]:focus + svg { 73 fill: rgb(0, 204, 79); 74 transition: 1.5s; 75} 76 77.neutral[class="neutral"]:hover + svg, 78.neutral[class="neutral"]:checked + svg, 79.neutral[class="neutral"]:focus + svg { 80 fill: rgb(232, 214, 0); 81 transition: 1.5s; 82} 83 84.super-sad[class="super-sad"]:hover + svg, 85.super-sad[class="super-sad"]:checked + svg, 86.super-sad[class="super-sad"]:focus + svg { 87 fill: rgb(239, 42, 16); 88 transition: 1.5s; 89} 90 91 92
Comments
MIT License