#e8e8e8
1/* Initial form state */ 2.form { 3 --col1: #fff; 4 --col2: #252325; 5 --col3: rgba(232, 213, 196, 0.9); 6 --col4: #ffffff; 7 --col5: #683363; 8 --sh: rgba(80, 80, 80, 0.35); 9 --rad: 4px; 10 --radBig: 10px; 11 border-radius: 0 0 var(--radBig) var(--radBig); 12 box-shadow: 0 0 20px var(--sh); 13 display: flex; 14 flex-direction: column; 15 gap: 1.5em 1em; 16 padding: 1em; 17 position: relative; 18 max-width: 75%; 19 max-height: 90px; 20 transition: background .3s ease-out, max-height .3s ease-out; 21 overflow: hidden; 22} 23 24.form::before { 25 content: 'Ready to purchase?'; 26 color: var(--col2); 27 font-size: 1.2em; 28 font-weight: 700; 29 display: grid; 30 width: calc(100% - 2em); 31 height: 60%; 32 position: absolute; 33 place-items: center; 34 z-index: 99999; 35} 36 37.form::after { 38 content: ''; 39 backdrop-filter: blur(6px) grayscale(100%); 40 background: linear-gradient(-180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.5) 70%, rgba(255, 255, 255, 0.3) 90%); 41 height: 100%; 42 width: 100%; 43 left: 0; 44 top: 0; 45 display: block; 46 position: absolute; 47 z-index: 999; 48} 49 50.form::after, 51.form::before { 52 border-radius: 0 0 var(--radBig) var(--radBig); 53 pointer-events: none; 54 transition: all .5s ease-out; 55} 56 57/* Form hover and focus */ 58.form:hover, 59.form:focus-within { 60 max-width: 100%; 61 max-height: 380px; 62} 63 64.form:focus-within { 65 overflow: initial; 66} 67 68.form:hover::before, 69.form:hover::after { 70 opacity: 0; 71} 72 73.form:hover::after { 74 backdrop-filter: blur(0) grayscale(0%); 75} 76 77.form header { 78 color: var(--col1); 79 font-size: 1.25rem; 80 font-weight: 600; 81} 82/* Labels and inputs UI */ 83:is(.form) label span, label input { 84 flex: 1 100%; 85 transition: all .3s ease-out; 86} 87 88:is(.form) input, select, button { 89 appearance: none; 90 border: 0; 91 padding: .75em; 92 border-radius: var(--rad); 93 transition: all .3s ease-out; 94} 95 96.form label { 97 display: flex; 98 flex-flow: row wrap; 99 color: var(--col4); 100 gap: .5em; 101} 102 103.form input { 104 box-shadow: inset 3px 3px 1px var(--sh); 105} 106 107.form fieldset { 108 display: flex; 109 backdrop-filter: blur(10px); 110 flex-flow: row nowrap; 111 gap: 1em; 112 position: relative; 113 transition: all .3s ease-out; 114 padding: 1rem; 115 z-index: 10; 116 border: 3px double var(--col1); 117 border-radius: var(--rad); 118} 119 120.form fieldset label { 121 flex: 1; 122 display: flex; 123 flex-flow: row wrap; 124 font-size: .75em; 125} 126 127.sm { 128 justify-content: space-around; 129} 130 131.sm span { 132 text-align: center; 133} 134 135.form select { 136 box-shadow: inset 3px 3px 1px var(--sh); 137 padding: .75em 1.75em .75em 0.5em; 138 position: relative; 139} 140 141.custom-select { 142 position: relative; 143} 144 145.custom-select::after { 146 position: absolute; 147 content: ""; 148 top: 45%; 149 right: 5px; 150 width: 0; 151 height: 0; 152 border: 6px solid transparent; 153 border-color: var(--col5) transparent transparent transparent; 154} 155 156.form fieldset span { 157 flex: 1 100%; 158} 159 160.form fieldset input { 161 flex: 0 1 40px; 162} 163 164.form button { 165 background-color: var(--col1); 166 color: var(--col4); 167 border: 2px solid var(--col4); 168 font-size: 1em; 169 font-weight: 700; 170 align-self: center; 171 padding: .5em 1.5em; 172 appearance: none; 173} 174 175/* Form and UI valid and invalid states */ 176.form input:focus, 177.form select:focus { 178 outline: 3px solid var(--col3); 179 outline-offset: 1px; 180} 181 182.form input:invalid:not(:focus), 183.form select:invalid:not(:focus) { 184 background-color: var(--col3); 185 outline: 3px solid var(--col4); 186 outline-offset: 1px; 187} 188 189.form input:valid:not(:focus), 190.form select:valid:not(:focus) { 191 outline: 3px solid var(--col1); 192 outline-offset: 1px; 193} 194 195.form .message { 196 display: block; 197 opacity: 0; 198 font-size: .75em; 199 font-weight: 400; 200 transition: all .3s ease-out; 201 margin: -1rem 0 0; 202} 203 204.form:has(:invalid) .message { 205 opacity: 1; 206 margin: .25rem 0 0 0; 207} 208 209label:has(input:invalid), 210label:has(select:invalid) { 211 color: var(--col3); 212 opacity: .8; 213} 214 215label:has(input:valid), 216label:has(select:valid) { 217 opacity: 1; 218} 219 220.form:hover:has(:focus, :active):valid .submitCard { 221 max-height: 180px; 222 opacity: 1; 223 transition: opacity 1s ease-out .5s, translate 1.3s ease-out; 224 translate: 0 100%; 225} 226 227.form:hover:invalid { 228 transition: all .3s ease-out; 229 background-color: var(--col5); 230} 231 232.form:hover:valid { 233 transition: all .3s ease-out; 234 background-color: var(--col1); 235} 236 237.form:hover:valid * { 238 color: var(--col2); 239} 240 241.form:hover:valid input, 242.form:hover:valid select { 243 outline: 3px solid var(--col2); 244} 245 246.form:hover:invalid fieldset { 247 border: 1px dashed var(--col3); 248} 249 250.form:hover:valid fieldset { 251 border: 1px dashed var(--col2); 252} 253 254/* Submit block */ 255.form .submitCard { 256 display: flex; 257 justify-content: center; 258 background-color: var(--col2); 259 border-radius: 0 0 var(--rad) var(--rad); 260 bottom: 0; 261 padding: .5em; 262 opacity: 0; 263 max-height: 0; 264 translate: 0 -100%; 265 position: absolute; 266 width: calc(100% - 2em); 267 transition: all .5s ease-out .1s; 268 z-index: -1; 269}
2K views
2K views
Comments
MIT License