groovinads-ui 1.0.0

package/src/scss/components/_modals.scss

@@ -0,0 +1,89 @@
+// Use
+@use '../abstracts/helpers' as h;
+
+.modal {
+	.modal-dialog {
+		.modal-header {
+			border: none;
+			padding: 1rem;
+			justify-content: space-between;
+
+			.modal-title-wrapper {
+				display: flex;
+				flex-direction: column;
+				gap: 1rem;
+				width: 100%;
+
+				@include h.respond-to(h.$lg) {
+					width: auto;
+				}
+			}
+
+			.modal-title {
+				display: flex;
+				flex-direction: row;
+				align-items: center;
+				gap: 1rem;
+				line-height: 1.2;
+			}
+		}
+
+		.modal-content {
+			@include h.shadow(4, h.$ga-brand-dark, y);
+			border-radius: h.$border-radius-md;
+			@include h.font-family(h.$font-family-secondary, 1rem, h.$grey-dark, 400);
+
+
+			.modal-footer {
+				justify-content: left;
+				color: h.$secondary-dark;
+			}
+		}
+
+		&.modal-lg {
+			.modal-body {
+				max-height: 55vh;
+				overflow-y: scroll;
+
+				@include h.respond-to(h.$lg) {
+					max-height: none;
+				}
+			}
+		}
+	}
+
+	// Opening and closing animations
+	&.scale {
+		.modal-dialog {
+			transform: scale(0);
+			@include h.transition(transform, 0.25s, cubic-bezier(0.165, 0.84, 0.44, 1));
+		}
+
+		&:not(.show) {
+			.modal-dialog {
+				transform: scale(0);
+			}
+		}
+
+		&.show {
+			.modal-dialog {
+				transform: none;
+			}
+		}
+	}
+}
+
+.modal-open {
+	.confirmation-modal {
+		z-index: 1060;
+
+		p {
+			color: h.$secondary-dark;
+		}
+	}
+	.modal-backdrop {
+		&:has(+ .confirmation-modal) {
+			z-index: 1059 !important;
+		}
+	}
+}

package/src/scss/components/_nav-tabs.scss

@@ -0,0 +1,38 @@
+// Use
+@use '../abstracts/helpers' as h;
+
+.nav-tabs {
+	border-bottom: 2px solid rgba(h.$ga-brand-dark, 20%);
+	@include h.font-family(h.$font-family-secondary, 1rem, h.$grey-dark, 400);
+	border-width: 2px;
+
+	.nav-item {
+		margin-bottom: -1px;
+
+		.nav-link {
+			color: h.$grey-dark;
+			border-radius: 0;
+
+			&:hover {
+				border-color: transparent;
+			}
+
+			&:disabled {
+				opacity: 0.4;
+				pointer-events: none;
+			}
+
+			&.active {
+				background-color: transparent;
+				border-color: transparent;
+				border-bottom: 2px solid h.$ga-brand-light;
+				font-weight: 700;
+				color: h.$ga-brand-dark;
+			}
+		}
+	}
+}
+
+.tab-content {
+	padding-top: 2rem;
+}

package/src/scss/components/_pills.scss

@@ -0,0 +1,88 @@
+// Use
+@use '../abstracts/helpers' as h;
+
+.pill {
+	@include h.font-family(h.$font-family-secondary, 0.6875rem, h.$ga-brand-dark, 700);
+	background-color: rgba(h.$ga-brand-dark, 20%);
+	text-transform: uppercase;
+	letter-spacing: 1.25px;
+	display: inline-flex;
+	flex-direction: row;
+	gap: 0.5rem;
+	align-items: center;
+	border-radius: 100px;
+	@include h.transition(background-color, 0.15s, ease-in-out);
+	padding: 0.25rem 0.5rem;
+	white-space: nowrap;
+
+	// Colors
+	&.green {
+		color: h.$safeSuccess;
+		background-color: rgba(h.$success, 20%);
+	}
+
+	&.yellow {
+		color: h.$safeWarning;
+		background-color: h.$warning-bg;
+	}
+
+	&.red {
+		color: h.$error;
+		background-color: rgba(h.$error, 20%);
+	}
+
+	&.danger {
+		color: h.$white;
+		background-color: h.$error;
+	}
+
+	&.neutral {
+		color: h.$ga-brand-dark;
+		background-color: rgba(h.$ga-brand-dark, 20%);
+	}
+
+	&.blue {
+		color: h.$secondary-blue-light;
+		background-color: rgba(h.$secondary-blue-light, 20%);
+	}
+
+	&.grey {
+		color: h.$secondary-dark;
+		background-color: h.$grey-light;
+	}
+
+	&.light {
+		color: h.$ga-brand-light;
+		background-color: lighten(h.$ga-brand-light, 45);
+	}
+
+	&.midtone {
+		color: h.$ga-brand-midtone;
+		background-color: lighten(h.$ga-brand-midtone, 45);
+		background-color: rgba(h.$ga-brand-midtone, 20%);
+	}
+
+	&.dark {
+		color: h.$ga-brand-dark;
+		background-color: rgba(h.$ga-brand-dark, 20%);
+	}
+
+	> span {
+		height: 100%;
+		line-height: 1rem;
+	}
+
+	> button {
+		background-color: transparent;
+		border: none;
+		color: inherit;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0;
+		width: 0.6875rem;
+		height: 0.6875rem;
+		color: inherit;
+	}
+}

package/src/scss/components/_radio.scss

@@ -0,0 +1,102 @@
+// Use
+@use '../abstracts/helpers' as h;
+
+.radio {
+	display: flex;
+	align-items: center;
+	justify-content: flex-start;
+	gap: 1rem;
+	cursor: pointer;
+	margin: 0;
+	@include h.transition(background-color box-shadow, 0.3s, ease-out);
+	border-radius: 5px;
+
+	.outer {
+		height: 20px;
+		width: 20px;
+		display: block;
+		margin: 0;
+		border: none;
+		border: h.$grey-dark 2px solid;
+		border-radius: 50%;
+		background-color: h.$white;
+		position: relative;
+		box-shadow: none;
+		@include h.transition(border-color box-shadow, 0.3s, cubic-bezier(.47,1.64,.41,.8));
+	}
+
+	.inner {
+		@include h.transition(transform opacity background-color, 0.3s, cubic-bezier(.47,1.64,.41,.8));
+		height: 0.75rem;
+		width: 0.75rem;
+		transform: scale(0);
+		display: block;
+		border-radius: 50%;
+		background-color: h.$secondary-violet;
+		opacity: 0;
+		position: absolute;
+		top: 2px;
+		left: 2px;
+	}
+
+	input[type='radio'] {
+		height: 1px;
+		width: 1px;
+		opacity: 0;
+		position: absolute;
+
+		&:checked {
+			& + div {
+				.outer {
+					border-color: transparent;
+					box-shadow: 0 0 0 2px h.$secondary-violet;
+				}
+
+				.inner {
+					transform: scale(1);
+					opacity: 1;
+					transform-origin: 50%;
+					background-color: h.$secondary-violet;
+				}
+			}
+
+			& + .outer {
+				.inner {
+					transform: scale(1);
+					opacity: 1;
+					background-color: h.$secondary-violet;
+				}
+			}
+
+			&:has(.dropdown),
+			&:has(.form-floating) {
+				&:has(input:focus) {
+					box-shadow: 0px 0px 0px 2px h.$ga-brand-midtone;
+					background-color: lighten(h.$ga-brand-midtone, 50%);
+				}
+			}
+		}
+
+		& + div {
+			width: 100%;
+			height: 100%;
+			padding: 0.375rem;
+			display: flex;
+			flex-direction: column;
+			justify-content: space-between;
+			align-items: center;
+			gap: 1rem;
+		}
+	}
+/*
+	&:has(input[type='radio']:checked) {
+		box-shadow: 0px 0px 0px 2px h.$ga-brand-midtone;
+		background-color: lighten(h.$ga-brand-midtone, 50%);
+	} */
+
+
+	&:has(.dropdown),
+	&:has(.form-floating) {
+		padding: 1rem;
+	}
+}

package/src/scss/components/_shadows.scss

@@ -0,0 +1,18 @@
+// Use
+@use '../abstracts/helpers' as h;
+
+.shadow-1 {
+	@include h.shadow(1, h.$ga-brand-dark, y);
+}
+
+.shadow-2 {
+	@include h.shadow(2, h.$ga-brand-dark, y);
+}
+
+.shadow-3 {
+	@include h.shadow(3, h.$ga-brand-dark, y);
+}
+
+.shadow-4 {
+	@include h.shadow(4, h.$ga-brand-dark, y);
+}

package/src/scss/components/_spinner.scss

@@ -0,0 +1,20 @@
+// Use
+@use '../abstracts/helpers' as h;
+
+// Forward
+@forward '../animations/dash';
+@forward '../animations/colors';
+
+.spinner {
+	animation: rotator h.$spinner-duration linear infinite;
+	width: 24px;
+	height: 24px;
+
+	circle {
+		stroke-dasharray: 187;
+		stroke-dashoffset: 0;
+		stroke: h.$ga-brand-light;
+		transform-origin: center;
+		animation: dash h.$spinner-duration ease-in-out infinite, colors h.$spinner-duration ease-in-out infinite;
+	}
+}

package/src/scss/components/_status-icon.scss

@@ -0,0 +1,61 @@
+// Use
+@use '../abstracts/helpers' as h;
+
+// Forward
+@forward '../animations/statusLine';
+
+.status-icon {
+	width: 1rem;
+	height: 1rem;
+	flex-shrink: 0;
+
+	circle {
+		fill: rgba(h.$ga-brand-dark, 0.2);
+	}
+
+	&.active {
+		circle {
+			fill: h.$success;
+		}
+	}
+
+	&.active-warning {
+		width: 1.5rem;
+		margin-left: -0.25rem;
+		margin-right: -0.25rem;
+
+		circle {
+			fill: h.$success-bg;
+		}
+
+		path {
+			fill: h.$safeSuccess;
+		}
+	}
+
+	polyline {
+		fill: none;
+	}
+
+	&.animated {
+		polyline {
+			fill: none;
+			stroke-width: 1;
+			stroke-linecap: round;
+			stroke-linejoin: round;
+
+			&.line-front {
+				fill: none;
+				stroke: h.$white;
+				stroke-dasharray: 16, 48;
+				stroke-dashoffset: 64;
+				animation: statusLine 1.4s linear infinite;
+			}
+
+			&.line-back {
+				fill: none;
+				stroke: rgba(h.$white, 25%);
+			}
+		}
+	}
+}

package/src/scss/components/_switch.scss

@@ -0,0 +1,77 @@
+// Use
+@use '../abstracts/helpers' as h;
+
+.form-switch {
+	display: flex;
+	gap: 1rem;
+	align-items: center;
+	padding: 0;
+	width: auto;
+	justify-content: flex-start;
+
+	.form-check-input {
+		width: 3.4rem;
+		height: 2rem;
+		margin: 0;
+		cursor: pointer;
+		border-color: h.$grey-dark;
+		background-color: h.$grey-dark;
+		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4.5' r='3' opacity='0.25'/%3E%3Ccircle id='front' class='cls-2' cx='4' cy='4' r='3' fill='%23fff'/%3E%3C/svg%3E");
+		box-shadow: none;
+		@include h.transition(background-color border-color background-position box-shadow, 0.25s, cubic-bezier(0.47, 1.64, 0.41, 0.8));
+
+		&:focus {
+			box-shadow: 0 0 0 0.25rem rgba(h.$ga-brand-light, 50%);
+		}
+
+		&:checked {
+			background-color: h.$success;
+			border-color: h.$success;
+			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4.5' r='3' opacity='0.25'/%3E%3Ccircle id='front' class='cls-2' cx='4' cy='4' r='3' fill='%23fff'/%3E%3C/svg%3E");
+		}
+
+		&:active {
+			filter: none;
+		}
+	}
+
+	// Position
+	&.switch-end {
+		flex-direction: row-reverse;
+		justify-content: flex-end;
+	}
+
+	// Icon
+
+	&.switch-icon {
+		.form-check-input {
+			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4.5' r='3' opacity='0.25'/%3E%3Ccircle cx='4' cy='4' r='3' fill='%23ffffff'/%3E%3Cpath fill='%23767676' d='M3.1,2.45c-.21,0-.39.17-.39.39v2.32c0,.21.17.39.39.39h.26c.21,0,.39-.17.39-.39v-2.32c0-.21-.17-.39-.39-.39h-.26ZM4.64,2.45c-.21,0-.39.17-.39.39v2.32c0,.21.17.39.39.39h.26c.21,0,.39-.17.39-.39v-2.32c0-.21-.17-.39-.39-.39h-.26Z'/%3E%3C/svg%3E");
+
+			&:checked {
+				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle class='cls-1' cx='4' cy='4.5' r='3' opacity='0.25'/%3E%3Ccircle class='cls-3' cx='4' cy='4' r='3' fill='%23ffffff'/%3E%3Cpath fill='%235bbb84' d='M3.3,2.25c-.12-.07-.27-.08-.39,0-.12.07-.2.2-.2.34v2.84c0,.14.08.27.2.34.12.07.27.07.39,0l2.32-1.42c.12-.07.19-.19.19-.33s-.07-.26-.19-.33l-2.32-1.42Z'/%3E%3C/svg%3E");
+			}
+		}
+	}
+
+	// Sizes
+	&.form-switch-xs {
+		.form-check-input {
+			width: 2.5rem;
+			height: 1.5rem;
+		}
+		.form-check-label {
+			font-size: 0.875rem;
+		}
+	}
+
+	&.form-switch-lg {
+		.form-check-input {
+			width: 4.5rem;
+			height: 2.5rem;
+		}
+
+		.form-check-label {
+			font-size: 1.25rem;
+		}
+	}
+}