Gap

Overview

Example incoming …

Files

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

• Directorystyle

  • Directoryutilities

    • gap.css

Stylesheet

@layer cwf-utilities {
  @each $count in (0, 1, 2, 3, 4, 5, 6, 7, 8, 9) {
    .gap--$(count) {
      gap: var(--size-$(count)) !important;
    }

    .row-gap--$(count) {
      row-gap: var(--size-$(count)) !important;
    }

    .column-gap--$(count) {
      column-gap: var(--size-$(count)) !important;
    }

    @media (min-width: 320px) {
      .gap--xs-$(count) {
        gap: var(--size-$(count)) !important;
      }

      .row-gap--xs-$(count) {
        row-gap: var(--size-$(count)) !important;
      }

      .column-gap--xs-$(count) {
        column-gap: var(--size-$(count)) !important;
      }
    }

    @media (min-width: 576px) {
      .gap--sm-$(count) {
        gap: var(--size-$(count)) !important;
      }

      .row-gap--sm-$(count) {
        row-gap: var(--size-$(count)) !important;
      }

      .column-gap--sm-$(count) {
        column-gap: var(--size-$(count)) !important;
      }
    }

    @media (min-width: 768px) {
      .gap--md-$(count) {
        gap: var(--size-$(count)) !important;
      }

      .row-gap--md-$(count) {
        row-gap: var(--size-$(count)) !important;
      }

      .column-gap--md-$(count) {
        column-gap: var(--size-$(count)) !important;
      }
    }

    @media (min-width: 1024px) {
      .gap--rg-$(count) {
        gap: var(--size-$(count)) !important;
      }

      .row-gap--rg-$(count) {
        row-gap: var(--size-$(count)) !important;
      }

      .column-gap--rg-$(count) {
        column-gap: var(--size-$(count)) !important;
      }
    }

    @media (min-width: 1216px) {
      .gap--lg-$(count) {
        gap: var(--size-$(count)) !important;
      }

      .row-gap--lg-$(count) {
        row-gap: var(--size-$(count)) !important;
      }

      .column-gap--lg-$(count) {
        column-gap: var(--size-$(count)) !important;
      }
    }

    @media (min-width: 1408px) {
      .gap--xl-$(count) {
        gap: var(--size-$(count)) !important;
      }

      .row-gap--xl-$(count) {
        row-gap: var(--size-$(count)) !important;
      }

      .column-gap--xl-$(count) {
        column-gap: var(--size-$(count)) !important;
      }
    }
  }
}