Tasks Index for a Project

Work in progress

src/styles/tasks.sass

@@ -0,0 +1,81 @@
+@import _config
+@import _utils
+
+#task-add
+	margin-left: auto
+	font-size: .85em
+
+.status-indicator
+	background-color: white
+	width: 16px
+	height: 16px
+	border-radius: 50%
+	margin: 10px
+	transform-origin: center
+	transition: all 150ms ease-in-out
+
+	&.invalid
+		background-color: hsl(hue($color-status-invalid), 100%, 75%)
+	&.todo
+		background-color: hsl(hue($color-status-todo), 100%, 75%)
+	&.in_progress
+		background-color: hsl(hue($color-status-in_progress), 100%, 60%)
+	&.on_hold
+		background-color: hsl(hue($color-status-on_hold), 100%, 75%)
+	&.approved
+		background-color: hsl(hue($color-status-approved), 100%, 75%)
+	&.cbb
+		background-color: hsl(hue($color-status-cbb), 100%, 75%)
+	&.final
+		background-color: hsl(hue($color-status-final), 100%, 40%)
+	&.review
+		background-color: hsl(hue($color-status-review), 100%, 75%)
+
+.task-list-item
+	border-right: 5px solid transparent
+	color: $color-primary-dark
+	background-image: white
+	transition: all 150ms ease-in-out
+
+	&:hover
+		text-decoration: none
+		color: $color-primary
+
+		.status-indicator
+			transform: scale(1.1)
+
+	&.active
+		border-color: $color-background-dark
+		border-right-color: $color-primary
+		text-decoration: none
+		background-color: rgba(white, .5)
+
+		.status-indicator
+			transform: rotate(45deg)
+			border-radius: 15%
+
+	&.processing
+		+stripes(rgba(white, .5), transparent, -45deg, 25px)
+		+stripes-animate
+		animation-duration: 2s
+
+	.status
+		display: inline-block
+		margin-left: auto
+		margin-right: 10px
+		color: $color-text-dark-secondary
+		text-transform: uppercase
+		font-size: .8em
+		text-decoration: none
+
+#task-details
+	margin: 10px
+	padding: 10px
+	width: 100%
+	+container-box
+
+#task-view
+	width: 100%
+
+	.task-name
+		font-size: 1.6em