@dialpad/dialtone 9.0.2 → 9.1.0

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

@@ -1,244 +0,0 @@
-//
-//  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/dist/css/lib/build/less/utilities/interactivity.less

@@ -1,69 +0,0 @@
-//
-//  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/dist/css/lib/build/less/utilities/layout.less

@@ -1,146 +0,0 @@
-//
-//  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/dist/css/lib/build/less/utilities/lint-staged.config.cjs

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

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

@@ -1,152 +0,0 @@
-//
-//  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; }