@spacemade/ui 0.0.1

package/src/sass/base/_main.scss

@@ -0,0 +1,239 @@
+.list-group-item:hover {
+	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+	background-color: #f8f9fa;
+}
+
+.footer{
+	padding: 0 100px
+}
+
+.content-container {
+	@include wide-container;
+	margin-top: 6rem;
+	margin-bottom: 4rem;
+	margin-right: auto;
+	margin-left: auto;
+	animation: fadeIn 400ms;
+	min-height: calc(100vh - 12rem);
+}
+
+a {
+	color: theme-color('dark');
+	&:hover {
+		color: theme-color('black');
+	}
+	text-decoration: none;
+}
+.cursor-pointer {
+	cursor: pointer;
+}
+
+img {
+	-webkit-user-drag: none;
+	user-select: none;
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+}
+
+.white-space-pre-line {
+	white-space: pre-line;
+}
+
+.img-full-width-only-on-mobile {
+	@include media-breakpoint-down(lg) {
+		left: 50%;
+		margin-left: -50vw;
+		margin-right: -50vw;
+		max-width: 100vw;
+		position: relative;
+		right: 50%;
+		width: 100vw;
+	}
+}
+
+.px-md-0-down {
+	@include media-breakpoint-down(lg) {
+		padding-left: 0;
+		padding-right: 0;
+	}
+}
+
+.object-fit-contain {
+	object-fit: contain;
+}
+
+.object-position-left {
+	object-position: left;
+}
+
+.object-position-center {
+	object-position: center;
+}
+
+.object-position-lg-center {
+	@include media-breakpoint-up(md) {
+		object-position: center;
+	}
+}
+
+.object-position-lg-left {
+	@include media-breakpoint-up(md) {
+		object-position: left;
+	}
+}
+
+.object-position-top {
+	object-position: top;
+}
+
+.flex-1 {
+	flex: 1;
+}
+
+.bar-of-progress {
+	z-index: 50;
+}
+
+body {
+	.mh-md-unset {
+		@include media-breakpoint-up(md) {
+			max-height: unset !important;
+		}
+	}
+}
+body {
+	.mw-lg-unset {
+		@include media-breakpoint-up(lg) {
+			max-width: unset !important;
+		}
+	}
+}
+
+.custom-scroll-bar {
+	&::-webkit-scrollbar {
+		width: 8px;
+	}
+
+	&::-webkit-scrollbar-track {
+		background: transparent;
+	}
+
+	&::-webkit-scrollbar-thumb {
+		border-radius: 5px;
+		background-color: theme-color('background');
+	}
+}
+
+.shadow-xs {
+	box-shadow: rgba(0,0,0,.1) 0px 4px 12px !important;
+}
+
+.shadow-lg-only {
+	@include media-breakpoint-up(lg) {
+		box-shadow: 0 0.5rem 1rem rgba(theme-color('black'), 0.15) !important;
+	}
+}
+
+.chakra-icon {
+	width: 1em;
+	height: 1em;
+	display: inline-block;
+	line-height: 1em;
+	flex-shrink: 0;
+	color: currentcolor;
+	vertical-align: middle;
+}
+
+.social-buttons {
+	a,
+	button {
+		border: none;
+		background-color: theme-color('dark-medium');
+		&:hover {
+			background-color: rgba(theme-color('dark'), 0.75);
+			text-shadow: 1px 0 theme-color('dark');
+		}
+	}
+}
+
+.scale-img-on-hover {
+	isolation: isolate;
+
+	img {
+		transition: all 0.35s ease;
+	}
+	&:hover {
+		img {
+			transform: scale3d(1.1, 1.1, 1);
+		}
+	}
+}
+
+footer {
+	.nav-link {
+		transition: all 0.35s ease 0s;
+		padding: 0;
+		&:hover {
+			color: theme-color('white') !important;
+		}
+	}
+}
+
+.admin-left-nav-list-container,
+.user-left-nav-list-container {
+	overflow-x: hidden;
+	overflow-y: auto;
+}
+
+.overflow-y-auto {
+	overflow-y: auto;
+}
+
+.admin-left-nav-list-container {
+	height: calc(100vh - 265px);
+}
+
+.box-selected {
+	@include InputActiveState('primary');
+}
+
+.invert-filter {
+	filter: invert(1);
+}
+
+.trademark {
+	font-size: .3em;
+	display: inline-block;
+	transform: translateY(-24px) !important;
+	@include media-breakpoint-up(md) {
+		transform: translateY(-30px) !important;
+	}
+	@include media-breakpoint-up(lg) {
+		transform: translateY(-34px) !important;
+	}
+	@include media-breakpoint-up(xl) {
+		transform: translateY(-37px) !important;
+	}
+}
+
+.input-reset-border {
+	&:focus {
+		outline: 0;
+		box-shadow: none;
+	}
+}
+.navbar-height {
+	margin-top: $navbar-height;
+	@include media-breakpoint-down(md) {
+		margin-top: ($navbar-height - 10px);
+	}
+}
+.rounded-30 {
+	border-radius: 30px;
+}
+.bg-hover-background {
+	&:hover {
+		background-color: var(--bs-light-gray) !important;
+	}
+}

package/src/sass/base/_positions.scss

@@ -0,0 +1,111 @@
+.behind {
+	z-index: -1;
+}
+
+.z-index-1 {
+	z-index: 1;
+}
+
+.z-index-2 {
+	z-index: 2;
+}
+
+.z-index-3 {
+	z-index: 3;
+}
+
+.z-index-10 {
+	z-index: 10;
+}
+
+.z-index-120 {
+	z-index: 120;
+}
+
+.z-index-1040 {
+	z-index: 1040;
+}
+
+.z-index-999 {
+	z-index: 999;
+}
+
+.right-0 {
+	right: 0;
+}
+
+.left-0 {
+	left: 0;
+}
+
+.bottom-n2r {
+	bottom: -2rem;
+}
+
+.bottom-n3r {
+	bottom: -3rem;
+}
+
+.bottom-n3-5r {
+	bottom: -3.5rem;
+}
+
+.bottom-5r {
+	bottom: 5rem;
+}
+
+.bottom-6r {
+	bottom: 6rem;
+}
+
+.top-6r {
+	top: 6rem;
+}
+
+.bottom-n1-5 {
+	bottom: -1.5rem;
+}
+
+.right-1 {
+	right: 1rem;
+}
+
+.right-n1 {
+	right: -1rem;
+}
+
+.right-n12 {
+	right: -12rem;
+}
+
+.top-lg-2_7r {
+	@include media-breakpoint-up(lg) {
+		top: 2.7rem;
+	}
+}
+
+.nav-space {
+	padding-top: 85px;
+
+	@include media-breakpoint-up(lg) {
+		padding-top: 120px;
+	}
+}
+
+.mt-27 {
+	margin-top: 27rem;
+}
+
+.ms-lg-280p {
+	@include media-breakpoint-up(lg) {
+		margin-left: 280px;
+	}
+}
+
+
+.pricing-osirus-agent {
+	display: none;
+	@media (min-width: 2227px) {
+		display: block;
+	}
+}

package/src/sass/base/_sizes.scss

@@ -0,0 +1,120 @@
+.container {
+	padding: 0 1.5rem;
+}
+
+.mw {
+	&-720p {
+		max-width: 720px;
+	}
+}
+
+.w-fit-content {
+	width: fit-content;
+}
+
+.h-fit-content {
+	height: fit-content;
+}
+
+.w-admin-content-size {
+	width: calc(100vw - 320px);
+}
+
+.w-xl-fit-content {
+	@include media-breakpoint-up(xl) {
+		width: fit-content;
+	}
+}
+
+.w-lg-90-down {
+	@include media-breakpoint-down(lg) {
+		width: 90%;
+	}
+}
+
+.w-lg-100-down {
+	@include media-breakpoint-down(lg) {
+		width: 100%;
+	}
+}
+
+.mw-lg-1220p {
+	max-width: 1220px;
+}
+
+.h-fix-screen {
+	// 12 rem is the margin top and bottom of the wrapper container (.content-container)
+	height: calc(100vh - 16rem);
+}
+
+.h-fit-modal-body {
+	$modal-header: 73px;
+	$modal-footer: 86px;
+	$modal-tabs: 51px;
+	height: calc(100vh - $modal-footer - $modal-header - $modal-tabs);
+}
+
+.minh-100vh {
+	min-height: 100vh;
+}
+
+.full-screen-for-app {
+	height: calc(100vh - 85px);
+
+	@include media-breakpoint-up(lg) {
+		height: calc(100vh - 120px);
+	}
+}
+
+.max-container-width {
+	max-width: 1850px;
+}
+
+.height-full-modal-body {
+	height: calc(100vh - 65px);
+}
+
+.vh-90 {
+	height: 90vh;
+}
+
+.vh-lg-80 {
+	@include media-breakpoint-up(lg) {
+		height: 80vh;
+	}
+}
+
+.vh-65 {
+	height: 65vh;
+}
+
+.h {
+	&-135p {
+		height: 135px;
+	}
+	&-horizontal-news-card-title {
+		height: 105px;
+		@include media-breakpoint-up(lg) {
+			height: 90px;
+		}
+	}
+	&-large-news-card-title {
+		height: 57px;
+		@include media-breakpoint-only(xs) {
+			height: 55px;
+		}
+	}
+	&-small-news-card-title {
+		height: 155px;
+		@include media-breakpoint-up(md) {
+			height: 143px;
+		}
+	}
+	&-xs {
+		&-133p {
+			@include media-breakpoint-down(lg) {
+				height: 133px;
+			}
+		}
+	}
+}

package/src/sass/base/_typography.scss

@@ -0,0 +1,184 @@
+body {
+	font-family: $main-font;
+}
+
+h1,
+.h1,
+h2,
+.h2,
+h3,
+.h3,
+h4,
+.h4,
+h5,
+.h5,
+h6,
+.h6,
+.display-1,
+.display-2,
+.display-3,
+.display-4,
+.display-5,
+.display-6 {
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	font-family: $heading-font;
+	font-weight: 600;
+}
+
+h1,
+.h1 {
+	font-size: 2rem;
+
+	@include media-breakpoint-up(md) {
+		font-size: 2.5rem;
+	}
+	@include media-breakpoint-up(lg) {
+		font-size: 2.2rem;
+	}
+	@include media-breakpoint-up(xl) {
+		font-size: 3rem;
+	}
+}
+
+.lead {
+	font-size: $font-size + 0.2;
+	&-md {
+		font-size: $font-size + 0.5;
+	}
+	&-lg {
+		font-size: $font-size + 0.8;
+	}
+}
+
+b, strong {
+    font-weight: 500;
+}
+
+.small {
+	font-size: 80%;
+	&-md {
+		font-size: 90%;
+	}
+	&-sm {
+		font-size: 72%;
+	}
+	&-xs {
+		font-size: 55%;
+	}
+}
+
+.fs {
+	&-xxl {
+		font-size: 8rem;
+	}
+	&-lg {
+		font-size: 2.2rem;
+	}
+	&-md {
+		font-size: 1.094rem;
+	}
+	&-21p {
+		font-size: 1.313rem;
+	}
+	&-dec {
+		&-1_6 {
+			font-size: 1.6rem;
+		}
+		&-1_1 {
+			font-size: 1.1rem;
+		}
+		&-1_15 {
+			font-size: 1.15rem;
+		}
+		&-1_9 {
+			font-size: 1.9rem;
+		}
+		&-65 {
+			font-size: 0.65rem;
+		}
+		&-75 {
+			font-size: 0.75rem;
+		}
+		&-85 {
+			font-size: 0.85rem;
+		}
+		&-md-85 {
+			@include media-breakpoint-up(md) {
+				font-size: 0.85rem;
+			}
+		}
+		&-90 {
+			font-size: 0.9rem;
+		}
+		&-80 {
+			font-size: 0.8rem;
+		}
+		&-70 {
+			font-size: 0.7rem;
+		}
+		&-60 {
+			font-size: 0.6rem;
+		}
+		&-35 {
+			font-size: 0.35rem;
+		}
+		&-25 {
+			font-size: 0.2rem;
+		}
+	}
+}
+
+.fw-medium {
+	font-weight: 600;
+}
+
+.fw-bolder {
+	font-weight: 700;
+}
+
+.text-shadow-black {
+	text-shadow: 1px 0 theme-color('black');
+}
+
+.letter-spacing-4p {
+	letter-spacing: 4px;
+}
+
+.fw-90-lg-only {
+	@include media-breakpoint-only(lg) {
+		font-size: 0.9rem;
+	}
+}
+
+.text-truncate {
+	@for $i from 2 through 6 {
+		&--max-lines-#{$i} {
+			@include max-lines($i);
+		}
+	}
+}
+.font-heading {
+	font-family: $heading-font;
+}
+.main-section {
+	margin-top: $navbar-height;
+	h1 {
+		font-size: 4.8rem;
+	}
+	p {
+		font-size: 1.8rem;
+		line-height: 1.3;
+	}
+}
+#content {
+	h2 {
+		&:not(.h3) {
+			font-size: 3.125rem;
+			font-weight: 800;
+		}
+		~ p {
+			margin-top: 1.2rem;
+		}
+	}
+}

package/src/sass/components/_accordion.scss

@@ -0,0 +1,63 @@
+.chakra-accordion {
+	&__item {
+		margin-top: 1rem;
+		border-radius: 12px;
+		border: 1px solid $border-color;
+		overflow: hidden;
+	}
+
+	&__button {
+		display: flex;
+		align-items: center;
+		width: 100%;
+		outline: transparent solid 2px;
+		outline-offset: 2px;
+		background-color: transparent;
+		color: theme-color('white');
+		border: 0;
+		font-size: 16px;
+		min-width: auto;
+		border-bottom: 1px solid $border-color;
+		padding: 12px 20px;
+		height: auto;
+		&[aria-expanded=false] {
+			border-bottom: 0;
+		}
+		span {
+			flex: 1 1 0%;
+			text-align: left;
+		}
+	}
+
+	&__panel {
+		padding: 16px 20px;
+	}
+}
+
+.accordion-group {
+	border: 1px solid $border-color;
+	border-radius: 12px;
+	&.chakra-accordion {
+		.chakra-accordion__item {
+			margin-top: 0;
+			border-radius: 0;
+			border: 0;
+			&:not(:last-child) {
+				border-bottom: 1px solid $border-color;
+			}
+
+			.chakra-accordion__icon {
+				width: 1em;
+				height: 1em;
+				display: inline-block;
+				line-height: 1em;
+				flex-shrink: 0;
+				color: theme-color('dark');
+				opacity: 1;
+				transition: transform 0.2s ease 0s;
+				transform-origin: center center;
+				vertical-align: middle;
+			}
+		}
+	}
+}