Stylowanie komponentu

Możemy dostosować wygląd komponentu do sklepu nadpisując zmienne CSS.

Nadpisanie zmiennych

Najprościej nadpisać zmienne CSS przy pomocy klasy bądź innego selektora CSS:

<div id="#selector"></div>

#selector {
    --paczkoapi-radio-dot-color: #0e66d2;
    /* ... inne zmienne */
}

Dostępne zmienne CSS

Poniżej są wszystkie dostępne zmienne CSS i ich domyślne wartości:

// Rodzaj czcionki
--paczkoapi-font-family: inherit;
// Rozmiar czcionki bazowy
--paczkoapi-font-size-base: 1rem;
// Rozmiar czcionki mniejszy
--paczkoapi-font-size-sm: 0.8rem;
// Grubość czcionki normalna
--paczkoapi-font-weight-normal: 400;
// Grubość czcionki średnia
--paczkoapi-font-weight-medium: 500;
// Grubość czcionki pogrubiona
--paczkoapi-font-weight-bold: 600;

// Odstęp bardzo mały
--paczkoapi-spacing-xs: 0.25rem;
// Odstęp mały
--paczkoapi-spacing-sm: 0.75rem;
// Odstęp średni
--paczkoapi-spacing-md: 1rem;
// Odstęp duży
--paczkoapi-spacing-lg: 1.5rem;
// Odstęp między elementami
--paczkoapi-point-gap: 0;
// Odstęp wewnętrzny punktu odbioru
--paczkoapi-point-padding: var(--paczkoapi-spacing-md);

// Kolor tekstu
--paczkoapi-text-color: #1a1a1a;
// Kolor tekstu po najechaniu
--paczkoapi-text-color-hover: var(--paczkoapi-text-color);
// Kolor tekstu po wybraniu
--paczkoapi-text-color-selected: var(--paczkoapi-text-color);
// Kolor tekstu drugorzędny (adres)
--paczkoapi-text-color-secondary: #666;
// Kolor tekstu drugorzędny (adres) po najechaniu
--paczkoapi-text-color-secondary-hover: var(--paczkoapi-text-color-secondary);
// Kolor tekstu drugorzędny (adres) po wybraniu
--paczkoapi-text-color-secondary-selected: var(--paczkoapi-text-color-secondary);

// Kolor tła punktu odbioru
--paczkoapi-background-color: transparent;
// Kolor tła punktu odbioru po najechaniu
--paczkoapi-background-color-hover: #f9f9f9;
// Kolor tła punktu odbioru po wybraniu
--paczkoapi-background-color-selected: transparent;

// Promień krawędzi punktu odbioru
--paczkoapi-border-radius: 0.5rem;
// Kolor krawędzi punktu odbioru
--paczkoapi-border-color: transparent;
// Kolor krawędzi punktu odbioru po najechaniu
--paczkoapi-border-color-hover: var(--paczkoapi-border-color);
// Kolor krawędzi punktu odbioru po wybraniu
--paczkoapi-border-color-selected: var(--paczkoapi-border-color);

// Rozmiar elementu radio
--paczkoapi-radio-size: 1.25rem;
// Kolor kropki w radio po wybraniu
--paczkoapi-radio-dot-color: #1a1a1a;
// Grubość krawędzi elementu radio
--paczkoapi-radio-border-size: 2px;
// Kolor krawędzi elementu radio
--paczkoapi-radio-border-color: #e5e5e5;
// Kolor krawędzi elementu radio po wybraniu
--paczkoapi-radio-border-color-selected: #1a1a1a;
// Kolor krawędzi elementu radio po najechaniu
--paczkoapi-radio-border-color-hover: var(--paczkoapi-radio-border-color);
// Margines elementu radio
--paczkoapi-radio-margin: 0 var(--paczkoapi-spacing-sm) 0 0;
// Rozmiar kropki w radio po wybraniu
--paczkoapi-radio-dot-size: 0.75rem;

// Czas przejścia animacji
--paczkoapi-transition-duration: 150ms;
// Funkcja przejścia animacji
--paczkoapi-transition-timing: ease-out;

Przykłady stylowania

Czarne ramki

W przykładzie zaznaczony punkt jest podkreślony czarną krawędzią.

Bez radio

W przykładzie ukryte są radio a zaznaczony punkt jest podkreślony czarną krawędzią.

Pastelowy róż

Przykład pokazuje bardziej złożone stylowanie z paletą kolorystyczną.

Uwaga

W przykładzie nie działa poprawnie mapa punktów DHL. Jest to związane ze specyfiką działania środowiska StackBlitz i nie występuje w praktyce.