nav-frontend-core/less/_variabler.less

Variabler og andre felleselementer for NAV-frontend.

@import "_variabler-exports";

/*
---------------
FARGER
---------------
*/

// Navfarger

@navRod: #c30000;
@navOransje: #ff9100;
@navLimeGronn: #a2ad00;
@navGronn: #06893a;
@navLilla: #634689;
@navDypBla: #005b82;
@navBla: #0067c5;
@navLysBla: #66cbec;

//Tekst digitalt
@navMorkGra: #262626;
@navGra80: #4f4f4f;
@navGra60: #6a6a6a;
@navGra40: #a0a0a0;
@navGra20: #c9c9c9;
@navLysGra: #f1f1f1;

// Bakgrunner
@navBakgrunn: #ffffff;
@navGraBakgrunn: @navLysGra;

// Fokusfarger
@fokusFarge: @navBlaDarken60;

// kvarliggande farger for skjerm
@redError: #ba3a26;
@white: #fff;
@grayBackground: @navLysGra; // Deprecated
@grayIcon: @navGra40;
@grayModia: #333333;
@grayInactive: @navGra60;
@pinkErrorBg: #f3e3e3;

// Tilleggsfarger
// Kalkulering finnes i @navikt/ds-tokens/src/index.js

@navGronnLighten80: #ccf1d6;
@navGronnLighten60: #99dead;
@navGronnLighten40: #66c786;
@navGronnLighten20: #33aa5f;

@navGronnDarken20: #007c2e;
@navGronnDarken40: #006a23;
@navGronnDarken60: #005519;
@navGronnDarken80: #003b0f;

@navLimeGronnLighten80: #f9fccc;
@navLimeGronnLighten60: #ecf399;
@navLimeGronnLighten40: #d9e366;
@navLimeGronnLighten20: #c1cb33;

@navLimeGronnDarken20: #939e00;
@navLimeGronnDarken40: #7f8900;
@navLimeGronnDarken60: #666e00;
@navLimeGronnDarken80: #474e00;

@navLysBlaLighten80: #d8f9ff;
@navLysBlaLighten60: #b5f1ff;
@navLysBlaLighten40: #97e6ff;
@navLysBlaLighten20: #7cdaf8;

@navLysBlaDarken20: #4cadcd;
@navLysBlaDarken40: #368da8;
@navLysBlaDarken60: #236b7d;
@navLysBlaDarken80: #134852;

@navBlaLighten80: #cce1ff;
@navBlaLighten60: #99c3ff;
@navBlaLighten40: #66a5f4;
@navBlaLighten20: #3386e0;

@navBlaDarken20: #0056b4;
@navBlaDarken40: #00459c;
@navBlaDarken60: #00347d;
@navBlaDarken80: #002252;

@navDypBlaLighten80: #cce2f0;
@navDypBlaLighten60: #99c4dd;
@navDypBlaLighten40: #66a3c4;
@navDypBlaLighten20: #3380a5;

@navDypBlaDarken20: #005077;
@navDypBlaDarken40: #004367;
@navDypBlaDarken60: #003453;
@navDypBlaDarken80: #00243a;

@navLillaLighten80: #e0d8e9;
@navLillaLighten60: #c0b2d2;
@navLillaLighten40: #a18dbb;
@navLillaLighten20: #8269a2;

@navLillaDarken20: #523874;
@navLillaDarken40: #412b5d;
@navLillaDarken60: #301f46;
@navLillaDarken80: #1f142f;

@redErrorLighten80: #f9d2cc;
@redErrorLighten60: #efa89d;
@redErrorLighten40: #e18071;
@redErrorLighten20: #d05c4a;

@redErrorDarken20: #a32a17;
@redErrorDarken40: #881d0c;
@redErrorDarken60: #6a1204;
@redErrorDarken80: #480900;

@navOransjeLighten80: #ffeccc;
@navOransjeLighten60: #ffd799;
@navOransjeLighten40: #ffc166;
@navOransjeLighten20: #ffaa33;

@navOransjeDarken20: #d47b00;
@navOransjeDarken40: #a86400;
@navOransjeDarken60: #7d4c00;
@navOransjeDarken80: #523300;

/*
---------------
BREKKPUNKTER
---------------
*/

// Small screen / tablet
// ** Deprecated `@screen-sm` as of v3.0.1
@screen-sm: 768px;
@screen-sm-min: @screen-sm;
// ** Deprecated `@screen-tablet` as of v3.0.1
@screen-tablet: @screen-sm-min;

// Medium screen / desktop
// ** Deprecated `@screen-md` as of v3.0.1
@screen-md: 992px;
@screen-md-min: @screen-md;
// ** Deprecated `@screen-desktop` as of v3.0.1
@screen-desktop: @screen-md-min;

// Large screen / wide desktop
// ** Deprecated `@screen-lg` as of v3.0.1
@screen-lg: 1200px;
@screen-lg-min: @screen-lg;
// ** Deprecated `@screen-lg-desktop` as of v3.0.1
@screen-lg-desktop: @screen-lg-min;

// So media queries don't overlap when required, provide a maximum
@screen-xs-max: (@screen-sm-min - 1);
@screen-sm-max: (@screen-md-min - 1);
@screen-md-max: (@screen-lg-min - 1);

/*
--------------
CONTAINER
--------------
*/

// Small screen / tablet
@container-tablet: (720px + @grid-gutter-width);
// ** For `@screen-sm-min` and up.
@container-sm: @container-tablet;

// Medium screen / desktop
@container-desktop: (940px + @grid-gutter-width);
// ** For `@screen-md-min` and up.
@container-md: @container-desktop;

// Large screen / wide desktop
@container-large-desktop: (1140px + @grid-gutter-width);
// ** For `@screen-lg-min` and up.
@container-lg: @container-large-desktop;

/*
---------------
GRID
---------------
*/

// ** Number of columns in the grid.
@grid-columns: 12;
// ** Padding between columns. Gets divided in half for the left and right.
@grid-gutter-width: 16px;
// Navbar collapse
// ** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint: @screen-sm-min;
// ** Point at which the navbar begins collapsing.
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);

//== Components
//
//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).

@padding-base-vertical: 6px;
@padding-base-horizontal: 12px;

@padding-large-vertical: 10px;
@padding-large-horizontal: 16px;

@padding-small-vertical: 5px;
@padding-small-horizontal: 10px;

@padding-xs-vertical: 1px;
@padding-xs-horizontal: 5px;

@line-height-large: 1.3333333; // extra decimals for Win 8.1 Chrome
@line-height-small: 1.5;

@border-radius-small: 2px;
@border-radius-base: 4px;
@border-radius-large: 6px;