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

NB: Denne listen er ikke fullstendig per 21.nov 2019.

Deaktiverte elementer

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

.a-disabled

Skygger

Skygger aktiveres ved bruk av variabelen $shadow

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

$shadow

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;