04 Tlačítka

Zdrojové CSS: /src/css/atoms/forms/_buttons.scss
Zdrojové JS: /src/js/components/btnDropdown.coffee

Primární tlačítka webu

Tlačítko může být využito pro elementy <button> i <a> Vždy je struktura .btn > span. Důležítá je classa .btn, na kterou se dále přidávají modifikátory pro obarvení, velikost apod. Defaultní tlačítko je .btn.btn-primary

Pro zobrazení více tlačítek za sebou slouží obal .btn-wrap, který se stará o správné odsazení tlačítek.

Mám zájem

Velikostní varianty webu

Zatím se používá pouze zmenšená verze tlačítka, které se docílí přidáním classy btn-s na .btn.

Sekundární tlačítka webu

Sekundární tlačítko se zobrazuje bez pozadí pouze s borderem. Slouží k tomu modifikátor btn-border. Defaultní primární tlačítko má tedy classy .btn.btn-primary.btn-border

Disabled tlačítka

Pro elementy a se přidá na .btn modifikátor is-disabled a ideálně by se měl odstranit href atribut.

Pro elementy button stačí přidat atribut disabled="disabled".

Disabled stav lze použít pro jakoukoliv modifikaci buttonu ať už primární, sekundární, s ikonkou apod.

Mám zájem Mám zájem

Tlačítka s ikonkami

Pro správné zobrazení se používá modifikátor btn-icon-before / btn-icon-after na základním elementu .btn. Lze vložit jakýkoliv atom ikonky.

Tlačítka s popupem

Tlačítko s vyjížděcím submenu. Hlavní kostrou je .btn-dropdown, do kterého se vkládá tlačítko s libovolnými modifikátory a .btn-dropdown__menu se seznamem odkazů.

Klikem na .btn se toggluje modifikátor is-open na obalující .btn-dropdown, což způsobí zobrazení popupu.

Popup .btn-drowdown__menu má několik modifikátorů pro zobrazení na příslušném místě od tlačítka:
btn-dropdown__menu--right - doprava od tlačítka
btn-dropdown__menu--left - doleva od tlačítka
btn-dropdown__menu--down - dolů od tlačítka
btn-dropdown__menu--up - nahoru od tlačítka
Ke logickému otevírání je potřeba upravit i ikonka, aby ukazovala kam se bude popup otevírat: icon-angle-right, icon-angle-left, icon-angle-down či icon-angle-up.

Tlačítka fakult

Barevná tlačítka jednotlivých fakult. Pokud chcete na svém webu používat tlačítka barev jiných fakult, pak namísto btn-primary (která má barvu dle vaší fakulty – není-li stanoveno jinak) použijte btn-* se zkratkou fakulty:
$muni: #002776;
$law: #7f379b;
$med: #f01928;
$sci: #01af40;
$fi: #f2d45c;
$fss: #007b69;
$fsps: #009aa6;
$phil: #00a3e2;
$ped: #ffa030;
$econ: #782328;

Speciální tlačítka pro tmavá pozadí

Pro bílé tlačítko slouží modifikátor btn-white, který se vkládá namísto modifikátoru btn-primary.