@dialpad/dialtone-css 1.0.0

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

@@ -0,0 +1,122 @@
+//
+//  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

@@ -0,0 +1,210 @@
+//
+//  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

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