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

Dialpad's design system

//
//  DIALTONE
//  UTILITIES: LAYOUT
//
//  These are layout utility classes for Dialpad's design system Dialtone.
//  For further documentation of these and other classes,
//  visit https://dialtone.dialpad.com/utilities/layout
//
//  TABLE OF CONTENTS
//  • BOX SIZING
//  • COORDINATES
//  • DISPLAY
//  • OVERFLOW
//  • POSITION
//  • VISIBILITY
//  • Z-INDEX
//
//  ============================================================================
//  $   BOX-SIZING
//  ============================================================================
.d-box-border { box-sizing: border-box !important; }
.d-box-content { box-sizing: content-box !important; }
.d-box-unset { box-sizing: unset !important; }

//  ============================================================================
//  $  COORDINATES
//  ============================================================================
//  $$  TOP
//  ----------------------------------------------------------------------------
.d-t50p { top: 50% !important; }
.d-t100p { top: 100% !important; }
.d-t100p-calc { top: calc(~'100% + var(--fixed-value, 8px)') !important; }
.d-tn50p { top: -50% !important; }
.d-tn100p { top: -100% !important; }
.d-tn100p-calc { top: calc(~'-100% + var(--fixed-value, 8px)') !important; }

//  $$  RIGHT
//  ----------------------------------------------------------------------------
.d-r50p { right: 50% !important; }
.d-r100p { right: 100% !important; }
.d-r100p-calc { right: calc(~'100% + var(--fixed-value, 8px)') !important; }
.d-rn50p { right: -50% !important; }
.d-rn100p { right: -100% !important; }
.d-rn100p-calc { right: calc(~'-100% + var(--fixed-value, 8px)') !important; }

//  $$  BOTTOM
//  ----------------------------------------------------------------------------
.d-b50p { bottom: 50% !important; }
.d-b100p { bottom: 100% !important; }
.d-b100p-calc { bottom: calc(~'100% + var(--fixed-value, 8px)') !important; }
.d-bn50p { bottom: -50% !important; }
.d-bn100p { bottom: -100% !important; }
.d-bn100p-calc { bottom: calc(~'-100% + var(--fixed-value, 8px)') !important; }

//  $$  LEFT
//  ----------------------------------------------------------------------------
.d-l50p { left: 50% !important; }
.d-l100p { left: 100% !important; }
.d-l100p-calc { left: calc(~'100% + var(--fixed-value, 8px)') !important; }
.d-ln50p { left: -50% !important; }
.d-ln100p { left: -100% !important; }
.d-ln100p-calc { left: calc(~'-100% + var(--fixed-value, 8px)') !important; }


//  ============================================================================
//  $   DISPLAY
//  ----------------------------------------------------------------------------
.d-d-block { display: block !important; }
.d-d-contents { display: contents !important; }
.d-d-flex { display: flex !important; }
.d-d-grid { display: grid !important; }
.d-d-inline { display: inline !important; }
.d-d-inline-block { display: inline-block !important; }
.d-d-inline-flex { display: inline-flex !important; }
.d-d-inline-grid { display: inline-grid !important; }
.d-d-none { display: none !important; }
.d-d-unset { display: unset !important; }


//  ============================================================================
//  $   OVERFLOW
//  ============================================================================
.d-of-auto { overflow: auto !important; }
.d-of-x-auto { overflow-x: auto !important; }
.d-of-y-auto { overflow-y: auto !important; }
.d-of-hidden { overflow: hidden !important; }
.d-of-x-hidden { overflow-x: hidden !important; }
.d-of-y-hidden { overflow-y: hidden !important; }
.d-of-scroll { overflow: scroll !important; }
.d-of-x-scroll { overflow-x: scroll !important; }
.d-of-y-scroll { overflow-y: scroll !important; }
.d-of-visible { overflow: visible !important; }
.d-of-x-visible { overflow-x: visible !important; }
.d-of-y-visible { overflow-y: visible !important; }
.d-of-unset { overflow: unset !important; }


//  ============================================================================
//  $   POSITION
//  ----------------------------------------------------------------------------
.d-ps-static { position: static !important; }
.d-ps-relative { position: relative !important; }
.d-ps-absolute { position: absolute !important; }
.d-ps-fixed { position: fixed !important; }
.d-ps-sticky { position: sticky !important; }
.d-ps-unset { position: unset !important; }


//  ============================================================================
//  $   VISIBILITY
//  ----------------------------------------------------------------------------
.d-vi-visible { visibility: visible !important; }
.d-vi-hidden { visibility: hidden !important; }
.d-vi-unset { visibility: unset !important; }

.d-vi-visible-sr {
  position: absolute;
  width: var(--dt-size-100);
  height: var(--dt-size-100);
  margin: var(--dt-space-100-negative);
  padding: var(--dt-space-0);
  overflow: hidden;
  overflow-wrap: normal;
  border: none;
  clip-path: inset(50%);
}


//  ============================================================================
//  $   Z-INDEX
//  ----------------------------------------------------------------------------
.d-zi-hide { z-index: var(--zi-hide) !important; }
.d-zi-base { z-index: var(--zi-base) !important; }
.d-zi-base1 { z-index: var(--zi-base1) !important; }
.d-zi-selected { z-index: var(--zi-selected) !important; }
.d-zi-active { z-index: var(--zi-active) !important; }
.d-zi-navigation { z-index: var(--zi-navigation) !important; }
.d-zi-navigation-fixed { z-index: var(--zi-navigation-fixed) !important; }
.d-zi-dropdown { z-index: var(--zi-dropdown) !important; }
.d-zi-popover { z-index: var(--zi-popover) !important; }
.d-zi-tooltip { z-index: var(--zi-tooltip) !important; }
.d-zi-drawer { z-index: var(--zi-drawer) !important; }
.d-zi-modal { z-index: var(--zi-modal) !important; }
.d-zi-modal-element { z-index: var(--zi-modal-element) !important; }
.d-zi-notification { z-index: var(--zi-notification) !important; }
.d-zi-unset { z-index: unset !important; }