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;