Z Index

Overview

Example incoming …

Files

https://github.com/davidbrooksio/cwf-lite/blob/master/style/utilities/zIndex.css

• Directorystyle

  • Directoryutilities

    • zIndex.css

Stylesheet

@layer cwf-utilities {
  .z-index--neg-1 {
    z-index: -1 !important;
  }

  .z-index--top {
    z-index: 9999 !important;
  }

  @media (min-width: 320px) {
    .z-index--xs-neg-1 {
      z-index: -1 !important;
    }

    .z-index--xs-top {
      z-index: 9999 !important;
    }
  }

  @media (min-width: 576px) {
    .z-index--sm-neg-1 {
      z-index: -1 !important;
    }

    .z-index--sm-top {
      z-index: 9999 !important;
    }
  }

  @media (min-width: 768px) {
    .z-index--md-neg-1 {
      z-index: -1 !important;
    }

    .z-index--md-top {
      z-index: 9999 !important;
    }
  }

  @media (min-width: 1024px) {
    .z-index--rg-neg-1 {
      z-index: -1 !important;
    }

    .z-index--rg-top {
      z-index: 9999 !important;
    }
  }

  @media (min-width: 1216px) {
    .z-index--lg-neg-1 {
      z-index: -1 !important;
    }

    .z-index--lg-top {
      z-index: 9999 !important;
    }
  }

  @media (min-width: 1408px) {
    .z-index--xl-neg-1 {
      z-index: -1 !important;
    }

    .z-index--xl-top {
      z-index: 9999 !important;
    }
  }

  @each $value in 0, 1, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000 {
    .z-index--$(value) {
      z-index: $(value) !important;
    }

    @media (min-width: 320px) {
      .z-index--xs-$(value) {
        z-index: $(value) !important;
      }
    }

    @media (min-width: 576px) {
      .z-index--sm-$(value) {
        z-index: $(value) !important;
      }
    }

    @media (min-width: 768px) {
      .z-index--md-$(value) {
        z-index: $(value) !important;
      }
    }

    @media (min-width: 1024px) {
      .z-index--rg-$(value) {
        z-index: $(value) !important;
      }
    }

    @media (min-width: 1216px) {
      .z-index--lg-$(value) {
        z-index: $(value) !important;
      }
    }

    @media (min-width: 1408px) {
      .z-index--xl-$(value) {
        z-index: $(value) !important;
      }
    }
  }
}