groovinads-ui 1.0.0

package/src/scss/components/_tabulator.scss

@@ -0,0 +1,386 @@
+// Use
+@use '../abstracts/helpers' as h;
+
+// Forward
+@forward '../animations/inputUp';
+@forward '../components/shadows';
+@forward '../components/buttons';
+
+.tabulator {
+	@include h.font-family(h.$font-family-secondary, 1rem, h.$grey-dark, 400);
+	background-color: h.$white;
+	border-radius: h.$border-radius-sm;
+	margin-bottom: 0;
+	border: none;
+	@extend .shadow-1;
+
+	// Header
+	.tabulator-header {
+		text-transform: uppercase;
+		font-size: 0.75rem;
+		letter-spacing: 1.25px;
+		color: h.$grey-dark;
+		border-bottom-color: rgba(h.$ga-brand-dark, 20%);
+		border-top-left-radius: h.$border-radius-sm;
+		border-top-right-radius: h.$border-radius-sm;
+
+		.tabulator-frozen {
+			&.tabulator-frozen {
+				border: none;
+			}
+		}
+
+		.tabulator-col {
+			padding: 0;
+			border-right: 0;
+
+			&.tabulator-sortable {
+				.tabulator-col-content {
+					.tabulator-col-sorter {
+						.tabulator-arrow {
+							color: h.$grey-dark;
+							border: none;
+							position: relative;
+							width: 1em;
+							height: 1em;
+							border: none;
+
+							&::before {
+								content: '\f063';
+								font-family: h.$font-family-icon;
+								width: 1em;
+								height: 1em;
+								display: inline-block;
+								transform-origin: 50% 50%;
+								text-align: center;
+								@include h.transition(transform color, 0.15s, ease-in-out);
+							}
+						}
+					}
+				}
+
+				&[aria-sort='none'] {
+					.tabulator-col-content {
+						.tabulator-col-sorter {
+							.tabulator-arrow {
+								border: none;
+
+								&::before {
+									color: transparent;
+								}
+							}
+						}
+					}
+				}
+
+				&[aria-sort='asc'] {
+					.tabulator-col-content {
+						.tabulator-col-sorter {
+							.tabulator-arrow {
+								border: none;
+
+								&::before {
+									transform: rotate(180deg);
+								}
+							}
+						}
+					}
+				}
+
+				&[aria-sort='desc'] {
+					.tabulator-col-content {
+						.tabulator-col-sorter {
+							.tabulator-arrow {
+								border: none;
+
+								&::before {
+									transform: rotate(0deg);
+								}
+							}
+						}
+					}
+				}
+
+				&:hover {
+					background-color: transparent;
+
+					.tabulator-col-content {
+						.tabulator-col-sorter {
+							.tabulator-arrow {
+								&::before {
+									color: h.$grey-dark;
+								}
+							}
+						}
+					}
+				}
+			}
+
+			.tabulator-col-content {
+				padding: 1rem;
+				line-height: 1;
+				position: relative;
+
+				&::after {
+					content: '';
+					clear: both;
+					display: block;
+					position: absolute;
+					top: 1rem;
+					right: 0;
+					width: 1px;
+					min-height: 1em;
+					background-color: currentcolor;
+				}
+
+				&:has(.form-check) {
+					padding: 0.6rem 0.75rem;
+				}
+			}
+
+			&:last-child {
+				.tabulator-col-content {
+					&::after {
+						display: none;
+					}
+				}
+			}
+		}
+	}
+
+	// Body
+	.tabulator-tableholder {
+		overflow: auto;
+		height: calc(100% - 39px);
+		max-height: calc(100% - 39px);
+		border-bottom-left-radius: h.$border-radius-sm;
+		border-bottom-right-radius: h.$border-radius-sm;
+
+		.tabulator-table {
+			min-width: 100%;
+
+			.tabulator-row {
+				color: h.$secondary-dark;
+				border-color: rgba(h.$ga-brand-dark, 20%);
+
+				&.tabulator-row-odd {
+					background-color: h.$grey-light;
+
+					.tabulator-cell {
+						color: h.$secondary-dark;
+					}
+				}
+
+				&:hover {
+					background-color: rgba(h.$ga-brand-dark, 20%);
+				}
+
+				.tabulator-cell {
+					padding: 0.5rem 1rem;
+					border-right: none;
+					line-height: 2rem;
+					display: inline-block !important;
+
+					img {
+						width: auto;
+						height: 48px;
+						border-radius: h.$border-radius-xs;
+					}
+
+					&:has(.formatterCell) {
+						padding: 0.3125rem 1rem;
+					}
+
+					&.tabulator-editing {
+						border: none;
+					}
+
+					&.tabulator-frozen {
+						&.tabulator-frozen-left {
+							border-right: 2px solid rgba(h.$ga-brand-dark, 20%);
+						}
+
+						&.tabulator-frozen-right {
+							border-left: 2px solid rgba(h.$ga-brand-dark, 20%);
+						}
+					}
+
+					&:has(.dropdown) {
+						overflow: visible;
+					}
+
+					.tabulator-row-handle-box {
+						width: 1rem;
+						height: 1rem;
+					}
+
+					input {
+						&[type='text'],
+						&[type='number'] {
+							border-color: h.$grey-dark;
+							border-radius: h.$border-radius-sm;
+							height: 100%;
+							background-color: h.$white;
+
+							&:focus {
+								border-color: h.$secondary-violet;
+								box-shadow: 0 0 0 2px h.$secondary-violet;
+								color: h.$ga-brand-dark;
+								outline: none;
+							}
+						}
+					}
+
+					.formatterCell {
+						display: inline-flex;
+						width: 100%;
+						height: 100%;
+						justify-content: center;
+						align-items: center;
+					}
+				}
+
+				&.tabulator-selected {
+					background-color: rgba(h.$ga-brand-dark, 20%);
+				}
+
+				&:last-of-type {
+					border-bottom: 0;
+				}
+			}
+		}
+	}
+
+	// Footer
+	.tabulator-footer {
+		display: flex;
+		justify-content: center;
+		padding: 0.5rem;
+
+		.tabulator-paginator {
+			display: flex;
+			gap: 0.5rem;
+			align-items: center;
+
+			.tabulator-page {
+				@extend #{'.btn','.btn-terciary', '.btn-xs'};
+				margin: 0;
+				line-height: 1;
+				height: auto;
+			}
+
+			.tabulator-pages {
+				display: flex;
+				margin: 0;
+				gap: 0.25rem;
+
+				.tabulator-page {
+					&.active {
+						background-color: h.$ga-brand-midtone;
+						color: h.$white;
+					}
+				}
+			}
+		}
+	}
+
+	&:has(.tabulator-footer) {
+		.tabulator-tableholder {
+			border-bottom-left-radius: 0;
+			border-bottom-right-radius: 0;
+		}
+	}
+}
+
+.not-validated {
+	.tabulator {
+		border: 1px solid h.$error;
+		overflow: visible;
+		border-top-right-radius: 0;
+		@include h.shadow(1, h.$error, y);
+
+		.tabulator-header {
+			border-bottom-color: h.$error;
+			border-top-right-radius: 0;
+
+			.tabulator-col-title {
+				color: h.$error;
+			}
+			.tabulator-col {
+				background-color: lighten(h.$error, 40%);
+
+				.tabulator-col-content {
+					&::after {
+						background-color: h.$error;
+					}
+				}
+
+				&.tabulator-sortable {
+					&:hover {
+						background-color: lighten(h.$error, 40%);
+					}
+				}
+
+				&.tabulator-sortable[aria-sort=asc],
+				&.tabulator-sortable[aria-sort=desc] {
+					.tabulator-col-content {
+						.tabulator-col-sorter {
+							.tabulator-arrow {
+								color: h.$error;
+								&::before {
+									color: h.$error;
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+
+		.tabulator-tableholder {
+			.tabulator-table {
+				.tabulator-row {
+					color: h.$error;
+					border-color: h.$error;
+
+					&.tabulator-row-odd {
+						background-color: h.$grey-light;
+						background-color: lighten(h.$error, 35%);
+
+						.tabulator-cell {
+							color: h.$error;
+						}
+					}
+
+					&:hover {
+						background-color: lighten(h.$error, 25%);
+					}
+				}
+			}
+		}
+
+		.form-check {
+			.outer {
+				border-color: h.$error;
+			}
+		}
+
+		&::after {
+			content: attr(data-error);
+			position: absolute;
+			bottom: 100%;
+			right: -1px;
+			padding: 0.125rem 0.5rem;
+			font-size: 0.618rem;
+			line-height: 1;
+			color: h.$white;
+			background-color: h.$error;
+			border-radius: h.$border-radius-xs h.$border-radius-xs 0 0;
+			animation: inputUp .2s ease-out both;
+		}
+
+		[class^='fa-'] {
+			color: h.$error !important;
+		}
+	}
+}

package/src/scss/components/_textareas.scss

@@ -0,0 +1,22 @@
+// Use
+@use '../abstracts/helpers' as h;
+
+.form-floating {
+	position: unset;
+
+	& > textarea.form-control {
+		resize: none;
+		height: 6rem;
+
+		// Sizes
+		&.form-control-xs {
+			height: 4rem;
+		}
+
+		&.form-control-lg {
+			height: 8rem;
+		}
+	}
+}
+
+

package/src/scss/components/_toast.scss

@@ -0,0 +1,129 @@
+// Use
+@use '../abstracts/helpers' as h;
+
+// Forward
+@forward '../animations/toastFromLeft';
+@forward '../animations/toastFromRight';
+
+.toast-container {
+	padding: 2rem 1rem;
+	overflow: hidden;
+	margin-top: 4rem;
+	position: fixed;
+
+	.toast {
+		color: h.$secondary-blue;
+		border: none;
+		background-color: rgba(h.$white, 0.85);
+		backdrop-filter: blur(12px);
+
+		&.bottom-start,
+		&.top-start {
+			animation: toastFromLeft 0.35s cubic-bezier(0.21, 1.02, 0.73, 1);
+		}
+
+		&.bottom-end,
+		&.top-end {
+			animation: toastFromRight 0.35s cubic-bezier(0.21, 1.02, 0.73, 1);
+		}
+
+		&.info {
+			.icon {
+				color: h.$secondary-blue-light;
+			}
+		}
+
+		&.warning {
+			.icon {
+				color: h.$warning;
+			}
+		}
+
+		&.success {
+			.icon {
+				color: h.$success;
+			}
+		}
+
+		&.error {
+			.icon {
+				color: h.$error;
+			}
+		}
+
+		.toast-body {
+			display: flex;
+			position: relative;
+			flex-direction: row;
+			gap: 1rem;
+			align-items: center;
+			justify-content: space-between;
+			padding: 1rem;
+			border-radius: h.$border-radius-sm;
+			overflow: hidden;
+
+			i {
+				width: 1rem;
+				height: 1rem;
+				line-height: 1rem;
+			}
+
+			p {
+				margin-bottom: 0;
+				line-height: 1rem;
+				@include h.font-family(h.$font-family-secondary, 1rem, h.$secondary-blue, 400);
+			}
+
+			.toast-wrapper {
+				display: flex;
+				flex-direction: row;
+				gap: 1rem;
+				align-items: center;
+			}
+
+			.btn-close {
+				background: none;
+				opacity: 1;
+				display: flex;
+			}
+
+			// Progress bar
+			.progress {
+				position: absolute;
+				width: 100%;
+				height: 0.375rem;
+				top: 0;
+				left: 0;
+				border-radius: 0;
+				background-color: rgba(h.$secondary-dark, 5%);
+
+				.progress-bar {
+					background-color: h.$ga-brand-light;
+				}
+			}
+
+			.uploading-wrapper {
+				display: flex;
+				flex-direction: row;
+				gap: 1rem;
+				min-height: 2.375rem;
+				align-items: center;
+
+				.fa-spin {
+					color: h.$ga-brand-light;
+					font-size: 1rem;
+					animation-duration: h.$spinner-duration;
+				}
+
+				.fa-circle-check {
+					color: h.$success;
+				}
+
+				.progress-percentage {
+					color: h.$secondary-dark;
+					font-weight: 700;
+				}
+			}
+		}
+	}
+}

package/src/scss/custom/_campaign-id.scss

@@ -0,0 +1,56 @@
+// Use
+@use '../abstracts/helpers' as h;
+
+// Forward
+@forward '../animations/fadeCopyFromLeft';
+
+
+.campaign-id {
+	padding: 0.1em 0.2em;
+	border-radius: h.$border-radius-xs;
+	position: relative;
+	display: flex;
+	justify-content: center;
+	color: h.$grey-dark;
+	cursor: pointer;
+	@include h.transition(color background-color, 0.1s, ease-in-out);
+
+	&:hover {
+		background-color: rgba(h.$ga-brand-dark, 0.1);
+		color: h.$secondary-dark;
+
+		&::after {
+			content: attr(data-copy);
+			font-weight: 700;
+			font-size: 0.7rem;
+			position: absolute;
+			top: 50%;
+			text-align: center;
+			display: inline-block;
+			white-space: nowrap;
+			background-color: rgba(h.$secondary-dark, 0.8);
+			color: h.$white;
+			padding: 0.1em 0.5em;
+			line-height: 1.618em;
+			border-radius: h.$border-radius-xs;
+			animation: fadeCopyFromLeft 0.2s ease-out forwards;
+			@include h.shadow(1, h.$secondary-dark, y);
+		}
+	}
+
+	&.copied {
+		&::after {
+			color: h.$safeSuccess;
+			background-color: h.$success-bg;
+			@include h.transition(background-color color width, 0.1s, ease);
+		}
+	}
+
+	&.error {
+		&::after {
+			color: h.$white;
+			background-color: h.$error;
+			@include h.transition(background-color color width, 0.1s, ease);
+		}
+	}
+}

package/src/scss/custom/_img-not-found.scss

@@ -0,0 +1,7 @@
+img {
+	&.not-found {
+		max-width: 250px;
+		width: 100%;
+		height: auto;
+	}
+}

package/src/scss/custom/_modal-edit.scss

@@ -0,0 +1,10 @@
+// Use
+@use '../abstracts/helpers' as h;
+
+.id {
+	margin-bottom: 0.5rem;
+
+	h4 {
+		color: h.$grey-dark;
+	}
+}

package/src/scss/index.scss

@@ -0,0 +1,9 @@
+// Abstracts
+@use 'abstracts/helpers';
+
+// Base
+@use 'base/base';
+@use 'base/typography';
+
+// Import Bootstrap and its default variables
+//@use '~bootstrap/scss/bootstrap';

package/src/scss/layout/_aurora.scss

@@ -0,0 +1,39 @@
+// Use
+@use '../abstracts/helpers' as h;
+
+// Forward
+@forward '../animations/aurora';
+
+.aurora {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	top: 0;
+
+	&.outer {
+		background: linear-gradient(
+			30deg,
+			lighten(h.$ga-brand-light, 30%) 0%,
+			lighten(h.$secondary-violet, 30%) 50%,
+			lighten(h.$secondary-blue, 30%) 100%
+		);
+		background-size: 200%;
+
+		@include h.respond-to(h.$md) {
+			animation: aurora 7s infinite;
+		}
+	}
+
+	&.inner {
+		background: radial-gradient(rgba(h.$white, 0), rgba(h.$white, 0.15));
+		background-size: 200%;
+
+		@include h.respond-to(h.$md) {
+			animation: aurora 5s infinite;
+		}
+	}
+
+	&.overlay {
+		background: linear-gradient(180deg, h.$white 0%, transparent 30%);
+	}
+}

package/src/scss/layout/_authentication.scss

@@ -0,0 +1,65 @@
+// Use
+@use '../abstracts/helpers' as h;
+
+// Forward
+@forward 'aurora';
+@forward '../animations/shake';
+@forward '../animations/showIn';
+
+.authentication {
+	text-align: center;
+	display: flex;
+	align-items: center;
+	height: 100vh;
+
+	.sign-in {
+		width: 100%;
+		max-width: 90vw;
+
+		@include h.respond-to(h.$md){
+			max-width: 400px;
+		}
+
+		padding: 2rem;
+		margin: auto;
+		border-radius: h.$border-radius-md;
+		background-color: h.$white;
+		box-shadow: 0 14px 28px rgba(h.$ga-brand-midtone,0.25), 0 10px 10px rgba(h.$ga-brand-light,0.22);
+		z-index: 1;
+
+		.login-header {
+			display: flex;
+			width: 100%;
+			justify-content: space-around;
+			margin-bottom: 2rem;
+
+			.ga-logo {
+				max-width: 163px;
+				width: 100%;
+				height: auto;
+			}
+		}
+
+		.login-body {
+			text-align: left;
+
+			h3 {
+				margin-bottom: 2rem;
+			}
+		}
+
+		&.shake {
+			animation: shakeIt 0.82s cubic-bezier(.36,.07,.19,.97) both;
+		}
+
+		.processing {
+			display: flex;
+			justify-content: center;
+			gap: 1rem;
+		}
+	}
+
+	.showIn {
+		animation: showIn 0.25s ease-in;
+	}
+}