Vo videu č. 034 pokračujeme tam, kde sme skončili, a pokračujeme v budovaní oblasti vyhľadávania.
Tentokrát sa zameriavame na „otvorený“ stav vyhľadávania a budujeme samotné prvky skutočného tvaru. Samotné vyhľadávacie pole používa typ prvku formulára HTML5 „search“ - ktorý má zvyčajne spojené nejaké vlastné štýly, ale pretože používame Normalize (Video # 011), nie je to pre nás problém.
Vytvárame nový modulárny bit CSS (_buttons.scss) pre vlastné použitie pri vytváraní štýlových tlačidiel na celom webe. Vidíte, čo tam robíme? Akýkoľvek kúsok štýlu, ktorý má psychicky zmysel byť izolovaný, vytvoríme nový súbor pre. Môžeme to robiť bez obáv, koľko sa nám páči, pretože všetky súbory sa aj tak spoja so Sassom.
Trojrozmerný vzhľad tlačidiel vytvára iba celá skupina tieňov polí oddelených čiarkami. Farby sa dajú ľahko meniť, pretože používajú (uhádli ste!) Premenné.
$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; )Rovnaký štýl odrážame vo vstupnom prvku (iba zvnútra, nie zvonka) a dotvárame tak 3D vzhľad. Suma, v ktorej sú tiene posunuté, sa zhodujú s našou premennou $ offset, čo vedie k určitej konzistencii dizajnu.
Nie v tomto videu, ale neskôr zistíme, že vnútorné tiene na vstupoch je oveľa jednoduchšie urobiť iba s dvoma okrajmi namiesto všetkých tieňov (okraj sa stretávajú navzájom pod určitým uhlom). Na tlačidle to bohužiaľ nie je možné.
Tento štýl vkladaného vstupu nakoniec prenikne ku všetkým štýlom vstupu na celej stránke, v dobrom aj zlom.