groovinads-ui 1.0.0

package/src/scss/components/_checks.scss

@@ -0,0 +1,105 @@
+// Use
+@use '../abstracts/helpers' as h;
+
+.form-check {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	padding: 0;
+	margin: 0;
+	min-height: unset;
+
+	label {
+		&.checkbox {
+			font-size: 0.875rem;
+			cursor: pointer;
+			margin: 0;
+			position: relative;
+			width: 100%;
+			display: flex;
+			align-items: center;
+			gap: 0.5rem;
+
+			input {
+				width: 100%;
+				height: 100%;
+				opacity: 0;
+				position: absolute;
+				top: 0;
+				left: 0;
+				margin: 0;
+				float: none;
+				cursor: pointer;
+				z-index: 2;
+
+				&:checked {
+					& + .outer {
+						background-color: h.$ga-brand-midtone;
+						border-color: h.$ga-brand-midtone;
+
+						.inner {
+							&::before {
+								width: 0.375rem;
+							}
+							&::after {
+								width: 0.625rem;
+							}
+						}
+					}
+				}
+			}
+
+			.outer {
+				width: 1.125rem;
+				height: 1.125rem;
+				display: block;
+				margin: 0;
+				border: 2px solid h.$grey-dark;
+				background-color: h.$white;
+				border-radius: h.$border-radius-xs;
+				position: relative;
+				@include h.transition(background-color border-color, 0.15s, ease-in);
+			}
+
+			.inner {
+				width: 1rem;
+				height: 1rem;
+				position: relative;
+				margin: 0;
+				padding: 0;
+				overflow: hidden;
+				display: block;
+
+				&::before,
+				&::after {
+					content: '';
+					width: 0px;
+					height: 0.1875rem;
+					position: absolute;
+					background-color: h.$white;
+					margin: 0;
+					padding: 0;
+					transform-origin: bottom left;
+					@include h.transition(all, 0.15s, ease-in);
+				}
+
+				&::before {
+					top: 0.3125rem;
+					left: 0.0625rem;
+					transform: rotate(42deg);
+				}
+				&::after {
+					top: 0.5625rem;
+					left: 0.375rem;
+					transform: rotate(-48deg);
+					transition-delay: 0.1s;
+				}
+			}
+		}
+
+		span {
+			color: h.$grey-dark;
+			@include h.font-family(h.$font-family-secondary, 0.875rem, h.$grey-dark, 400);
+		}
+	}
+}

package/src/scss/components/_dropdown-deck.scss

@@ -0,0 +1,115 @@
+// Use
+@use '../abstracts/helpers' as h;
+
+
+// Toggle button
+.dropdown-toggle {
+
+	// Icono Deck
+	#deckApps {
+		g {
+			@include h.transition(
+				transform,
+				0.15s,
+				cubic-bezier(0.22, 0.68, 0, 1.71)
+			);
+			transform-origin: 50% 50%;
+			transition-delay: 0.1s;
+
+			rect {
+				fill: h.$ga-brand-midtone;
+				transform-origin: 50% 50%;
+				@include h.transition(fill transform width height, 0.15s, ease-in);
+			}
+		}
+	}
+
+	&.show {
+		#deckApps {
+			g {
+				transform: rotate(45deg);
+
+				rect {
+					width: 3.2px;
+					height: 3.2px;
+
+					&:nth-child(1) {
+						transform: translateX(5.7px);
+					}
+
+					&:nth-child(2) {
+						width: 12.8px;
+					}
+
+					&:nth-child(3) {
+						transform: translateY(-5.7px);
+					}
+
+					&:nth-child(4) {
+						height: 12.8px;
+					}
+
+					&:nth-child(7) {
+						transform: translateY(5.7px);
+					}
+
+					&:nth-child(9) {
+						transform: translateX(-5.7px);
+					}
+				}
+			}
+		}
+	}
+}
+
+.dropdown {
+	// Dropdown menu
+	.dropdown-menu {
+		overflow-y: scroll;
+		scrollbar-width: thin;
+
+		.dropdown-item {
+			display: flex;
+			justify-content: space-between;
+			flex-direction: row;
+
+			.link-app {
+				display: flex;
+				flex-direction: row;
+				align-items: center;
+				gap: 1rem;
+				margin-right: 1rem;
+
+				// Icono de la aplicación
+				.icon-app {
+					width: 2rem;
+					height: 2rem;
+					border-radius: h.$border-radius-sm;
+					background-color: h.$secondary-blue-light;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					@include h.transition(background-color, 0.15s, ease-in-out);
+
+					i {
+						color: h.$white;
+					}
+				}
+			}
+
+			// Icono de favoritos
+			.deck-fav {
+				color: h.$grey-light;
+				font-size: 1rem;
+				border: 0;
+				background-color: transparent;
+				transform-origin: center;
+				@include h.transition(color, 0.15s, ease-in-out);
+
+				.fa-solid {
+					color: h.$warning;
+				}
+			}
+		}
+	}
+}

package/src/scss/components/_dropdowns.scss

@@ -0,0 +1,131 @@
+// Use
+@use '../abstracts/helpers' as h;
+
+@forward '../animations/showMenu';
+
+.dropdown,
+.dropup {
+	@include h.font-family(h.$font-family-secondary, 1rem, h.$grey-dark, 400);
+
+	// Toggle
+	.dropdown-toggle {
+		&::after {
+			display: none;
+		}
+
+		.caret {
+			@include h.transition(transform, 0.15s, ease-in-out);
+		}
+
+		&.show {
+			.caret {
+				transform: rotate(180deg);
+			}
+		}
+	}
+
+	// Menu
+	.dropdown-menu {
+		@include h.shadow(2, h.$ga-brand-dark, y);
+		overflow-y: auto;
+		border: none;
+		border-radius: h.$border-radius-sm;
+		animation: showMenu 300ms ease-in-out both;
+
+		// Header
+		.dropdown-header {
+			color: h.$grey-dark;
+			font-size: 0.75rem;
+		}
+
+		// Item
+		.dropdown-item {
+			color: h.$secondary-dark;
+			@include h.transition(color background-color, 0.15s, ease-in-out);
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			cursor: pointer;
+			width: 100%;
+			@include h.simpleEllipsisText;
+			padding: 0.5rem 1rem;
+			position: relative;
+			line-height: 1.2;
+			justify-content: flex-start;
+
+			&:hover {
+				background-color: lighten(h.$ga-brand-midtone, 50%);
+
+				.icon-app {
+					background-color: h.$ga-brand-midtone;
+				}
+			}
+
+			&.active,
+			&:active {
+				background-color: h.$ga-brand-light;
+				color: h.$white;
+
+				.icon-app {
+					background-color: h.$white;
+
+					.icon {
+						color: h.$ga-brand-light;
+
+						path {
+							fill: h.$ga-brand-light;
+						}
+					}
+
+					i {
+						color: h.$ga-brand-light;
+					}
+				}
+				> i {
+					color: h.$white;
+				}
+
+				> a {
+					color: h.$white;
+
+					i {
+						color: h.$white;
+					}
+				}
+			}
+
+			&:has(.btn, input) {
+				overflow: visible;
+
+				&:hover,
+				&:active {
+					background-color: h.$white;
+				}
+			}
+
+			a {
+				display: flex;
+				flex-direction: row;
+				justify-content: flex-start;
+				gap: 1rem;
+				color: h.$secondary-dark;
+
+				i {
+					color: h.$ga-brand-midtone;
+				}
+			}
+		}
+
+		.dropdown-checks {
+			list-style: none;
+			padding: 0;
+			display: flex;
+			gap: 0.5rem;
+			flex-direction: column;
+			max-height: 14vh;
+			overflow: scroll;
+			width: 100%;
+			margin: 0;
+		}
+	}
+}

package/src/scss/components/_img-404.scss

@@ -0,0 +1,6 @@
+.img-404 {
+	max-width: 402px;
+	width: 100%;
+	height: auto;
+	margin-bottom: 2rem;
+}

package/src/scss/components/_inputs.scss

@@ -0,0 +1,279 @@
+// Use
+@use '../abstracts/helpers' as h;
+
+// Forward
+@forward '../animations/inputUp';
+
+$label: scale(1) translateY(0) translateX(0) 1em 0.75em;
+$label-xs: scale(1) translateY(0) translateX(0) 0.75em 0.75em;
+$label-lg: scale(1) translateY(0) translateX(0) 1em 0.75em;
+$label-focus: scale(0.85) translateY(-0.6em) translateX(0) 0 0.75em;
+$label-focus-input: scale(0.85) translateY(-0.6em) translateX(0) 0 0.75em;
+
+// Floating label
+.form-floating {
+	position: unset;
+
+	& > .form-control {
+		font-size: 1rem;
+		border-color: h.$grey-dark;
+		color: h.$grey-dark;
+		border-radius: h.$border-radius-sm;
+		height: 3em;
+		min-height: unset;
+		padding: 1em 0.75em;
+		line-height: 1.2;
+		@include h.transition(box-shadow color, 0.1s, ease-out);
+
+		// Focus
+		&:focus,
+		&.focus {
+			border-color: h.$secondary-violet;
+			box-shadow: 0 0 0 2px h.$secondary-violet;
+			padding-top: 0.625em;
+			color: h.$ga-brand-dark;
+
+			& ~ label {
+				color: h.$secondary-violet;
+				@include h.setLabelTo($label-focus);
+			}
+
+			&:not(:placeholder-shown) ~ label {
+				color: h.$secondary-violet;
+				@include h.setLabelTo($label-focus);
+			}
+		}
+
+ 		&:not(:placeholder-shown) {
+			padding-top: 0.625em;
+
+			& ~ label {
+				color: h.$grey-dark;
+				@include h.setLabelTo($label-focus);
+			}
+		}
+
+		&:disabled,
+		:disabled {
+			background-color: h.$white;
+			color: rgba(h.$grey-dark, 0.5);
+			pointer-events: none;
+		}
+
+		& ~ label {
+			background-color: transparent;
+			width: auto;
+			max-width: 100%;
+			height: auto;
+			line-height: 1;
+			text-shadow: h.commonTextShadow(h.$white);
+			@include h.transition(opacity transform color padding, 0.2s, cubic-bezier(0, 0, 0.2, 1));
+			@include h.font-family(h.$font-family-secondary, 1em, h.$grey-dark, 400);
+			@include h.setLabelTo($label);
+		}
+
+		// Sizes
+		&.form-control-xs {
+			font-size: 0.875rem;
+			line-height: 1em;
+			padding: 0.75em 1.375em;
+			height: 2.375rem;
+			border-radius: h.$border-radius-xs;
+
+			& ~ label {
+				font-size: 0.875rem;
+				@include h.setLabelTo($label-xs);
+			}
+
+			&:focus,
+			&.focus,
+			&:not(:placeholder-shown) {
+				& ~ label {
+					@include h.setLabelTo($label-focus);
+				}
+			}
+		}
+
+		&.form-control-lg {
+			font-size: 1.25rem;
+			line-height: 1em;
+			height: 3.75rem;
+			border-radius: h.$border-radius-md;
+
+			& ~ label {
+				font-size: 1.25rem;
+				@include h.setLabelTo($label-lg);
+			}
+
+			&:focus,
+			&.focus,
+			&:not(:placeholder-shown) {
+				& ~ label {
+					@include h.setLabelTo($label-focus);
+				}
+			}
+		}
+	}
+
+}
+
+// Input group
+.input-group {
+	border-radius: h.$border-radius-sm;
+	@include h.transition(box-shadow color, 0.1s, ease-out);
+
+    .input-group-text {
+		font-size: 0.875rem;
+		padding: 1em 0.75em;
+		height: 3rem;
+        background-color: h.$white;
+        border-color: h.$grey-dark;
+        color: h.$grey-dark;
+        border-radius: h.$border-radius-sm;
+
+		i {
+			font-size: 1rem;
+		}
+
+        // If it's preffixed
+        & + .form-floating {
+            .form-control {
+                border-left: none;
+            }
+        }
+
+		// If it's preffiexed & has icon
+        & + .input-group-text {
+            border-left: none;
+        }
+    }
+
+    .form-floating {
+
+		// If it's suffixed
+		&:not(:last-child) {
+			> .form-control {
+				border-right: none;
+			}
+		}
+
+		& > .form-control {
+			// Focus
+			&:focus,
+			&.focus {
+				box-shadow: none;
+
+				& ~ label {
+					@include h.setLabelTo($label-focus-input);
+				}
+			}
+		}
+
+		// If it's suffixed & icon label final position
+		&:has(.form-control:focus, .form-control.focus, .form-control:not(:placeholder-shown)) {
+			position: unset;
+		}
+    }
+
+	// Focus
+	&:has(.form-control:focus, .form-control.focus, .form-control:active) {
+		box-shadow: 0 0 0 2px h.$secondary-violet;
+
+		.input-group-text {
+			color: h.$secondary-violet;
+		}
+	}
+
+	&:has(.form-control-xs) {
+		.input-group-text {
+			font-size: 0.75rem;
+			height: 2.375rem;
+		}
+	}
+
+	&:has(.form-control-lg) {
+		.input-group-text {
+			height: 3.75rem;
+		}
+	}
+}
+
+// Error
+.not-validated {
+
+	.form-control {
+		border-color: h.$error;
+		padding-right: calc(1.5em + 0.75rem);
+		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
+		background-repeat: no-repeat;
+		background-position: right calc(0.375em + 0.1875rem) center;
+		background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
+		background-color: lighten(h.$error, 40%);
+		border-top-right-radius: 0;
+
+		&:focus,
+		&.focus {
+			border-color: h.$error;
+			box-shadow: 0 0 0 0.25rem rgba(h.$error, 0.25);
+
+			& ~ label {
+				color: h.$error;
+			}
+
+			&:not(:placeholder-shown) {
+				& ~ label {
+					color: h.$error;
+				}
+			}
+		}
+
+		& ~ label {
+			color: h.$error;
+		}
+
+		&:not(:placeholder-shown) {
+			& ~ label {
+				color: h.$error;
+			}
+		}
+
+	}
+
+	&.input-group {
+		border-top-right-radius: 0;
+
+		.form-control,
+		.input-group-text {
+			border-top-right-radius: 0;
+		}
+
+		.input-group-text {
+			background-color: lighten(h.$error, 40%);
+			color: h.$error;
+			border-color: h.$error;
+		}
+
+		&:has(.form-control:focus, .form-control.focus) {
+			border-color: h.$error;
+			box-shadow: 0 0 0 0.25rem rgba(h.$error, 0.25);
+
+			.input-group-text {
+				color: h.$error;
+			}
+		}
+	}
+
+	&::after {
+		content: attr(data-error);
+		position: absolute;
+		bottom: 100%;
+		right: 0;
+		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;
+	}
+}

package/src/scss/components/_login-source.scss

@@ -0,0 +1,19 @@
+// Logo class name
+$logo-types: google, microsoft, linkedin;
+
+// Logo size
+$logo-size: 24px;
+
+.login-source {
+	width: $logo-size;
+	height: 24px;
+	background-image: url('../../../public/imgs/logos-login.svg');
+	background-size: #{(length($logo-types) + 1)* $logo-size} $logo-size;
+
+	// Loop through the logo types
+	@for $i from 1 through length($logo-types) {
+		&.#{nth($logo-types, $i)} {
+			background-position: -($logo-size * $i) 0;
+		}
+	}
+}