660 views
1.plan-chooser { 2 background-color: rgba(255, 255, 255, 1); 3 max-width: 320px; 4 border-radius: 10px; 5 padding: 20px; 6 color: #000; 7 box-shadow: 0px 87px 78px -39px rgba(0,0,0,0.4); 8} 9 10.header { 11 text-align: center; 12 margin-top: 0.75rem; 13} 14 15.plan-chooser .title { 16 font-size: 1.875rem; 17 font-weight: 700; 18 line-height: 1.25rem; 19 color: rgba(0, 0, 0, 1); 20} 21 22.plan-chooser .desc { 23 margin-top: 0.4rem; 24 font-size: 1rem; 25 line-height: 1.5rem; 26 color: rgba(75, 85, 99, 1); 27} 28 29.plan-option { 30 margin-top: 1rem; 31 margin-bottom: 15px; 32} 33 34.plan-option label { 35 cursor: pointer; 36 overflow: hidden; 37 border: 2px solid rgba(229, 231, 235, 1); 38 border-radius: 0.375rem; 39 background-color: rgba(249, 250, 251, 1); 40 display: flex; 41 align-items: center; 42 justify-content: space-between; 43 padding: 1rem .4rem; 44 margin: 10px 0; 45 transform: all .15s ease; 46} 47 48.plan-option label .plan-info { 49 display: flex; 50 flex-direction: column; 51 margin-left: 10px; 52} 53 54.plan-cost { 55 font-size: 1.25rem; 56 line-height: 1.75rem; 57 font-weight: 600; 58 color: rgba(0, 0, 0, 1); 59} 60 61.plan-name { 62 font-size: 0.875rem; 63 line-height: 1.25rem; 64 color: rgba(75, 85, 99, 1); 65} 66 67.reduction { 68 display: inline-block; 69 border-radius: 9999px; 70 border: 1px solid rgba(22, 163, 74, 1); 71 background-color: rgba(220, 252, 231, 1); 72 padding: 0.2rem .4rem; 73 font-size: 0.675rem; 74 line-height: 1.25rem; 75 font-weight: 600; 76 color: rgba(22, 163, 74, 1); 77} 78 79.plan-option input:checked + label { 80 border-color: rgba(37, 99, 235, 1); 81} 82 83.choose-btn { 84 width: 100%; 85 display: inline-flex; 86 align-items: center; 87 justify-content: center; 88 border-radius: 0.375rem; 89 background-color: rgba(37, 99, 235, 1); 90 padding: 1rem 3rem; 91 font-weight: 600; 92 color: #fff; 93 transform: all .15s ease; 94} 95 96.choose-btn:hover { 97 opacity: .9; 98} 99 100.plan-option input { 101 display: none; 102}
MIT License