#e8e8e8
1.modal { 2 width: fit-content; 3 height: fit-content; 4 background: #FFFFFF; 5 box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01), 0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09), 0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1); 6 border-radius: 26px; 7 max-width: 450px; 8} 9 10.form { 11 display: flex; 12 flex-direction: column; 13 gap: 20px; 14 padding: 20px; 15} 16 17.payment--options { 18 width: calc(100% - 40px); 19 display: grid; 20 grid-template-columns: 33% 34% 33%; 21 gap: 20px; 22 padding: 10px; 23} 24 25.payment--options button { 26 height: 55px; 27 background: #F2F2F2; 28 border-radius: 11px; 29 padding: 0; 30 border: 0; 31 outline: none; 32} 33 34.payment--options button svg { 35 height: 18px; 36} 37 38.payment--options button:last-child svg { 39 height: 22px; 40} 41 42.separator { 43 width: calc(100% - 20px); 44 display: grid; 45 grid-template-columns: 1fr 2fr 1fr; 46 gap: 10px; 47 color: #8B8E98; 48 margin: 0 10px; 49} 50 51.separator > p { 52 word-break: keep-all; 53 display: block; 54 text-align: center; 55 font-weight: 600; 56 font-size: 11px; 57 margin: auto; 58} 59 60.separator .line { 61 display: inline-block; 62 width: 100%; 63 height: 1px; 64 border: 0; 65 background-color: #e8e8e8; 66 margin: auto; 67} 68 69.credit-card-info--form { 70 display: flex; 71 flex-direction: column; 72 gap: 15px; 73} 74 75.input_container { 76 width: 100%; 77 height: fit-content; 78 display: flex; 79 flex-direction: column; 80 gap: 5px; 81} 82 83.split { 84 display: grid; 85 grid-template-columns: 4fr 2fr; 86 gap: 15px; 87} 88 89.split input { 90 width: 100%; 91} 92 93.input_label { 94 font-size: 10px; 95 color: #8B8E98; 96 font-weight: 600; 97} 98 99.input_field { 100 width: auto; 101 height: 40px; 102 padding: 0 0 0 16px; 103 border-radius: 9px; 104 outline: none; 105 background-color: #F2F2F2; 106 border: 1px solid #e5e5e500; 107 transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1); 108} 109 110.input_field:focus { 111 border: 1px solid transparent; 112 box-shadow: 0px 0px 0px 2px #242424; 113 background-color: transparent; 114} 115 116.purchase--btn { 117 height: 55px; 118 background: #F2F2F2; 119 border-radius: 11px; 120 border: 0; 121 outline: none; 122 color: #ffffff; 123 font-size: 13px; 124 font-weight: 700; 125 background: linear-gradient(180deg, #363636 0%, #1B1B1B 50%, #000000 100%); 126 box-shadow: 0px 0px 0px 0px #FFFFFF, 0px 0px 0px 0px #000000; 127 transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1); 128} 129 130.purchase--btn:hover { 131 box-shadow: 0px 0px 0px 2px #FFFFFF, 0px 0px 0px 4px #0000003a; 132} 133 134/* Reset input number styles */ 135.input_field::-webkit-outer-spin-button, 136.input_field::-webkit-inner-spin-button { 137 -webkit-appearance: none; 138 margin: 0; 139} 140 141.input_field[type=number] { 142 -moz-appearance: textfield; 143}
11K views
11K views
Comments
MIT License