Display

Overview

Example incoming …

Files

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

• Directorystyle

  • Directoryutilities

    • display.css

Stylesheet

@layer cwf-utilities {
  @each $value in initial, none, inline, inline-block, block, table-row,
    table-cell, flex, inline-flex, grid
  {
    .display--$(value) {
      display: $(value) !important;
    }

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

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

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

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

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

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