@dialpad/dialtone-css/lib/build/less/utilities/spacing.less

Dialpad's design system

//
//  DIALTONE
//  UTILITIES: SPACING
//
//  These are spacing utility classes for Dialpad's design system Dialtone.
//  For further documentation of these and other classes,
//  visit https://dialtone.dialpad.com/utilities/spacing
//
//  TABLE OF CONTENTS
//  • AUTO-SPACING
//    - VERTICALLY
//    - HORIZONTALLY
//  • MARGIN
//  • PADDING
//
//  ============================================================================
//  $   AUTO-SPACING
//  ============================================================================
//  $$  THE STACK
//      Instead of stlying specific elements when we're unaware of their context,
//      this applies margin to context. The margin is only applied when an
//      element is proceeded by another element.
//  ============================================================================
//  $$   VERTICALLY
//  ----------------------------------------------------------------------------
.d-stack0   { > * + * { margin-top: 0 !important; } }
.d-stack1   { > * + * { margin-top: var(--dt-space-100) !important; } }
.d-stack2   { > * + * { margin-top: var(--dt-space-200) !important; } }
.d-stack4   { > * + * { margin-top: var(--dt-space-300) !important; } }
.d-stack6   { > * + * { margin-top: var(--dt-space-350) !important; } }
.d-stack8   { > * + * { margin-top: var(--dt-space-400) !important; } }
.d-stack12  { > * + * { margin-top: var(--dt-space-450) !important; } }
.d-stack16  { > * + * { margin-top: var(--dt-space-500) !important; } }
.d-stack20  { > * + * { margin-top: var(--dt-space-525) !important; } }
.d-stack24  { > * + * { margin-top: var(--dt-space-550) !important; } }
.d-stack32  { > * + * { margin-top: var(--dt-space-600) !important; } }
.d-stack48  { > * + * { margin-top: var(--dt-space-650) !important; } }
.d-stack64  { > * + * { margin-top: var(--dt-space-700) !important; } }
.d-stack72  { > * + * { margin-top: var(--dt-space-720) !important; } }
.d-stack84  { > * + * { margin-top: var(--dt-space-730) !important; } }
.d-stack96  { > * + * { margin-top: var(--dt-space-750) !important; } }
.d-stack102 { > * + * { margin-top: var(--dt-space-760) !important; } }
.d-stack114 { > * + * { margin-top: var(--dt-space-775) !important; } }
.d-stack128 { > * + * { margin-top: var(--dt-space-800) !important; } }

//  ============================================================================
//  $$   HORIZONTALLY
//  ----------------------------------------------------------------------------
.d-flow0   { > * + * { margin-left: 0 !important; } }
.d-flow1   { > * + * { margin-left: var(--dt-space-100) !important; } }
.d-flow2   { > * + * { margin-left: var(--dt-space-200) !important; } }
.d-flow4   { > * + * { margin-left: var(--dt-space-300) !important; } }
.d-flow6   { > * + * { margin-left: var(--dt-space-350) !important; } }
.d-flow8   { > * + * { margin-left: var(--dt-space-400) !important; } }
.d-flow12  { > * + * { margin-left: var(--dt-space-450) !important; } }
.d-flow16  { > * + * { margin-left: var(--dt-space-500) !important; } }
.d-flow20  { > * + * { margin-left: var(--dt-space-525) !important; } }
.d-flow24  { > * + * { margin-left: var(--dt-space-550) !important; } }
.d-flow32  { > * + * { margin-left: var(--dt-space-600) !important; } }
.d-flow48  { > * + * { margin-left: var(--dt-space-650) !important; } }
.d-flow64  { > * + * { margin-left: var(--dt-space-700) !important; } }
.d-flow72  { > * + * { margin-left: var(--dt-space-720) !important; } }
.d-flow84  { > * + * { margin-left: var(--dt-space-730) !important; } }
.d-flow96  { > * + * { margin-left: var(--dt-space-750) !important; } }
.d-flow102 { > * + * { margin-left: var(--dt-space-760) !important; } }
.d-flow114 { > * + * { margin-left: var(--dt-space-775) !important; } }
.d-flow128 { > * + * { margin-left: var(--dt-space-800) !important; } }

//  ============================================================================
//  $   MARGIN
//  ----------------------------------------------------------------------------
.d-m-auto { margin: auto !important; }
.d-m-unset { margin: unset !important; }

.d-mt-auto { margin-top: auto !important; }
.d-mt-unset { margin-top: unset !important; }

.d-mr-auto { margin-right: auto !important; }
.d-mr-unset { margin-right: unset !important; }

.d-mb-auto { margin-bottom: auto !important; }
.d-mb-unset { margin-bottom: unset !important; }

.d-ml-auto { margin-left: auto !important; }
.d-ml-unset { margin-left: unset !important; }

.d-mx-auto {
  margin-right: auto !important;
  margin-left: auto !important;
}

.d-mx-unset {
  margin-right: unset !important;
  margin-left: unset !important;
}

.d-my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
 }

.d-my-unset {
  margin-top: unset !important;
  margin-bottom: unset !important;
}


//  ============================================================================
//  $   PADDING
//  ----------------------------------------------------------------------------
.d-p-unset { padding: unset !important; }

.d-pt-unset { padding-top: unset !important; }

.d-pr-unset { padding-right: unset !important; }

.d-pb-unset { padding-bottom: unset !important; }

.d-pl-unset { padding-left: unset !important; }

.d-px-unset {
  padding-right: unset !important;
  padding-left: unset !important;
}

.d-py-unset {
  padding-top: unset !important;
  padding-bottom: unset !important;
}

//  ============================================================================
//  $   GAP
//  ============================================================================
//      Defines the size of 'gaps' (lines). We generate a gap for
//      each defined spacing unit.
//  ----------------------------------------------------------------------------
.d-cg-unset { column-gap: unset !important; }
.d-rg-unset { row-gap: unset !important; }
.d-g-unset { gap: unset !important; }