Jätkame videos # 034 seal, kus pooleli jäime, ja jätkame otsingupiirkonna rajamist.
Seekord keskendume otsingu avatud olekule, ehitades ise tegelikud vormielemendid. Otsinguväli ise kasutab HTML5 vormielemendi tüüpi „otsing” - sellega on tavaliselt seotud mõni kohandatud stiil, kuid kuna me kasutame Normalize (Video # 011), pole see meie jaoks probleem.
Loome uue modulaarse biti CSS-i (_buttons.scss) enda jaoks saidi stiilinuppude jaoks. Näete, mida me seal teeme? Igasugune stiilimudel, mis on mõttekas eraldada, loome selle jaoks uue faili. Saame seda muretult teha nii palju kui soovite, sest failid liidetakse nagunii Sassiga kokku.
Kolmemõõtmelise nupuvajutuse loovad lihtsalt terve hunnik komadega eraldatud kasti varje. Värve on lihtne muuta, sest kasutage (arvasite ära!) Muutujaid.
$bottomSide: #3852b1; $rightSide: #203891; .button, #rcp_submit ( border: 0; // kill default styling background: #4e68c7; box-shadow: // right side // bottom 1px 0px 1px $rightSide, 0px 1px 1px $bottomSide, 2px 1px 1px $rightSide, 1px 2px 1px $bottomSide, 3px 2px 1px $rightSide, 2px 3px 1px $bottomSide, 4px 3px 1px $rightSide, 3px 4px 1px $bottomSide, 5px 4px 1px $rightSide, 4px 5px 1px $bottomSide, 6px 5px 1px $rightSide; )Kordame sama stiili sisendelemendis (ainult siseküljel, mitte välisküljel), täiendades 3D-välimust. Varjude nihutatud summa vastab meie $ offset muutujale, mis viib kujunduse järjepidevuseni.
Mitte selles videos, kuid hiljem saame aru, et sisendite sisemisi varje on kõigi varjude asemel palju lihtsam teha vaid kahe äärisega (ääris kohtub üksteisega nurga all). Nupul pole kahjuks võimalik.
See sisestatud sisendstiil läbib lõpuks kõik saidi sisestusstiilid nii heas kui halvas mõttes.