Skip to content
Home

SASS and mixins

All CSS helper classes are to be found in src/style/core/helper-classes/helper-classes.scss Most helper classes are SCSS mixins which are then applied to the class when invoked.

You can import Eufemia mixins directly into your SCSS styles:

@use '@dnb/eufemia/style/core/utilities.scss' as utilities;


/** State handling */
@include utilities.hover {
}
@include utilities.focus {
}
@include utilities.active {
}


/** 
 * Media Queries and Breakpoints 
 * More info can be found in the sections below
 */
@include utilities.allBelow(large) {
}
@include utilities.allAbove(small) {
}
@include utilities.allBetween(small) {
}


/** Screen Reader Only */
@include utilities.srOnly() {
} // .dnb-sr-only


/** Browser Checks */
@include utilities.IS_CHROME {
}
@include utilities.IS_SAFARI_MOBILE {
}
@include utilities.IS_SAFARI_DESKTOP {
}


/** Eufemia DropShadow */
@include utilities.defaultDropShadow();


/** Eufemia Border helpers */
@include utilities.focusRing(
  /* $whatinput: 'keyboard', $color: var(--color-emerald-green), $inset: inset */
);
@include utilities.extendFocusRing(
  /* $first-color: null, $second-color: null, width: 0.0625rem */
);
@include utilities.fakeBorder(
  /* $color: var(--color-emerald-green), $width: 0.0625rem, $inset: inset */
);


/** Scroll behavior */
@include utilities.scrollY(/* $mode: scroll */);
@include utilities.scrollX(/* $mode: scroll */);
@include utilities.hideScrollbar();
@include utilities.scrollbarAppearance();


/** Reset fieldset styles */
@include utilities.fieldsetReset();

Media queries and Breakpoints

Use the allAbove, allBelow and allBetween mixins to add media queries to your CSS.

To prevent overlapping media queries, 0.00625em gets added to the minimum width. This results in an increment of approximately 0.1px when using em units. If you're using a unit other than em, you may need to adjust this value accordingly, as 0.00625px is typically too small to effectively prevent overlaps.

mixinactual interval (em)actual interval (px)
allBelow(40em)0 to 40em0 to 640px
allBetween(40em,60em)40.00625em to 60em640.1px to 960px
allAbove(60em)60.00625em to infinity960.1px to infinity
@use '@dnb/eufemia/style/core/utilities.scss' as utilities;


@include utilities.allBelow(small) {
  // from 0px to 'small' (640px)
}


@include utilities.allBetween(small, medium) {
  // from 640.1px ('small' + 0.1px) to 960px ('medium')
}


@include utilities.allAbove(medium) {
  // from 960.1px ('medium' + 0.1px) and wider
}

$breakpoints is a key-value map containing all the available sizes for media queries

@use '@dnb/eufemia/style/core/utilities.scss' as utilities;


// getting a size from $breakpoints
div {
  max-width: map-get(utilities.$breakpoints, medium);
}

Custom offset

You can either change the default value $breakpoint-offset (default: 0) from utilities.scss, or send in a custom offset to the mixin.

@use '@dnb/eufemia/style/core/utilities.scss' as utilities;


// Change the default offset (default: 0)
utilities.$breakpoint-offset: 10em;


// Will use the new default offset, adding 10em to the size
@include utilities.allBelow(large) {
}


// You can also simply send in a custom offset
@include utilities.allBelow(large, -5em) {
}

Custom size

You can either change the default values in the $breakpoints array from utilities.scss, or send in a custom size to the mixin.

@use '@dnb/eufemia/style/core/utilities.scss' as utilities;


// Change default sizes
utilities.$breakpoints: map-merge(
  utilities.$breakpoints,
  (
    // redefine a size
    'medium': 40em,


    // add an offset to the original value
    'large': map-get(utilities.$breakpoints, large) + 5em
  )
);


// Will use the new default 'large' size of 90em
@include utilities.allBelow(large) {
}


// You can also simply send in a custom size
@include utilities.allBelow(90em) {
}

<fieldset> CSS reset

Removes default styling on a fieldset element.

@include utilities.fieldsetReset($checkSpaceProps: boolean)

If true is given, it will handle margin gracefully by checking for e.g. dnb-space__top-- and not reset if this class exists.

I'm a fieldset without styling.