Margin

Overview

Example incoming …

Files

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

• Directorystyle

  • Directoryutilities

    • margin.css

Stylesheet

@layer cwf-utilities {
  .margin-top--auto,
  .margin-y--auto {
    margin-top: auto !important;
  }

  .margin-right--auto,
  .margin-x--auto {
    margin-right: auto !important;
  }

  .margin-bottom--auto,
  .margin-y--auto {
    margin-bottom: auto !important;
  }

  .margin-left--auto,
  .margin-x--auto {
    margin-left: auto !important;
  }

  @media (min-width: 320px) {
    .margin-top--xs-auto,
    .margin-y--xs-auto {
      margin-top: auto !important;
    }

    .margin-right--xs-auto,
    .margin-x--xs-auto {
      margin-right: auto !important;
    }

    .margin-bottom--xs-auto,
    .margin-y--xs-auto {
      margin-bottom: auto !important;
    }

    .margin-left--xs-auto,
    .margin-x--xs-auto {
      margin-left: auto !important;
    }
  }

  @media (min-width: 576px) {
    .margin-top--sm-auto,
    .margin-y--sm-auto {
      margin-top: auto !important;
    }

    .margin-right--sm-auto,
    .margin-x--sm-auto {
      margin-right: auto !important;
    }

    .margin-bottom--sm-auto,
    .margin-y--sm-auto {
      margin-bottom: auto !important;
    }

    .margin-left--sm-auto,
    .margin-x--sm-auto {
      margin-left: auto !important;
    }
  }

  @media (min-width: 768px) {
    .margin-top--md-auto,
    .margin-y--md-auto {
      margin-top: auto !important;
    }

    .margin-right--md-auto,
    .margin-x--md-auto {
      margin-right: auto !important;
    }

    .margin-bottom--md-auto,
    .margin-y--md-auto {
      margin-bottom: auto !important;
    }

    .margin-left--md-auto,
    .margin-x--md-auto {
      margin-left: auto !important;
    }
  }

  @media (min-width: 1024px) {
    .margin-top--rg-auto,
    .margin-y--rg-auto {
      margin-top: auto !important;
    }

    .margin-right--rg-auto,
    .margin-x--rg-auto {
      margin-right: auto !important;
    }

    .margin-bottom--rg-auto,
    .margin-y--rg-auto {
      margin-bottom: auto !important;
    }

    .margin-left--rg-auto,
    .margin-x--rg-auto {
      margin-left: auto !important;
    }
  }

  @media (min-width: 1216px) {
    .margin-top--lg-auto,
    .margin-y--lg-auto {
      margin-top: auto !important;
    }

    .margin-right--lg-auto,
    .margin-x--lg-auto {
      margin-right: auto !important;
    }

    .margin-bottom--lg-auto,
    .margin-y--lg-auto {
      margin-bottom: auto !important;
    }

    .margin-left--lg-auto,
    .margin-x--lg-auto {
      margin-left: auto !important;
    }
  }

  @media (min-width: 1408px) {
    .margin-top--xl-auto,
    .margin-y--xl-auto {
      margin-top: auto !important;
    }

    .margin-right--xl-auto,
    .margin-x--xl-auto {
      margin-right: auto !important;
    }

    .margin-bottom--xl-auto,
    .margin-y--xl-auto {
      margin-bottom: auto !important;
    }

    .margin-left--xl-auto,
    .margin-x--xl-auto {
      margin-left: auto !important;
    }
  }

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

      &.margin--negative {
        margin: calc(var(--size-$(count)) * -1) !important;
      }
    }

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

      &.margin-top--negative {
        margin-top: calc(var(--size-$(count)) * -1) !important;
      }
    }

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

      &.margin-right--negative {
        margin-right: calc(var(--size-$(count)) * -1) !important;
      }
    }

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

      &.margin-bottom--negative {
        margin-bottom: calc(var(--size-$(count)) * -1) !important;
      }
    }

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

      &.margin-left--negative {
        margin-left: calc(var(--size-$(count)) * -1) !important;
      }
    }

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

      &.margin-y--negative {
        margin-top: calc(var(--size-$(count)) * -1) !important;
        margin-bottom: calc(var(--size-$(count)) * -1) !important;
      }
    }

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

      &.margin-x--negative {
        margin-left: calc(var(--size-$(count)) * -1) !important;
        margin-right: calc(var(--size-$(count)) * -1) !important;
      }
    }

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

        &.margin--xs-negative {
          margin: calc(var(--size-$(count)) * -1) !important;
        }
      }

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

        &.margin-top--xs-negative {
          margin-top: calc(var(--size-$(count)) * -1) !important;
        }
      }

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

        &.margin-right--xs-negative {
          margin-right: calc(var(--size-$(count)) * -1) !important;
        }
      }

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

        &.margin-bottom--xs-negative {
          margin-bottom: calc(var(--size-$(count)) * -1) !important;
        }
      }

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

        &.margin-left--xs-negative {
          margin-left: calc(var(--size-$(count)) * -1) !important;
        }
      }

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

        &.margin-y--xs-negative {
          margin-top: calc(var(--size-$(count)) * -1) !important;
          margin-bottom: calc(var(--size-$(count)) * -1) !important;
        }
      }

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

        &.margin-x--xs-negative {
          margin-left: calc(var(--size-$(count)) * -1) !important;
          margin-right: calc(var(--size-$(count)) * -1) !important;
        }
      }
    }

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

        &.margin--sm-negative {
          margin: calc(var(--size-$(count)) * -1) !important;
        }
      }

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

        &.margin-top--sm-negative {
          margin-top: calc(var(--size-$(count)) * -1) !important;
        }
      }

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

        &.margin-right--sm-negative {
          margin-right: calc(var(--size-$(count)) * -1) !important;
        }
      }

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

        &.margin-bottom--sm-negative {
          margin-bottom: calc(var(--size-$(count)) * -1) !important;
        }
      }

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

        &.margin-left--sm-negative {
          margin-left: calc(var(--size-$(count)) * -1) !important;
        }
      }

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

        &.margin-y--sm-negative {
          margin-top: calc(var(--size-$(count)) * -1) !important;
          margin-bottom: calc(var(--size-$(count)) * -1) !important;
        }
      }

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

        &.margin-x--sm-negative {
          margin-left: calc(var(--size-$(count)) * -1) !important;
          margin-right: calc(var(--size-$(count)) * -1) !important;
        }
      }
    }

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

        &.margin--md-negative {
          margin: calc(var(--size-$(count)) * -1) !important;
        }
      }

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

        &.margin-top--md-negative {
          margin-top: calc(var(--size-$(count)) * -1) !important;
        }
      }

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

        &.margin-right--md-negative {
          margin-right: calc(var(--size-$(count)) * -1) !important;
        }
      }

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

        &.margin-bottom--md-negative {
          margin-bottom: calc(var(--size-$(count)) * -1) !important;
        }
      }

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

        &.margin-left--md-negative {
          margin-left: calc(var(--size-$(count)) * -1) !important;
        }
      }

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

        &.margin-y--md-negative {
          margin-top: calc(var(--size-$(count)) * -1) !important;
          margin-bottom: calc(var(--size-$(count)) * -1) !important;
        }
      }

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

        &.margin-x--md-negative {
          margin-left: calc(var(--size-$(count)) * -1) !important;
          margin-right: calc(var(--size-$(count)) * -1) !important;
        }
      }
    }

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

        &.margin--rg-negative {
          margin: calc(var(--size-$(count)) * -1) !important;
        }
      }

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

        &.margin-top--rg-negative {
          margin-top: calc(var(--size-$(count)) * -1) !important;
        }
      }

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

        &.margin-right--rg-negative {
          margin-right: calc(var(--size-$(count)) * -1) !important;
        }
      }

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

        &.margin-bottom--rg-negative {
          margin-bottom: calc(var(--size-$(count)) * -1) !important;
        }
      }

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

        &.margin-left--rg-negative {
          margin-left: calc(var(--size-$(count)) * -1) !important;
        }
      }

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

        &.margin-y--rg-negative {
          margin-top: calc(var(--size-$(count)) * -1) !important;
          margin-bottom: calc(var(--size-$(count)) * -1) !important;
        }
      }

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

        &.margin-x--rg-negative {
          margin-left: calc(var(--size-$(count)) * -1) !important;
          margin-right: calc(var(--size-$(count)) * -1) !important;
        }
      }
    }

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

        &.margin--lg-negative {
          margin: calc(var(--size-$(count)) * -1) !important;
        }
      }

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

        &.margin-top--lg-negative {
          margin-top: calc(var(--size-$(count)) * -1) !important;
        }
      }

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

        &.margin-right--lg-negative {
          margin-right: calc(var(--size-$(count)) * -1) !important;
        }
      }

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

        &.margin-bottom--lg-negative {
          margin-bottom: calc(var(--size-$(count)) * -1) !important;
        }
      }

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

        &.margin-left--lg-negative {
          margin-left: calc(var(--size-$(count)) * -1) !important;
        }
      }

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

        &.margin-y--lg-negative {
          margin-top: calc(var(--size-$(count)) * -1) !important;
          margin-bottom: calc(var(--size-$(count)) * -1) !important;
        }
      }

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

        &.margin-x--lg-negative {
          margin-left: calc(var(--size-$(count)) * -1) !important;
          margin-right: calc(var(--size-$(count)) * -1) !important;
        }
      }
    }

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

        &.margin--xl-negative {
          margin: calc(var(--size-$(count)) * -1) !important;
        }
      }

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

        &.margin-top--xl-negative {
          margin-top: calc(var(--size-$(count)) * -1) !important;
        }
      }

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

        &.margin-right--xl-negative {
          margin-right: calc(var(--size-$(count)) * -1) !important;
        }
      }

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

        &.margin-bottom--xl-negative {
          margin-bottom: calc(var(--size-$(count)) * -1) !important;
        }
      }

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

        &.margin-left--xl-negative {
          margin-left: calc(var(--size-$(count)) * -1) !important;
        }
      }

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

        &.margin-y--xl-negative {
          margin-top: calc(var(--size-$(count)) * -1) !important;
          margin-bottom: calc(var(--size-$(count)) * -1) !important;
        }
      }

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

        &.margin-x--xl-negative {
          margin-left: calc(var(--size-$(count)) * -1) !important;
          margin-right: calc(var(--size-$(count)) * -1) !important;
        }
      }
    }
  }
}