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 property | Verdi | Beskrivelse |
|---|---|---|
--ix-border-width-default | 1px | Standard border-width. |
--ix-border-width-bold | 2px | Border-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 property | Verdi | Beskrivelse |
|---|---|---|
--ix-border-radius-circle | 50% | Fullt avrundet border-radius. |
--ix-border-radius-pill | 9999px | Border-radius for pille-formede elementer. Feks. knapper. |
--ix-border-radius-checkbox | 4px | Border-radius for avkrysningsbokser. |
--ix-border-radius-input | 8px | Border-radius for input-felt. |
--ix-border-radius-button | var(--ix-border-radius-pill) | Border-radius for knapper. |
--ix-border-radius-xs | 4px | Liten border-radius. |
--ix-border-radius-sm | 8px | Medium border-radius. Brukes til input-felt. |
--ix-border-radius-md | 16px | Stor border-radius. Brukes til kort. |
--ix-border-radius-lg | 24px | Ekstra stor border-radius. Brukes til modaler. |
--ix-border-radius-xl | 40px | Ekstra 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 property | Verdi | Beskrivelse |
|---|---|---|
--ix-outline-width-default | 2px | Standard outline-bredde. |
| CSS custom property | Verdi | Beskrivelse |
|---|---|---|
--ix-outline-offset-default | 3px | Standard outline-offset. |
Farger
Se farger for å finne riktige farger til border og outline.