Przejdź do głównej zawartości
mamezi

Klasy CSS

Poniżej znajdziesz gotowe klasy CSS do stosowania w szablonie Inovax. Pomogą Ci szybko ostylować elementy bez pisania własnego CSS — wystarczy dodać odpowiednią klasę na poziomie sekcji, wiersza, kolumny lub modułu.

Nagłówki

Dział zatytułowany „Nagłówki”
  • mmz-hide-header-line — ukrywa linię (separator) w nagłówku sekcji. Przydatne np. w module Kafelki obrazkowe, gdy chcesz, żeby kafelki przylegały do nagłówka bez widocznej linii oddzielającej
  • mmz-module-header-center — centruje nagłówek modułu. Wymaga wyłączenia podkreślenia nagłówka — z poziomu modułu lub globalnie

Obramowanie i tło

Dział zatytułowany „Obramowanie i tło”

Klasy do dodawania ramki lub tła wokół dowolnej sekcji. Wszystkie mają spójny kolor i grubość, zgodne z resztą szablonu.

  • mmz-border — ramka ze wszystkich stron
  • mmz-border-t — ramka tylko od góry
  • mmz-border-b — ramka tylko od dołu
  • mmz-border-l — ramka tylko z lewej strony
  • mmz-border-r — ramka tylko z prawej strony

Zaokrąglenie rogów

Dział zatytułowany „Zaokrąglenie rogów”

Zaokrąglenie zgodne z globalną zmienną ustawianą w Wyglądzie sklepu.

  • mmz-btn-rounded — zaokrąglenie rogów przycisków
  • mmz-img-rounded — zaokrąglenie rogów obrazków (wszystkie rogi)
  • mmz-img-rounded-l — zaokrąglenie tylko lewych rogów obrazka
  • mmz-img-rounded-r — zaokrąglenie tylko prawych rogów obrazka

Układ i wyrównanie

Dział zatytułowany „Układ i wyrównanie”
  • mmz-col-100h — wyrównuje zdjęcia w pionie (jednakowa wysokość kolumn)
  • mmz-flexcol — poprawne łamanie i kolejność kolumn (np. w opisie produktu): na desktopie naprzemienny układ obraz/tekst, a na mobile elementy układają się jeden pod drugim w poprawnej kolejności
  • mmz-flex-end-sm — wyrównuje element do prawej krawędzi (np. pod modułem logotypów dostaw i płatności, gdy jest tylko jeden element)

Marginesy

Dział zatytułowany „Marginesy”

Mniejsze marginesy oparte o rem (wartość 0.25rem):

  • mb-xs-0-5 — margines dolny
  • mt-xs-0-5 — margines górny
  • ml-xs-0-5 — margines lewy
  • mr-xs-0-5 — margines prawy

Tabele

Dział zatytułowany „Tabele”
  • mmz-table-wrapper — dodaje poziome przewijanie (scroll) dla szerokich tabel, dzięki czemu nie rozpychają one strony na urządzeniach mobilnych

Rozwijanie treści

Dział zatytułowany „Rozwijanie treści”

Klasy do tworzenia rozwijanych bloków treści. Liczba w nazwie oznacza maksymalną wysokość (w px) widoczną przed rozwinięciem.

  • mmz-expand — kontener rozwijanej treści (domyślna wysokość)
  • mmz-expand-50, mmz-expand-100, mmz-expand-200, mmz-expand-300, mmz-expand-400, mmz-expand-500, mmz-expand-600 — kontener rozwijanej treści o zadanej wysokości

HTML

Dział zatytułowany „HTML”

Klasy na potrzeby niestandardowych bloków html (np. strona produktowa, strona potw. zamówienia)

  • mmz-grid-border — obramowanie elementu siatki
  • mmz-grid-fill — wypełnienie (tło) elementu siatki