@dialpad/dialtone 8.22.1 → 9.0.1

package/lib/build/less/utilities/colors.less

@@ -1,122 +0,0 @@
-//
-//  DIALTONE
-//  UTILITIES: COLORS
-//
-//  These are all the color utility classes for Dialpad's design system Dialtone.
-//  For further information about these classes, please visit their respective
-//  documentation pages at https://dialpad.design
-//
-//  TABLE OF CONTENTS
-//  • TEXT COLORS
-//  • BACKGROUND/SURFACE COLORS
-//  • BORDER COLORS
-//
-//  $$  TEXT COLORS
-//  ----------------------------------------------------------------------------
-.d-fc-primary.d-fc-primary { color: var(--dt-color-foreground-primary) !important; }
-.d-fc-primary-inverted.d-fc-primary-inverted { color: var(--dt-color-foreground-primary-inverted) !important; }
-.d-fc-secondary.d-fc-secondary { color: var(--dt-color-foreground-secondary) !important; }
-.d-fc-secondary-inverted.d-fc-secondary-inverted { color: var(--dt-color-foreground-secondary-inverted) !important; }
-.d-fc-tertiary.d-fc-tertiary { color: var(--dt-color-foreground-tertiary) !important; }
-.d-fc-tertiary-inverted.d-fc-tertiary-inverted { color: var(--dt-color-foreground-tertiary-inverted) !important; }
-.d-fc-muted.d-fc-muted { color: var(--dt-color-foreground-muted) !important; }
-.d-fc-muted-inverted.d-fc-muted-inverted { color: var(--dt-color-foreground-muted-inverted) !important; }
-.d-fc-placeholder.d-fc-placeholder { color: var(--dt-color-foreground-placeholder) !important; }
-.d-fc-placeholder-inverted.d-fc-placeholder-inverted { color: var(--dt-color-foreground-placeholder-inverted) !important; }
-.d-fc-disabled.d-fc-disabled { color: var(--dt-color-foreground-disabled) !important; }
-.d-fc-disabled-inverted.d-fc-disabled-inverted { color: var(--dt-color-foreground-disabled-inverted) !important; }
-.d-fc-success.d-fc-success { color: var(--dt-color-foreground-success) !important; }
-.d-fc-success-inverted.d-fc-success-inverted { color: var(--dt-color-foreground-success-inverted) !important; }
-.d-fc-success-strong.d-fc-success-strong { color: var(--dt-color-foreground-success-strong) !important; }
-.d-fc-success-strong-inverted.d-fc-success-strong-inverted { color: var(--dt-color-foreground-success-strong-inverted) !important; }
-.d-fc-warning.d-fc-warning { color: var(--dt-color-foreground-warning) !important; }
-.d-fc-warning-inverted.d-fc-warning-inverted { color: var(--dt-color-foreground-warning-inverted) !important; }
-.d-fc-error.d-fc-error { color: var(--dt-color-foreground-critical) !important; }
-.d-fc-error-strong.d-fc-error-strong { color: var(--dt-color-foreground-critical-strong) !important; }
-.d-fc-critical.d-fc-critical { color: var(--dt-color-foreground-critical) !important; }
-.d-fc-critical-inverted.d-fc-critical-inverted { color: var(--dt-color-foreground-critical-inverted) !important; }
-.d-fc-critical-strong.d-fc-critical-strong { color: var(--dt-color-foreground-critical-strong) !important; }
-.d-fc-critical-strong-inverted.d-fc-critical-strong-inverted { color: var(--dt-color-foreground-critical-strong-inverted) !important; }
-.d-fc-current.d-fc-current { color: currentColor !important; }
-.d-fc-transparent.d-fc-transparent { color: transparent !important; }
-.d-fc-unset.d-fc-unset { color: unset !important; }
-
-
-//  $$  BACKGROUND/SURFACE COLORS
-//  ----------------------------------------------------------------------------
-.d-bgc-primary.d-bgc-primary { background-color: var(--dt-color-surface-primary) !important; }
-.d-bgc-secondary.d-bgc-secondary { background-color: var(--dt-color-surface-secondary) !important; }
-.d-bgc-secondary-opaque.d-bgc-secondary-opaque { background-color: var(--dt-color-surface-secondary-opaque) !important; }
-.d-bgc-moderate.d-bgc-moderate { background-color: var(--dt-color-surface-moderate) !important; }
-.d-bgc-moderate-opaque.d-bgc-moderate-opaque { background-color: var(--dt-color-surface-moderate-opaque) !important; }
-.d-bgc-strong-opaque.d-bgc-strong-opaque { background-color: var(--dt-color-surface-strong-opaque) !important; }
-.d-bgc-contrast-opaque.d-bgc-contrast-opaque { background-color: var(--dt-color-surface-contrast-opaque) !important; }
-.d-bgc-bold.d-bgc-bold { background-color: var(--dt-color-surface-bold) !important; }
-.d-bgc-bold-opaque.d-bgc-bold-opaque { background-color: var(--dt-color-surface-bold-opaque) !important; }
-.d-bgc-strong.d-bgc-strong  { background-color: var(--dt-color-surface-strong) !important; }
-.d-bgc-contrast.d-bgc-contrast { background-color: var(--dt-color-surface-contrast) !important; }
-.d-bgc-backdrop.d-bgc-backdrop { background-color: var(--dt-color-surface-backdrop) !important; }
-.d-bgc-success.d-bgc-success { background-color: var(--dt-color-surface-success) !important; }
-.d-bgc-success-opaque.d-bgc-success-opaque { background-color: var(--dt-color-surface-success-opaque) !important; }
-.d-bgc-success-subtle.d-bgc-success-subtle { background-color: var(--dt-color-surface-success-subtle) !important; }
-.d-bgc-success-subtle-opaque.d-bgc-success-subtle-opaque { background-color: var(--dt-color-surface-success-subtle-opaque) !important; }
-.d-bgc-success-strong.d-bgc-success-strong { background-color: var(--dt-color-surface-success-strong) !important; }
-.d-bgc-warning.d-bgc-warning { background-color: var(--dt-color-surface-warning) !important; }
-.d-bgc-warning-opaque.d-bgc-warning-opaque { background-color: var(--dt-color-surface-warning-opaque) !important; }
-.d-bgc-warning-subtle.d-bgc-warning-subtle { background-color: var(--dt-color-surface-warning-subtle) !important; }
-.d-bgc-warning-subtle-opaque.d-bgc-warning-subtle-opaque { background-color: var(--dt-color-surface-warning-subtle-opaque) !important; }
-.d-bgc-warning-strong.d-bgc-warning-strong { background-color: var(--dt-color-surface-warning-strong) !important; }
-.d-bgc-info.d-bgc-info { background-color: var(--dt-color-surface-info) !important; }
-.d-bgc-info-opaque.d-bgc-info-opaque { background-color: var(--dt-color-surface-info-opaque) !important; }
-.d-bgc-info-subtle.d-bgc-info-subtle { background-color: var(--dt-color-surface-info-subtle) !important; }
-.d-bgc-info-subtle-opaque.d-bgc-info-subtle-opaque { background-color: var(--dt-color-surface-info-subtle-opaque) !important; }
-.d-bgc-info-strong.d-bgc-info-strong { background-color: var(--dt-color-surface-info-strong) !important; }
-.d-bgc-critical.d-bgc-critical,
-.d-bgc-error.d-bgc-error,
-.d-bgc-danger.d-bgc-danger { background-color: var(--dt-color-surface-critical) !important; }
-.d-bgc-critical-opaque.d-bgc-critical-opaque { background-color: var(--dt-color-surface-critical-opaque) !important; }
-.d-bgc-critical-subtle.d-bgc-critical-subtle { background-color: var(--dt-color-surface-critical-subtle) !important; }
-.d-bgc-critical-subtle-opaque.d-bgc-critical-subtle-opaque { background-color: var(--dt-color-surface-critical-subtle-opaque) !important; }
-.d-bgc-critical-strong.d-bgc-critical-strong { background-color: var(--dt-color-surface-critical-strong) !important; }
-.d-bgc-transparent.d-bgc-transparent { background-color: transparent !important; background-image: none !important; }
-.d-bgc-unset.d-bgc-unset { background-color: unset !important; background-image: unset !important; }
-
-//  $$  BORDER COLORS
-//  ----------------------------------------------------------------------------
-.d-bc-transparent.d-bc-transparent { border-color: transparent !important; }
-.d-bc-current.d-bc-current { border-color: currentColor !important; }
-.d-bc-unset.d-bc-unset { border-color: unset !important; }
-.d-bc-subtle.d-bc-subtle { border-color: var(--dt-color-border-subtle) !important; }
-.d-bc-default.d-bc-default { border-color: var(--dt-color-border-default) !important; }
-.d-bc-moderate.d-bc-moderate { border-color: var(--dt-color-border-moderate) !important; }
-.d-bc-bold.d-bc-bold { border-color: var(--dt-color-border-bold) !important; }
-.d-bc-subtle-inverted.d-bc-subtle-inverted { border-color: var(--dt-color-border-subtle-inverted) !important; }
-.d-bc-default-inverted.d-bc-default-inverted { border-color: var(--dt-color-border-default-inverted) !important; }
-.d-bc-moderate-inverted.d-bc-moderate-inverted { border-color: var(--dt-color-border-moderate-inverted) !important; }
-.d-bc-bold-inverted.d-bc-bold-inverted { border-color: var(--dt-color-border-bold-inverted) !important; }
-.d-bc-focus.d-bc-focus { border-color: var(--dt-color-border-focus) !important; }
-.d-bc-critical.d-bc-critical { border-color: var(--dt-color-border-critical) !important; }
-.d-bc-critical-inverted.d-bc-critical-inverted{ border-color: var(--dt-color-border-critical-inverted) !important; }
-.d-bc-critical-subtle.d-bc-critical-subtle { border-color: var(--dt-color-border-critical-subtle) !important; }
-.d-bc-critical-subtle-inverted.d-bc-critical-subtle-inverted { border-color: var(--dt-color-border-critical-subtle-inverted) !important; }
-.d-bc-critical-strong.d-bc-critical-strong { border-color: var(--dt-color-border-critical-strong) !important; }
-.d-bc-critical-strong-inverted.d-bc-critical-strong-inverted { border-color: var(--dt-color-border-critical-strong-inverted) !important; }
-.d-bc-success.d-bc-success { border-color: var(--dt-color-border-success) !important; }
-.d-bc-success-inverted.d-bc-success-inverted { border-color: var(--dt-color-border-success-inverted) !important; }
-.d-bc-success-subtle.d-bc-success-subtle { border-color: var(--dt-color-border-success-subtle) !important; }
-.d-bc-success-subtle-inverted.d-bc-success-subtle-inverted { border-color: var(--dt-color-border-success-subtle-inverted) !important; }
-.d-bc-success-strong.d-bc-success-strong { border-color: var(--dt-color-border-success-strong) !important; }
-.d-bc-success-strong-inverted.d-bc-success-strong-inverted { border-color: var(--dt-color-border-success-strong-inverted) !important; }
-.d-bc-warning.d-bc-warning { border-color: var(--dt-color-border-warning) !important; }
-.d-bc-warning-inverted.d-bc-warning-inverted { border-color: var(--dt-color-border-warning-inverted) !important; }
-.d-bc-warning-subtle.d-bc-warning-subtle { border-color: var(--dt-color-border-warning-subtle) !important; }
-.d-bc-warning-subtle-inverted.d-bc-warning-subtle-inverted { border-color: var(--dt-color-border-warning-subtle-inverted) !important; }
-.d-bc-warning-strong.d-bc-warning-strong { border-color: var(--dt-color-border-warning-strong) !important; }
-.d-bc-warning-strong-inverted.d-bc-warning-strong-inverted { border-color: var(--dt-color-border-warning-strong-inverted) !important; }
-.d-bc-brand.d-bc-brand { border-color: var(--dt-color-border-brand) !important; }
-.d-bc-brand-inverted.d-bc-brand-inverted { border-color: var(--dt-color-border-brand-inverted) !important; }
-.d-bc-brand-subtle.d-bc-brand-subtle { border-color: var(--dt-color-border-brand-subtle) !important; }
-.d-bc-brand-subtle-inverted.d-bc-brand-subtle-inverted { border-color: var(--dt-color-border-brand-subtle-inverted) !important; }
-.d-bc-brand-strong.d-bc-brand-strong { border-color: var(--dt-color-border-brand-strong) !important; }
-.d-bc-brand-strong-inverted.d-bc-brand-strong-inverted { border-color: var(--dt-color-border-brand-strong-inverted) !important; }
-.d-bc-accent.d-bc-accent { border-color: var(--dt-color-border-accent) !important; }

package/lib/build/less/utilities/effects.less

@@ -1,210 +0,0 @@
-//
-//  DIALTONE
-//  UTILITIES: EFFECTS
-//
-//  These are effects utility classes for Dialpad's design system Dialtone.
-//  For further documentation of these and other classes,
-//  visit https://dialpad.design/utilities/effects
-//
-//  TABLE OF CONTENTS
-//  • ANIMATIONS
-//      - GENERIC LOADING
-//      - DIALPAD BAR ANIMATION
-//  • BOX SHADOW
-//  • OPACITY
-//  • TRANSITION
-//
-//
-//  ============================================================================
-//  $   ANIMATIONS
-//  ----------------------------------------------------------------------------
-//  $$  GENERIC LOADING
-//      This could be applied to an empty div or a psuedo element (ie ::before)
-//  ----------------------------------------------------------------------------
-@keyframes d-loading-circle {
-    from {
-        transform: rotate(0deg);
-    }
-
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-//  $$   DIALPAD BAR ANIMATION
-//  ----------------------------------------------------------------------------
-@keyframes d-loading-bars__short {
-  0% {
-    min-height: var(--dt-size-300);
-    transform: translateY(var(--dt-size-500-negative));
-    opacity: 0;
-  }
-
-  5% {
-    min-height: var(--dt-size-300);
-    transform: translateY(var(--dt-size-500));
-    opacity: 0.5;
-  }
-
-  10% {
-    min-height: 1rem;
-    transform: translateY(var(--dt-size-200-negative));
-    opacity: 1;
-  }
-
-  15% {
-    transform: translateY(var(--dt-size-100));
-    opacity: 1;
-  }
-
-  20%,
- 70% {
-    min-height: 1rem;
-    transform: translateY(0);
-    opacity: 1;
-  }
-
-  75% {
-    min-height: 0.75rem;
-    transform: translateY(1rem);
-    opacity: 1;
-  }
-
-  80% {
-    min-height: var(--dt-size-300);
-    transform: translateY(var(--dt-size-300-negative));
-    opacity: 0.5;
-  }
-
-  85%,
- 100% {
-    min-height: var(--dt-size-300);
-    transform: translateY(var(--dt-size-500));
-    opacity: 0;
-  }
-}
-
-@keyframes d-loading-bars__tall {
-  0% {
-    min-height: var(--dt-size-300);
-    transform: translateY(var(--dt-size-500-negative));
-    opacity: 0;
-  }
-
-  5% {
-    min-height: var(--dt-size-300);
-    transform: translateY(var(--dt-size-500));
-    opacity: 0.5;
-  }
-
-  10% {
-    min-height: 1rem;
-    transform: translateY(var(--dt-size-200-negative));
-    opacity: 1;
-  }
-
-  15% {
-    min-height: 2.2rem;
-    transform: translateY(var(--dt-size-100));
-    opacity: 1;
-  }
-
-  20%,
- 70% {
-    min-height: 2.2rem;
-    transform: translateY(0);
-    opacity: 1;
-  }
-
-  75% {
-    min-height: var(--dt-size-500);
-    transform: translateY(1rem);
-    opacity: 1;
-  }
-
-  80% {
-    min-height: 1rem;
-    transform: translateY(var(--dt-size-300-negative));
-    opacity: 1;
-  }
-
-  85%,
- 100% {
-    min-height: var(--dt-size-300);
-    transform: translateY(var(--dt-size-500));
-    opacity: 0;
-  }
-}
-
-//  ============================================================================
-//  $   BOX SHADOW
-//  ----------------------------------------------------------------------------
-.d-bs-sm { box-shadow: var(--dt-shadow-small) !important; }
-.d-bs-md { box-shadow: var(--dt-shadow-medium) !important; }
-.d-bs-lg { box-shadow: var(--dt-shadow-large) !important; }
-.d-bs-xl { box-shadow: var(--dt-shadow-extra-large) !important; }
-.d-bs-card { box-shadow: var(--dt-shadow-card) !important; }
-.d-bs-none { box-shadow: none !important; }
-.d-bs-unset { box-shadow: unset !important; }
-
-
-//  ============================================================================
-//  $   OPACITY
-//      For times that you want a fill background, but not at 100% opacity.
-//      These are only offered for $white and gray.
-//  ----------------------------------------------------------------------------
-.d-o0 { opacity: 0 !important; }
-.d-o5 { opacity: 0.05 !important; }
-.d-o10 { opacity: 0.1 !important; }
-.d-o20 { opacity: 0.2 !important; }
-.d-o25 { opacity: 0.25 !important; }
-.d-o30 { opacity: 0.3 !important; }
-.d-o40 { opacity: 0.4 !important; }
-.d-o50 { opacity: 0.5 !important; }
-.d-o60 { opacity: 0.6 !important; }
-.d-o70 { opacity: 0.7 !important; }
-.d-o75 { opacity: 0.75 !important; }
-.d-o80 { opacity: 0.8 !important; }
-.d-o90 { opacity: 0.9 !important; }
-.d-o100 { opacity: 1 !important; }
-.d-o-unset { opacity: unset !important; }
-
-
-//  ============================================================================
-//  $   TRANSITION
-//  ----------------------------------------------------------------------------
-.d-t {
-    transition-delay: 0s;
-    transition-timing-function: var(--ttf-in-out);
-    transition-duration: var(--td50);
-    transition-property: all;
-}
-
-//  --  TRANSITION DURATION
-.d-td0 { transition-duration: var(--td0) !important; }
-.d-td50 { transition-duration: var(--td50) !important; }
-.d-td100 { transition-duration: var(--td100) !important; }
-.d-td150 { transition-duration: var(--td150) !important; }
-.d-td200 { transition-duration: var(--td200) !important; }
-.d-td300 { transition-duration: var(--td300) !important; }
-
-//  --  TRANSITION TIMING
-.d-ttf-in-out { transition-timing-function: var(--ttf-in-out) !important; }
-.d-ttf-out { transition-timing-function: var(--ttf-out) !important; }
-.ttf-out-quint { transition-timing-function: var(--ttf-out-quint) !important; }
-
-//  --  TRANSITION PROPERTY
-.d-tp-all { transition-property: all !important; }
-.d-tp-o { transition-property: opacity !important; }
-.d-tp-bs { transition-property: box-shadow !important; }
-.d-tp-bgc { transition-property: background-color !important; }
-.d-tp-transform { transition-property: transform !important; }
-.d-tp-colors { transition-property: background-color, border-color, color, fill, stroke !important; }
-
-//  --  TRANSITION DELAY
-.d-t-delay25 { transition-delay: var(--td25) !important; }
-.d-t-delay50 { transition-delay: var(--td50) !important; }
-.d-t-delay100 { transition-delay: var(--td100) !important; }
-.d-t-delay150 { transition-delay: var(--td150) !important; }
-.d-t-delay200 { transition-delay: var(--td200) !important; }
-.d-t-delay300 { transition-delay: var(--td300) !important; }

package/lib/build/less/utilities/flex.less

@@ -1,227 +0,0 @@
-//
-//  DIALTONE
-//  UTILITIES: FLEXBOX
-//
-//  These are the flexbox utility classes for Dialpad's design system Dialtone.
-//  For further documentation of these and other classes, visit:
-//  https://dialpad.design/utilities/layout/flex/
-//
-//  TABLE OF CONTENTS
-//  • ALIGN CONTENT
-//  • ALIGN ITEMS
-//  • ALIGN SELF
-//  • COLUMNS & LAYOUTS
-//  • DIRECTION, WRAP, & FLOW
-//  • FLEX, GROW, & SHRINK
-//  • JUSTIFY CONTENT
-//  • ORDER
-//
-//  ============================================================================
-//  $  ALIGN CONTENT
-//     Aligns the container's lines when there is extra space in the
-//     cross-axis. Note that this only works when a parent container
-//     has more than one line.
-//  ----------------------------------------------------------------------------
-.d-ac-center { align-content: center !important; }
-.d-ac-flex-end { align-content: flex-end !important; }
-.d-ac-flex-start { align-content: flex-start !important; }
-.d-ac-space-around { align-content: space-around !important; }
-.d-ac-space-between { align-content: space-between !important; }
-.d-ac-space-evenly { align-content: space-evenly !important; }
-.d-ac-baseline { align-content: baseline !important; }
-.d-ac-stretch { align-content: stretch !important; }
-.d-ac-normal { align-content: normal !important; }
-.d-ac-unset { align-content: unset !important; }
-
-
-//  ============================================================================
-//  $  ALIGN ITEMS
-//     Defines the default behavior for how child items align along
-//     the parent's cross axis. Think of it the cross-axis for
-//     justify-content.
-//  ----------------------------------------------------------------------------
-.d-ai-center { align-items: center !important; }
-.d-ai-flex-end { align-items: flex-end !important; }
-.d-ai-flex-start { align-items: flex-start !important; }
-.d-ai-baseline { align-items: baseline !important; }
-.d-ai-stretch { align-items: stretch !important; }
-.d-ai-normal { align-items: normal !important; }
-.d-ai-unset { align-items: unset !important; }
-
-
-//  ============================================================================
-//  $  ALIGN SELF
-//     Allows child containers to re-align themselves regardless
-//     of the parent's main axis direction.
-//  ----------------------------------------------------------------------------
-.d-as-center { align-self: center !important; }
-.d-as-flex-end { align-self: flex-end !important; }
-.d-as-flex-start { align-self: flex-start !important; }
-.d-as-baseline { align-self: baseline !important; }
-.d-as-stretch { align-self: stretch !important; }
-.d-as-auto { align-self: auto !important; }
-.d-as-normal { align-self: normal !important; }
-.d-as-unset { align-self: unset !important; }
-
-
-//  ============================================================================
-//  $  COLUMNS & LAYOUTS
-//  ----------------------------------------------------------------------------
-
-//  $$  FLEX GAPS
-//  ----------------------------------------------------------------------------
-.d-flg0 > * { --fl-gap: 0 !important; }
-.d-flg1 > * { --fl-gap: var(--dt-space-100) !important; }
-.d-flg2 > * { --fl-gap: var(--dt-space-100) !important; }
-.d-flg4 > * { --fl-gap: var(--dt-space-300) !important; }
-.d-flg6 > * { --fl-gap: var(--dt-space-350) !important; }
-.d-flg8 > * { --fl-gap: var(--dt-space-400) !important; }
-.d-flg12 > * { --fl-gap: var(--dt-space-450) !important; }
-.d-flg16 > * { --fl-gap: var(--dt-space-500) !important; }
-.d-flg24 > * { --fl-gap: var(--dt-space-550) !important; }
-.d-flg32 > * { --fl-gap: var(--dt-space-600) !important; }
-.d-flg48 > * { --fl-gap: var(--dt-space-650) !important; }
-.d-flg64 > * { --fl-gap: var(--dt-space-700) !important; }
-
-
-
-//  ============================================================================
-//  $  DIRECTION, WRAP, & FLOW
-//  ----------------------------------------------------------------------------
-//  $$  FLEX DIRECTION
-//      This determines the content flow direction within the parent container.
-//      Default value is row.
-//  ----------------------------------------------------------------------------
-.d-fd-row { flex-direction: row !important; }
-.d-fd-row-reverse { flex-direction: row-reverse !important; }
-.d-fd-column { flex-direction: column !important; }
-.d-fd-column-reverse { flex-direction: column-reverse !important; }
-.d-fd-unset { flex-direction: unset !important; }
-
-//  $$  FLEX WRAP
-//      This determines if a parent's children will wrap.
-//      Default value is nowrap.
-//  ----------------------------------------------------------------------------
-.d-fw-wrap { flex-wrap: wrap !important; }
-.d-fw-wrap-reverse { flex-wrap: wrap-reverse !important; }
-.d-fw-nowrap { flex-wrap: nowrap !important; }
-.d-fw-unset { flex-wrap: unset !important; }
-
-//  $$  FLEX FLOW
-//      This is another shorthand property for flex-direction and flex-wrap.
-//      Default value is 'row nowrap'.
-//  ----------------------------------------------------------------------------
-.d-ff-row-wrap { flex-flow: row wrap !important; }
-.d-ff-row-wrap-reverse { flex-flow: row wrap-reverse !important; }
-.d-ff-row-nowrap { flex-flow: row nowrap !important; }
-.d-ff-row-reverse-wrap { flex-flow: row-reverse wrap !important; }
-.d-ff-row-reverse-wrap-reverse { flex-flow: row-reverse wrap-reverse !important; }
-.d-ff-row-reverse-nowrap { flex-flow: row-reverse nowrap !important; }
-.d-ff-column-wrap { flex-flow: column wrap !important; }
-.d-ff-column-wrap-reverse { flex-flow: column wrap-reverse !important; }
-.d-ff-column-nowrap { flex-flow: column nowrap !important; }
-.d-ff-column-reverse-wrap { flex-flow: column-reverse wrap !important; }
-.d-ff-column-reverse-wrap-reverse { flex-flow: column-reverse wrap-reverse !important; }
-.d-ff-column-reverse-nowrap { flex-flow: column-reverse nowrap !important; }
-.d-f-flow-unset { flex-flow: unset !important; }
-
-
-//  ============================================================================
-//  $  FLEX, GROW, & SHRINK
-//  ----------------------------------------------------------------------------
-//  $$  FLEX
-//      Graduating scale of flex-grow and flex-shrink values
-//  ----------------------------------------------------------------------------
-.d-fl0 { flex: 0 auto !important; }
-.d-fl1 { flex: 1 auto !important; }
-.d-fl2 { flex: 2 auto !important; }
-.d-fl3 { flex: 3 auto !important; }
-.d-fl4 { flex: 4 auto !important; }
-.d-fl5 { flex: 5 auto !important; }
-.d-fl-unset { flex: unset !important; }
-
-//  $$$  FLEX NONE
-//       This is equivalent to flex: 0 0 auto.
-//       It sizes the item according to its width/height properties, but makes it
-//       fully inflexible.
-.d-fl-none { flex: none !important; }
-
-//  $$$  FLEX EQUAL
-//       Equally distributes children out within a parent container
-.d-fl-equal {
-  flex-basis: 0 !important;
-  flex-grow: 1 !important;
-  flex-shrink: 1 !important;
-}
-
-//  $$  FLEX GROW
-//      Specifies the flex-grow value, which states how much an item will
-//      grow relative to other flex items in the container when there isn't
-//      enough space in the row. Default value is 1.
-//  ----------------------------------------------------------------------------
-.d-fl-grow0 { flex-grow: 0 !important; }
-.d-fl-grow1 { flex-grow: 1 !important; }
-.d-fl-grow2 { flex-grow: 2 !important; }
-.d-fl-grow3 { flex-grow: 3 !important; }
-.d-fl-grow4 { flex-grow: 4 !important; }
-.d-fl-grow5 { flex-grow: 5 !important; }
-.d-fl-grow-unset { flex-grow: unset !important; }
-
-//  $$  FLEX SHRINK
-//      Specifies the flex-shrink factor, which states how much an item will
-//      shrink relative to other flex items in the container when there isn't
-//      enough space in the row. Default value is 1.
-//  ----------------------------------------------------------------------------
-.d-fl-shrink0 { flex-shrink: 0 !important; }
-.d-fl-shrink1 { flex-shrink: 1 !important; }
-.d-fl-shrink2 { flex-shrink: 2 !important; }
-.d-fl-shrink3 { flex-shrink: 3 !important; }
-.d-fl-shrink4 { flex-shrink: 4 !important; }
-.d-fl-shrink5 { flex-shrink: 5 !important; }
-.d-fl-shrink-unset { flex-shrink: unset !important; }
-
-
-//  ============================================================================
-//  $  JUSTIFY CONTENT
-//     Defines the child alignment along the parent's main axis
-//  ----------------------------------------------------------------------------
-.d-jc-center { justify-content: center !important; }
-.d-jc-flex-end { justify-content: flex-end !important; }
-.d-jc-flex-start { justify-content: flex-start !important; }
-.d-jc-space-around { justify-content: space-around !important; }
-.d-jc-space-between { justify-content: space-between !important; }
-.d-jc-space-evenly { justify-content: space-evenly !important; }
-.d-jc-baseline { justify-content: baseline !important; }
-.d-jc-normal { justify-content: normal !important; }
-.d-jc-unset { justify-content: unset !important; }
-
-
-//  $$  CENTER ITEMS
-//      A common combination of classes is .d-jc-center and .ai-center.
-//      Use this class when you want both.
-//  ----------------------------------------------------------------------------
-.d-fl-center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-
-//  ============================================================================
-//  $  ORDER
-//      Designate a child container's position.
-//  ----------------------------------------------------------------------------
-.d-order1 { order: 1 !important; }
-.d-order2 { order: 2 !important; }
-.d-order3 { order: 3 !important; }
-.d-order4 { order: 4 !important; }
-.d-order5 { order: 5 !important; }
-.d-order6 { order: 6 !important; }
-.d-order7 { order: 7 !important; }
-.d-order8 { order: 8 !important; }
-.d-order9 { order: 9 !important; }
-.d-order10 { order: 10 !important; }
-.d-order11 { order: 11 !important; }
-.d-order12 { order: 12 !important; }
-.d-order-first { order: -9999 !important; }
-.d-order-last { order: 9999 !important; }