Преглед изворни кода

responsive text-shortening on filenames in .table-sortable tables

Christian Kahlau пре 4 година
родитељ
комит
1b9a44b3af
1 измењених фајлова са 34 додато и 0 уклоњено
  1. 34 0
      scss/_sortable-table/sortable-table.scss

+ 34 - 0
scss/_sortable-table/sortable-table.scss

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 .table.table-sortable {
   thead > tr > th.sort {
     cursor: pointer;
@@ -8,4 +10,36 @@
       // border-color: $light;
     }
   }
+
+  tbody > tr > td {
+    filename {
+      .ellipsis-wrapper {
+        white-space: nowrap;
+        width: 100%;
+
+        .text-ellipsis {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          max-width: 94px;
+          display: inline-block;
+          vertical-align: top;
+        }
+      }
+
+      @each $breakpoint in map-keys($grid-breakpoints) {
+        $min: breakpoint-min($breakpoint, $grid-breakpoints);
+
+        @if $min {
+          @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
+            .ellipsis-wrapper {
+              .text-ellipsis {
+                max-width: math.div($min, 2.57);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
 }