Pokračujeme tam, kde jsme přestali ve videu # 034, a pokračujeme v budování oblasti hledání.
Tentokrát se zaměřujeme na „otevřený“ stav hledání a vytváříme samotné prvky samotného formuláře. Samotné vyhledávací pole používá typ prvku formuláře HTML5 „search“ - který má obvykle přidružen nějaký vlastní styl, ale protože používáme Normalize (Video # 011), není to pro nás problém.
Vytváříme nový modulární bit CSS (_buttons.scss) pro vlastní použití ve stylingových tlačítkách na celém webu. Vidíte, co tam děláme? Každý kousek stylingu, který má mentálně smysl izolovat, vytvoříme nový soubor. Můžeme to bez obav dělat, jak se nám líbí, protože všechny soubory se stejně spojí se Sassem.
Trojrozměrný vzhled tlačítka je vytvořen jen spoustou stínů polí oddělených čárkami. Barvy se snadno mění, protože používají (uhodli jste!) Proměnné.
$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; )Odrazujeme stejný styl ve vstupním prvku (pouze zevnitř, nikoli zvenčí) a dokončujeme 3D vzhled. Částka, kterou jsou stíny odsazeny, odpovídá naší proměnné $ offset, což vede k určité konzistenci designu.
Ne v tomto videu, ale později zjistíme, že vnitřní stíny na vstupech je mnohem snazší udělat jen se dvěma okraji namísto všech stínů (hranice se navzájem šikmo). Na tlačítku bohužel není možné.
Tento styl vloženého vstupu nakonec prostupuje všemi vstupními styly na celém webu, ať už k lepšímu nebo k horšímu.