fleet/frontend/styles/var/mixins.scss

$min-width: 768px;
$medium-width: 1024px;
$desktop-width: 1280px;
$max-width: 2560px;

@mixin breakpoint($size: desktop) {
  @if ($size == tablet) {
    @media (max-width: $medium-width) {
      @content;
    }
  } @else if ($size == ltdesktop) {
    @media (max-width: $desktop-width - 1) {
      @content;
    }
  } @else if ($size == desktop) {
    @media (min-width: $medium-width + 1) {
      @content;
    }
  } @else if ($size == smalldesk) {
    @media (max-width: 1185px) {
      @content;
    }
  } @else {
    @content;
  }
}

//  Used to keep the settings description sticky under the main nav and sub nav.
// TODO: figure out how to calculate these values with variables. Will be tedious to change otherwise
@mixin sticky-settings-description {
  position: sticky;
  // this is the current spacing needed to keep the description looking correct under the sub nav when scrolling.
  top: 94px;
  z-index: 2;
  background-color: $core-white;
  margin: 0;
  padding: $pad-xxlarge 0 54px 0;
}