Padding

Overview

Example incoming …

Files

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

• Directorystyle

  • Directoryutilities

    • padding.css

Stylesheet

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

    .padding-top--$(count) {
      padding-top: var(--size-$(count)) !important;
    }

    .padding-right--$(count) {
      padding-right: var(--size-$(count)) !important;
    }

    .padding-bottom--$(count) {
      padding-bottom: var(--size-$(count)) !important;
    }

    .padding-left--$(count) {
      padding-left: var(--size-$(count)) !important;
    }

    .padding-y--$(count) {
      padding-top: var(--size-$(count)) !important;
      padding-bottom: var(--size-$(count)) !important;
    }

    .padding-x--$(count) {
      padding-left: var(--size-$(count)) !important;
      padding-right: var(--size-$(count)) !important;
    }

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

      .padding-top--xs-$(count) {
        padding-top: var(--size-$(count)) !important;
      }

      .padding-right--xs-$(count) {
        padding-right: var(--size-$(count)) !important;
      }

      .padding-bottom--xs-$(count) {
        padding-bottom: var(--size-$(count)) !important;
      }

      .padding-left--xs-$(count) {
        padding-left: var(--size-$(count)) !important;
      }

      .padding-y--xs-$(count) {
        padding-top: var(--size-$(count)) !important;
        padding-bottom: var(--size-$(count)) !important;
      }

      .padding-x--xs-$(count) {
        padding-left: var(--size-$(count)) !important;
        padding-right: var(--size-$(count)) !important;
      }
    }

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

      .padding-top--sm-$(count) {
        padding-top: var(--size-$(count)) !important;
      }

      .padding-right--sm-$(count) {
        padding-right: var(--size-$(count)) !important;
      }

      .padding-bottom--sm-$(count) {
        padding-bottom: var(--size-$(count)) !important;
      }

      .padding-left--sm-$(count) {
        padding-left: var(--size-$(count)) !important;
      }

      .padding-y--sm-$(count) {
        padding-top: var(--size-$(count)) !important;
        padding-bottom: var(--size-$(count)) !important;
      }

      .padding-x--sm-$(count) {
        padding-left: var(--size-$(count)) !important;
        padding-right: var(--size-$(count)) !important;
      }
    }

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

      .padding-top--md-$(count) {
        padding-top: var(--size-$(count)) !important;
      }

      .padding-right--md-$(count) {
        padding-right: var(--size-$(count)) !important;
      }

      .padding-bottom--md-$(count) {
        padding-bottom: var(--size-$(count)) !important;
      }

      .padding-left--md-$(count) {
        padding-left: var(--size-$(count)) !important;
      }

      .padding-y--md-$(count) {
        padding-top: var(--size-$(count)) !important;
        padding-bottom: var(--size-$(count)) !important;
      }

      .padding-x--md-$(count) {
        padding-left: var(--size-$(count)) !important;
        padding-right: var(--size-$(count)) !important;
      }
    }

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

      .padding-top--rg-$(count) {
        padding-top: var(--size-$(count)) !important;
      }

      .padding-right--rg-$(count) {
        padding-right: var(--size-$(count)) !important;
      }

      .padding-bottom--rg-$(count) {
        padding-bottom: var(--size-$(count)) !important;
      }

      .padding-left--rg-$(count) {
        padding-left: var(--size-$(count)) !important;
      }

      .padding-y--rg-$(count) {
        padding-top: var(--size-$(count)) !important;
        padding-bottom: var(--size-$(count)) !important;
      }

      .padding-x--rg-$(count) {
        padding-left: var(--size-$(count)) !important;
        padding-right: var(--size-$(count)) !important;
      }
    }

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

      .padding-top--lg-$(count) {
        padding-top: var(--size-$(count)) !important;
      }

      .padding-right--lg-$(count) {
        padding-right: var(--size-$(count)) !important;
      }

      .padding-bottom--lg-$(count) {
        padding-bottom: var(--size-$(count)) !important;
      }

      .padding-left--lg-$(count) {
        padding-left: var(--size-$(count)) !important;
      }

      .padding-y--lg-$(count) {
        padding-top: var(--size-$(count)) !important;
        padding-bottom: var(--size-$(count)) !important;
      }

      .padding-x--lg-$(count) {
        padding-left: var(--size-$(count)) !important;
        padding-right: var(--size-$(count)) !important;
      }
    }

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

      .padding-top--xl-$(count) {
        padding-top: var(--size-$(count)) !important;
      }

      .padding-right--xl-$(count) {
        padding-right: var(--size-$(count)) !important;
      }

      .padding-bottom--xl-$(count) {
        padding-bottom: var(--size-$(count)) !important;
      }

      .padding-left--xl-$(count) {
        padding-left: var(--size-$(count)) !important;
      }

      .padding-y--xl-$(count) {
        padding-top: var(--size-$(count)) !important;
        padding-bottom: var(--size-$(count)) !important;
      }

      .padding-x--xl-$(count) {
        padding-left: var(--size-$(count)) !important;
        padding-right: var(--size-$(count)) !important;
      }
    }
  }
}