CSS Utilities

I utgangspunktet skal kun de fargene som er presentert her brukes. Hvis nye farger blir implementert skal dette gås opp med ansvarlig designer.

CSS-utilities

Se Bootstraps sider for utilities. Vi har i tillegg noen egne utilities:

• Fontweight: .a-fontLight .a-fontReg .a-fontMedium .a-fontBold

• Overskrifter: .a-h1 .a-h2 .a-h3 .a-h4

• Bakgrunn: .a-bgWhite .a-bgGreen .a-bgGreenLight .a-bgGreenLighter .a-bgBlue .a-bgBlueLight .a-bgBlueLighter .a-bgPurple .a-bgPurpleLight .a-bgYellow .a-bgYellowLight .a-bgRed .a-bgRedLight

• Deaktivert bakgrunn: .a-disabled

• Tekstfarger: .a-textWhite .a-textBlue

• Stiplet linje i lister: .a-dotted .a-dotted-line-top

• Lenker uten understrek: .a-noUnderline

• Maks tre linjer tekst: .a-maxThreeLines2

• Position: .a-p-relative .a-p-static

• Display: a-displayBlock

Deaktiverte elementer

Deaktiverte elementer får en stiplet grå bakgrunn ved bruk av klassen .a-disabled

Skygger

Skygger aktiveres ved bruk av variabelen $shadow

box-shadow: 1px 1px 4px 0px rgba(137, 137, 137, 0.5);

Fargevariabler

Fargene refereres til ved bruk av variabler som er definert i variables.scss .

• $blue-darker:
  #022F51;
• $blue-dark:
  #0062BA;
• $blue:
  #1eaef7;
• $blue-light:
  #cff0ff;

• $green:
  #17c96b;
• $green-light:
  #d4f9e4;
• $red:
  #e23b53;
• $red-light:
  #f9cad3;

• $purple:
  #3f3161;
• $purple-light:
  #e0daf7;
• $yellow:
  #ffda06;
• $yellow-light:
  #fbf6bd;

• $black:
  #000;
• $grey:
  #6a6a6a;
• $grey-medium:
  #BCC7CC;
• $grey-light:
  #efefef;