vgapp 0.2.3 → 0.2.4

package/app/utils/scss/default.scss

@@ -66,76 +66,6 @@
 	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
  */

package/app/utils/scss/functions.scss

@@ -1,3 +1,22 @@
 @function is-map($var){
 	@return type-of($var) == 'map';
+}
+
+// Merge multiple maps
+@function map-merge-multiple($maps...) {
+	$merged-maps: ();
+
+	@each $map in $maps {
+		$merged-maps: map-merge($merged-maps, $map);
+	}
+	@return $merged-maps;
+}
+
+// mix colors
+@function shade-color($color, $weight) {
+	@return mix(black, $color, $weight);
+}
+
+@function tint-color($color, $weight) {
+	@return mix(white, $color, $weight);
 }

package/app/utils/scss/variables.scss

@@ -20,46 +20,13 @@ $transition-base:    all .5s ease-in-out !default;
 $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;
 $lawcookie-index:  2000;
+$toast-index:      1050;
 
 // Backdrop map
 $backdrop-map: (
@@ -78,4 +45,60 @@ $loader-map: (
 		margin: 30px auto,
 		animation: vgLoader 1.1s infinite linear,
 		transform: translateZ(0)
-)
+);
+
+// Colors Status
+$danger:        #dc3545 !default;
+$danger-border: tint-color($danger, 60%) !default;
+$danger-text:   shade-color($danger, 60%) !default;
+$danger-bg:     tint-color($danger, 80%) !default;
+
+$success: #198754;
+$success-border: tint-color($success, 60%) !default;
+$success-text:   shade-color($success, 60%) !default;
+$success-bg:     tint-color($success, 80%) !default;
+
+$warning: #FFC107;
+$warning-border: tint-color($warning, 60%) !default;
+$warning-text:   shade-color($warning, 60%) !default;
+$warning-bg:     tint-color($warning, 80%) !default;
+
+$info: #0DCAF0;
+$info-border: tint-color($info, 60%) !default;
+$info-text:   shade-color($info, 60%) !default;
+$info-bg:     tint-color($info, 80%) !default;
+
+$dark: #232323;
+$dark-border: shade-color($dark, 60%) !default;
+$dark-text:   tint-color($dark, 60%) !default;
+$dark-bg:     shade-color($dark, 80%) !default;
+
+$success-map: (
+		color: $success-text,
+		border-color: $success-border,
+		background-color: $success-bg
+);
+
+$danger-map: (
+		color: $danger-text,
+		border-color: $danger-border,
+		background-color: $danger-bg
+);
+
+$warning-map: (
+		color: $warning-text,
+		border-color: $warning-border,
+		background-color: $warning-bg
+);
+
+$info-map: (
+		color: $info-text,
+		border-color: $info-border,
+		background-color: $info-bg
+);
+
+$dark-map: (
+		color: $dark-text,
+		border-color: $dark-border,
+		background-color: $dark-bg
+);