groovinads-ui 1.0.0

package/src/scss/base/_typography.scss

@@ -0,0 +1,188 @@
+// Use
+@use '../abstracts/helpers' as h;
+
+// Fonts import
+@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;700&family=Roboto+Mono&family=Roboto:wght@400;700&display=swap');
+
+:root {
+	font-size: h.$font-size !important;
+}
+
+h1 {
+	@include h.font-family(h.$font-family-primary, 2.618rem, h.$secondary-blue, 700);
+	letter-spacing: -0.03em;
+	line-height: 2.618rem;
+	position: relative;
+
+	span {
+		&.highlighted {
+			background: linear-gradient(
+				90deg,
+				h.$ga-brand-light,
+				h.$ga-brand-midtone,
+				h.$ga-brand-light
+			);
+			-webkit-background-clip: text;
+			background-clip: text;
+			color: transparent;
+			background-size: 300%;
+			background-position: -150%;
+			animation: grooveText 5s infinite alternate-reverse;
+		}
+	}
+}
+
+.text-center {
+	h1 {
+		&::after {
+			width: 8%;
+			left: 50%;
+			transform: translateX(-50%);
+		}
+	}
+}
+
+.text-lg-start {
+	h1 {
+		&::after {
+			@include h.respond-to(h.$lg) {
+				left: 0;
+				transform: none;
+			}
+		}
+	}
+}
+
+h2 {
+	@include h.font-family(h.$font-family-secondary, 1.618rem, h.$secondary-blue, 700);
+	line-height: 1.2;
+}
+
+h3 {
+	@include h.font-family(h.$font-family-secondary, 1.1rem, h.$secondary-blue, 700);
+	line-height: 1.618rem;
+}
+
+h4 {
+	@include h.font-family(h.$font-family-secondary, 0.75rem, h.$secondary-blue, 700);
+	line-height: 0.75rem;
+	letter-spacing: 1.25px;
+	text-transform: uppercase;
+	margin-bottom: 0;
+}
+
+h5 {
+	@include h.font-family(h.$font-family-secondary, 1rem, h.$secondary-blue, 700);
+	line-height: 1.2em;
+	margin-bottom: 0;
+}
+
+p {
+	@include h.font-family(h.$font-family-secondary, 1rem, h.$grey-dark, 400);
+	line-height: 1.618rem;
+
+	&.highlighted {
+		padding: 0.618em 1.618em;
+		border-radius: 1.618rem;
+		font-size: 1rem;
+		line-height: 1.618em;
+
+		@include h.respond-to(h.$lg) {
+			padding: 1.618em 2.618em;
+			font-size: 1.618rem;
+		}
+
+		&.violet {
+			color: h.$ga-brand-midtone;
+			background-color: lighten(h.$ga-brand-midtone, 50%);
+		}
+	}
+
+	&.small {
+		font-size: 0.8rem;
+		line-height: 1.2;
+	}
+
+	&.link {
+		color: h.$ga-brand-light;
+		text-decoration: underline;
+	}
+}
+
+a {
+	color: h.$ga-brand-light;
+	@include h.transition(color, 0.15s, ease-in-out);
+
+	&:hover {
+		color: h.$ga-brand-midtone;
+	}
+}
+
+strong {
+	&.pill {
+		@include h.font-family(h.$font-family-secondary, 0.618rem, h.$ga-brand-dark, 700);
+		text-transform: uppercase;
+		letter-spacing: 0.1em;
+		padding: 0.382em 1em;
+		border-radius: h.$border-radius-sm;
+		display: inline-block;
+
+		&.grey {
+			color: h.$secondary-dark;
+			background-color: rgba(h.$secondary-dark, 0.2);
+		}
+
+		&.blue {
+			color: h.$secondary-blue-light;
+			background-color: rgba(h.$secondary-blue-light, 0.2);
+		}
+
+		&.cyan {
+			color: h.$ga-brand-light;
+			background-color: rgba(h.$ga-brand-light, 0.2);
+		}
+
+		&.violet {
+			color: h.$ga-brand-midtone;
+			background-color: lighten(h.$ga-brand-midtone, 50%);
+		}
+
+		&.white {
+			color: h.$white;
+			background-color: rgba(h.$white, 0.2);
+		}
+
+		&.pill-xl {
+			display: inline-block;
+			@include h.font-family(h.$font-family-primary, 2.618rem, h.$secondary-violet, 400);
+			line-height: 2.618rem;
+			letter-spacing: -0.03em;
+			padding: 0.618rem;
+			text-align: center;
+			margin-bottom: 1.618rem;
+		}
+	}
+}
+
+label {
+	@include h.font-family(h.$font-family-secondary, 1rem, h.$grey-dark, 400);
+}
+
+.form-control {
+	@include h.font-family(h.$font-family-secondary, 1rem, h.$ga-brand-dark, 400);
+
+	&::placeholder {
+		@include h.font-family(h.$font-family-secondary, 1rem, h.$grey-dark, 400);
+	}
+}
+
+.small,
+small {
+	@include h.font-family(h.$font-family-secondary, 0.75rem, h.$grey-dark, 400);
+	line-height: 1;
+}
+
+.text-muted {
+	opacity: 1;
+    color: h.$grey-dark !important;
+}

package/src/scss/components/_alerts.scss

@@ -0,0 +1,115 @@
+// Use
+@use '../abstracts/helpers' as h;
+
+// Forwards
+@forward '../animations/alertToUp';
+
+.alert {
+	padding: 0.5rem 1rem;
+	@include h.font-family(h.$font-family-secondary, 0.875rem, h.$grey-dark, 400);
+	line-height: 1;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: 1rem;
+
+	.btn-close {
+		background: transparent;
+		padding: 0;
+		opacity: 1;
+		box-shadow: none;
+		border-radius: h.$border-radius-xs;
+		@include h.transition(background-color opacity box-shadow, 0.15s, ease-in-out);
+
+		&:hover,
+		&:focus {
+			box-shadow:  0 0 0.25rem rgba(13, 110, 253, 0.25);
+		}
+	}
+
+	.alert-wrapper {
+		display: flex;
+		align-items: center;
+		gap: 1em;
+	}
+
+	&.alert-danger {
+		color: h.$white;
+		background-color: h.$error;
+		border-color: h.$error;
+
+		.btn-close {
+			color: h.$white;
+
+			&:hover,
+			&:focus {
+				background-color: rgba(h.$white, 0.25);
+				box-shadow: 0 0 0.25rem rgba(h.$white, 0.25);
+			}
+		}
+	}
+
+	&.alert-warning {
+		color: h.$safeWarning;
+		background-color: h.$warning-bg;
+		border-color: h.$safeWarning;
+
+		.btn-close {
+			color: h.$safeWarning;
+
+			&:hover,
+			&:focus {
+				background-color: rgba(h.$safeWarning, 0.25);
+				box-shadow: 0 0 0.25rem rgba(h.$safeWarning, 0.25);
+			}
+		}
+	}
+
+	&.alert-success {
+		color: h.$safeSuccess;
+		background-color: h.$success-bg;
+		border-color: h.$safeSuccess;
+
+		.btn-close {
+			color: h.$safeSuccess;
+
+			&:hover,
+			&:focus {
+				background-color: rgba(h.$safeSuccess, 0.25);
+				box-shadow: 0 0 0.25rem rgba(h.$safeSuccess, 0.25);
+			}
+		}
+	}
+
+	&.alert-info {
+		color: h.$secondary-blue-light;
+		background-color: lighten(h.$secondary-blue-light, 40%);
+		border-color: h.$secondary-blue-light;
+
+		.btn-close {
+			color: h.$secondary-blue-light;
+
+			&:hover,
+			&:focus {
+				background-color: rgba(h.$secondary-blue-light, 0.25);
+				box-shadow: 0 0 0.25rem rgba(h.$secondary-blue-light, 0.25);
+			}
+		}
+	}
+
+	// Animation
+	&.alert-animation {
+		animation: alertToUp 0.25s ease-out both;
+	}
+
+	// Sizes
+	&.alert-xs {
+		font-size: 0.75rem;
+		padding: 0.5em 1em;
+	}
+
+	&.alert-lg {
+		font-size: 2rem;
+		padding: 0.4689em 1em;
+	}
+}

package/src/scss/components/_breadcrumb.scss

@@ -0,0 +1,30 @@
+// Use
+@use '../abstracts/helpers' as h;
+
+.breadcrumb {
+	.breadcrumb-item {
+		@include h.font-family(h.$font-family-secondary, 0.75rem, h.$grey-dark, 700);
+		line-height: 0.75rem;
+		letter-spacing: 1.25px;
+		text-transform: uppercase;
+		margin-bottom: 0;
+		padding-left: 1em;
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+
+		&:first-child {
+			padding-left: 0;
+		}
+
+		&:nth-child(2) {
+			&::before {
+				display: none;
+			}
+		}
+
+		a {
+			color: h.$grey-dark;
+		}
+	}
+}