Breakpoints and Z-Index Variables

breakpoints-and-z-index.scss

// https://semantic-ui.com/elements/container.html - breakpoints
$extra-large-monitor-max: 1300px;
$large-monitor-min: 1200px;
$large-monitor-max: 1199px;
$small-monitor-min: 992px;
$small-monitor-max: 991px;
$tablet-min: 768px;
$tablet-max: 767px;
$mobile-min: 436px;
$mobile-max: 435px;

$large-monitor-min: 1200px;
$large-monitor-max: 1199px;
$small-monitor-min: 992px;
$small-monitor-max: 991px;
$tablet-min: 768px;
$tablet-max: 767px;
$mobile-min: 436px;
$xxs: 435px;

// Bootstrap 4 Breakpoints
$xs-min: 320px;
$xs-max: 319px;
$sm-min: 576px;
$sm-max: 575px;
$md-min: 768px;
$md-max: 767px;
$lg-min: 992px;
$lg-max: 991px;
$xl-min: 1200px;
$xl-max: 1199px;
$xxl-min: 1600px;
$xxl-max: 1599px;


// z-index heights - define
$z-index-default: auto; // the default z-index value
$z-index-bump: 1; // use to bump an element slightly above normal elements
$z-index-navigation: 80; // nav should go over all page elements
$z-index-navigation-menu: 90; // menus inside nav should cover nav
$z-index-modal: 100; // modals should cover everything on screen