Skip to main content

Border

Komponentene vi tilbyr har riktig border-radius og border-width som standard. Hvis du skal lage noe eget, kan du bruke border-variablene vi tilbyr.

Bruk util-klassen .ix-border-default for å få standard border-stil, oftest brukt på kort. Klassen setter --ix-border-width-default og farge --ix-color-border-main-default.

Border width

Vi har 2 forskjellige border-tykkelser. For fokus på skjemaelementer skal du bruke outline.

CSS custom propertyVerdiBeskrivelse
--ix-border-width-default1pxStandard border-width.
--ix-border-width-bold2pxBorder-width for buttons.

Border radius

Vi har border radius i størrelsene xs, sm, md, lg og xl. Det er egne border radius for pilleformede elementer hvis man trenger det, samt checkbox, input og knapp. Bruk ix-border-radius-circle for helt runde elementer.

CSS custom propertyVerdiBeskrivelse
--ix-border-radius-circle50%Fullt avrundet border-radius.
--ix-border-radius-pill9999pxBorder-radius for pille-formede elementer. Feks. knapper.
--ix-border-radius-checkbox4pxBorder-radius for avkrysningsbokser.
--ix-border-radius-input8pxBorder-radius for input-felt.
--ix-border-radius-buttonvar(--ix-border-radius-pill)Border-radius for knapper.
--ix-border-radius-xs4pxLiten border-radius.
--ix-border-radius-sm8pxMedium border-radius. Brukes til input-felt.
--ix-border-radius-md16pxStor border-radius. Brukes til kort.
--ix-border-radius-lg24pxEkstra stor border-radius. Brukes til modaler.
--ix-border-radius-xl40pxEkstra stor border-radius.

Outline

Outline brukes ved fokus på skjemaelementer. Outline burde være satt til transparent når elementet ikke er i fokus for å unngå hopping i layouten.
Bruk --ix-outline-default for standard outline-stil, og legg til outline-offset med --ix-outline-offset-default.

CSS custom propertyVerdiBeskrivelse
--ix-outline-width-default2pxStandard outline-bredde.
CSS custom propertyVerdiBeskrivelse
--ix-outline-offset-default3pxStandard outline-offset.

Farger

Se farger for å finne riktige farger til border og outline.