Nadaljujemo tam, kjer smo končali v Video # 034, in nadaljujemo z gradnjo območja iskanja.
Tokrat se osredotočamo na "odprto" stanje iskanja in sami oblikujemo dejanske elemente obrazca. Samo iskalno polje uporablja vrsto elementa obrazca HTML5 »iskanje« - s katerim je običajno povezan določen slog po meri, toda ker uporabljamo Normalize (Video # 011), to za nas ne predstavlja težave.
Ustvarimo nov modularni bit CSS (_buttons.scss) za lastno uporabo pri oblikovanju gumbov na spletnem mestu. Vidiš, kaj počnemo tam? Ustvarimo novo datoteko za vsak del stylinga, ki je miselno smiselno izoliran. To lahko počnemo, kolikor želimo, brez skrbi, saj se datoteke vseeno povežejo skupaj s Sassom.
Tridimenzionalni videz gumbov ustvari samo cel kup senčnic, ločenih z vejicami. Barve je enostavno spremeniti, ker uporabite (uganili ste!) Spremenljivke.
$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; )Ta isti slog odmevamo tudi v vhodnem elementu (samo na notranji in ne na zunanji strani), s čimer zaključimo 3D videz. Znesek, ki ga odmikajo sence, se ujema z našo spremenljivko $ offset, kar vodi do konsistentnosti oblikovanja.
Ne v tem videoposnetku, kasneje pa ugotovimo, da je notranje sence na vhodih veliko lažje narediti samo z dvema obrobama namesto z vsemi sencami (meja se srečuje pod kotom). Na gumbu žal ni mogoče.
Ta slog vstavljenega vnosa na koncu prežema vse sloge vnosa na spletnem mestu, v dobrem ali slabem.