Gå til sidens indhold

Design

Hjørner, streger, skygger

Hjørner

Statiske hjørner

  • Statiske hjørner er lige og har en border-radius: 0px;
  • For at få lige hjørner skal du bruge variablen $static-border-radius

Eksempel:

border-radius: $static-border-radius;

Interaktive hjørner

  • Interaktive hjørner er runde og har en border-radius: 4px;
  • For at få runde hjørner skal du bruge variablen $interactive-border-radius
  • Interaktive hjørner bør kun bruges til håndtering af interaktive elementer, da det er meningen at differentiere indhold fra aktion.

Eksempel:

border-radius: $interactive-border-radius;

Streger

Ydre streger

  • Ydre streger er 1px bredde og er mørkegrå. Brug variablen $outer-border for at opsætte ydre kanter.
  • Bruges som ydre streger på komponenter, til at adskille dem fra hinanden.

Eksempel:

border: $outer-border;

Indre streger

  • Indre streger er 1px bredde og er lysegrå. For at bruge indre borders bruges variablen $inner-border

  • Anvendes som indvendige streger i komponenter, der kræver separering af elementer.

Eksempel:

border: $inner-border;

Knap borders

  • Borders på knapper er 2px bredde og farven afhænger af elementet. For at bruge borders til knapper bruges variablen $button-border

  • Har ekstra border bredde, som bruges på knapper

Eksempel:

border: $button-border;

Skygger

Modalvindue

  • Modalvinduer har en sort skygge på 0 8px 16px 0 og har variablen $box-shadow-heavy

Eksempel:

box-shadow: $box-shadow-heavy;

Overflowmenu

  • Overflowmenuer har en sort skygge på 0 4px 16px 0 og har variablen $box-shadow-moderately

Eksempel:

box-shadow: $box-shadow-moderately;

Cards

  • Cards har en sort skygge på 0 2px 16px 0 og har variablen $box-shadow-slightly

Eksempel:

box-shadow: $box-shadow-slightly;