@dynamic-framework/ui-react 1.18.0 → 1.19.1

package/src/style/base/_type.scss

@@ -0,0 +1,104 @@
+//
+// Headings
+//
+.h1 {
+  @extend h1;
+}
+
+.h2 {
+  @extend h2;
+}
+
+.h3 {
+  @extend h3;
+}
+
+.h4 {
+  @extend h4;
+}
+
+.h5 {
+  @extend h5;
+}
+
+.h6 {
+  @extend h6;
+}
+
+
+.lead {
+  @include font-size($lead-font-size);
+  font-weight: $lead-font-weight;
+}
+
+// Type display classes
+[class*="display-"] {
+  font-family: $display-font-family;
+  font-size: var(--#{$prefix}display-font-size);
+  font-style: $display-font-style;
+  font-weight: $display-font-weight;
+  line-height: $display-line-height;
+}
+
+//
+// Emphasis
+//
+.small {
+  @extend small;
+}
+
+.mark {
+  @extend mark;
+}
+
+//
+// Lists
+//
+
+.list-unstyled {
+  @include list-unstyled();
+}
+
+// Inline turns list items into inline-block
+.list-inline {
+  @include list-unstyled();
+}
+.list-inline-item {
+  display: inline-block;
+
+  &:not(:last-child) {
+    margin-right: $list-inline-padding;
+  }
+}
+
+
+//
+// Misc
+//
+
+// Builds on `abbr`
+.initialism {
+  @include font-size($initialism-font-size);
+  text-transform: uppercase;
+}
+
+// Blockquotes
+.blockquote {
+  margin-bottom: $blockquote-margin-y;
+  @include font-size($blockquote-font-size);
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+}
+
+.blockquote-footer {
+  margin-top: -$blockquote-margin-y;
+  margin-bottom: $blockquote-margin-y;
+  @include font-size($blockquote-footer-font-size);
+  color: $blockquote-footer-color;
+
+  &::before {
+    content: "\2014\00A0"; // em dash, nbsp
+  }
+}

package/src/style/components/_+import.scss

@@ -12,7 +12,6 @@
 @import "d-collapse-icon-text";
 @import "d-datepicker";
 @import "d-timepicker";
-@import "d-monthpicker";
 @import "d-tabs";
 @import "d-popover";
 @import "d-box-file";
@@ -20,5 +19,4 @@
 @import "d-stepper-desktop";
 @import "d-stepper-mobile";
 @import "d-card-account";
-@import "d-tooltip";
 @import "d-select";

package/src/style/components/_d-datepicker.scss

@@ -10,36 +10,43 @@
 
   // Header variables
   --#{$prefix}datepicker-header-gap: var(--#{$prefix}ref-spacer-4);
-  --#{$prefix}datepicker-header-padding: var(--#{$prefix}ref-spacer-4) var(--#{$prefix}ref-spacer-6);
+  --#{$prefix}datepicker-header-padding: var(--#{$prefix}ref-spacer-4) var(--#{$prefix}ref-spacer-7);
   --#{$prefix}datepicker-header-background-color: var(--#{$prefix}secondary-soft);
   --#{$prefix}datepicker-header-border: 0;
-  --#{$prefix}datepicker-header-font-size: var(--#{$prefix}ref-fs-6);
+  --#{$prefix}datepicker-header-font-size: var(--#{$prefix}fs-6);
+  --#{$prefix}datepicker-header-button-padding: 0;
+  --#{$prefix}datepicker-header-select-padding: 0 var(--#{$prefix}ref-spacer-1);
+  --#{$prefix}datepicker-header-select-font-weight: var(--#{$prefix}fw-bold);
+  --#{$prefix}datepicker-header-select-menu-width: fit-content;
 
   --#{$prefix}datepicker-day-names-margin: 0;
   --#{$prefix}datepicker-day-names-font-size: var(--#{$prefix}ref-spacer-4);
 
-  --#{$prefix}datepicker-day-name-weight: var(--#{$prefix}ref-fw-bold);
+  --#{$prefix}datepicker-day-name-weight: var(--#{$prefix}fw-bold);
   --#{$prefix}datepicker-day-name-margin: 0;
-  --#{$prefix}datepicker-day-name-size: var(--#{$prefix}ref-spacer-4);
+  --#{$prefix}datepicker-day-name-padding: 0;
+  --#{$prefix}datepicker-day-name-size: var(--#{$prefix}ref-spacer-5);
   --#{$prefix}datepicker-day-name-color: var(--#{$prefix}gray-500);
 
   // Calendar variables
-  --#{$prefix}datepicker-month-gap: var(--#{$prefix}ref-spacer-2);
-  --#{$prefix}datepicker-month-padding: var(--#{$prefix}ref-spacer-4) var(--#{$prefix}ref-spacer-6) var(--#{$prefix}ref-spacer-6);
+  --#{$prefix}datepicker-month-gap: .875rem;
+  --#{$prefix}datepicker-month-padding: var(--#{$prefix}ref-spacer-4) var(--#{$prefix}ref-spacer-7) var(--#{$prefix}ref-spacer-6);
   --#{$prefix}datepicker-month-margin: 0;
   --#{$prefix}datepicker-month-color: var(--#{$prefix}white);
 
-  --#{$prefix}datepicker-week-gap: var(--#{$prefix}ref-spacer-2);
+  --#{$prefix}datepicker-week-gap: var(--#{$prefix}ref-spacer-8);
 
   // Day variables
   --#{$prefix}datepicker-day-margin: 0;
-  --#{$prefix}datepicker-day-font-size: var(--#{$prefix}ref-fs-small);
-  --#{$prefix}datepicker-day-size: var(--#{$prefix}ref-spacer-4);
-  --#{$prefix}datepicker-day-padding: var(--#{$prefix}ref-spacer-4);
+  --#{$prefix}datepicker-day-font-size: var(--#{$prefix}fs-small);
+  --#{$prefix}datepicker-day-size: var(--#{$prefix}ref-spacer-5);
+  --#{$prefix}datepicker-day-padding: 0;
   --#{$prefix}datepicker-day-radius: 100%;
+  --#{$prefix}datepicker-day-color: var(--#{$prefix}gray-900);
+  --#{$prefix}datepicker-day-disabled-color: var(--#{$prefix}gray-300);
 
-  --#{$prefix}datepicker-day-bg-hover: var(--#{$prefix}body);
-  --#{$prefix}datepicker-day-color-hover: var(--#{$prefix}info-100);
+  --#{$prefix}datepicker-day-color-hover: var(--#{$prefix}gray-900);
+  --#{$prefix}datepicker-day-bg-hover: var(--#{$prefix}info-100);
 
   --#{$prefix}datepicker-day-selected-color: var(--#{$prefix}white);
   --#{$prefix}datepicker-day-selected-bg: var(--#{$prefix}secondary-500);
@@ -49,8 +56,8 @@
 
   --#{$prefix}datepicker-day-outside-month-color: var(--#{$prefix}gray-400);
 
-  --#{$prefix}datepicker-day-today-font-weight: var(--#{$prefix}ref-fw-normal);
-  --#{$prefix}datepicker-day-today-box-shadow: 0 0 0 2px inset var(--#{$prefix}secondary);
+  --#{$prefix}datepicker-day-today-font-weight: var(--#{$prefix}fw-normal);
+  --#{$prefix}datepicker-day-today-box-shadow: 0 0 0 2px var(--#{$prefix}secondary);
 
   // Time variables
   --#{$prefix}datepicker-time-container-margin: 0;
@@ -61,9 +68,9 @@
 
   --#{$prefix}datepicker-time-input-padding: var(--#{$prefix}ref-spacer-4);
   --#{$prefix}datepicker-time-input-gap: var(--#{$prefix}ref-spacer-2);
-  --#{$prefix}datepicker-time-input-label-weight: var(--#{$prefix}ref-fw-bold);
+  --#{$prefix}datepicker-time-input-label-weight: var(--#{$prefix}fw-bold);
   --#{$prefix}datepicker-time-input-label-color: var(--#{$prefix}gray-700);
-  --#{$prefix}datepicker-time-input-label-size: var(--#{$prefix}ref-fs-small);
+  --#{$prefix}datepicker-time-input-label-size: var(--#{$prefix}fs-small);
 
   font-family: var(--#{$prefix}datepicker-font-family);
   font-size: var(--#{$prefix}datepicker-font-size);
@@ -81,17 +88,14 @@
 
     .react-datepicker__day-names {
       display: flex;
-      gap: var(--#{$prefix}ref-spacer-2);
+      gap: var(--#{$prefix}ref-spacer-8);
       margin: var(--#{$prefix}datepicker-day-names-margin);
       font-size: var(--#{$prefix}datepicker-day-names-font-size);
     }
     .react-datepicker__day-name {
-      display: flex;
-      align-items: center;
-      justify-content: center;
       width: var(--#{$prefix}datepicker-day-name-size);
       height: var(--#{$prefix}datepicker-day-name-size);
-      padding: var(--#{$prefix}datepicker-day-padding);
+      padding: var(--#{$prefix}datepicker-day-name-padding);
       margin: var(--#{$prefix}datepicker-day-name-margin);
       font-weight: var(--#{$prefix}datepicker-day-name-weight);
       line-height: var(--#{$prefix}datepicker-day-name-size);
@@ -114,21 +118,29 @@
     padding: var(--#{$prefix}datepicker-month-padding);
     margin: var(--#{$prefix}datepicker-month-margin);
 
-    .react-datepicker__week {
-      display: flex;
-      gap: var(--#{$prefix}datepicker-week-gap);
-    }
+  }
+  .react-datepicker__week {
+    display: flex;
+    gap: var(--#{$prefix}datepicker-week-gap);
+  }
 
-    .react-datepicker__day {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: var(--#{$prefix}datepicker-day-size);
-      height: var(--#{$prefix}datepicker-day-size);
-      padding: var(--#{$prefix}datepicker-day-padding);
-      margin: var(--#{$prefix}datepicker-day-margin);
-      font-size: var(--#{$prefix}datepicker-day-font-size);
-      line-height: var(--#{$prefix}datepicker-day-size);
+  .react-datepicker__day {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--#{$prefix}datepicker-day-size);
+    height: var(--#{$prefix}datepicker-day-size);
+    padding: var(--#{$prefix}datepicker-day-padding);
+    margin: var(--#{$prefix}datepicker-day-margin);
+    font-size: var(--#{$prefix}datepicker-day-font-size);
+    line-height: var(--#{$prefix}datepicker-day-size);
+    color: var(--#{$prefix}datepicker-day-color);
+
+    &.react-datepicker__day--in-range.react-datepicker__day--range-end,
+    &.react-datepicker__day--in-selecting-range.react-datepicker__day--selecting-range-end {
+      color: var(--#{$prefix}datepicker-day-selected-color);
+      background-color: var(--#{$prefix}datepicker-day-selected-bg);
+      box-shadow: 0 0 0 2px var(--#{$prefix}datepicker-day-selected-bg);
     }
   }
 
@@ -142,12 +154,17 @@
     .react-datepicker__month-text--selected,
     .react-datepicker__quarter-text--selected,
     .react-datepicker__year-text--selected):hover {
-      color: var(--#{$prefix}datepicker-day-bg-hover);
-      background-color: var(--#{$prefix}datepicker-day-color-hover);
+      color: var(--#{$prefix}datepicker-day-color-hover);
+      background-color: var(--#{$prefix}datepicker-day-bg-hover);
       border-radius: var(--#{$prefix}datepicker-day-radius);
+      box-shadow: 0 0 0 2px var(--#{$prefix}datepicker-day-bg-hover);
     }
   }
 
+  .react-datepicker__day--disabled {
+    color: var(--#{$prefix}datepicker-day-disabled-color);
+  }
+
   // Selected single item
   .react-datepicker__day--selected,
   .react-datepicker__month--selected,
@@ -156,6 +173,7 @@
     color: var(--#{$prefix}datepicker-day-selected-color);
     background-color: var(--#{$prefix}datepicker-day-selected-bg);
     border-radius: var(--#{$prefix}datepicker-day-radius);
+    box-shadow: 0 0 0 2px var(--#{$prefix}datepicker-day-selected-bg);
   }
 
   .react-datepicker__day--selected {
@@ -163,13 +181,7 @@
     &.react-datepicker__day--in-selecting-range.react-datepicker__day--selecting-range-start {
       color: var(--#{$prefix}datepicker-day-selected-color);
       background-color: var(--#{$prefix}datepicker-day-selected-bg);
-    }
-  }
-  .react-datepicker__day {
-    &.react-datepicker__day--in-range.react-datepicker__day--range-end,
-    &.react-datepicker__day--in-selecting-range.react-datepicker__day--selecting-range-end {
-      color: var(--#{$prefix}datepicker-day-selected-color);
-      background-color: var(--#{$prefix}datepicker-day-selected-bg);
+      box-shadow: 0 0 0 2px var(--#{$prefix}datepicker-day-selected-bg);
     }
   }
 
@@ -239,7 +251,45 @@
     }
   }
   .d-datepicker-header {
-    font-size: var(--#{$prefix}ref-fs-6);
+    font-size: var(--#{$prefix}datepicker-header-font-size);
+  }
+
+  .header-button {
+    --#{$prefix}btn-padding-y: var(--#{$prefix}datepicker-header-button-padding);
+    --#{$prefix}btn-padding-x: var(--#{$prefix}datepicker-header-button-padding);
+    &:hover,
+    &:active {
+      color: inherit;
+      background-color: inherit;
+    }
+    &:focus {
+      --#{$prefix}btn-focus-outline-offset: 8px;
+    }
+  }
+
+  .d-select {
+    &:focus-within .input-group {
+      border-color: transparent;
+      box-shadow: none;
+    }
+    .input-group {
+      --#{$prefix}input-border-width: 0;
+    }
+    .d-select__indicators {
+      display: none;
+    }
+    .d-select__control {
+      padding: var(--#{$prefix}datepicker-header-select-padding);
+      background-color: transparent;
+    }
+    .d-select__single-value {
+      font-weight: var(--#{$prefix}datepicker-header-select-font-weight);
+    }
+  }
+  .d-select__menu {
+    left: 50%;
+    min-width: var(--#{$prefix}datepicker-header-select-menu-width);
+    translate: -50%;
   }
 }
 

package/src/style/components/_d-icon.scss

@@ -1,7 +1,7 @@
 .d-icon {
   --#{$prefix}icon-color: var(--#{$prefix}icon-component-color, inherit);
   --#{$prefix}icon-bg-color: var(--#{$prefix}icon-component-bg-color, inherit);
-  --#{$prefix}icon-size: var(--#{$prefix}icon-component-size, $spacer-6);
+  --#{$prefix}icon-size: var(--#{$prefix}icon-component-size, var(--#{$prefix}ref-spacer-6));
   --#{$prefix}icon-padding: var(--#{$prefix}icon-component-padding, 0);
   --#{$prefix}icon-loading-duration: var(--#{$prefix}icon-component-loading-duration, 1.8);
 

package/src/style/components/_d-input-pin.scss

@@ -21,6 +21,10 @@
     height: var(--#{$prefix}input-pin-form-control-size);
     text-align: center;
     box-shadow: none;
+
+    &:has(~ .input-group-text) {
+      padding: var(--#{$prefix}ref-spacer-3) var(--#{$prefix}ref-spacer-4);
+    }
   }
 
   .form-control::-webkit-inner-spin-button,
@@ -64,5 +68,6 @@
 
   .input-group-text {
     padding-left: var(--#{$prefix}input-pin-form-gap);
+    background-color: transparent;
   }
 }

package/src/style/components/_d-quick-action-button.scss

@@ -25,6 +25,8 @@
 
   --#{$prefix}quick-action-button-action-icon-color: #{$quick-action-button-action-icon-color};
   --#{$prefix}quick-action-button-action-icon-size: #{$quick-action-button-action-icon-size};
+  --#{$prefix}quick-action-button-action-link-padding-x: var(--#{$prefix}ref-spacer-3);
+  --#{$prefix}quick-action-button-action-link-padding-y: var(--#{$prefix}ref-spacer-2);
 
   --#{$prefix}quick-action-button-hover-bg: #{$quick-action-button-hover-bg};
   --#{$prefix}quick-action-button-hover-border-color: #{$quick-action-button-hover-border-color};
@@ -85,6 +87,12 @@
     flex-grow: 1;
   }
 
+  .d-quick-action-button-action-link,
+  .d-quick-action-button-secondary-action-link {
+    --#{$prefix}btn-padding-x: var(--#{$prefix}quick-action-button-action-link-padding-x);
+    --#{$prefix}btn-padding-y: var(--#{$prefix}quick-action-button-action-link-padding-y);
+  }
+
   .d-quick-action-button-line1 {
     font-size: var(--#{$prefix}quick-action-button-line1-font-size);
     font-weight: var(--#{$prefix}quick-action-button-line1-font-weight);

package/src/style/components/_d-quick-action-select.scss

@@ -18,6 +18,8 @@
 
   display: flex;
   flex-direction: column;
+  gap: 0;
+  align-items: flex-start;
   width: 100%;
   padding: var(--#{$prefix}quick-action-select-padding);
   text-align: left;

package/src/style/components/_d-quick-action-switch.scss

@@ -53,10 +53,10 @@
     gap: var(--#{$prefix}quick-action-switch-content-gap);
   }
 
-  .d-quick-action-switch-label {
-    font-size: var(--#{$prefix}quick-action-switch-label-font-size);
-    font-weight: var(--#{$prefix}quick-action-switch-label-font-weight);
-    color: var(--#{$prefix}quick-action-switch-label-color);
+  label {
+    --#{$prefix}label-font-size: var(--#{$prefix}quick-action-switch-label-font-size);
+    --#{$prefix}label-font-weight: var(--#{$prefix}quick-action-switch-label-font-weight);
+    --#{$prefix}label-color: var(--#{$prefix}quick-action-switch-label-color);
   }
 
   .d-quick-action-switch-hint {

package/src/style/components/_d-select.scss

@@ -9,7 +9,7 @@
   --#{$prefix}select-option-selected-color: var(--#{$prefix}secondary);
   --#{$prefix}select-option-selected-bg: var(--#{$prefix}gray-100);
   --#{$prefix}select-option-is-checkbox-font-size: var(--#{$prefix}body-font-size);
-  --#{$prefix}select-option-is-checkbox-font-weight: var(--#{$prefix}ref-fw-normal);
+  --#{$prefix}select-option-is-checkbox-font-weight: var(--#{$prefix}fw-normal);
   --#{$prefix}select-option-is-checkbox-color: var(--#{$prefix}gray-900);
   --#{$prefix}select-option-has-icon-icon-size: var(--#{$prefix}ref-spacer-4);
   --#{$prefix}select-multi-value-padding-x: var(--#{$prefix}select-gap);

package/src/style/components/_d-stepper-mobile.scss

@@ -15,13 +15,13 @@
 
   /* Current step */
   --#{$prefix}step-current-step-z-index: 3;
-  --#{$prefix}step-current-step-font-weight: var(--#{$prefix}ref-fw-bold);
+  --#{$prefix}step-current-step-font-weight: var(--#{$prefix}fw-bold);
   --#{$prefix}step-current-step-color: var(--#{$prefix}gray-700);
 
   /* Info circle */
   --#{$prefix}step-info-max-width: 12rem;
-  --#{$prefix}step-info-label-font-size: var(--#{$prefix}ref-fs-6);
-  --#{$prefix}step-info-description-font-size: var(--#{$prefix}ref-fs-small);
+  --#{$prefix}step-info-label-font-size: var(--#{$prefix}fs-6);
+  --#{$prefix}step-info-description-font-size: var(--#{$prefix}fs-small);
   --#{$prefix}step-info-description-color: var(--#{$prefix}gray-500);
 
   display: flex;

package/src/style/helpers/_+import.scss

@@ -1,7 +1,8 @@
 @import "bootstrap/scss/helpers/clearfix";
 // @import "bootstrap/scss/helpers/color-bg";
 @import "color-bg";
-@import "bootstrap/scss/helpers/colored-links";
+//@import "bootstrap/scss/helpers/colored-links";
+@import "colored-links";
 @import "bootstrap/scss/helpers/focus-ring";
 @import "bootstrap/scss/helpers/icon-link";
 @import "bootstrap/scss/helpers/ratio";
@@ -13,3 +14,4 @@
 @import "bootstrap/scss/helpers/vr";
 
 @import "overlay";
+@import "text-truncate";

package/src/style/helpers/_colored-links.scss

@@ -0,0 +1,70 @@
+// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
+@each $color-name, $value in map-remove($theme-colors, "light", "dark") {
+  $color: rgba(var(--#{$prefix}#{$color-name}-500-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
+  $text-underline-color: rgba(var(--#{$prefix}#{$color-name}-500-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+  $hover-color: rgba(var(--#{$prefix}#{$color-name}-600-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
+  $hover-text-decoration-color: rgba(var(--#{$prefix}#{$color-name}-600-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+
+  .link-#{$color-name} {
+    color: $color;
+    text-decoration-color: $text-underline-color;
+
+    @if $link-shade-percentage != 0 {
+      &:hover,
+      &:focus {
+        color: $hover-color;
+        text-decoration-color: $hover-text-decoration-color;
+      }
+    }
+  }
+}
+
+.link-light {
+  $color: rgba(var(--#{$prefix}light-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
+  $text-underline-color: rgba(var(--#{$prefix}light-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+  $hover-color: rgba(var(--#{$prefix}gray-300-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
+  $hover-text-decoration-color: rgba(var(--#{$prefix}gray-300-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+
+  color: $color;
+  text-decoration-color: $text-underline-color;
+
+  @if $link-shade-percentage != 0 {
+    &:hover,
+    &:focus {
+      color: $hover-color;
+      text-decoration-color: $hover-text-decoration-color;
+    }
+  }
+}
+
+.link-dark {
+  $color: rgba(var(--#{$prefix}dark-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
+  $text-underline-color: rgba(var(--#{$prefix}dark-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+  $hover-color: rgba(var(--#{$prefix}gray-700-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
+  $hover-text-decoration-color: rgba(var(--#{$prefix}gray-700-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+
+  color: $color;
+  text-decoration-color: $text-underline-color;
+
+  @if $link-shade-percentage != 0 {
+    &:hover,
+    &:focus {
+      color: $hover-color;
+      text-decoration-color: $hover-text-decoration-color;
+    }
+  }
+}
+
+// One-off special link helper as a bridge until v6
+.link-body-emphasis {
+  color: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
+  text-decoration-color: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+
+  @if $link-shade-percentage != 0 {
+    &:hover,
+    &:focus {
+      color: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, .75)) if($enable-important-utilities, !important, null);
+      text-decoration-color: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, .75)) if($enable-important-utilities, !important, null);
+    }
+  }
+}

package/src/style/helpers/_text-truncate.scss

@@ -0,0 +1,8 @@
+[class*="text-truncate-"] {
+  display: -webkit-box;
+  -webkit-line-clamp: var(--#{$prefix}text-truncate);
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: normal;
+}