attract/src/styles/_tasks.sass

.attract-box
	margin: 10px
	padding: 0 10px 10px
	+container-box

	&.with-status
		border-top: thick solid $color-background-dark
		@include status-color-property(border-top-color, '', 'dark')

	.item-name
		font-size: 1.6em

	.dropdown button
		height: 38px
		margin-left: 10px

	.dropdown-menu
		left: initial
		right: 0
		padding-top: 0
		padding-bottom: 0
		border: thin solid $color-background
		box-shadow: 1px 1px 2px rgba(black, .1), 0 5px 25px rgba(black, .1)

		li
			display: flex
			height: 100%
			width: 100%
			padding: 0
			margin: 0

			&.divider
				height: 2px

			&.item-delete a:hover
				color: $color-danger

			a
				padding: 10px 15px 10px 12px
				flex: 1
				height: 100%
				color: $color-text-dark-primary
				i
					position: relative
					top: -1px
					left: -4px
					font-size: .9em

	.item-properties
		padding: 1em

#task-add
	margin-left: auto
	font-size: .85em
	color: $color-primary

.status-indicator
	background-color: white
	height: 16px
	width: 16px
	min-width: 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)

	.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
		+text-overflow-ellipsis

	.name
		margin: 10px
		+text-overflow-ellipsis

	@include status-color-property(background-color, ' .status-indicator', 'light')

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
		+text-overflow-ellipsis
	a.task-project
		color: $color-text-dark-secondary
		margin-left: 10px

.input-group-separator
	margin: 10px 0
	border-top: thin solid $color-background
Renamed attract-form to attract-box, and added with-status class. The with-status class enables the status-coloured thick border at the top. The rename from 'form' to 'box' was made to allow non-form contents too. 2016-10-04 15:15:12 +02:00			`.attract-box`
Minor style tweaks to Tasks 2016-09-21 18:26:34 +02:00			`margin: 10px`
			`padding: 0 10px 10px`
			`+container-box`

Renamed attract-form to attract-box, and added with-status class. The with-status class enables the status-coloured thick border at the top. The rename from 'form' to 'box' was made to allow non-form contents too. 2016-10-04 15:15:12 +02:00			`&.with-status`
			`border-top: thick solid $color-background-dark`
			`@include status-color-property(border-top-color, '', 'dark')`
Shot status indicator and other minor tweaks 2016-09-22 21:27:15 +02:00
			`.item-name`
Minor style tweaks to Tasks 2016-09-21 18:26:34 +02:00			`font-size: 1.6em`

Use dropdown for copy to clipboard/delete tasks 2016-09-29 12:57:01 +02:00			`.dropdown button`
			`height: 38px`
			`margin-left: 10px`

			`.dropdown-menu`
			`left: initial`
			`right: 0`
			`padding-top: 0`
			`padding-bottom: 0`
			`border: thin solid $color-background`
			`box-shadow: 1px 1px 2px rgba(black, .1), 0 5px 25px rgba(black, .1)`

			`li`
			`display: flex`
			`height: 100%`
			`width: 100%`
			`padding: 0`
			`margin: 0`

			`&.divider`
			`height: 2px`

			`&.item-delete a:hover`
			`color: $color-danger`

			`a`
			`padding: 10px 15px 10px 12px`
			`flex: 1`
			`height: 100%`
			`color: $color-text-dark-primary`
			`i`
			`position: relative`
			`top: -1px`
			`left: -4px`
			`font-size: .9em`

Nicer presentation of shot details 2016-10-04 15:15:36 +02:00			`.item-properties`
			`padding: 1em`
Use dropdown for copy to clipboard/delete tasks 2016-09-29 12:57:01 +02:00
Tasks Index for a Project Work in progress 2016-09-21 14:02:05 +02:00			`#task-add`
			`margin-left: auto`
			`font-size: .85em`
Replace Status underscore and minor style tweaks 2016-09-21 15:47:24 +02:00			`color: $color-primary`
Tasks Index for a Project Work in progress 2016-09-21 14:02:05 +02:00
			`.status-indicator`
			`background-color: white`
			`height: 16px`
Small jQuery plugin for resizing panels Still doesn't save the size, since we want to save this in the user. Which is not implemented yet. 2016-09-28 16:58:14 +02:00			`width: 16px`
			`min-width: 16px`
Minor style tweaks to Tasks 2016-09-21 18:26:34 +02:00			`margin-left: 10px`
Tasks Index for a Project Work in progress 2016-09-21 14:02:05 +02:00			`border-radius: 50%`
Minor style tweaks to Tasks 2016-09-21 18:26:34 +02:00			`transition: all 100ms ease-in-out`
Tasks Index for a Project Work in progress 2016-09-21 14:02:05 +02:00
			`.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`
Replace Status underscore and minor style tweaks 2016-09-21 15:47:24 +02:00			`background-color: rgba($color-background, .5)`
Tasks Index for a Project Work in progress 2016-09-21 14:02:05 +02:00
			`.status-indicator`
Minor style tweaks to Tasks 2016-09-21 18:26:34 +02:00			`transform: scale(1.1)`
Tasks Index for a Project Work in progress 2016-09-21 14:02:05 +02:00
Minor style tweaks to Tasks 2016-09-21 18:26:34 +02:00			`.status, .type`
Tasks Index for a Project Work in progress 2016-09-21 14:02:05 +02:00			`display: inline-block`
			`margin-right: 10px`
			`text-transform: uppercase`
			`font-size: .8em`
			`text-decoration: none`

Minor style tweaks to Tasks 2016-09-21 18:26:34 +02:00			`.type`
CSS: Move tasks into _tasks 2016-09-21 19:38:46 +02:00			`margin-left: auto`
Minor style tweaks to Tasks 2016-09-21 18:26:34 +02:00			`color: $color-text-dark-primary`
Small jQuery plugin for resizing panels Still doesn't save the size, since we want to save this in the user. Which is not implemented yet. 2016-09-28 16:58:14 +02:00			`+text-overflow-ellipsis`
Tasks Index for a Project Work in progress 2016-09-21 14:02:05 +02:00
Minor style tweaks to Tasks 2016-09-21 18:26:34 +02:00			`.name`
			`margin: 10px`
Small jQuery plugin for resizing panels Still doesn't save the size, since we want to save this in the user. Which is not implemented yet. 2016-09-28 16:58:14 +02:00			`+text-overflow-ellipsis`
Tasks Index for a Project Work in progress 2016-09-21 14:02:05 +02:00
Replace duplicated status-{{status}} classes for a nice Sass mixin Set the color for a specified property 1: $property: e.g. background-color 2: $where: ':before', ' .class-name', etc. 3: $variation: 'light', 'dark', or empty e.g. @include status-color-property(background-color, ':before', 'light') 2016-09-29 17:28:04 +02:00			`@include status-color-property(background-color, ' .status-indicator', 'light')`
Fix layout 2016-09-21 14:15:25 +02:00
			`option.invalid_task`
			`color: $color-danger`
			`background-color: hsl(hue($color-danger), 80%, 90%)`
Replace Status underscore and minor style tweaks 2016-09-21 15:47:24 +02:00
			`.task-list-header`
			`border-right: thin solid $color-background`
			`a`
			`color: $color-text-dark`
Small jQuery plugin for resizing panels Still doesn't save the size, since we want to save this in the user. Which is not implemented yet. 2016-09-28 16:58:14 +02:00			`+text-overflow-ellipsis`
Replace Status underscore and minor style tweaks 2016-09-21 15:47:24 +02:00			`a.task-project`
			`color: $color-text-dark-secondary`
Use Select2 for assigning users to tasks 2016-09-21 16:43:51 +02:00			`margin-left: 10px`
Minor style tweaks to Tasks 2016-09-21 18:26:34 +02:00
			`.input-group-separator`
			`margin: 10px 0`
			`border-top: thin solid $color-background`