Vzhled stránkování repeateru

Stránkování umí Oxygen naformátovat v builderu a má na to spoustu nastavení. Pokud chcete stránkování opravdu na míru a možnosti buidleru na to nestačí, můžete sáhnout – jak jinak – po CSS. A sama se přiznám, že je to někdy jednodušší a rychlejší.

/* repeater pagination */
.oxy-repeater-pages-wrap{
    grid-column: 1 / -1;
}

.oxy-repeater-pages-wrap .oxy-repeater-pages{    
    width: 100%;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    margin-top: 32px;
}

.oxy-repeater-pages .page-numbers {
    background-color: color(2);
    border: 1px solid color(2);
    color: color(12);    
    min-width: 40px;
    text-align: center;
	margin: 0 4px 0 4px;
    padding-top: 6px;
    padding-bottom: 6px;
    border-radius: 5px;
	font-weight: 600;
    text-decoration: none;
    border-radius: 50px;
    font-size: var(--step--1);
}

.oxy-repeater-pages .page-numbers:hover, 
.oxy-repeater-pages .page-numbers.active,
.oxy-repeater-pages .page-numbers.current, 
.oxy-repeater-pages .dots{
    border: 1px solid color(2);
    background-color: color(12);
    color: color(2);
    
}

.oxy-repeater-pages .dots:hover{
    border: 1px solid color(2);
    background-color: color(12);
    color: color(2);
    
}

.oxy-repeater-pages .prev,
.oxy-repeater-pages .next{
    border: 1px solid color(2);
    color: color(12);    
    padding: 6px 16px;
}

Pozn: color(30) znamená, že Oxygen vloží globální barvu s ID:30