@stackoverflow/stacks 3.0.0-beta.3 → 3.0.0-beta.30

package/lib/atomic/borders.less

@@ -0,0 +1,73 @@
+@import (reference) "../base/internal.less";
+
+// BORDER
+#stacks-internals #responsify('.ba', { .bas-solid; .baw1; });
+#stacks-internals #responsify('.bt', { .bts-solid; .btw1; });
+#stacks-internals #responsify('.br', { .brs-solid; .brw1; });
+#stacks-internals #responsify('.bb', { .bbs-solid; .bbw1; });
+#stacks-internals #responsify('.bl', { .bls-solid; .blw1; });
+.bx { .bls-solid; .brs-solid; .bxw1; }
+.by { .bts-solid; .bbs-solid; .byw1; }
+
+// BORDER WIDTH
+#stacks-internals #responsify('.baw0', { border-width: 0 !important; });
+.baw1 { border-width: var(--su1) !important; }
+.baw2 { border-width: var(--su2) !important; }
+.baw3 { border-width: var(--su4) !important; }
+
+// Top border width
+#stacks-internals #responsify('.btw0', { border-top-width: 0 !important; });
+.btw1 { border-top-width: var(--su1) !important; }
+.btw2 { border-top-width: var(--su2) !important; }
+.btw3 { border-top-width: var(--su4) !important; }
+
+// Right border width
+#stacks-internals #responsify('.brw0', { border-right-width: 0 !important; });
+.brw1 { border-right-width: var(--su1) !important; }
+.brw2 { border-right-width: var(--su2) !important; }
+.brw3 { border-right-width: var(--su4) !important; }
+
+// Bottom border width
+#stacks-internals #responsify('.bbw0', { border-bottom-width: 0 !important; });
+.bbw1 { border-bottom-width: var(--su1) !important; }
+.bbw2 { border-bottom-width: var(--su2) !important; }
+.bbw3 { border-bottom-width: var(--su4) !important; }
+
+// Left border width
+#stacks-internals #responsify('.blw0', { border-left-width: 0 !important; });
+.blw0 { border-left-width: 0 !important; }
+.blw1 { border-left-width: var(--su1) !important; }
+.blw2 { border-left-width: var(--su2) !important; }
+.blw3 { border-left-width: var(--su4) !important; }
+
+// Top and bottom border width
+.byw0 { .btw0; .bbw0; }
+.byw1 { .btw1; .bbw1; }
+.byw2 { .btw2; .bbw2; }
+.byw3 { .btw3; .bbw3; }
+
+// Left and right border width
+.bxw0 { .brw0; .blw0; }
+.bxw1 { .brw1; .blw1; }
+.bxw2 { .brw2; .blw2; }
+.bxw3 { .brw3; .blw3; }
+
+// BORDER STYLE
+.bas-solid { border-style: solid !important; }
+.bas-dashed { border-style: dashed !important; }
+
+// Top border style
+.bts-solid { border-top-style: solid !important; }
+.bts-dashed { border-top-style: dashed !important; }
+
+// Right border style
+.brs-solid { border-right-style: solid !important; }
+.brs-dashed { border-right-style: dashed !important; }
+
+// Bottom border style
+.bbs-solid { border-bottom-style: solid !important; }
+.bbs-dashed { border-bottom-style: dashed !important; }
+
+// Left border style
+.bls-solid { border-left-style: solid !important; }
+.bls-dashed { border-left-style: dashed !important; }

package/lib/atomic/box-shadow.less

@@ -0,0 +1,29 @@
+@import (reference) "../base/internal.less";
+@import (reference) "../exports/color-mixins.less";
+@import (reference) "../exports/constants-helpers.less";
+// @import (reference) "../exports/mixins.less";
+
+#stacks-internals #responsify('.bs-none', {
+    box-shadow: none !important;
+});
+
+.bs-sm,
+.h\:bs-sm:hover {
+    box-shadow: var(--bs-sm) !important;
+}
+
+.bs-md,
+.h\:bs-md:hover { box-shadow: var(--bs-md) !important; }
+
+.bs-lg,
+.h\:bs-lg:hover { box-shadow: var(--bs-lg) !important; }
+
+.bs-xl,
+.h\:bs-xl:hover { box-shadow: var(--bs-xl) !important; }
+
+.bs-ring,
+.h\:bs-ring:hover,
+.f\:bs-ring:focus,
+.f\:bs-ring:focus-within { 
+    box-shadow: 0 0 0 var(--su4) var(--focus-ring);
+}

package/lib/atomic/box-sizing.less

@@ -0,0 +1,3 @@
+.box-content { box-sizing: content-box !important; }
+.box-border { box-sizing: border-box !important; }
+.box-unset { box-sizing: unset !important; }

package/lib/atomic/current-color.less

@@ -0,0 +1,2 @@
+.fill-current { fill: currentColor !important; }
+.stroke-current { stroke: currentColor !important; }

package/lib/atomic/cursors.less

@@ -0,0 +1,8 @@
+.c-auto { cursor: auto !important; }
+.c-default { cursor: default !important; }
+.c-pointer { cursor: pointer !important; }
+.c-text { cursor: text !important; }
+.c-wait { cursor: wait !important; }
+.c-move { cursor: move !important; }
+.c-not-allowed { cursor: not-allowed !important; }
+.c-help { cursor: help !important; }

package/lib/atomic/display.less

@@ -0,0 +1,15 @@
+@import (reference) "../exports/constants-helpers.less";
+@import (reference) "../base/configuration-static.less";
+@import (reference) "../base/internal.less";
+
+#stacks-internals #responsify('.d-block', { display: block !important; });
+#stacks-internals #responsify('.d-flex', { display: flex !important; });
+#stacks-internals #responsify('.d-inline-flex', { display: inline-flex !important; });
+#stacks-internals #responsify('.d-grid', { display: grid !important; });
+#stacks-internals #responsify('.d-inline-grid', { display: inline-grid !important; });
+#stacks-internals #responsify('.d-inline', { display: inline !important; });
+#stacks-internals #responsify('.d-inline-block', { display: inline-block !important; });
+.d-table { display: table !important; }
+.d-table-cell { display: table-cell !important; }
+#stacks-internals #responsify('.d-none', { display: none !important; });
+.d-unset { display: unset !important; }

package/lib/atomic/flex.less

@@ -1,25 +1,4 @@
-//
-//  STACK OVERFLOW
-//  FLEXBOX HELPERS
-//
-//  This CSS comes from Stacks, our CSS & Pattern library for rapidly building
-//  Stack Overflow. For documentation of all these classes and how to contribute,
-//  visit https://stackoverflow.design/
-//
-//  TABLE OF CONTENTS
-//  • VARIABLES
-//  • MIXINS
-//  • FLEX ELEMENTS
-//  • FLEX SPACING
-//  • MODIFICATIONS
-//  • ATOMIC
-//  • DEPRECATED
-//
-//  ============================================================================
-//  --  STACKS FLEX LAYOUT MIXINS
-//  ============================================================================
-//  --  FIXED COLUMN WIDTHS
-//  ----------------------------------------------------------------------------
+@import (reference) "../base/internal.less";
 
 #stacks-internals() {
     #flex-builder-settings() {
@@ -321,19 +300,15 @@
 .ac-start { align-content: flex-start !important; }
 .ac-stretch { align-content: stretch !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.
-//  ----------------------------------------------------------------------------
+// Align items
 #stacks-internals #build-classes(
-    responsive,
     '.ai',
     {
         .template(@value) when (@value=start), (@value=end) { align-items: ~"flex-@{value}" !important; }
         .template(@value) when (default()) { align-items: @value !important; };
     },
-    baseline center end start stretch
+    baseline center end start stretch,
+    true
 );
 
 //  --  CENTER ITEMS
@@ -345,18 +320,15 @@
     .ai-center;
 }
 
-//  --  ALIGN SELF
-//      Allows child containers to re-align themselves regardless
-//      of the parent's main axis direction.
-//  ----------------------------------------------------------------------------
+// Align self
 #stacks-internals #build-classes(
-    responsive,
     '.as',
     {
         .template(@value) when (@value=start), (@value=end) { align-self: ~"flex-@{value}" !important; }
         .template(@value) when (default()) { align-self: @value !important; };
     },
     auto baseline center end start stretch
+    true
 );
 
 //  --  FLEX

package/lib/atomic/floats.less

@@ -0,0 +1,20 @@
+// FLOAT
+.float-left { float: left !important; }
+.float-right { float: right !important; }
+.float-none { float: none !important; }
+
+// CLEARFIX
+.clearfix {
+    &:before,
+    &:after {
+        content: "";
+        display: table;
+    }
+    &:after {
+        clear: both;
+    }
+}
+.clear-left { clear: left !important; }
+.clear-right { clear: right !important; }
+.clear-both { clear: both !important; }
+.clear-none { clear: none !important; }

package/lib/atomic/gap.less

@@ -1,3 +1,5 @@
+@import (reference) "../base/internal.less";
+
 #stacks-internals #responsify('.g0', { --_gap-y: 0; --_gap-x: 0; });
 #stacks-internals #responsify('.g1', { --_gap-y: var(--su1); --_gap-x: var(--su1); });
 #stacks-internals #responsify('.g2', { --_gap-y: var(--su2); --_gap-x: var(--su2); });

package/lib/atomic/grid.less

@@ -1,3 +1,5 @@
+@import (reference) "../base/internal.less";
+
 //  ============================================================================
 //  $   GRID FLOW
 //  ----------------------------------------------------------------------------

package/lib/atomic/height.less

@@ -0,0 +1,22 @@
+@import (reference) "../base/internal.less";
+@import (reference) "../exports/mixins.less";
+
+// `height` properties
+.generate-sizing('.h', height, 0 1 2 4 6 8 12 16 24 32 48 64 96 128, 'px');
+.generate-su-sizing('.hs', height); // Static sizing units
+#stacks-internals #responsify('.h100', { height: 100% !important; });
+#stacks-internals #responsify('.h-auto', { height: auto !important; });
+#stacks-internals #responsify('.h-screen', { height: 100vh !important; });
+
+// `min-height` properties
+.generate-sizing('.hmn', min-height, 0, 'px', false, true);
+.generate-su-sizing('.hmn', min-height); // Static sizing units
+#stacks-internals #responsify('.hmn100', { min-height: 100% !important; });
+#stacks-internals #responsify('.hmn-initial', { min-height: initial !important; });
+#stacks-internals #responsify('.hmn-screen', { min-height: 100vh !important; });
+
+// `max-height` properties
+.generate-su-sizing('.hmx', max-height); // Static sizing units
+#stacks-internals #responsify('.hmx100', { max-height: 100% !important; });
+#stacks-internals #responsify('.hmx-initial', { max-height: initial !important; });
+#stacks-internals #responsify('.hmx-screen', { max-height: 100vh !important; });

package/lib/atomic/interactivity.less

@@ -0,0 +1,45 @@
+@import (reference) "../exports/mixins.less";
+
+// FOCUS
+.focus,
+.f\:focus:focus,
+.f\:focus:focus-within {
+    .focus-styles();
+}
+
+.focus-inset,
+.f\:focus-inset:focus,
+.f\:focus-inset:focus-within {
+    .focus-styles(true);
+}
+
+.focus-bordered,
+.f\:focus-bordered:focus,
+.f\:focus-bordered:focus-within {
+    .focus-styles(false, true);
+}
+
+.focus-inset-bordered,
+.f\:focus-inset-bordered:focus,
+.f\:focus-inset-bordered:focus-within {
+    .focus-styles(true, true);
+}
+
+// POINTER EVENTS
+.pe-auto { pointer-events: auto !important; }
+.pe-none { pointer-events: none !important; }
+
+// USER SELECT
+.us-auto {
+    -webkit-user-select: auto !important;
+    -moz-user-select: auto !important;
+    -ms-user-select: auto !important;
+    user-select: auto !important;
+}
+
+.us-none {
+    -webkit-user-select: none !important;
+    -moz-user-select: none !important;
+    -ms-user-select: none !important;
+    user-select: none !important;
+}

package/lib/atomic/lists.less

@@ -0,0 +1,29 @@
+ul,
+ol {
+    padding: 0;
+    margin-left: 2.8em;
+
+    ul,
+    ol {
+        margin-bottom: 0;
+    }
+}
+
+ul { list-style-type: disc; }
+ol { list-style-type: decimal; }
+
+.list-reset {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+// List Style Types
+.list-ls-none { list-style: none !important; }
+.list-ls-disc { list-style-type: disc !important; }
+.list-ls-decimal { list-style-type: decimal !important; }
+.list-ls-unset { list-style-type: unset !important; }
+
+// List Position
+.list-inside { list-style-position: inside !important; }
+.list-outside { list-style-position: outside !important; }

package/lib/atomic/margin.less

@@ -0,0 +1,48 @@
+@import (reference) "../base/internal.less";
+@import (reference) "../exports/mixins.less";
+
+@px-values: 0 1 2 4 6 8 12 16 24 32 48 64 96 128;
+@px-values-negative: 1 2 4 6 8 12 16 24 32 48 64 96 128;
+@percent-values: 50 100;
+
+.m-auto { margin: auto !important; }
+.generate-sizing('.m', margin, @px-values, 'px', true);
+.generate-sizing('.mn', margin, @px-values-negative, 'px', true, true);
+.generate-sizing('.m', margin, @percent-values, 'percent', true);
+.generate-sizing('.mn', margin, @percent-values, 'percent', true, true);
+
+//  Margin top
+.mt-auto { margin-top: auto !important; }
+.generate-sizing('.mt', margin-top, @px-values, 'px', true);
+.generate-sizing('.mtn', margin-top, @px-values-negative, 'px', true, true);
+.generate-sizing('.mt', margin-top, @percent-values, 'percent', true);
+.generate-sizing('.mtn', margin-top, @percent-values, 'percent', true, true);
+
+//  Margin right
+.mr-auto { margin-right: auto !important; }
+.generate-sizing('.mr', margin-right, @px-values, 'px', true);
+.generate-sizing('.mrn', margin-right, @px-values-negative, 'px', true, true);
+.generate-sizing('.mr', margin-right, @percent-values, 'percent', true);
+.generate-sizing('.mrn', margin-right, @percent-values, 'percent', true, true);
+
+//  Margin bottom
+.mb-auto { margin-bottom: auto !important; }
+.generate-sizing('.mb', margin-bottom, @px-values, 'px', true);
+.generate-sizing('.mbn', margin-bottom, @px-values-negative, 'px', true, true);
+.generate-sizing('.mb', margin-bottom, @percent-values, 'percent', true);
+.generate-sizing('.mbn', margin-bottom, @percent-values, 'percent', true, true);
+
+//  Margin left
+.ml-auto { margin-left: auto !important; }
+.generate-sizing('.ml', margin-left, @px-values, 'px', true);
+.generate-sizing('.mln', margin-left, @px-values-negative, 'px', true, true);
+.generate-sizing('.ml', margin-left, @percent-values, 'percent', true);
+.generate-sizing('.mln', margin-left, @percent-values, 'percent', true, true);
+
+//  Margin x-axis, y-axis
+.mx-auto { margin-left: auto !important; margin-right: auto !important; }
+.my-auto { margin-top: auto !important; margin-bottom: auto !important; }
+.generate-sizing('.mx'; margin-left, margin-right; @px-values; 'px'; true);
+.generate-sizing('.mxn'; margin-left, margin-right; @px-values-negative; 'px'; true; true);
+.generate-sizing('.my'; margin-top, margin-bottom; @px-values; 'px'; true);
+.generate-sizing('.myn'; margin-top, margin-bottom; @px-values-negative; 'px'; true; true);

package/lib/atomic/object-fit.less

@@ -0,0 +1,9 @@
+// OBJECT FIT
+.of-contain { object-fit: contain !important; }
+.of-cover { object-fit: cover !important; }
+.of-fill { object-fit: fill !important; }
+.of-none { object-fit: none !important; }
+.of-scale-down { object-fit: scale-down !important; }
+
+// OBJECT POSITION
+.op-center { object-position: center !important; }

package/lib/atomic/opacity.less

@@ -0,0 +1,54 @@
+.o0,
+.h\:o0:hover {
+    opacity: 0 !important;
+}
+
+.o5,
+.h\:o5:hover {
+    opacity: 0.05 !important;
+}
+
+.o10 {
+    opacity: 0.1 !important;
+}
+
+.o20 {
+    opacity: 0.2 !important;
+}
+
+.o30 {
+    opacity: 0.3 !important;
+}
+
+.o40 {
+    opacity: 0.4 !important;
+}
+
+.o50,
+.h\:o50:hover {
+    opacity: 0.5 !important;
+}
+
+.o60 {
+    opacity: 0.6 !important;
+}
+
+.o70 {
+    opacity: 0.7 !important;
+}
+
+.o80,
+.h\:o80:hover {
+    opacity: 0.8 !important;
+}
+
+.o90 {
+    opacity: 0.9 !important;
+}
+
+.o100,
+.h\:o100:hover,
+.f\:o100:focus,
+.f\:o100:focus-within {
+    opacity: 1 !important;
+}

package/lib/atomic/outline.less

@@ -0,0 +1,11 @@
+@import (reference) "../exports/mixins.less";
+
+.outline-none { outline: 0 !important; }
+.outline-ring { .focus-styles(false, true); } 
+
+.f\:outline-ring {
+    &:focus,
+    &:focus-within {
+        .outline-ring;
+    }
+}

package/lib/atomic/overflow.less

@@ -0,0 +1,17 @@
+@import (reference) "../exports/constants-helpers.less";
+
+// OVERFLOW
+.overflow-auto { overflow: auto !important; @scrollbar-styles(); }
+.overflow-hidden { overflow: hidden !important; @scrollbar-styles(); }
+.overflow-scroll { overflow: scroll !important; @scrollbar-styles(); }
+.overflow-visible { overflow: visible !important; }
+
+// OVERFLOW X
+.overflow-x-auto { overflow-x: auto !important; @scrollbar-styles(); }
+.overflow-x-hidden { overflow-x: hidden !important; @scrollbar-styles(); }
+.overflow-x-scroll { overflow-x: scroll !important; @scrollbar-styles(); }
+
+// OVERFLOW Y
+.overflow-y-auto { overflow-y: auto !important; @scrollbar-styles(); }
+.overflow-y-hidden { overflow-y: hidden !important; @scrollbar-styles(); }
+.overflow-y-scroll { overflow-y: scroll !important; @scrollbar-styles(); }

package/lib/atomic/padding.less

@@ -0,0 +1,12 @@
+@import (reference) "../base/internal.less";
+@import (reference) "../exports/mixins.less";
+
+@px-values: 0 1 2 4 6 8 12 16 24 32 48 64 96 128;
+
+.generate-sizing('.p', padding, @px-values, 'px', true);
+.generate-sizing('.pt', padding-top, @px-values, 'px', true);
+.generate-sizing('.pr', padding-right, @px-values, 'px', true);
+.generate-sizing('.pb', padding-bottom, @px-values, 'px', true);
+.generate-sizing('.pl', padding-left, @px-values, 'px', true);
+.generate-sizing('.px'; padding-left, padding-right; @px-values; 'px'; true);
+.generate-sizing('.py'; padding-top, padding-bottom; @px-values; 'px'; true);

package/lib/atomic/positioning.less

@@ -0,0 +1,41 @@
+@import (reference) "../base/internal.less";
+@import (reference) "../exports/mixins.less";
+
+@px-values: 0 1 2 4 6 8 12 16 24 32 48 64 96 128;
+@px-values-negative: 1 2 4 6 8 12 16 24 32 48 64 96 128;
+@percent-values: 50 100;
+
+// POSITIONING
+#stacks-internals #responsify('.ps-absolute', { position: absolute !important; });
+#stacks-internals #responsify('.ps-fixed', { position: fixed !important; });
+#stacks-internals #responsify('.ps-relative', { position: relative !important; });
+#stacks-internals #responsify('.ps-static', { position: static !important; });
+#stacks-internals #responsify('.ps-sticky', { position: sticky !important; });
+.ps-unset { position: unset !important; }
+
+// Inset
+.generate-sizing('.i', inset, @px-values, 'px');
+
+//  Top
+.generate-sizing('.t', top, @px-values, 'px', true);
+.generate-sizing('.tn', top, @px-values-negative, 'px', true, true);
+.generate-sizing('.t', top, @percent-values, 'percent', true);
+.generate-sizing('.tn', top, @percent-values, 'percent', true, true);
+
+// Right
+.generate-sizing('.r', right, @px-values, 'px', true);
+.generate-sizing('.rn', right, @px-values-negative, 'px', true, true);
+.generate-sizing('.r', right, @percent-values, 'percent', true);
+.generate-sizing('.rn', right, @percent-values, 'percent', true, true);
+
+// Bottom
+.generate-sizing('.b', bottom, @px-values, 'px', true);
+.generate-sizing('.bn', bottom, @px-values-negative, 'px', true, true);
+.generate-sizing('.b', bottom, @percent-values, 'percent', true);
+.generate-sizing('.bn', bottom, @percent-values, 'percent', true, true);
+
+// Left
+.generate-sizing('.l', left, @px-values, 'px', true);
+.generate-sizing('.ln', left, @px-values-negative, 'px', true, true);
+.generate-sizing('.l', left, @percent-values, 'percent', true);
+.generate-sizing('.ln', left, @percent-values, 'percent', true, true);

package/lib/atomic/sizing.less

@@ -0,0 +1,51 @@
+@import (reference) "../base/internal.less";
+
+// SIZING UNITS CSS CUSTOM PROPERTIES
+body {
+    --su0: 0;
+    --su1: clamp(1px, 0.063rem, 0.063rem); // This ensures `--su1` never drops below 1px by setting the clamp MIN value to `--su1` (1px).
+    --su2: 0.125rem;
+    --su3: 0.1875rem;
+    --su4: 0.25rem;
+    --su6: 0.375rem;
+    --su8: 0.5rem;
+    --su12: 0.75rem;
+    --su16: 1rem;
+    --su24: 1.5rem;
+    --su32: 2rem;
+    --su48: 3rem;
+    --su64: 4rem;
+    --su96: 6rem;
+    --su128: 8rem;
+    --su256: 16rem;
+    --su344: 21.5rem;
+    --su448: 28rem;
+    --su512: 32rem;
+    --su640: 40rem;
+    --su768: 48rem;
+    --su848: 53rem;
+    --su960: 60rem;
+    --su1024: 64rem;
+    --su1120: 70rem;
+    --su1280: 80rem;
+    --su-max: var(--su1280);
+    --s-full: 79rem; // Legacy sizing units for Stacks v2
+    --s-step: calc(var(--s-full) / 12); // Legacy sizing units for Stacks v2
+
+    // Negative sizing
+    // This is a common subset sizing units for negative values
+    --sun1: calc(var(--su1) * -1);
+    --sun2: calc(var(--su2) * -1);
+    --sun3: calc(var(--su3) * -1);
+    --sun4: calc(var(--su4) * -1);
+    --sun6: calc(var(--su6) * -1);
+    --sun8: calc(var(--su8) * -1);
+    --sun12: calc(var(--su12) * -1);
+    --sun16: calc(var(--su16) * -1);
+    --sun24: calc(var(--su24) * -1);
+    --sun32: calc(var(--su32) * -1);
+    --sun48: calc(var(--su48) * -1);
+    --sun64: calc(var(--su64) * -1);
+    --sun96: calc(var(--su96) * -1);
+    --sun128: calc(var(--su128) * -1);
+}

package/lib/atomic/transitions.less

@@ -0,0 +1,20 @@
+.t {
+    transition-duration: var(--transition-time);
+    transition-property: all;
+    transition-timing-function: var(--te-ease-in);
+    transition-delay: 0s;
+}
+
+// -- Durations
+.t-slow { transition-duration: 0.25s !important; }
+.t-fast { transition-duration: 0.05s !important; }
+
+// -- Properties
+.t-unset { transition-property: none !important; }
+.t-bg { transition-property: background-color !important; }
+.t-opacity { transition-property: opacity !important; }
+.t-shadow { transition-property: box-shadow !important; }
+
+// -- Delays
+.t-delay { transition-delay: 0.25s !important; }
+.t-delay-unset { transition-delay: 0s !important; }

package/lib/atomic/truncation.less

@@ -0,0 +1,58 @@
+@import (reference) "../exports/constants-helpers.less";
+@import (reference) "../base/configuration-static.less";
+@import (reference) "../base/internal.less";
+
+.truncation(@count) {
+    // Despite these all being webkit-specific properties, this works across
+    // Safari, Chrome, Edge, and Firefox.
+    display: -webkit-box;
+    -webkit-line-clamp: @count;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.truncate {
+    overflow: hidden;
+    max-width: 100%;
+    text-overflow: ellipsis !important;
+    white-space: nowrap;
+}
+
+.v-truncate1 {
+    .truncation(1);
+}
+
+.v-truncate2 {
+    .truncation(2);
+}
+
+.v-truncate3 {
+    .truncation(3);
+}
+
+.v-truncate4 {
+    .truncation(4);
+}
+
+.v-truncate5 {
+    .truncation(5);
+}
+
+.v-truncate-fade {
+    overflow: hidden;
+    -webkit-mask-image: linear-gradient(180deg, #000 calc(var(--lh-md) * 9em), transparent);
+    mask-image: linear-gradient(180deg, #000 calc(var(--lh-md) * 9em), transparent);
+    max-height: calc(var(--lh-md) * 12em);
+
+    &.v-truncate-fade__sm {
+        -webkit-mask-image: linear-gradient(180deg, #000 calc(var(--lh-md) * 3em), transparent);
+        mask-image: linear-gradient(180deg, #000 calc(var(--lh-md) * 3em), transparent);
+        max-height: calc(var(--lh-md) * 6em);
+    }
+
+    &.v-truncate-fade__lg {
+        -webkit-mask-image: linear-gradient(180deg, #000 calc(var(--lh-md) * 21em), transparent);
+        mask-image: linear-gradient(180deg, #000 calc(var(--lh-md) * 21em), transparent);
+        max-height: calc(var(--lh-md) * 24em);
+    }
+}