new collapsible text box widget

resources/assets/js/app.js

@@ -20,6 +20,12 @@ $(function () {
       $notifs.addClass('hidden')
     }, 500)
   }, 2500)
+
+  $('.block-collapse').on('click', (e) => {
+    $(e.target).closest('.block-collapse').addClass('reveal')
+  }).on('dblclick', (e) => {
+    $(e.target).closest('.block-collapse').removeClass('reveal')
+  });
 })
 
 // auto-alias

resources/assets/sass/_block-collapse.scss

@@ -0,0 +1,37 @@
+.block-collapse {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	position: relative;
+
+	&::before,
+	&::after {
+		position: absolute;
+		right: 0;
+		bottom: 0;
+		text-align: right;
+		height: 1.7em;
+		line-height: 1.7em;
+		cursor: pointer;
+	}
+
+	&::after{
+		content: '';
+		width: 70%;
+		background: linear-gradient(to right, rgba(255, 255, 255, 0), white 90%);
+	}
+
+	&::before {
+		content: '▼';
+		z-index: 10;
+		color: $gray-500;
+	}
+
+	&.reveal {
+		max-height: unset !important; // override inline styles
+
+		&::before, &::after {
+			display: none;
+		}
+	}
+}
+

resources/assets/sass/_helpers.scss

@@ -26,3 +26,19 @@
 .border-dotted {
 	border-style: dotted !important;
 }
+
+.last-p-mb-0 {
+	&:last-child {
+		margin-bottom: 0;
+	}
+}
+
+@each $color, $value in $colors {
+	.border-#{$color} {
+		border-color: $value !important;
+	}
+}
+
+.box-shadow {
+	box-shadow: 0 2px 3px rgba(black, .3);
+}

resources/assets/sass/app.scss

@@ -7,6 +7,7 @@ html {
 
 @import "helpers";
 @import "fa-utils";
+@import "block-collapse";
 
 @import "bootstrap-customizations/paginate";
 @import "bootstrap-customizations/card";

resources/assets/sass/bootstrap-customizations/_card.scss

@@ -14,7 +14,7 @@
 }
 
 .card {
-	box-shadow: 0 2px 3px rgba(black, .3);
+	@extend .box-shadow;
 }
 
 .card-header-extra {

resources/assets/sass/bootstrap-customizations/_variables.scss

@@ -15,9 +15,9 @@ $font-family-sans-serif: "IBM Plex Sans", "Droid Sans", "Helvetica Neue", "Helve
 $font-size-base: 1rem;
 $line-height-base: 1.6;
 
-$link-color:                $gray-800;
+$link-color:                darken($primary, 15%);
 $link-decoration:           none;
-$link-hover-color:          darken($link-color, 15%);
+$link-hover-color:          darken($primary, 10%);
 $link-hover-decoration:     underline;
 
 $card-cap-bg: lighten($primary, 5);