@spacemade/ui 0.0.1

package/src/sass/layout/_news-card-grid.scss

@@ -0,0 +1,507 @@
+@mixin AdBigCard {
+	padding: 1rem;
+
+	@include media-breakpoint-up(lg) {
+		padding: 1rem 1.5rem;
+	}
+
+	&:not(.is-featured) > div {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+	}
+
+	.ad-logo-image {
+		width: 180px;
+		margin: 0 auto;
+	}
+
+	.ad-feature-image {
+		width: 250px;
+	}
+
+	.logo-square {
+		max-width: 120px;
+		margin: 0 auto;
+		display: block;
+	}
+
+	&.is-featured {
+		.logo-square {
+			margin: 0;
+			max-width: 140px;
+			@include media-breakpoint-down(md) {
+				max-width: 60px;
+			}
+		}
+	}
+
+	.landscape-orientation {
+		.ad-logo-image {
+			margin: 0;
+			text-align: start;
+			@include media-breakpoint-down(md) {
+				width: 70%;
+			}
+			.logo-square {
+				margin: 0;
+			}
+		}
+
+		@include media-breakpoint-down(md) {
+			h2 {
+				font-size: 18px;
+			}
+			.btn {
+				font-size: 12px;
+			}
+		}
+	}
+
+	@include media-breakpoint-only(md) {
+		&.is-featured {
+			h2 {
+				font-size: 24px;
+			}
+			.btn {
+				padding: 0.4rem !important;
+				min-width: 180px;
+				font-size: 14px;
+				height: fit-content;
+			}
+		}
+	}
+
+	@include media-breakpoint-down(md) {
+		&.is-featured {
+			padding: 0.8rem 0.5rem;
+			h2 {
+				font-size: 13px;
+			}
+			.btn {
+				padding: 0.4rem !important;
+				min-width: 105px;
+				font-size: 10px;
+				height: fit-content;
+			}
+		}
+	}
+}
+
+.ad-item {
+	@include AdBigCard;
+}
+
+.news-cards-grid {
+	display: grid;
+	grid-gap: 1rem;
+
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+
+	@include media-breakpoint-up(md) {
+		grid-template-columns: repeat(6, minmax(0, 1fr));
+		&.general-cards-one-row {
+			@include media-breakpoint-between(md, xl) {
+				> div:nth-child(4),
+				> div:nth-child(5) {
+					display: none;
+				}
+			}
+			@include media-breakpoint-only(xl) {
+				> div:nth-child(5) {
+					display: none;
+				}
+			}
+		}
+		&.general-cards {
+			@include media-breakpoint-between(md, xl) {
+				grid-template-columns: repeat(3, minmax(0, 1fr));
+				> div:nth-child(4),
+				> div:nth-child(5) {
+					display: none;
+				}
+			}
+
+			@include media-breakpoint-only(xl) {
+				grid-template-columns: repeat(4, minmax(0, 1fr));
+				> div:nth-child(5) {
+					display: none;
+				}
+			}
+
+			@include media-breakpoint-only(xxl) {
+				grid-template-columns: repeat(5, minmax(0, 1fr));
+			}
+		}
+		&.general-cards-limit-n1 {
+			@include media-breakpoint-between(md, xxl) {
+				grid-template-columns: repeat(3, minmax(0, 1fr));
+				> div:nth-child(4) {
+					display: none;
+				}
+
+				@include media-breakpoint-only(md) {
+					> div {
+						grid-column: span 3;
+					}
+				}
+			}
+
+			@include media-breakpoint-only(xxl) {
+				grid-template-columns: repeat(4, minmax(0, 1fr));
+			}
+		}
+	}
+
+	@include media-breakpoint-up(lg) {
+		grid-template-columns: repeat(3, minmax(0, 1fr));
+	}
+
+	@include media-breakpoint-up(xl) {
+		grid-template-columns: repeat(4, minmax(0, 1fr));
+	}
+
+	@include media-breakpoint-up(xxl) {
+		grid-template-columns: repeat(5, minmax(0, 1fr));
+	}
+
+	.ad-item {
+		padding: 1rem;
+
+		.ad-logo-image {
+			width: 150px;
+			margin: 0 auto;
+			max-width: 100%;
+		}
+
+		@include media-breakpoint-down(lg) {
+			.ad-feature-image {
+				max-width: 200px;
+				width: 100%;
+			}
+
+			h2 {
+				font-size: 1.25rem;
+				@include media-breakpoint-down(md) {
+					font-size: 1.18rem;
+				}
+			}
+
+			p {
+				font-size: 0.8rem;
+			}
+
+			.btn {
+				font-size: 0.8rem;
+				@include media-breakpoint-down(md) {
+					font-size: 0.65rem;
+				}
+			}
+		}
+	}
+
+	> div {
+		grid-column: span 1;
+
+		@include media-breakpoint-only(md) {
+			grid-column: span 2;
+		}
+
+		.card_image {
+			height: 120px;
+
+			@include media-breakpoint-up(md) {
+				height: 200px;
+			}
+		}
+
+		.card-body {
+			height: 190px;
+
+			@include media-breakpoint-up(md) {
+				height: 220px;
+			}
+
+			h2 {
+				@include max-lines(6);
+
+				@include media-breakpoint-down(md) {
+					font-size: 1.08rem;
+				}
+			}
+		}
+
+		@include media-breakpoint-down(md) {
+			&:nth-child(3n + 3) {
+				grid-column: span 2;
+				&[data-type='post'] {
+					.card {
+						display: grid;
+						grid-template-columns: 1fr 1fr;
+						gap: 0px 0px;
+						grid-template-areas:
+							'Title Image'
+							'Footer Footer';
+						align-items: center;
+
+						div:nth-child(1) {
+							grid-area: Image;
+							width: 95% !important;
+
+							img {
+								border-radius: 0;
+							}
+						}
+						div:nth-child(2) {
+							grid-area: Title;
+						}
+						div:nth-child(3) {
+							grid-area: Footer;
+						}
+					}
+
+					.card_image {
+						height: 120px;
+					}
+
+					.card-body {
+						height: 135px;
+
+						h2 {
+							@include max-lines(5);
+						}
+					}
+				}
+			}
+		}
+
+		@include media-breakpoint-only(md) {
+			&:nth-child(-n + 2),
+			&:nth-child(5n + 6),
+			&:nth-child(5n + 7) {
+				grid-column: span 3;
+
+				.card_image {
+					height: 330px;
+				}
+
+				.ad-item {
+					@include AdBigCard;
+				}
+
+				.card-body {
+					height: 120px;
+
+					h2 {
+						@include max-lines(2);
+					}
+				}
+			}
+
+			&:nth-child(-n + 2) {
+				.card-body {
+					height: 155px;
+
+					h2 {
+						@include max-lines(3);
+					}
+				}
+			}
+		}
+
+		@mixin big-card-styles {
+			grid-column: span 2;
+
+			.ad-item {
+				@include AdBigCard;
+			}
+
+			.card_image {
+				height: 330px;
+			}
+
+			.card-body {
+				height: 120px;
+
+				h2 {
+					@include max-lines(2);
+				}
+			}
+		}
+
+		@include media-breakpoint-only(lg) {
+			&:nth-child(10n + 5),
+			&:nth-child(10n + 9) {
+				@include big-card-styles;
+			}
+		}
+
+		@include media-breakpoint-up(xl) {
+			&:nth-child(18n + 6),
+			&:nth-child(18n + 18) {
+				@include big-card-styles;
+			}
+		}
+	}
+
+	@include media-breakpoint-down(md) {
+		&:not(.general-cards) {
+			> div {
+				.card-footer {
+					.post-author-icon {
+						display: none;
+					}
+				}
+
+				&:nth-child(3n + 3) {
+					.card-footer {
+						.post-author-icon {
+							display: inline-block;
+						}
+					}
+				}
+			}
+		}
+	}
+
+	&.general-cards {
+		> div {
+			grid-column: span 1;
+
+			.card_image {
+				height: 120px;
+
+				@include media-breakpoint-up(md) {
+					height: 200px;
+				}
+			}
+
+			.card-body {
+				height: 190px;
+
+				@include media-breakpoint-up(md) {
+					height: 200px;
+				}
+
+				h2 {
+					font-weight: 700;
+					font-size: 1.313rem;
+					line-height: 1.8rem;
+					@include max-lines(5);
+				}
+			}
+
+			@include media-breakpoint-down(md) {
+				grid-column: span 2;
+				.card {
+					display: grid;
+					grid-template-columns: 1fr 1fr;
+					gap: 0px 0px;
+					grid-template-areas:
+						'Title Image'
+						'Footer Footer';
+					align-items: center;
+
+					div:nth-child(1) {
+						grid-area: Image;
+						width: 95% !important;
+
+						img {
+							border-radius: 0;
+						}
+					}
+					div:nth-child(2) {
+						grid-area: Title;
+					}
+					div:nth-child(3) {
+						grid-area: Footer;
+					}
+				}
+
+				.card_image {
+					height: 120px;
+				}
+
+				.card-body {
+					height: 135px;
+
+					h2 {
+						font-size: 1.08rem;
+						@include max-lines(5);
+					}
+				}
+			}
+		}
+	}
+
+	&.ad-preview-grid {
+		grid-template-columns: repeat(2, 1fr);
+
+		@include media-breakpoint-up(md) {
+			grid-template-columns: repeat(3, 1fr);
+		}
+
+		> div,
+		a {
+			// Big Card
+			&:nth-child(1) {
+				grid-column: span 2;
+				padding: 1rem 2.5rem;
+
+				> div {
+					display: flex;
+					flex-direction: column;
+					justify-content: center;
+				}
+
+				.ad-logo-image {
+					width: 200px;
+					margin: 0 auto;
+				}
+
+				.ad-feature-image {
+					width: 250px;
+				}
+
+				.landscape-orientation {
+					.ad-logo-image {
+						margin: 0;
+						text-align: start;
+					}
+				}
+
+				.logo-square {
+					max-width: 120px;
+				}
+			}
+
+			// Small Card
+			&:nth-child(2) {
+				grid-column: span 1;
+				padding: 1rem;
+
+				.ad-logo-image {
+					width: 180px;
+					margin: 0 auto;
+				}
+
+				.ad-feature-image {
+					width: 100%;
+					max-width: 235px;
+				}
+
+				h2 {
+					font-size: 1.6rem;
+				}
+			}
+		}
+	}
+}
+
+.featured-post {
+	@include media-breakpoint-down(md) {
+		h2 {
+			font-size: 1.5rem;
+		}
+	}
+}

package/src/sass/utilities/_mixins.scss

@@ -0,0 +1,21 @@
+@mixin wide-container {
+	max-width: 1850px;
+}
+
+@mixin max-lines($lines) {
+	display: -moz-box !important;
+	display: -webkit-box !important;
+	-webkit-line-clamp: $lines;
+	line-clamp: $lines;
+	-moz-box-orient: vertical;
+	-webkit-box-orient: vertical;
+	box-orient: vertical;
+	white-space: normal;
+}
+
+@mixin InputActiveState($color) {
+	border-color: rgba(theme-color($color), 0.4) !important;
+	box-shadow: 0px 2px 4px rgba(theme-color($color), 0.5),
+		0 0 0 3px rgba(theme-color($color), 0.5),
+		0 1px 1px 0 rgba(255, 255, 255, 0.12) !important;
+}

package/src/sass/utilities/_sizes.scss

@@ -0,0 +1,137 @@
+@use 'sass:map';
+/** ===========================================
+  # Bootstrap Height and Width Classes
+  # This variable affects the `.h-*` and `.w-*` classes.
+
+  # For now we are not using more than 600px of width or height but
+	# you can edit the variable below to iterate for what you need.
+============================================ */
+$maxSizeInPx: 1000;
+
+$sizes: () !default;
+@for $i from 1 through $maxSizeInPx {
+	@if $i <= 100 {
+		@if $i%5 == 0 {
+			$holdingArrayPercent: (
+				// Escape the Percentage Sign
+				'#{$i}':
+					#{$i}#{'%'}
+			);
+			$sizes: map.merge($sizes, $holdingArrayPercent);
+			$holdingArrayPixels: (
+				'#{$i}p': #{$i}px,
+			);
+			$sizes: map.merge($sizes, $holdingArrayPixels);
+		}
+	}
+	@if $i%10 == 0 {
+		$holdingArrayPixels: (
+			'#{$i}p': #{$i}px,
+		);
+		$sizes: map.merge($sizes, $holdingArrayPixels);
+	}
+}
+
+/** ===========================================
+  # We make our own for MD Screen Size Width/Heights
+============================================ */
+$sizesMd: () !default;
+$sizesMd: map.merge($sizes, $sizesMd);
+
+@media (min-width: 768px) {
+	@each $prop,
+		$abbrev
+			in (
+				width: w-md,
+				height: h-md,
+				max-width: mw-md,
+				max-height: mh-md,
+				min-width: minw-md,
+				min-height: minh-md
+			)
+	{
+		@each $size, $length in $sizesMd {
+			html .#{$abbrev}-#{$size} {
+				#{$prop}: $length !important;
+			}
+		}
+	}
+}
+
+/** ===========================================
+  # We make our own for LG Screen Size Width/Heights
+============================================ */
+$sizesLg: () !default;
+$sizesLg: map.merge($sizes, $sizesLg);
+
+@media (min-width: 991px) {
+	@each $prop,
+		$abbrev
+			in (
+				width: w-lg,
+				height: h-lg,
+				max-width: mw-lg,
+				max-height: mh-lg,
+				min-width: minw-lg,
+				min-height: minh-lg
+			)
+	{
+		@each $size, $length in $sizesLg {
+			html .#{$abbrev}-#{$size} {
+				#{$prop}: $length !important;
+			}
+		}
+	}
+}
+
+/** ===========================================
+  # We make our own for XL Screen Size Width/Heights
+============================================ */
+$sizesXL: () !default;
+$sizesXL: map.merge($sizes, $sizesLg);
+
+@media (min-width: 1200px) {
+	@each $prop,
+		$abbrev
+			in (
+				width: w-xl,
+				height: h-xl,
+				max-width: mw-xl,
+				max-height: mh-xl,
+				min-width: minw-xl,
+				min-height: minh-xl
+			)
+	{
+		@each $size, $length in $sizesLg {
+			html .#{$abbrev}-#{$size} {
+				#{$prop}: $length !important;
+			}
+		}
+	}
+}
+
+/** ===========================================
+  # Loop through each breakpoint and provide classes
+  for the sizes within the sizes map from previous loop
+============================================ */
+@each $breakpoint-key, $breakpoint in $grid-breakpoints {
+	@media (min-width: #{$breakpoint}) {
+		@each $prop,
+			$abbrev
+				in (
+					width: w-#{$breakpoint-key},
+					height: h-#{$breakpoint-key},
+					max-width: mw-#{$breakpoint-key},
+					max-height: mh-#{$breakpoint-key},
+					min-width: minw-#{$breakpoint-key},
+					min-height: minh-#{$breakpoint-key}
+				)
+		{
+			@each $size, $length in $sizes {
+				html .#{$abbrev}-#{$size} {
+					#{$prop}: #{$length} !important;
+				}
+			}
+		}
+	}
+}

package/src/sass/utilities/_utils.scss

@@ -0,0 +1,23 @@
+@use 'sass:math';
+// Generate `.opacity-*`
+@for $i from 0 through 9 {
+  .opacity-#{$i} {
+		opacity: math.round(math.percentage(math.div($i, 10)));
+  }
+}
+
+@each $color, $value in $theme-colors {
+	.text-hover-#{$color} {
+		&:hover {
+			color: #{$value} !important;
+		}
+	}
+}
+
+@each $color, $value in $theme-colors {
+	.bg-hover-#{$color} {
+		&:hover {
+			background-color: #{$value} !important;
+		}
+	}
+}