Feature latest news slider

A new design tab for the latest news plugin which will display the description instead of an image.

Resources/Public/Sass/_layout-content.scss

+$sg-news-headline-underline-width: 35px;
+$sg-news-chevron-color: var(--component-color-primary-background, $black-base);
+
+.sg-slide-layout-2 {
+	.sg-slide-track,
+	.sg-slide-container {
+		background: transparent;
+	}
+
+	.main-content & {
+		.sg-slide-next,
+		.sg-slide-prev {
+			width: 40px;
+			background: transparent;
+			display: flex;
+		}
+
+		.sg-slide-next {
+			right: -5px;
+
+			.fa-angle-right {
+				@include inline-svg($icon-chevron, $sg-news-chevron-color);
+			}
+		}
+
+		.sg-slide-prev {
+			left: -5px;
+
+			.fa-angle-left {
+				@include inline-svg($icon-chevron, $sg-news-chevron-color);
+			}
+		}
+	}
+
+	.sg-slide-dots {
+		display: none;
+		position: relative;
+		bottom: -10px;
+		width: auto	!important; // stylelint-disable-line
+
+		@media (min-width: $screen-sm) {
+			display: block;
+		}
+	}
+
+	&[data-current-columns="3"] {
+		.sg-slide-dots__indicator {
+			&:not(:nth-child(3n+1)) {
+				display: none;
+			}
+		}
+
+		.sg-slide:not(:nth-child(3n+1)) {
+			border-left: 1px solid $sg-news-border-color;
+		}
+	}
+
+	&[data-current-columns="2"] {
+		.sg-slide-dots__indicator {
+			&:not(:nth-child(2n+1)) {
+				display: none;
+			}
+		}
+
+		.sg-slide:not(:nth-child(2n+1)) {
+			border-left: 1px solid $sg-news-border-color;
+		}
+	}
+
+	a {
+		&:hover,
+		&:focus {
+			text-decoration: none;
+		}
+	}
+
+	.sg-slide-news-content {
+		margin-bottom: 16px;
+		padding: 0 50px
+	}
+
+	.tx-sgnews-teaser-description {
+		text-align: justify;
+	}
+
+	.tx-sgnews-teaser-title {
+		margin-bottom: 10px !important; //stylelint-disable-line
+
+		&::after {
+			display: block;
+			content: '';
+			width: $sg-news-headline-underline-width;
+			height: #{$sg-news-headline-underline-width / 6};
+			background: $sg-news-foreground-color;
+		}
+	}
+
+	.tx-sgnews-teaser-meta {
+		color: var(--component-color-foreground);
+		// stylelint-disable declaration-no-important
+		font-size: 1em !important;
+		text-align: left !important;
+		// stylelint-enable
+		margin: -10px 0 5px;
+		display: flex;
+		flex-wrap: wrap;
+
+		.date::before {
+			@include inline-svg($icon-regular-calendar-alt, $black-base);
+			width: 9px;
+			height: 10px;
+			margin: 0;
+		}
+
+		.author::before {
+			@include inline-svg($icon-solid-user, $black-base);
+			width: 9px;
+			height: 10px;
+			margin: 0;
+		}
+
+		.category::before {
+			@include inline-svg($icon-solid-tag, $black-base);
+			content: '';
+			display: inline-block;
+			width: 9px;
+			height: 10px;
+			margin: 0;
+		}
+
+		.tags::before {
+			@include inline-svg($icon-solid-tags, $black-base);
+			content: '';
+			display: inline-block;
+			width: 9px;
+			height: 10px;
+			margin: 0;
+		}
+
+		> span:not(:last-child) {
+			margin-right: 15px;
+		}
+	}
+}