groovinads-ui 1.0.0

package/src/scss/layout/_footer.scss

@@ -0,0 +1,21 @@
+// Use
+@use '../abstracts/helpers' as h;
+
+footer {
+	position: absolute;
+	bottom: 0;
+	display: flex;
+	width: 100%;
+	justify-content: space-between;
+	@include h.font-family(h.$font-family-secondary, 1rem, h.$grey-dark, 400);
+
+	a {
+		color: h.$grey-dark;
+		text-decoration: none;
+
+		&:hover {
+			color: h.$grey-dark;
+			text-decoration: underline;
+		}
+	}
+}

package/src/scss/layout/_main.scss

@@ -0,0 +1,41 @@
+// Use
+@use '../abstracts/helpers' as h;
+
+.main {
+	padding-top: 2rem;
+	padding-bottom: 3rem;
+	min-height: 100vh;
+	position: relative;
+
+	.sidebar ~ & {
+		@include h.respond-to(h.$lg) {
+			width: calc(100% - 15rem);
+			margin-left: 15rem;
+			@include h.transition(width margin-left, 0.3s, cubic-bezier(0.2, 0, 0, 1));
+		}
+	}
+
+	.heading {
+		top: 0rem;
+		padding-top: 2rem;
+		margin-top: -2rem;
+		background-color: h.$grey-light;
+		z-index: 10;
+
+		@include h.respond-to(h.$md) {
+			position: sticky;
+		}
+
+		.buttons-wrapper {
+			display: flex;
+			gap: 1rem;
+			justify-content: flex-start;
+			flex-direction: column;
+
+			@include h.respond-to(h.$md) {
+				justify-content: flex-end;
+				flex-direction: row;
+			}
+		}
+	}
+}

package/src/scss/layout/_navbar.scss

@@ -0,0 +1,64 @@
+// Use
+@use '../abstracts/helpers' as h;
+
+// Forward
+@forward '../animations/toDown';
+
+.header {
+	top: 0;
+	right: 0;
+	left: 0;
+	z-index: 1030;
+	position: fixed;
+	animation: toDown 0.2s ease-out both;
+	@include h.shadow(2, h.$ga-brand-dark, y);
+
+	&.fixed-top {
+		background-color: h.$white;
+		padding-right: 0px !important;
+
+		.navbar {
+			padding-top: 0.618rem;
+			padding-bottom: 0.618rem;
+		}
+	}
+
+	& ~ .container-fluid {
+		.main {
+			padding-top: 6rem;
+
+			.heading {
+				top: 4rem;
+			}
+		}
+	}
+
+	.navbar {
+		justify-content: space-between;
+		flex-wrap: nowrap;
+		height: 4rem;
+		padding-left: 1rem;
+		padding-right: 1rem;
+
+		.brand {
+			width: 100%;
+			max-width: h.$logo-width;
+			height: 100%;
+			vertical-align: middle;
+
+			.ga-logo {
+				width: 100%;
+				max-width: h.$logo-width;
+				height: auto;
+				pointer-events: none;
+			}
+		}
+
+		.brand-wrapper {
+			display: flex;
+			flex-direction: row;
+			gap: 1rem;
+			align-items: center;
+		}
+	}
+}

package/src/scss/views/_skeleton.scss

@@ -0,0 +1,266 @@
+// Use
+@use '../abstracts/helpers' as h;
+
+// Forward
+@forward '../animations/goAndBack';
+
+.loading {
+	width: 100%;
+	box-shadow: none !important;
+
+	.load {
+		background-color: h.$grey-light !important;
+		height: 1rem;
+		border-radius: h.$border-radius-xl;
+		position: relative;
+		overflow: hidden;
+
+		&::before {
+			content: '';
+			width: 100%;
+			height: 5rem;
+			background: rgb(255, 255, 255);
+			background: linear-gradient(
+				90deg,
+				rgba(255, 255, 255, 0) 0%,
+				rgba(255, 255, 255, 0.7) 45%,
+				rgba(255, 255, 255, 0.7) 55%,
+				rgba(255, 255, 255, 0) 100%
+			);
+			position: absolute;
+			top: 0;
+			left: 0;
+			animation: goAndBack 1s ease-in-out forwards infinite;
+		}
+
+		&.title {
+			width: 30%;
+		}
+
+		&.circle {
+			width: 2rem;
+			height: 2rem;
+			margin-right: 2rem;
+		}
+
+		&.text {
+			width: 100%;
+			margin-bottom: 0.8rem;
+
+			&.small {
+				height: 0.7rem;
+			}
+		}
+
+		&.icn {
+			width: 4rem;
+			height: 4rem;
+		}
+
+		&.list {
+			margin-left: 1rem;
+			margin-right: 1rem;
+			width: 80%;
+			margin-bottom: 1.5rem;
+		}
+
+		&.btn-load {
+			@extend .load;
+			width: 150px;
+			height: 50px;
+			border-radius: h.$border-radius-sm;
+			background-color: rgba(h.$grey-dark, 10%) !important;
+		}
+	}
+
+	&.heading {
+		margin-top: 0;
+		padding-top: 0;
+
+		.breadcrumb {
+			background-color: rgba(h.$ga-brand-dark, 10%) !important;
+			margin-bottom: 1rem;
+			width: 10%;
+			height: 0.75rem;
+		}
+
+		.title {
+			height: 1.5rem;
+			margin-bottom: 1rem;
+			background-color: rgba(h.$grey-dark, 0.2) !important;
+			width: 50%;
+		}
+
+		.text {
+			background-color: rgba(h.$grey-dark, 10%) !important;
+			margin-bottom: 1rem;
+			width: 30%;
+		}
+	}
+	.load-wrapper {
+		display: flex;
+		flex-direction: row;
+		align-items: flex-start;
+	}
+
+	.load-paragraph {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		width: 100%;
+
+		.text {
+			&:last-child {
+				width: 50%;
+			}
+		}
+	}
+
+	.load-input {
+		@extend .load;
+		height: 58px;
+		border-radius: h.$border-radius-sm;
+	}
+
+	&:hover {
+		transform: none !important;
+	}
+
+	&.campaings-table {
+		overflow: hidden;
+
+		.campaign-table-header {
+			justify-content: space-between;
+
+			.load {
+				width: 30%;
+				height: 0.75rem;
+				background-color: rgba(h.$grey-dark, 0.3);
+			}
+		}
+
+		.campaign-table-body {
+
+			.campaign-row {
+				padding: 1rem 0;
+			}
+			.campaign-col {
+				padding: 0 1rem;
+				border-bottom: none;
+
+				&:first-child {
+					.load {
+						width: 50%;
+						margin: 0.5em 0;
+
+						@include h.respond-to(h.$md) {
+							width: 100%;
+							margin: 0;
+						}
+					}
+				}
+			}
+		}
+
+		&:not(:has(.campaign-table-header)) {
+
+			.campaign-table-body {
+
+				.campaign-row {
+
+					&:first-of-type {
+						border-top: none;
+					}
+				}
+			}
+		}
+
+		.campaign-col {
+
+			@include h.respond-to(h.$md) {
+				flex: 1 0 0;
+				width: auto;
+			}
+		}
+	}
+
+	&.table {
+		overflow: hidden;
+		border-collapse: collapse;
+
+		thead {
+			border: 1px solid rgba(h.$ga-brand-dark, 10%);
+
+			tr {
+				th {
+					.load {
+						width: 30%;
+						height: 0.75rem;
+						background-color: rgba(h.$grey-dark, 0.3);
+					}
+				}
+			}
+		}
+
+		tbody {
+			border: 1px solid rgba(h.$ga-brand-dark, 10%);
+
+			tr {
+				td {
+					.load {
+						width: 80%;
+						margin: 0.5em 0;
+					}
+				}
+
+				&:nth-of-type(odd) {
+					td {
+						.load {
+							background-color: rgba(h.$grey-dark, 0.2) !important;
+						}
+					}
+				}
+			}
+		}
+	}
+
+	&.filters {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+		align-items: center;
+		justify-content: flex-start;
+
+		@include h.respond-to(h.$md) {
+			flex-direction: row;
+		}
+
+		.text {
+			background-color: rgba(h.$grey-dark, 10%) !important;
+			margin-bottom: 0;
+			width: 150px;
+		}
+
+		.btn-load {
+			width: 100%;
+
+			@include h.respond-to(h.$md) {
+				width: 150px;
+			}
+		}
+	}
+}
+
+.table-responsive {
+	&.shadow-1 {
+		&:has(.loading) {
+			box-shadow: none;
+		}
+	}
+}
+
+.aside {
+	.loading {
+		height: 184px !important;
+	}
+}

package/src/stories/Button.stories.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+import Button from "../components/Button/Button";
+
+export default {
+  title: "Example/Button",
+  component: Button,
+};
+
+const Template = (args) => <Button {...args}>Button</Button>;
+
+export const Primary = Template.bind({});