Wygląd

Obramowanie

Klasy pozwalające na dodanie i kontrolowanie obramowania na elemencie.

`border`

Dodanie obramowania do elementu. Dodanie obramowania wymaga wcześniejszego zdefiniowania zmiennej CSS w której zapisana zostanie jego definicja.

Przykładowa definicja obramowania.

:root {
    --border--default: 1px solid var(--color--border);
}

Poprzedź nazwę zmiennej przez --border--, aby móc korzystać tylko z nazwy obramowania. Dzięki temu klasa dla zmiennej --border--{name} może skorzystać ze skrótowego zapisu --border--{name}

Klasa	Styl CSS
`border--<var>`	`border: var(--border--<var>, var(--<var>));`
`bordert--<var>`	`border-top: var(--border--<var>, var(--<var>));`
`borderb--<var>`	`border-bottom: var(--border--<var>, var(--<var>));`
`borderr--<var>`	`border-right: var(--border--<var>, var(--<var>));`
`borderl--<var>`	`border-left: var(--border--<var>, var(--<var>));`

`border-radius`

Ustawianie zaokrąglenia obramowania

Klasa	Styl CSS
`br-round`	`border-radius: 99999999px;`
`br-none`	`border-radius: 0;`
`br--<var>`	`border-radius: var(--<var>);`
`br-<dim>`	`border-radius: <dim>;`
`brt-round`	`border-top-left-radius: 99999999px; border-top-right-radius: 99999999px;`
`brt-none`	`border-top-left-radius: 0; border-top-right-radius: 0;`
`brt--<var>`	`border-top-left-radius: var(--<var>); border-top-right-radius: var(--<var>);`
`brt-<dim>`	`border-top-left-radius: <dim>; border-top-right-radius: <dim>;`
`brb-round`	`border-bottom-left-radius: 99999999px; border-bottom-right-radius: 99999999px;`
`brb-none`	`border-bottom-left-radius: 0; border-bottom-right-radius: 0;`
`brb--<var>`	`border-bottom-left-radius: var(--<var>); border-bottom-right-radius: var(--<var>);`
`brb-<dim>`	`border-bottom-left-radius: <dim>; border-bottom-right-radius: <dim>;`
`brl-round`	`border-bottom-left-radius: 99999999px; border-top-left-radius: 99999999px;`
`brl-none`	`border-bottom-left-radius: 0; border-top-left-radius: 0;`
`brl--<var>`	`border-bottom-left-radius: var(--<var>); border-top-left-radius: var(--<var>);`
`brl-<dim>`	`border-bottom-left-radius: <dim>; border-top-left-radius: <dim>;`
`brr-round`	`border-bottom-right-radius: 99999999px; border-top-right-radius: 99999999px;`
`brr-none`	`border-bottom-right-radius: 0; border-top-right-radius: 0;`
`brr--<var>`	`border-bottom-right-radius: var(--<var>); border-top-right-radius: var(--<var>);`
`brr-<dim>`	`border-bottom-right-radius: <dim>; border-top-right-radius: <dim>;`

`box-shadow`

Dodanie cienia do elementu. Dodanie cienia wymaga wcześniejszego zdefiniowania zmiennej CSS w której zapisana zostanie jego definicja.

Przykładowa definicja cienia.

:root {
    --shadow--default: 2px 2px 2px 1px var(--color--black-translucent);
}

Poprzedź nazwę zmiennej przez --shadow--, aby móc korzystać tylko z nazwy obramowania. Dzięki temu klasa dla zmiennej --shadow--{name} może skorzystać ze skrótowego zapisu --shadow--{name}

Klasa	Styl CSS
`shadow--<var>`