@dialpad/dialtone-css 1.0.0

package/lib/build/less/utilities/grid.less

@@ -0,0 +1,244 @@
+//
+//  DIALTONE
+//  UTILITIES: GRID
+//
+//  These are the CSS grid utility classes for Dialpad's design system Dialtone.
+//  For further documentation of these and other classes,
+//  visit https://dialpad.design/utilities/grid
+//
+//  TABLE OF CONTENTS
+//  • GRID VARIABLES
+//  • COLUMNS
+//  • GAP
+//  • JUSTIFY ITEMS
+//  • JUSTIFY SELF
+//  • LAYOUTS
+//      - AREAS
+//  • PLACE CONTENT
+//  • PLACE ITEMS
+//  • PLACE SELF
+//  • ROWS
+//
+//  ============================================================================
+//  $   COLUMNS
+//  ----------------------------------------------------------------------------
+.d-gc-full { grid-column: 1 ~' / ' -1 !important; }
+
+.d-gcs-auto { grid-column-start: auto !important; }
+.d-gce-auto { grid-column-end: auto !important; }
+.d-gc-auto { grid-column: auto !important; }
+
+.d-gcs-unset { grid-column-start: unset !important; }
+.d-gce-unset { grid-column-end: unset !important; }
+.d-gc-unset { grid-column: unset !important; }
+
+
+//  ============================================================================
+//  $   GAP
+//  ============================================================================
+//      Defines the size of grid 'gaps' (lines). We generate a gap for
+//      each defined spacing unit.
+//  ----------------------------------------------------------------------------
+.d-gcg-unset { grid-column-gap: unset !important; }
+.d-grg-unset { grid-row-gap: unset !important; }
+.d-gg-unset { grid-gap: unset !important; }
+
+
+//  ============================================================================
+//  $   JUSTIFY ITEMS
+//      Aligns grid items along the main axis.
+//  ----------------------------------------------------------------------------
+.d-ji-center { justify-items: center !important; }
+.d-ji-end { justify-items: end !important; }
+.d-ji-start { justify-items: start !important; }
+.d-ji-left { justify-items: left !important; }
+.d-ji-right { justify-items: right !important; }
+.d-ji-baseline { justify-items: baseline !important; }
+.d-ji-first-baseline { justify-items: first-baseline !important; }
+.d-ji-last-baseline { justify-items: last-baseline !important; }
+.d-ji-stretch { justify-items: stretch !important; }
+.d-ji-safe { justify-items: safe !important; }
+.d-ji-unsafe { justify-items: unsafe !important; }
+.d-ji-normal { justify-items: normal !important; }
+.d-ji-legacy { justify-items: legacy !important; }
+.d-ji-auto { justify-items: auto !important; }
+.d-ji-unset { justify-items: unset !important; }
+
+
+//  ============================================================================
+//  $   JUSTIFY SELF
+//      Aligns grid item along the main axis.
+//  ----------------------------------------------------------------------------
+.d-js-center { justify-self: center !important; }
+.d-js-end { justify-self: end !important; }
+.d-js-start { justify-self: start !important; }
+.d-js-left { justify-self: left !important; }
+.d-js-right { justify-self: right !important; }
+.d-js-baseline { justify-self: baseline !important; }
+.d-js-first-baseline { justify-self: first-baseline !important; }
+.d-js-last-baseline { justify-self: last-baseline !important; }
+.d-js-stretch { justify-self: stretch !important; }
+.d-js-safe { justify-self: safe !important; }
+.d-js-unsafe { justify-self: unsafe !important; }
+.d-js-normal { justify-self: normal !important; }
+.d-js-legacy { justify-self: legacy !important; }
+.d-js-auto { justify-self: auto !important; }
+.d-js-unset { justify-self: unset !important; }
+
+
+//  ============================================================================
+//  $   LAYOUTS
+//  ----------------------------------------------------------------------------
+.d-gl-sidebar {
+    grid-template-areas: 'sidebar content';
+    grid-template-columns: [sidebar-start] var(--sidebar-width) [sidebar-end content-start] var(--content-width) [content-end];
+}
+
+.d-gl-header {
+    grid-template-areas: 'header'
+                         'content';
+    grid-template-rows: [header-start] var(--header-height) [header-end content-start] var(--content-height) [content-end];
+    grid-auto-rows: 1fr;
+    grid-auto-columns: minmax(min-content, auto);
+}
+
+//  $   GRID AREAS
+//  ----------------------------------------------------------------------------
+.d-ga-sidebar { grid-area: sidebar !important; }
+.d-ga-content { grid-area: content !important; }
+.d-ga-header { grid-area: header !important; }
+
+
+//  ============================================================================
+//  $   PLACE CONTENT
+//      Aligns grid items along the block and inline directions at once
+//  ----------------------------------------------------------------------------
+.d-plc-center { place-content: center !important; }
+.d-plc-center-end { place-content: center end !important; }
+.d-plc-center-start { place-content: center start !important; }
+.d-plc-center-stretch { place-content: center stretch !important; }
+.d-plc-center-space-around { place-content: center space-around !important; }
+.d-plc-center-space-evenly { place-content: center space-evenly !important; }
+.d-plc-center-space-between { place-content: center space-between !important; }
+
+.d-plc-end { place-content: end !important; }
+.d-plc-end-start { place-content: end start !important; }
+.d-plc-end-stretch { place-content: end stretch !important; }
+.d-plc-end-center { place-content: end center !important; }
+.d-plc-end-space-around { place-content: end space-around !important; }
+.d-plc-end-space-evenly { place-content: end space-evenly !important; }
+.d-plc-end-space-between { place-content: end space-between !important; }
+
+.d-plc-start { place-content: start !important; }
+.d-plc-start-end { place-content: start end !important; }
+.d-plc-start-center { place-content: start center !important; }
+.d-plc-start-stretch { place-content: start stretch !important; }
+.d-plc-start-space-around { place-content: start space-around !important; }
+.d-plc-start-space-evenly { place-content: start space-evenly !important; }
+.d-plc-start-space-between { place-content: start space-between !important; }
+
+.d-plc-stretch { place-content: stretch !important; }
+.d-plc-stretch-end { place-content: stretch end !important; }
+.d-plc-stretch-start { place-content: stretch start !important; }
+.d-plc-stretch-center { place-content: stretch center !important; }
+.d-plc-stretch-space-evenly { place-content: stretch space-evenly !important; }
+.d-plc-stretch-space-around { place-content: stretch space-around !important; }
+.d-plc-stretch-space-between { place-content: stretch space-between !important; }
+
+.d-plc-space-around { place-content: space-around !important; }
+.d-plc-space-around-end { place-content: space-around end !important; }
+.d-plc-space-around-start { place-content: space-around start !important; }
+.d-plc-space-around-center { place-content: space-around center !important; }
+.d-plc-space-around-space-evenly { place-content: space-around space-evenly !important; }
+.d-plc-space-around-space-between { place-content: space-around space-between !important; }
+
+.d-plc-space-evenly { place-content: space-evenly !important; }
+.d-plc-space-evenly-end { place-content: space-evenly end !important; }
+.d-plc-space-evenly-start { place-content: space-evenly start !important; }
+.d-plc-space-evenly-center { place-content: space-evenly center !important; }
+.d-plc-space-evenly-space-around { place-content: space-evenly space-around !important; }
+.d-plc-space-evenly-space-between { place-content: space-evenly space-between !important; }
+
+.d-plc-space-between { place-content: space-between !important; }
+.d-plc-space-between-end { place-content: space-between end !important; }
+.d-plc-space-between-start { place-content: space-between start !important; }
+.d-plc-space-between-center { place-content: space-between center !important; }
+.d-plc-space-between-space-around { place-content: space-between space-around !important; }
+.d-plc-space-between-space-evenly { place-content: space-between space-evenly !important; }
+
+.d-plc-normal { place-content: normal !important; }
+.d-plc-legacy { place-content: legacy !important; }
+.d-plc-auto { place-content: auto !important; }
+.d-plc-unset { place-content: unset !important; }
+
+
+//  ============================================================================
+//  $   PLACE ITEMS
+//  ----------------------------------------------------------------------------
+.d-pli-center { place-items: center !important; }
+.d-pli-center-end { place-items: center end !important; }
+.d-pli-center-start { place-items: center start !important; }
+.d-pli-center-stretch { place-items: center stretch !important; }
+
+.d-pli-end { place-items: end !important; }
+.d-pli-end-start { place-items: end start !important; }
+.d-pli-end-stretch { place-items: end stretch !important; }
+.d-pli-end-center { place-items: end center !important; }
+
+.d-pli-start { place-items: start !important; }
+.d-pli-start-end { place-items: start end !important; }
+.d-pli-start-center { place-items: start center !important; }
+.d-pli-start-stretch { place-items: start stretch !important; }
+
+.d-pli-stretch { place-items: stretch !important; }
+.d-pli-stretch-end { place-items: stretch end !important; }
+.d-pli-stretch-start { place-items: stretch start !important; }
+.d-pli-stretch-center { place-items: stretch center !important; }
+
+.d-pli-normal { place-items: normal !important; }
+.d-pli-legacy { place-items: legacy !important; }
+.d-pli-auto { place-items: auto !important; }
+.d-pli-unset { place-items: unset !important; }
+
+
+//  ============================================================================
+//  $   PLACE SELF
+//  ----------------------------------------------------------------------------
+.d-pls-center { place-self: center !important; }
+.d-pls-center-end { place-self: center end !important; }
+.d-pls-center-start { place-self: center start !important; }
+.d-pls-center-stretch { place-self: center stretch !important; }
+
+.d-pls-end { place-self: end !important; }
+.d-pls-end-start { place-self: end start !important; }
+.d-pls-end-stretch { place-self: end stretch !important; }
+.d-pls-end-center { place-self: end center !important; }
+
+.d-pls-start { place-self: start !important; }
+.d-pls-start-end { place-self: start end !important; }
+.d-pls-start-center { place-self: start center !important; }
+.d-pls-start-stretch { place-self: start stretch !important; }
+
+.d-pls-stretch { place-self: stretch !important; }
+.d-pls-stretch-end { place-self: stretch end !important; }
+.d-pls-stretch-start { place-self: stretch start !important; }
+.d-pls-stretch-center { place-self: stretch center !important; }
+
+.d-pls-normal { place-self: normal !important; }
+.d-pls-legacy { place-self: legacy !important; }
+.d-pls-auto { place-self: auto !important; }
+.d-pls-unset { place-self: unset !important; }
+
+
+//  ============================================================================
+//  $   ROWS
+//  ----------------------------------------------------------------------------
+.d-gr-full { grid-row: 1 ~' / ' -1 !important; }
+
+.d-grs-auto { grid-row-start: auto !important; }
+.d-gre-auto { grid-row-end: auto !important; }
+.d-gr-auto { grid-row: auto !important; }
+
+.d-grs-unset { grid-row-start: unset !important; }
+.d-gre-unset { grid-row-end: unset !important; }
+.d-gr-unset { grid-row: unset !important; }

package/lib/build/less/utilities/interactivity.less

@@ -0,0 +1,69 @@
+//
+//  DIALTONE
+//  UTILITIES: INTERACTIVITY
+//
+//  These are interactivity utility classes for Dialpad's design system Dialtone.
+//  For further documentation of these and other classes,
+//  visit https://dialpad.design/utilities/interactivity
+//
+//  TABLE OF CONTENTS
+//  • CURSOR
+//  • OUTLINE
+//  • POINTER EVENTS
+//
+//  ============================================================================
+//  $   CURSOR
+//      Sets the type of mouse cursor, if any, to show when the mouse pointer is over an element.
+//  ----------------------------------------------------------------------------
+.d-c-menu { cursor: context-menu !important; }
+.d-c-help { cursor: help !important; }
+.d-c-pointer { cursor: pointer !important; }
+.d-c-progress { cursor: progress !important; }
+.d-c-wait { cursor: wait !important; }
+.d-c-crosshair { cursor: crosshair !important; }
+.d-c-text { cursor: text !important; }
+.d-c-move { cursor: move !important; }
+.d-c-copy { cursor: copy !important; }
+.d-c-not-allowed { cursor: not-allowed !important; }
+.d-c-grab { cursor: grab !important; }
+.d-c-grabbing { cursor: grabbing !important; }
+.d-c-all-scroll { cursor: all-scroll !important; }
+.d-c-col-resize { cursor: col-resize !important; }
+.d-c-row-resize { cursor: row-resize !important; }
+.d-c-zoom-in { cursor: zoom-in !important; }
+.d-c-zoom-out { cursor: zoom-out !important; }
+.d-c-auto { cursor: auto !important; }
+.d-c-default { cursor: default !important; }
+.d-c-none { cursor: none !important; }
+
+
+//============================================================================
+//  $   OUTLINE
+//      Sets the style, width, color, and other characteristics
+//      elements' outlines. These shouldn't be confused with borders.
+//  ----------------------------------------------------------------------------
+.d-ol-focusring { box-shadow: var(--dt-shadow-focus) !important; }
+.d-ol-focusring-inset { box-shadow: var(--dt-shadow-focus-inset) !important; }
+.d-ol-none { box-shadow: none !important; }
+
+//============================================================================
+//  $   POINTER EVENTS
+//      The pointer-events CSS property enables or disables all
+//      mouse events on an element.
+//  ----------------------------------------------------------------------------
+.d-pe-auto { pointer-events: auto !important; }
+.d-pe-inherit { pointer-events: inherit !important; }
+.d-pe-none { pointer-events: none !important; }
+
+.d-us-auto { user-select: auto !important; }
+.d-us-none { user-select: none !important; }
+
+//============================================================================
+//  $   RESIZE
+//      The resize CSS property sets whether an element is resizable,
+//      and if so, in which directions.
+//  ----------------------------------------------------------------------------
+.d-r-both { resize: both !important; }
+.d-r-horizontal { resize: horizontal !important; }
+.d-r-vertical { resize: vertical !important; }
+.d-r-none { resize: none !important; }

package/lib/build/less/utilities/layout.less

@@ -0,0 +1,146 @@
+//
+//  DIALTONE
+//  UTILITIES: LAYOUT
+//
+//  These are layout utility classes for Dialpad's design system Dialtone.
+//  For further documentation of these and other classes,
+//  visit https://dialpad.design/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-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: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  word-wrap: normal;
+  border: none;
+  clip: rect(1px, 1px, 1px, 1px);
+  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; }

package/lib/build/less/utilities/lint-staged.config.cjs

@@ -0,0 +1,5 @@
+module.exports = {
+  '*.less': [
+    'pnpm exec lesshint',
+  ],
+};

package/lib/build/less/utilities/sizing.less

@@ -0,0 +1,152 @@
+//
+//  DIALTONE
+//  UTILITIES: SIZING
+//
+//  These are sizing utility classes for Dialpad's design system Dialtone.
+//  For further documentation of these and other classes,
+//  visit https://dialpad.design/utilities/sizing
+//
+//  TABLE OF CONTENTS
+//  • HEIGHT
+//      - PERCENTAGES
+//      - MAX-HEIGHT
+//      - MIN-HEIGHT
+//      - FIXED
+//  • WIDTH
+//      - FLUID
+//      - MAX-WIDTH
+//      - MIN-WIDTH
+//      - FIXED
+//
+//  ============================================================================
+//  $   HEIGHT
+//  ============================================================================
+//  $$  PERCENTAGES
+//  ----------------------------------------------------------------------------
+.d-h10p { height: 10% !important; }
+.d-h20p { height: 20% !important; }
+.d-h25p { height: 25% !important; }
+.d-h30p { height: 30% !important; }
+.d-h40p { height: 40% !important; }
+.d-h50p { height: 50% !important; }
+.d-h60p { height: 60% !important; }
+.d-h70p { height: 70% !important; }
+.d-h75p { height: 75% !important; }
+.d-h80p { height: 80% !important; }
+.d-h90p { height: 90% !important; }
+.d-h100p { height: 100% !important; }
+
+//  $$  MAX-HEIGHT
+//  ----------------------------------------------------------------------------
+.d-hmx10p { max-height: 10% !important; }
+.d-hmx20p { max-height: 20% !important; }
+.d-hmx25p { max-height: 25% !important; }
+.d-hmx30p { max-height: 30% !important; }
+.d-hmx40p { max-height: 40% !important; }
+.d-hmx50p { max-height: 50% !important; }
+.d-hmx60p { max-height: 60% !important; }
+.d-hmx70p { max-height: 70% !important; }
+.d-hmx75p { max-height: 75% !important; }
+.d-hmx80p { max-height: 80% !important; }
+.d-hmx90p { max-height: 90% !important; }
+.d-hmx100p { max-height: 100% !important; }
+
+//  $$  MIN-HEIGHT
+//  ----------------------------------------------------------------------------
+.d-hmn10p { min-height: 10% !important; }
+.d-hmn20p { min-height: 20% !important; }
+.d-hmn25p { min-height: 25% !important; }
+.d-hmn30p { min-height: 30% !important; }
+.d-hmn40p { min-height: 40% !important; }
+.d-hmn50p { min-height: 50% !important; }
+.d-hmn60p { min-height: 60% !important; }
+.d-hmn70p { min-height: 70% !important; }
+.d-hmn75p { min-height: 75% !important; }
+.d-hmn80p { min-height: 80% !important; }
+.d-hmn90p { min-height: 90% !important; }
+.d-hmn100p { min-height: 100% !important; }
+
+//  $$  FIXED
+//  ----------------------------------------------------------------------------
+.d-h100vh { height: 100vh !important; }
+.d-h-auto { height: auto !important; }
+.d-h-unset { height: unset !important; }
+
+.d-hmn-auto { min-height: auto !important; }
+.d-hmn-unset { min-height: unset !important; }
+
+.d-hmx-auto { max-height: auto !important; }
+.d-hmx-unset { max-height: unset !important; }
+
+
+//  ============================================================================
+//  $   WIDTH
+//  ============================================================================
+//  $$  FLUID
+//  ----------------------------------------------------------------------------
+.d-w10p { width: 10% !important; }
+.d-w20p { width: 20% !important; }
+.d-w25p { width: 25% !important; }
+.d-w30p { width: 30% !important; }
+.d-w40p { width: 40% !important; }
+.d-w50p { width: 50% !important; }
+.d-w60p { width: 60% !important; }
+.d-w70p { width: 70% !important; }
+.d-w75p { width: 75% !important; }
+.d-w80p { width: 80% !important; }
+.d-w90p { width: 90% !important; }
+.d-w100p { width: 100% !important; }
+
+//  $$  MAX-WIDTH
+//  ----------------------------------------------------------------------------
+.d-wmx10p { max-width: 10% !important; }
+.d-wmx20p { max-width: 20% !important; }
+.d-wmx25p { max-width: 25% !important; }
+.d-wmx30p { max-width: 30% !important; }
+.d-wmx40p { max-width: 40% !important; }
+.d-wmx50p { max-width: 50% !important; }
+.d-wmx60p { max-width: 60% !important; }
+.d-wmx70p { max-width: 70% !important; }
+.d-wmx75p { max-width: 75% !important; }
+.d-wmx80p { max-width: 80% !important; }
+.d-wmx90p { max-width: 90% !important; }
+.d-wmx100p { max-width: 100% !important; }
+
+//  $$  MIN-WIDTH
+//  ----------------------------------------------------------------------------
+.d-wmn10p { min-width: 10% !important; }
+.d-wmn20p { min-width: 20% !important; }
+.d-wmn25p { min-width: 25% !important; }
+.d-wmn30p { min-width: 30% !important; }
+.d-wmn40p { min-width: 40% !important; }
+.d-wmn50p { min-width: 50% !important; }
+.d-wmn60p { min-width: 60% !important; }
+.d-wmn70p { min-width: 70% !important; }
+.d-wmn75p { min-width: 75% !important; }
+.d-wmn80p { min-width: 80% !important; }
+.d-wmn90p { min-width: 90% !important; }
+.d-wmn100p { min-width: 100% !important; }
+
+//  $$  FIXED
+//  ----------------------------------------------------------------------------
+.d-w60ch { width: 60ch !important; }
+.d-w75ch { width: 75ch !important; }
+.d-w90ch { width: 90ch !important; }
+
+.d-w100vw { width: 100vw !important; }
+.d-w-auto { width: auto !important; }
+.d-w-unset { width: unset !important; }
+
+.d-wmn60ch { min-width: 60ch !important; }
+.d-wmn75ch { min-width: 75ch !important; }
+.d-wmn90ch { min-width: 90ch !important; }
+
+.d-wmn-auto { min-width: auto !important; }
+.d-wmn-unset { min-width: unset !important; }
+
+.d-wmx60ch { max-width: 60ch !important; }
+.d-wmx75ch { max-width: 75ch !important; }
+.d-wmx90ch { max-width: 90ch !important; }
+
+.d-wmx-auto { max-width: auto !important; }
+.d-wmx-unset { max-width: unset !important; }