groovinads-ui 1.0.0

package/src/scss/components/_buttons.scss

@@ -0,0 +1,808 @@
+// Use
+@use '../abstracts/helpers' as h;
+
+.btn {
+	@include h.font-family(h.$font-family-secondary, 1rem, h.$white, 700);
+	line-height: 1rem;
+	background-color: h.$ga-brand-midtone;
+	border-color: transparent;
+	color: h.$white;
+	padding: 1em 1.5em;
+	@include h.transition(
+		color background-color box-shadow transform border-color,
+		0.15s,
+		ease-in-out
+	);
+	box-shadow: 0px 0px 0px rgba(h.$ga-brand-midtone, 35%);
+	transform: translateY(0);
+	display: flex;
+	flex-direction: row;
+	width: 100%;
+	align-items: center;
+	justify-content: center;
+	border-radius: h.$border-radius-sm;
+	gap: 0.5rem;
+	height: 3rem;
+	white-space: nowrap;
+
+	@include h.respond-to(h.$md) {
+		width: auto;
+	}
+
+	&:hover {
+		background-color: h.$ga-brand-midtone;
+		border-color: h.$ga-brand-midtone;
+		box-shadow: 0px 6px 16px rgba(h.$ga-brand-midtone, 35%);
+		transform: translateY(-0.146rem);
+		color: h.$white;
+	}
+
+	&:active,
+	&:first-child:active {
+		color: h.$white !important;
+		background-color: h.$ga-brand-midtone !important;
+		border-color: h.$ga-brand-midtone !important;
+	}
+
+	&:not(:has(span)) {
+		padding: 1em;
+		width: auto;
+	}
+
+	i,
+	.icon {
+		width: 1em;
+		height: 1em;
+	}
+
+	span,
+	i {
+		@include h.transition(color, 0.15s, ease-in-out);
+	}
+
+	// VARIANTS
+
+	// Secondary
+	&.btn-secondary {
+		background-color: lighten(h.$ga-brand-midtone, 50%);
+		border-color: lighten(h.$ga-brand-midtone, 50%);
+		color: h.$ga-brand-midtone;
+
+		&:hover {
+			transform: translate(0);
+			box-shadow: none;
+			border-color: h.$ga-brand-midtone;
+			background-color: h.$ga-brand-midtone;
+			color: h.$white;
+		}
+	}
+
+	// Terciary
+	&.btn-terciary {
+		background-color: transparent;
+		border-color: transparent;
+		color: h.$ga-brand-midtone;
+
+		.icon {
+			path {
+				fill: h.$ga-brand-midtone;
+			}
+
+			&.caret {
+				path {
+					fill: h.$ga-brand-midtone;
+				}
+			}
+		}
+
+		&:hover,
+		&:active,
+		&.show {
+			transform: translate(0);
+			box-shadow: none;
+			border-color: rgba(h.$ga-brand-dark, 5%);
+			background-color: rgba(h.$ga-brand-dark, 10%) !important;
+			color: h.$ga-brand-midtone !important;
+
+			span {
+				color: h.$ga-brand-midtone;
+			}
+
+			.icon {
+				path {
+					fill: h.$ga-brand-midtone;
+				}
+			}
+		}
+
+		&:focus {
+			box-shadow: 0 0 0 0.25rem rgba(h.$ga-brand-dark, 0.5);
+		}
+
+		&.danger {
+			color: h.$error;
+
+			i,
+			span {
+				color: h.$error;
+			}
+
+			&:hover,
+			&:active {
+				color: h.$error !important;
+				border-color: lighten(h.$error, 40%) !important;
+				background-color: lighten(h.$error, 40%) !important;
+
+				i,
+				span {
+					color: h.$error;
+				}
+			}
+		}
+	}
+
+	// Outline
+	&.btn-outline {
+		background-color: transparent;
+		border: 1px solid h.$ga-brand-midtone;
+		color: h.$ga-brand-midtone;
+
+		i,
+		span,
+		.icon {
+			color: h.$ga-brand-midtone;
+
+			path {
+				fill: h.$ga-brand-midtone;
+			}
+		}
+
+		&:hover {
+			transform: translate(0);
+			box-shadow: none;
+			border-color: h.$ga-brand-midtone;
+			background-color: lighten(h.$ga-brand-midtone, 50%);
+			color: h.$ga-brand-midtone;
+
+			i,
+			span,
+			.icon {
+				color: h.$ga-brand-midtone;
+
+				path {
+					fill: h.$ga-brand-midtone
+				}
+			}
+		}
+
+		&:active,
+		&.show {
+			border-color: h.$ga-brand-midtone !important;
+			background-color: h.$ga-brand-midtone !important;
+			color: h.$white !important;
+
+			i,
+			span,
+			.icon {
+				color: h.$white;
+
+				path {
+					fill: h.$white;
+				}
+			}
+		}
+
+		&.grey {
+			border-color: h.$grey-dark;
+
+			i,
+			span,
+			.icon {
+				color: h.$grey-dark;
+
+				path {
+					fill: h.$grey-dark;
+				}
+			}
+
+			&:hover,
+			&:active {
+				color: h.$white !important;
+				border-color: h.$ga-brand-midtone !important;
+
+				i,
+				span,
+				.icon {
+					color: h.$white;
+
+					path {
+						fill: h.$white;
+					}
+				}
+
+				&:hover {
+					background-color: h.$ga-brand-midtone;
+					border-color: h.$ga-brand-midtone;
+					color: h.$white;
+				}
+			}
+
+			&.show {
+				border-color: h.$ga-brand-midtone;
+
+				i,
+				span,
+				.icon {
+					color: h.$white;
+
+					path {
+						fill: h.$white;
+					}
+				}
+			}
+
+			&:active {
+				color: h.$white !important;
+				border-color: h.$ga-brand-midtone !important;
+
+				i,
+				span,
+				.icon {
+					color: h.$white;
+				}
+			}
+		}
+	}
+
+	// oAuth
+	&.oauth {
+		width: 100%;
+		max-width: 300px;
+		justify-content: flex-start;
+		align-items: center;
+		margin-bottom: 1rem;
+		padding: 0.5rem 1.5rem;
+		height: inherit;
+
+		&.google {
+			background-color: h.$white;
+			border: 1px solid h.$grey-light;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			span {
+				color: h.$grey-dark;
+			}
+
+			&:hover {
+				background-color: h.$white;
+				border: 1px solid h.$grey-light;
+			}
+		}
+
+		&.linkedin {
+			background-color: h.$linkedin-brand;
+			border: 1px solid h.$linkedin-brand;
+
+			span {
+				color: h.$white;
+			}
+
+			&:hover {
+				background-color: h.$linkedin-brand;
+				border: 1px solid h.$linkedin-brand;
+			}
+		}
+
+        &.facebook {
+			background-color: h.$facebook-brand;
+			border: 1px solid h.$facebook-brand;
+
+			span {
+				color: h.$white;
+			}
+
+			&:hover {
+				background-color: h.$facebook-brand;
+				border: 1px solid h.$facebook-brand;
+			}
+		}
+
+		&.microsoft {
+			background-color: h.$white;
+			border: 1px solid h.$microsoft-border;
+
+			span {
+				color: h.$microsoft-font;
+			}
+
+			&:hover {
+				background-color: h.$white;
+				border: 1px solid h.$microsoft-border;
+			}
+		}
+
+		&.apple {
+			background-color: h.$black;
+			border: 1px solid h.$black;
+
+			span {
+				color: h.$white;
+			}
+
+			&:hover {
+				background-color: h.$black;
+				border: 1px solid h.$black;
+			}
+		}
+
+		.logo {
+			width: 1.5rem;
+			height: 1.5rem;
+			margin-right: 1rem;
+		}
+	}
+
+	// Input
+	&.btn-input {
+		background-color: h.$white;
+		border: 1px solid h.$grey-dark;
+		color: h.$grey-dark;
+		font-weight: 400;
+		justify-content: space-between;
+		align-items: flex-start;
+		min-height: 3rem;
+		height: auto;
+		padding: 1em 0.75em;
+
+		&:hover,
+		&:active {
+			transform: translate(0);
+			box-shadow: none;
+			background-color: h.$white !important;
+			color: h.$grey-dark !important;
+		}
+
+		.highlighted {
+			font-weight: 700;
+			color: h.$secondary-dark;
+		}
+
+		&.not-validated {
+			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%) !important;
+			border-top-right-radius: 0;
+
+			&:focus {
+				border-color: h.$error;
+				box-shadow: 0 0 0 0.25rem rgba(h.$error, 0.25);
+
+				& ~ .label {
+					color: h.$error;
+				}
+			}
+
+			& ~ .label {
+				color: h.$error;
+			}
+		}
+
+		.label {
+			@include h.transition(transform color top, 0.2s, cubic-bezier(0, 0, 0.2, 1));
+		}
+
+		.wrapper {
+			display: flex;
+			gap: 0.5rem;
+			flex-wrap: wrap;
+		}
+
+		&:has(.wrapper) {
+			.label {
+				position: absolute;
+				text-shadow: h.commonTextShadow(h.$white);
+				transform: scale(0.85)translateX(-0.5em);
+				top: -0.5em;
+			}
+		}
+
+		&.show {
+			border-color: h.$secondary-violet;
+			box-shadow: 0 0 0 2px h.$secondary-violet;
+
+			.label {
+				color: h.$secondary-violet;
+			}
+		}
+	}
+
+	// User
+	&:has(.avatar) {
+		padding: 0.375em;
+
+		.avatar {
+			border-radius: 100%;
+			overflow: hidden;
+			box-shadow: none;
+			@include h.transition(box-shadow, 0.15s, ease-in-out);
+
+			img {
+				width: 2.375em;
+				height: 2.375em;
+			}
+		}
+
+		span {
+			color: h.$grey-dark;
+			display: none;
+			max-width: 144px;
+
+			@include h.simpleEllipsisText;
+			@include h.transition(color, 0.15s, ease-in-out);
+			@include h.respond-to(h.$md) {
+				display: block;
+			}
+		}
+
+		&.show {
+			border-color: lighten(h.$ga-brand-midtone, 50%);
+			background-color: lighten(h.$ga-brand-midtone, 50%);
+
+			.avatar {
+				box-shadow: 0 0 0 3px h.$ga-brand-midtone;
+			}
+		}
+	}
+
+	// SIZES
+
+	// Small
+	&.btn-xs {
+		font-size: 0.875rem;
+		line-height: 1em;
+		padding: 0.75em 1.375em;
+		height: 2.375rem;
+		border-radius: h.$border-radius-xs;
+
+		&:not(:has(span)) {
+			padding: 0.75em;
+		}
+	}
+
+	// Large
+	&.btn-lg {
+		font-size: 1.25rem;
+		line-height: 1em;
+		padding: 1.25em 2.25em;
+		height: 3.75rem;
+		border-radius: h.$border-radius-md;
+
+		&:not(:has(span)) {
+			padding: 1.25em;
+		}
+	}
+
+	// STYLES
+
+	//Success
+	&.btn-success {
+		background-color: h.$success;
+		border-color: h.$success;
+
+		&.btn-secondary {
+			background-color: h.$success-bg;
+			border-color: h.$success-bg;
+			color: h.$safeSuccess;
+
+			&:hover,
+			&:active,
+			&:first-child:active {
+				border-color: h.$success !important;
+				background-color: h.$success !important;
+				color: h.$white !important;
+			}
+		}
+
+		&.btn-terciary {
+			background-color: transparent;
+			border-color: transparent;
+			color: h.$success;
+
+			.icon {
+				path {
+					fill: h.$success;
+				}
+
+				&.caret {
+					path {
+						fill: h.$success;
+					}
+				}
+			}
+
+			&:hover,
+			&:active,
+			&.show {
+				border-color: rgba(h.$safeSuccess, 5%) !important;
+				background-color: h.$success-bg !important;
+				color: h.$safeSuccess !important;
+
+				span {
+					color: h.$safeSuccess;
+				}
+
+				.icon {
+					path {
+						fill: h.$safeSuccess;
+					}
+				}
+			}
+
+			&:focus {
+				box-shadow: 0 0 0 0.25rem rgba(h.$safeSuccess, 0.5);
+			}
+		}
+
+		&.btn-outline {
+			background-color: transparent;
+			border: 1px solid h.$success;
+			color: h.$safeSuccess;
+
+			i,
+			span,
+			.icon {
+				color: h.$success;
+
+				path {
+					fill: h.$success;
+				}
+			}
+
+			&:hover,
+			&:active {
+				border-color: h.$success !important;
+				background-color: rgba(h.$success, 20%) !important;
+				color: h.$success;
+
+				i,
+				span,
+				.icon {
+					color: h.$success;
+
+					path {
+						fill: h.$success;
+					}
+				}
+			}
+		}
+	}
+
+	// Danger
+	&.btn-danger {
+		background-color: h.$error;
+		border-color: h.$error;
+
+		&.btn-secondary {
+			background-color: lighten(h.$error, 40%);
+			border-color: lighten(h.$error, 40%);
+			color: h.$error;
+
+			&:hover,
+			&:active,
+			&:first-child:active {
+				border-color: h.$error !important;
+				background-color: h.$error !important;
+				color: h.$white !important;
+			}
+		}
+
+		&.btn-terciary {
+			background-color: transparent;
+			border-color: transparent;
+			color: h.$error;
+
+			.icon {
+				path {
+					fill: h.$error;
+				}
+
+				&.caret {
+					path {
+						fill: h.$error;
+					}
+				}
+			}
+
+			&:hover,
+			&:active,
+			&.show {
+				background-color: lighten(h.$error, 40%) !important;
+				border-color: lighten(h.$error, 40%) !important;
+				color: h.$error !important;
+
+				span {
+					color: h.$error;
+				}
+
+				.icon {
+					path {
+						fill: h.$error;
+					}
+				}
+			}
+
+			&:focus {
+				box-shadow: 0 0 0 0.25rem rgba(h.$error, 0.5);
+			}
+		}
+
+		&.btn-outline {
+			background-color: transparent;
+			border: 1px solid h.$error;
+			color: h.$error;
+
+			i,
+			span,
+			.icon {
+				color: h.$error;
+
+				path {
+					fill: h.$error;
+				}
+			}
+
+			&:hover,
+			&:active {
+				border-color: h.$error !important;
+				background-color: rgba(h.$error, 20%) !important;
+				color: h.$error;
+
+				i,
+				span,
+				.icon {
+					color: h.$error;
+
+					path {
+						fill: h.$error;
+					}
+				}
+			}
+		}
+	}
+
+	// Warning
+	&.btn-warning {
+		background-color: h.$warning;
+		border-color: h.$warning;
+
+		&.btn-secondary {
+			background-color: h.$warning-bg;
+			border-color: h.$warning-bg;
+			color: h.$safeWarning;
+
+			&:hover,
+			&:active,
+			&:first-child:active {
+				border-color: h.$warning !important;
+				background-color: h.$warning !important;
+				color: h.$white !important;
+			}
+		}
+
+		&.btn-terciary {
+			background-color: transparent;
+			border-color: transparent;
+			color: h.$warning;
+
+			.icon {
+				path {
+					fill: h.$warning;
+				}
+
+				&.caret {
+					path {
+						fill: h.$warning;
+					}
+				}
+			}
+
+			&:hover,
+			&:active,
+			&.show {
+				border-color: rgba(h.$safeWarning, 5%) !important;
+				background-color: h.$warning-bg !important;
+				color: h.$safeWarning !important;
+
+				span {
+					color: h.$safeWarning;
+				}
+
+				.icon {
+					path {
+						fill: h.$safeWarning;
+					}
+				}
+			}
+
+			&:focus {
+				box-shadow: 0 0 0 0.25rem rgba(h.$safeWarning, 0.5);
+			}
+		}
+
+		&.btn-outline {
+			background-color: transparent;
+			border: 1px solid h.$warning;
+			color: h.$safeWarning;
+
+			i,
+			span,
+			.icon {
+				color: h.$warning;
+
+				path {
+					fill: h.$warning;
+				}
+			}
+
+			&:hover,
+			&:active {
+				border-color: h.$warning !important;
+				background-color: rgba(h.$warning, 20%) !important;
+				color: h.$warning;
+
+				i,
+				span,
+				.icon {
+					color: h.$warning;
+
+					path {
+						fill: h.$warning;
+					}
+				}
+			}
+		}
+	}
+
+	// Link
+	&.btn-link {
+		color: h.$ga-brand-light;
+		border-color: transparent;
+		background-color: transparent;
+		font-weight: 400;
+		transition-duration: 0;
+
+		&:hover,
+		&:active,
+		&:focus {
+			color: h.$ga-brand-midtone !important;
+			background-color: transparent !important;
+			border-color: transparent !important;
+			transform: none;
+			box-shadow: none;
+		}
+
+		span {
+			transition: none;
+		}
+	}
+
+	// PROCESSING
+	&.btn-processing {
+		pointer-events: none;
+		.fa-spin {
+			animation-duration: h.$spinner-duration;
+		}
+	}
+
+	// Disabled
+	&:disabled {
+		opacity: 0.4;
+		pointer-events: none;
+	}
+}