CSS: Move tasks into _tasks

2016-09-21 19:38:46 +02:00
parent 578f698240
commit 7d64e8bf4e
2 changed files with 2 additions and 4 deletions
--- a/src/styles/_tasks.sass
+++ b/src/styles/_tasks.sass
@@ -0,0 +1,119 @@
+#task-view
+	margin: 10px
+	padding: 0 10px 10px
+	+container-box
+
+	.task-name
+		font-size: 1.6em
+
+#task-add
+	margin-left: auto
+	font-size: .85em
+	color: $color-primary
+
+.status-indicator
+	background-color: white
+	width: 16px
+	height: 16px
+	margin-left: 10px
+	border-radius: 50%
+	transition: all 100ms ease-in-out
+
+.task-list-item
+	border-right: 5px solid transparent
+	color: $color-primary-dark
+	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($color-background, .5)
+
+		.status-indicator
+			transform: scale(1.1)
+
+	&.processing
+		+stripes($color-background, rgba($color-background, .5), -45deg, 25px)
+		+stripes-animate
+		animation-duration: 2s
+
+	.status, .type
+		display: inline-block
+		margin-right: 10px
+		text-transform: uppercase
+		font-size: .8em
+		text-decoration: none
+
+	.type
+		margin-left: auto
+		color: $color-text-dark-primary
+	.status
+
+	.name
+		margin: 10px
+
+	&.status
+		&-invalid
+			.status-indicator
+				background-color: hsl(hue($color-status-invalid), 100%, 75%)
+			.status
+				color: hsl(hue($color-status-invalid), 100%, 50%)
+		&-todo
+			.status-indicator
+				background-color: hsl(hue($color-status-todo), 100%, 75%)
+			.status
+				color: hsl(hue($color-status-todo), 100%, 50%)
+		&-in_progress
+			.status-indicator
+				background-color: hsl(hue($color-status-in_progress), 100%, 60%)
+			.status
+				color: hsl(hue($color-status-in_progress), 100%, 45%)
+		&-on_hold
+			.status-indicator
+				background-color: hsl(hue($color-status-on_hold), 100%, 75%)
+			.status
+				color: hsl(hue($color-status-on_hold), 100%, 50%)
+		&-approved
+			.status-indicator
+				background-color: hsl(hue($color-status-approved), 100%, 75%)
+			.status
+				color: hsl(hue($color-status-approved), 100%, 50%)
+		&-cbb
+			.status-indicator
+				background-color: hsl(hue($color-status-cbb), 100%, 75%)
+			.status
+				color: hsl(hue($color-status-cbb), 100%, 40%)
+		&-final
+			.status-indicator
+				background-color: hsl(hue($color-status-final), 100%, 40%)
+			.status
+				color: hsl(hue($color-status-final), 100%, 30%)
+		&-review
+			.status-indicator
+				background-color: hsl(hue($color-status-review), 100%, 75%)
+			.status
+				color: hsl(hue($color-status-review), 100%, 50%)
+
+option.invalid_task
+	color: $color-danger
+	background-color: hsl(hue($color-danger), 80%, 90%)
+
+.task-list-header
+	border-right: thin solid $color-background
+	a
+		color: $color-text-dark
+	a.task-project
+		color: $color-text-dark-secondary
+		margin-left: 10px
+
+.input-group-separator
+	margin: 10px 0
+	border-top: thin solid $color-background