vgapp 0.0.1

package/app/utils/scss/default.scss

@@ -0,0 +1,277 @@
+@import "../../utils/scss/functions";
+@import "../../utils/scss/mixin";
+@import "../../utils/scss/variables";
+
+.vg-backdrop {
+	@include mix-vars('backdrop', $backdrop-map);
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100vw;
+	height: 100vh;
+	background: var(--vg-backdrop-bg);
+	transition: var(--vg-backdrop-transition);
+	opacity: 0;
+	z-index: var(--vg-backdrop-z-index);
+
+	&.fade {
+		opacity: var(--vg-backdrop-opacity);
+	}
+}
+
+.vg-btn-close {
+	position: absolute;
+	right: 1rem;
+	top: 1rem;
+	border: none;
+	background: transparent;
+
+	svg {
+		width: 24px;
+		height: 24px;
+	}
+}
+
+.vg-collapse {
+	&:not(.show) {
+		display: none;
+	}
+}
+
+.vg-collapsing {
+	height: 0;
+	overflow: hidden;
+	transition: $transition-base;
+}
+
+/**
+* Loader
+ */
+.vg-loader, .vg.loader:after {
+	border-radius: 50%;
+	width: 7em;
+	height: 7em;
+}
+.vg-loader {
+	@include mix-vars('loader', $loader-map);
+	margin: var(--vg-loader-margin);
+	font-size: var(--vg-loader-font-size);
+	position: relative;
+	text-indent: -9999em;
+	border-top: var(--vg-loader-border-width) var(--vg-loader-border-style) var(--vg-loader-border-color);
+	border-right: var(--vg-loader-border-width) var(--vg-loader-border-style) var(--vg-loader-border-color);
+	border-bottom: var(--vg-loader-border-width) var(--vg-loader-border-style) var(--vg-loader-border-color);
+	border-left: var(--vg-loader-border-width) var(--vg-loader-border-style) var(--vg-loader-color);
+	transform: var(--vg-loader-transform);
+	animation: var(--vg-loader-animation);
+}
+
+/**
+* Alert
+ */
+.vg-alert {
+	@include mix-vars('alert', $alert-map);
+	@include mix-vars('alert-success', $alert-success-map);
+	@include mix-vars('alert-error', $alert-error-map);
+	@include mix-vars('alert-waiting', $alert-waiting-map);
+	padding: var(--vg-alert-padding);
+	margin: var(--vg-alert-margin);
+	border: var(--vg-alert-border-width) var(--vg-alert-border-style) var(--vg-alert-border-color);
+	border-radius: var(--vg-alert-border-radius);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	&-success {
+		color: var(--vg-alert-success-color);
+		border-color: var(--vg-alert-success-border-color);
+		background-color: var(--vg-alert-success-background-color);
+	}
+
+	&-error {
+		color: var(--vg-alert-error-color);
+		border-color: var(--vg-alert-error-border-color);
+		background-color: var(--vg-alert-error-background-color);
+	}
+
+	&-content {
+		display: flex;
+		align-items: var(--vg-alert-content-align);
+		justify-content: var(--vg-alert-content-justify);
+		gap: var(--vg-alert-gap);
+		width: var(--vg-alert-content-width);
+
+		&--icon {
+			width: var(--vg-alert-icon-width);
+			height: var(--vg-alert-icon-height);
+
+			svg {
+				width: 100%;
+				height: 100%;
+			}
+
+			.ui-success {
+				&-circle {
+					stroke: var(--vg-alert-success-stroke);
+				}
+
+				&-path {
+					stroke: var(--vg-alert-success-color);
+				}
+			}
+		}
+	}
+
+	&-modal {
+		--vg-alert-icon-width: 150px;
+		--vg-alert-icon-height: 150px;
+		--vg-alert-padding: 5rem 2rem;
+		--vg-alert-border-width: 0;
+		margin: 0;
+
+		.vg-alert-content {
+			flex-direction: column;
+			text-align: center;
+		}
+	}
+}
+
+/**
+* UI before Animation
+ */
+.ui-success {
+	&-circle {
+		stroke-dasharray: 260.75219024795285px, 260.75219024795285px;
+		stroke-dashoffset: 270.75219024795285px;
+		transform: rotate(0);
+		transform-origin: center center;
+		stroke-linecap: round;
+		animation: ani-success-circle 1s ease-in both;
+	}
+	&-path {
+		stroke-dasharray: 60px 64px;
+		stroke-dashoffset: 62px;
+		stroke-linecap: round;
+		animation: ani-success-path 0.4s 1s ease-in both;
+	}
+}
+
+.ui-error {
+	&-circle {
+		stroke-dasharray: 260.75219024795285px, 260.75219024795285px;
+		stroke-dashoffset: 260.75219024795285px;
+		animation: ani-error-circle 1.2s linear;
+	}
+	&-line1 {
+		stroke-dasharray: 54px 55px;
+		stroke-dashoffset: 55px;
+		stroke-linecap: round;
+		animation: ani-error-line 0.15s 1.2s linear both;
+	}
+	&-line2 {
+		stroke-dasharray: 54px 55px;
+		stroke-dashoffset: 55px;
+		stroke-linecap: round;
+		animation: ani-error-line 0.2s 0.9s linear both;
+	}
+}
+
+.ui-waiting {
+	&-circle {
+		stroke-dasharray: 260.75219024795285px, 260.75219024795285px;
+		stroke-dashoffset: 260.75219024795285px;
+		animation: ani-waiting-circle 1.2s linear;
+	}
+	&-line1 {
+		stroke-dasharray: 280.75219024795285px, 200.75219024795285px;
+		stroke-dashoffset: 280.75219024795285px;
+		animation: ani-waiting-line 0.8s 0.3s linear both;
+		transform: rotate(0);
+		transform-origin: center center;
+	}
+	&-line2 {
+		stroke-dasharray: 54px 55px;
+		stroke-dashoffset: 55px;
+		animation: ani-waiting-line2 0.85s .6s ease-in both;
+		transform: rotate(0) scale(0.9);
+		transform-origin: center center;
+	}
+}
+
+/**
+* Animation Loader
+ */
+@keyframes vgLoader {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}
+
+// success animation
+@keyframes ani-success-circle {
+	to {
+		stroke-dashoffset: 782.2565707438586px;
+	}
+}
+
+@keyframes ani-success-path {
+	0% {
+		stroke-dashoffset: 62px;
+	}
+	65% {
+		stroke-dashoffset: -5px;
+	}
+	84% {
+		stroke-dashoffset: 4px;
+	}
+	100% {
+		stroke-dashoffset: -2px;
+	}
+}
+
+// error animation
+@keyframes ani-error-line {
+	to {
+		stroke-dashoffset: 0;
+	}
+}
+
+@keyframes ani-error-circle {
+	0% {
+		stroke-dasharray: 0, 260.75219024795285px;
+		stroke-dashoffset: 0;
+	}
+	35% {
+		stroke-dasharray: 120px, 120px;
+		stroke-dashoffset: -120px;
+	}
+	70% {
+		stroke-dasharray: 0, 260.75219024795285px;
+		stroke-dashoffset: -260.75219024795285px;
+	}
+	100% {
+		stroke-dasharray: 260.75219024795285px, 0;
+		stroke-dashoffset: -260.75219024795285px;
+	}
+}
+
+// waiting animation
+@keyframes ani-waiting-circle {
+	to {
+		stroke-dashoffset: 782.2565707438586px;
+	}
+}
+@keyframes ani-waiting-line {
+	to {
+		stroke-dashoffset: 0;
+	}
+}
+@keyframes ani-waiting-line2 {
+	to {
+		stroke-dashoffset: 0;
+		transform: rotate(360deg) scale(1);
+	}
+}

package/app/utils/scss/functions.scss

@@ -0,0 +1,3 @@
+@function is-map($var){
+	@return type-of($var) == 'map';
+}

package/app/utils/scss/mixin.scss

@@ -0,0 +1,11 @@
+@mixin mix-vars($module, $properties) {
+	@each $key, $value in $properties {
+		@if (is-map($value)) {
+			@each $k, $v in $value {
+				--vg-#{$module}-#{$key}-#{$k}: #{$v}
+			}
+		} @else {
+			--vg-#{$module}-#{$key}: #{$value}
+		}
+	}
+}

package/app/utils/scss/variables.scss

@@ -0,0 +1,80 @@
+// -- Backgrounds
+$bg-color:           #fff !default;
+
+// -- Colors
+$color:              #000000 !default;
+
+// -- Shadows
+$box-shadow:         0 8px 14px 5px rgba(0, 0, 0, 0.2) !default;
+
+// -- Borders
+$border-color:       rgba(0, 0, 0, .2) !default;
+$border-radius:      .375rem !default;
+$border-width:       1px !default;
+$border-style:       solid;
+
+// -- Transitions
+$transition-base:    all .5s ease-in-out !default;
+
+// -- Backdrop
+$backdrop-bg:        rgba(0, 0, 0, 1) !default;
+$backdrop-opacity:   .4 !default;
+
+// -- alert
+$alert-map: (
+		padding: 2rem,
+		margin: 0 0 2rem,
+		border-width: $border-width,
+		border-style: $border-style,
+		border-color: transparent,
+		border-radius: $border-radius,
+		gap: 1.5rem,
+		icon-width: 80px,
+		icon-height: 80px,
+		content-width: 100%,
+		content-align: center,
+		content-justify: flex-start
+);
+$alert-success-map: (
+		color: darken(#A5DC86, 10%),
+		border-color: #A5DC86,
+		background-color: rgba(lighten(#A5DC86, 10%), .15),
+		stroke: rgba(117, 183, 152, 0.4)
+);
+
+$alert-error-map: (
+		color: darken(#F74444, 10%),
+		border-color: #F74444,
+		background-color: rgba(lighten(#F74444, 25%), .075)
+);
+
+$alert-waiting-map: (
+		color: darken(#ffda6a, 10%),
+		border-color: #ffda6a,
+		background-color: rgba(lighten(#ffda6a, 15%), .1)
+);
+
+// Z-indexes
+$sidebar-index:  1040;
+$dropdown-index: 1010;
+$modal-index:    1040;
+$backdrop-index: 999;
+
+// Backdrop map
+$backdrop-map: (
+		bg:         $backdrop-bg,
+		opacity:    $backdrop-opacity,
+		z-index:    $backdrop-index,
+		transition: $transition-base,
+);
+
+$loader-map: (
+		border-width: .75em,
+		border-style: solid,
+		border-color: rgba(0, 0, 0, 0.2),
+		color: rgb(33, 37, 41),
+		font-size: 10px,
+		margin: 30px auto,
+		animation: vgLoader 1.1s infinite linear,
+		transform: translateZ(0)
+)