b245

Author: UnderlineWords

README.md

@@ -15,4 +15,12 @@ Punica's API-based structure allows you to create or customize a CSS framework t
 * Customizable settings for every component, element, and utility
 * Dynamic color scale generation based on specified color variables
 * Simple and functional debugging
-* Clean and readable code structure
+* Clean and readable code structure
+
+### TODO List
+- [x] Default Theme
+- [ ] Default Dark Theme (95%)
+- [ ] Documentation (80%)
+- [ ] API Documentation (0%)
+- [ ] Starter Templates (65%)
+- [ ] Themes (0%)

dist/punica.min.css

@@ -56,13 +56,14 @@
 					left: calc(50% - (#{variables('process', 'item', 'stickbar', 'width')} - 1px));
 				}
 			}
+			&.#{class('process', 'failed')},
 			&.#{class('process', 'active')} {
 				a {
 					color      : theme('color', 'primary');
 					font-weight: components('process', 'item', 'active', 'font-weight');
 					&::after {
 						position : absolute;
-						content  : components('process', 'item', 'indicator', 'content');
+						content  : components('process', 'item', 'indicator', 'active');
 						top      : calc(-15px - #{components('process', 'item', 'indicator', 'font-size')});
 						left     : calc(50% - ((#{components('process', 'item', 'stickbar', 'width')} * 10) / 2));
 						color    : theme('color', 'primary');
@@ -84,6 +85,21 @@
 					}
 				}
 			}
+			&.#{class('process', 'failed')} {
+				&:not(:first-child)::before {
+					background: theme('color', 'error');
+				}
+				a {
+					color: theme('color', 'error');
+					&::before {
+						background: theme('color', 'error');
+					}
+					&::after {
+						content: components('process', 'item', 'indicator', 'failed');
+						color  : theme('color', 'error');
+					}
+				}
+			}
 		}
 		///
 		/// STYLES

src/Modules/Components/Process/Process.scss

@@ -73,12 +73,13 @@
 				height: 100%;
 			}
 		}
+		&.#{class('process', 'failed')},
 		&.#{class('process', 'active')} {
 			a {
 				font-weight: bold;
 				&::after {
-					top : 15px;
-					left: calc(-15px - #{components('process', 'item', 'indicator', 'font-size')});
+					top : 8px;
+					left: calc(-3px - #{components('process', 'item', 'indicator', 'font-size')});
 				}
 			}
 		}

src/Modules/Components/Process/mixins.scss

@@ -126,11 +126,15 @@
 				// division of $i by $shade-step is zero
 				@if $i % $shade-step == 0 {
 					$percentage: $i*1%; // convert remainder to percentage
-					.#{$prefix}#{$suffix}-darken-#{$i} {
-						#{$property}: mix(black, $color, $percentage) $specificity;
+					@if($color != black) {
+						.#{$prefix}#{$suffix}-darken-#{$i} {
+							#{$property}: mix(black, $color, $percentage) $specificity;
+						}
 					}
-					.#{$prefix}#{$suffix}-lighten-#{$i} {
-						#{$property}: mix(white, $color, $percentage) $specificity;
+					@if($color != white) {
+						.#{$prefix}#{$suffix}-lighten-#{$i} {
+							#{$property}: mix(white, $color, $percentage) $specificity;
+						}
 					}
 				}
 			}

src/Modules/Utilities/mixins.scss

@@ -672,11 +672,12 @@ $options: (
 			'name'    : 'process',
 			'item'    : 'item',
 			'active'  : 'active',
+			'failed'  : 'failed',
 			'vertical': 'vertical',
 			'reversed': 'reversed'
 		),
 		'settings': (
-			'margin'    : 3em 0,
+			'margin'    : 3em 0 1em,
 			'min-height': 4rem, // for each item
 			'item': (
 				'font-weight': normal,
@@ -691,8 +692,9 @@ $options: (
 					'height': .8rem
 				),
 				'indicator': (
-					'content'  : "\2756", // HTML Symbols,
-					'font-size': 1.8rem,
+					'active'   : "\2611", // HTML Symbols
+					'failed'   : "\2612", // HTML Symbols
+					'font-size': 2.16rem,
 				),
 				'active': (
 					'font-weight': bold
@@ -815,7 +817,7 @@ $options: (
 		),
 		'classnames': (
 			'name'   : 'timeline',
-			'item'   : 'activity',
+			'item'   : 'item',
 			'author' : 'author',
 			'body'   : 'body',
 			'type'   : 'type',