680 views
1.container { 2 display: flex; 3 justify-content: center; 4 align-items: center; 5} 6 7.radio-tile-group { 8 display: flex; 9 flex-wrap: wrap; 10 justify-content: center; 11} 12 13.radio-tile-group .input-container { 14 position: relative; 15 height: 80px; 16 width: 80px; 17 margin: 0.5rem; 18} 19 20.radio-tile-group .input-container .radio-button { 21 opacity: 0; 22 position: absolute; 23 top: 0; 24 left: 0; 25 height: 100%; 26 width: 100%; 27 margin: 0; 28 cursor: pointer; 29} 30 31.radio-tile-group .input-container .radio-tile { 32 display: flex; 33 flex-direction: column; 34 align-items: center; 35 justify-content: center; 36 width: 100%; 37 height: 100%; 38 border: 2px solid #079ad9; 39 border-radius: 5px; 40 padding: 1rem; 41 transition: transform 300ms ease; 42} 43 44.radio-tile-group .input-container .icon svg { 45 fill: #079ad9; 46 width: 2rem; 47 height: 2rem; 48} 49 50.radio-tile-group .input-container .radio-tile-label { 51 text-align: center; 52 font-size: 0.75rem; 53 font-weight: 600; 54 text-transform: uppercase; 55 letter-spacing: 1px; 56 color: #079ad9; 57} 58 59.radio-tile-group .input-container .radio-button:checked + .radio-tile { 60 background-color: #079ad9; 61 border: 2px solid #079ad9; 62 color: white; 63 transform: scale(1.1, 1.1); 64} 65 66.radio-tile-group .input-container .radio-button:checked + .radio-tile .icon svg { 67 fill: white; 68 background-color: #079ad9; 69} 70 71.radio-tile-group .input-container .radio-button:checked + .radio-tile .radio-tile-label { 72 color: white; 73 background-color: #079ad9; 74} 75
MIT License