nav-frontend-core/less/_elevasjon.less

Variabler og andre felleselementer for NAV-frontend.

// Taktil
@skygge-1: 0 2px 0 rgba(0, 0, 0, 0.23);

// Taktil :hover
@skygge-2: 0 3px 0 rgba(0, 0, 0, 0.125);

// Opphevet
@skygge-10: 0 2px 1px 0 rgba(0, 0, 0, 0.32);

// Popover
@skygge-100: 0 0.05rem 0.25rem 0.125rem rgba(0, 0, 0, 0.08);

// Popover pil
@skygge-101: 0 0 0.25rem 0.125rem rgba(0, 0, 0, 0.08);

// Skuff
@skygge-300: 0 -0px 8px 4px rgba(0, 0, 0, 0.08);

// Sticky
@skygge-500: 0 0.125rem 0.5rem 0.125rem rgba(0, 0, 0, 0.15);

// Popover i Sticky
@skygge-510: 0 0.125rem 0.75rem 0.125rem rgba(0, 0, 0, 0.15);

// FAB

// Skuff m/ backdrop
@skygge-900: 0 0 1rem 0.25rem rgba(0, 0, 0, 0.15);

// Modal
@skygge-1000: 0 0 1rem 0.25rem rgba(0, 0, 0, 0.15);

.elevasjon-1-mixin() {
  transform: translateY(-2px);
  box-shadow: @skygge-1;
}

.elevasjon-2-mixin() {
  transform: translateY(-3px);
  box-shadow: @skygge-2;
}

.elevasjon-10-mixin() {
  box-shadow: @skygge-10;
}

.elevasjon-100-mixin() {
  box-shadow: @skygge-100;
}

.elevasjon-300-mixin() {
  box-shadow: @skygge-300;
}

.elevasjon-500-mixin() {
  box-shadow: @skygge-500;
}

.elevasjon-900-mixin() {
  box-shadow: @skygge-900;
}