Added color styles to Process Components

Author: UnderlineWords

dist/punica.css

@@ -6007,6 +6007,66 @@ a.label.error, .label.error {
   background: #c6c6c6;
 }
 
+.process.success .item:not(:first-child)::before {
+  background: #2ec4b6;
+}
+
+.process.success .item a::before {
+  background: #2ec4b6;
+}
+
+.process.success .item.active a {
+  color: #2ec4b6;
+}
+
+.process.success .item.active a::after {
+  color: #2ec4b6;
+}
+
+.process.success .item.active ~ .item::before {
+  background: #c6c6c6;
+}
+
+.process.warning .item:not(:first-child)::before {
+  background: #de9e36;
+}
+
+.process.warning .item a::before {
+  background: #de9e36;
+}
+
+.process.warning .item.active a {
+  color: #de9e36;
+}
+
+.process.warning .item.active a::after {
+  color: #de9e36;
+}
+
+.process.warning .item.active ~ .item::before {
+  background: #c6c6c6;
+}
+
+.process.error .item:not(:first-child)::before {
+  background: #d62828;
+}
+
+.process.error .item a::before {
+  background: #d62828;
+}
+
+.process.error .item.active a {
+  color: #d62828;
+}
+
+.process.error .item.active a::after {
+  color: #d62828;
+}
+
+.process.error .item.active ~ .item::before {
+  background: #c6c6c6;
+}
+
 .process.vertical {
   display: -webkit-box;
   display: -ms-flexbox;

dist/punica.min.css

@@ -81,6 +81,11 @@ PUNICA CSS > COMPONENTS : CARD ***********************/
 				}
 			}
 		}
+		@each $type, $bg-color in $process-styles {
+			&.#{$type} {
+				@include process-styles($bg-color);
+			}
+		}
 		&.#{$process-vertical} {
 			@include process-vertical();
 		}

docs/components/process.html

@@ -1,5 +1,30 @@
 /******************************************************** 
 PUNICA CSS > COMPONENTS : PROCESS > MIXINS **************/
+@mixin process-styles($color: $primary-color) {
+	.#{$process-item} {
+		&:not(:first-child)::before {
+			background: $color;
+		}
+		a {
+			&::before {
+				background: $color;
+			}
+		}
+		&.#{$process-active} {
+			a {
+				color: $color;
+				&::after {
+					color: $color;
+				}
+			}
+			&~.#{$process-item} {
+				&::before {
+					background: $main-border-color;
+				}
+			}
+		}
+	}
+}
 @mixin process-vertical() {
 	display: flex;
 	padding: $timeline-padding;

docs/css/punica.css

@@ -7,6 +7,11 @@ $process-name				    : 'process';
 $process-item				    : 'item';
 $process-active				    : 'active';
 $process-vertical			    : 'vertical';
+$process-styles	: (
+	"success": $success-color,
+	"warning": $warning-color,
+	"error": $error-color,
+);
 
 $process-item-min-width		    : 150px;
 $process-margin				    : 1em 0 5em;