am-utils-space/lib/space.css

Utility classes to adjust spacing between things

/** @define Space */
/*
 * Utility classes to adjust spacing between components
 */

/* ==========================================================================
   Spacing-specific utilities
   ========================================================================== */

/**
 * Used to adjust the default spacing between components
 * Use with great care!
 *
 * u-<type><direction><size>
 *
 * A = all
 * T = top
 * R = right
 * B = bottom
 * L = left
 * H = horizontal
 * V = vertical
 *
 * n = none
 * s = small
 * m = medium
 * l = large
 * g = gigantic
 */

/* All */

:root {
  --u-spaceSmall    : var(--s-3);
  --u-spaceMedium   : var(--s0);
  --u-spaceLarge    : var(--s3);
  --u-spaceGigantic : var(--s6);
}

/* Padding */
[data-am-padding~="all"][data-am-padding~="none"]     { padding : 0 !important; }
[data-am-padding~="all"][data-am-padding~="small"]    { padding : var(--u-spaceSmall) !important; }
[data-am-padding~="all"][data-am-padding~="medium"]   { padding : var(--u-spaceMedium) !important; }
[data-am-padding~="all"][data-am-padding~="large"]    { padding : var(--u-spaceLarge) !important; }
[data-am-padding~="all"][data-am-padding~="gigantic"] { padding : var(--u-spaceGigantic) !important; }

[data-am-padding~="vertical"][data-am-padding~="none"]     { padding-top : 0 !important; padding-bottom: 0 !important; }
[data-am-padding~="vertical"][data-am-padding~="small"]    { padding-top : var(--u-spaceSmall) !important; padding-bottom: var(--u-spaceSmall) !important; }
[data-am-padding~="vertical"][data-am-padding~="medium"]   { padding-top : var(--u-spaceMedium) !important; padding-bottom: var(--u-spaceMedium) !important; }
[data-am-padding~="vertical"][data-am-padding~="large"]    { padding-top : var(--u-spaceLarge) !important; padding-bottom: var(--u-spaceLarge) !important; }
[data-am-padding~="vertical"][data-am-padding~="gigantic"] { padding-top : var(--u-spaceGigantic) !important; padding-bottom: var(--u-spaceGigantic) !important; }

[data-am-padding~="horizontal"][data-am-padding~="none"]     { padding-left : 0 !important; padding-right: 0 !important; }
[data-am-padding~="horizontal"][data-am-padding~="small"]    { padding-left : var(--u-spaceSmall) !important; padding-right: var(--u-spaceSmall) !important; }
[data-am-padding~="horizontal"][data-am-padding~="medium"]   { padding-left : var(--u-spaceMedium) !important; padding-right: var(--u-spaceMedium) !important; }
[data-am-padding~="horizontal"][data-am-padding~="large"]    { padding-left : var(--u-spaceLarge) !important; padding-right: var(--u-spaceLarge) !important; }
[data-am-padding~="horizontal"][data-am-padding~="gigantic"] { padding-left : var(--u-spaceGigantic) !important; padding-right: var(--u-spaceGigantic) !important; }

[data-am-padding~="top"][data-am-padding~="none"]      { padding-top : 0 !important; }
[data-am-padding~="top"][data-am-padding~="small"]     { padding-top : var(--u-spaceSmall) !important; }
[data-am-padding~="top"][data-am-padding~="medium"]    { padding-top : var(--u-spaceMedium) !important; }
[data-am-padding~="top"][data-am-padding~="large"]     { padding-top : var(--u-spaceLarge) !important; }
[data-am-padding~="top"][data-am-padding~="gigantic"]  { padding-top : var(--u-spaceGigantic) !important; }

[data-am-padding~="bottom"][data-am-padding~="none"]     { padding-bottom : 0 !important; }
[data-am-padding~="bottom"][data-am-padding~="small"]    { padding-bottom : var(--u-spaceSmall) !important; }
[data-am-padding~="bottom"][data-am-padding~="medium"]   { padding-bottom : var(--u-spaceMedium) !important; }
[data-am-padding~="bottom"][data-am-padding~="large"]    { padding-bottom : var(--u-spaceLarge) !important; }
[data-am-padding~="bottom"][data-am-padding~="gigantic"] { padding-bottom : var(--u-spaceGigantic) !important; }

[data-am-padding~="left"][data-am-padding~="none"]     { padding-left : 0 !important; }
[data-am-padding~="left"][data-am-padding~="small"]    { padding-left : var(--u-spaceSmall) !important; }
[data-am-padding~="left"][data-am-padding~="medium"]   { padding-left : var(--u-spaceMedium) !important; }
[data-am-padding~="left"][data-am-padding~="large"]    { padding-left : var(--u-spaceLarge) !important; }
[data-am-padding~="left"][data-am-padding~="gigantic"] { padding-left : var(--u-spaceGigantic) !important; }

[data-am-padding~="right"][data-am-padding~="none"]     { padding-right : 0 !important; }
[data-am-padding~="right"][data-am-padding~="small"]    { padding-right : var(--u-spaceSmall) !important; }
[data-am-padding~="right"][data-am-padding~="medium"]   { padding-right : var(--u-spaceMedium) !important; }
[data-am-padding~="right"][data-am-padding~="large"]    { padding-right : var(--u-spaceLarge) !important; }
[data-am-padding~="right"][data-am-padding~="gigantic"] { padding-right : var(--u-spaceGigantic) !important; }



/* Margin */
[data-am-margin~="all"][data-am-margin~="none"]     { margin : 0 !important; }
[data-am-margin~="all"][data-am-margin~="small"]    { margin : var(--u-spaceSmall) !important; }
[data-am-margin~="all"][data-am-margin~="medium"]   { margin : var(--u-spaceMedium) !important; }
[data-am-margin~="all"][data-am-margin~="large"]    { margin : var(--u-spaceLarge) !important; }
[data-am-margin~="all"][data-am-margin~="gigantic"] { margin : var(--u-spaceGigantic) !important; }

[data-am-margin~="vertical"][data-am-margin~="none"]     { margin-top : 0 !important; margin-bottom: 0 !important; }
[data-am-margin~="vertical"][data-am-margin~="small"]    { margin-top : var(--u-spaceSmall) !important; margin-bottom: var(--u-spaceSmall) !important; }
[data-am-margin~="vertical"][data-am-margin~="medium"]   { margin-top : var(--u-spaceMedium) !important; margin-bottom: var(--u-spaceMedium) !important; }
[data-am-margin~="vertical"][data-am-margin~="large"]    { margin-top : var(--u-spaceLarge) !important; margin-bottom: var(--u-spaceLarge) !important; }
[data-am-margin~="vertical"][data-am-margin~="gigantic"] { margin-top : var(--u-spaceGigantic) !important; margin-bottom: var(--u-spaceGigantic) !important; }

[data-am-margin~="horizontal"][data-am-margin~="none"]     { margin-left : 0 !important; margin-right: 0 !important; }
[data-am-margin~="horizontal"][data-am-margin~="small"]    { margin-left : var(--u-spaceSmall) !important; margin-right: var(--u-spaceSmall) !important; }
[data-am-margin~="horizontal"][data-am-margin~="medium"]   { margin-left : var(--u-spaceMedium) !important; margin-right: var(--u-spaceMedium) !important; }
[data-am-margin~="horizontal"][data-am-margin~="large"]    { margin-left : var(--u-spaceLarge) !important; margin-right: var(--u-spaceLarge) !important; }
[data-am-margin~="horizontal"][data-am-margin~="gigantic"] { margin-left : var(--u-spaceGigantic) !important; margin-right: var(--u-spaceGigantic) !important; }

[data-am-margin~="top"][data-am-margin~="none"]      { margin-top : 0 !important; }
[data-am-margin~="top"][data-am-margin~="small"]     { margin-top : var(--u-spaceSmall) !important; }
[data-am-margin~="top"][data-am-margin~="medium"]    { margin-top : var(--u-spaceMedium) !important; }
[data-am-margin~="top"][data-am-margin~="large"]     { margin-top : var(--u-spaceLarge) !important; }
[data-am-margin~="top"][data-am-margin~="gigantic"]  { margin-top : var(--u-spaceGigantic) !important; }

[data-am-margin~="bottom"][data-am-margin~="none"]     { margin-bottom : 0 !important; }
[data-am-margin~="bottom"][data-am-margin~="small"]    { margin-bottom : var(--u-spaceSmall) !important; }
[data-am-margin~="bottom"][data-am-margin~="medium"]   { margin-bottom : var(--u-spaceMedium) !important; }
[data-am-margin~="bottom"][data-am-margin~="large"]    { margin-bottom : var(--u-spaceLarge) !important; }
[data-am-margin~="bottom"][data-am-margin~="gigantic"] { margin-bottom : var(--u-spaceGigantic) !important; }

[data-am-margin~="left"][data-am-margin~="none"]     { margin-left : 0 !important; }
[data-am-margin~="left"][data-am-margin~="small"]    { margin-left : var(--u-spaceSmall) !important; }
[data-am-margin~="left"][data-am-margin~="medium"]   { margin-left : var(--u-spaceMedium) !important; }
[data-am-margin~="left"][data-am-margin~="large"]    { margin-left : var(--u-spaceLarge) !important; }
[data-am-margin~="left"][data-am-margin~="gigantic"] { margin-left : var(--u-spaceGigantic) !important; }

[data-am-margin~="right"][data-am-margin~="none"]     { margin-right : 0 !important; }
[data-am-margin~="right"][data-am-margin~="small"]    { margin-right : var(--u-spaceSmall) !important; }
[data-am-margin~="right"][data-am-margin~="medium"]   { margin-right : var(--u-spaceMedium) !important; }
[data-am-margin~="right"][data-am-margin~="large"]    { margin-right : var(--u-spaceLarge) !important; }
[data-am-margin~="right"][data-am-margin~="gigantic"] { margin-right : var(--u-spaceGigantic) !important; }