04 Tlačítka

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.

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čí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

Přidáváme ke třídě .btn další - modifikační třídu .btn-secondary-font.

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.

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.

Pro správné zobrazení se používá modifikátor btn-icon-before / btn-icon-after na základním elementu .btn. Obrázek se vloží do elementu span.btn__icon.

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
K 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.

Pokud se tlačítko s dropdownem nachází při pravém okraji obrazovky, framework nemá žádný JS na detekci, že menu přeteče přes okraj obrazovky. V takové situaci je možné na dropdown přidat modifikátor btn-dropdown__menu--right-align.

Pro místa, kde se nehodí psát text tlačítka velkými písmeny – např. když je v tlačítku textu více. Na span element s textem tlačítka přidat třídu .no-uppercase.

Pro místa, kde je potřeba mít tlačítka stejně široká (např. 2 sloupce vedle sebe). Na element p.btn-wrap přidat třídu .btn-wrap--wide.

Pro místa, kde je potřeba mít tlačítka stejně široká, ale jen do šířky toho nejširšího (ne na 100 % prostoru). Na element p.btn-wrap přidat třídu .btn-wrap--samewidth.

Zúžit mezery mezi více tlačítky je možné pomocí pomocných tříd .btn-wrap--sgap a .btn-wrap--nogap.

Různá rozložení tlačítek v řádku pomocí .btn-wrap--right, .btn-wrap--center, .btn-wrap--even a .btn-wrap--full.

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;