Z-Index

• Classes
• CSS variables
• Customize

How to customize the z-index classes and variables in CodyFrame.

Classes #

Z-index utility classes:

CSS variables #

Here's a list of the default z-index variables:

:root {
  --z-index-header: 3; /* e.g., main header */
  --z-index-popover: 5; /* e.g., tooltips and dropdown */
  --z-index-fixed-element: 10; /* e.g., 'back to top' button */
  --z-index-overlay: 15; /* e.g., modals and dialogs */
}

To apply a z-index value from the scale, use the variables in your CSS:

.modal {
  z-index: var(--z-index-overlay);
}

Customize #

In CodyFrame v4, you can edit the z-index scale by passing a $z-index map to the config module in your style.scss:

@use 'config' as * with (
  $z-index: (
    'header': '3',
    'popover': '5',
    'fixed-element': '10',
    'overlay': '15'
  )
);

The above configuration will genete the following CSS variables in your style.css file:

:root {
  --z-index-header: 3;
  --z-index-popover: 5;
  --z-index-fixed-element: 10;
  --z-index-overlay: 15;
}

In CodyFrame v3, you can create a _z-index.scss file inside the custom-style folder and overwrite the z-index variables.