attract/src/styles/_shots.sass

.table#shot-list
	background-color: white
	.table-row:hover
		background-color: $color-background-light

	.table-cell
		&.shot-status
			width: 5px
			height: 100%
	.table-head
		.table-cell
			text-align: center

			&.highlight .collapser
				color: $color-primary-dark

			&.shot-thumbnail
				width: $shots-list-thumbnail-width

			&.task-type
				text-transform: capitalize

			span.collapser
				cursor: pointer
				width: 100%
				display: inline-block
				padding: 5px

			&:hover
				span.collapser
					color: $color-primary

	.table-body
		display: table-row-group

		.table-row
			position: relative

			&.active
				background-color: $color-background-active

				.table-cell
					border-bottom-color: darken($color-background-active, 15%)
				.table-cell:last-child
					box-shadow: inset -5px 0 0 $color-primary

			&.not-in-edit
				+stripes(rgba($color-background, .1), rgba($color-background, .5), 90deg, 28px)

				.table-cell
					&.shot-name a
						color: $color-text-dark-secondary

					&.shot-status
						opacity: .2

					&.task-type .task-link
						&:before
							opacity: .3
							background: transparent
							border: 2px solid $color-text-dark-secondary

					&.shot-thumbnail img
						opacity: .5

				&.active
					+stripes(white, rgba($color-background-active, .8), 90deg, 28px)

				&:hover, &.active
					.table-cell
						&.shot-thumbnail img
							opacity: 1
						&.task-type .task-link
							@include status-color-property(background-color, ':before', '')

							&:before
								opacity: 1
								border: none

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

		.table-cell
			text-align: center
			border-left: thin solid transparent
			border-right: thin solid transparent

			&.active
				background-color: $color-background

			&.highlight
				background-color: $color-background-light

			&.shot-name
				text-align: left
				position: relative
				height: 100%
				a
					display: flex
					padding: 5px 10px
					color: $color-text-dark-primary

					span
						margin: auto 0

			&.shot-thumbnail img
				transition: opacity 150ms ease-in-out

			&.task-type
				position: relative
				height: 100%
				overflow: hidden
				white-space: nowrap

				a
					display: inline-block /* Each task next to each other */
					vertical-align: middle
					height: 100%
					min-height: 100%
					padding: 15px
					transition: all 150ms ease-in-out
					position: relative

					@include status-color-property(background-color, ':before', '')

					&:focus
						outline: none

						&:before
							transform: translate(-50%, -50%) scale(1.5)

					&:before
						display: block
						content: ''
						position: absolute
						width: 16px
						height: 16px
						border-radius: 50%
						border: 2px solid transparent
						+position-center-translate
						transition: all 150ms ease-in-out

					span
						display: block
						+position-center-translate
						z-index: 1
						font:
							weight: bold
							size: .8em
						text:
							align: center
							transform: capitalize
						color: white

					&.active
						opacity: 1

						&:before
							transform: translate(-50%, -50%) scale(1.3)
							border: 2px solid white
							box-shadow: 0 0 5px 1px $color-background-dark, 1px 1px 0 rgba(black, .2)
						&:hover
							border-color: $color-primary-light

					&.task-add
						width: auto
						border-radius: initial
						opacity: 0
						vertical-align: middle
						padding: 5px
						display: flex
						justify-content: center

						&:hover, &:focus
							opacity: 1

					&:hover
						&:before
							opacity: .8
							transform: translate(-50%, -50%) scale(1.2)
						&.active:before
							transform: translate(-50%, -50%) scale(1.3)
Style task read-only details 2016-10-21 14:47:55 +02:00			`.table#shot-list`
			`background-color: white`
			`.table-row:hover`
			`background-color: $color-background-light`

Shot status indicator and other minor tweaks 2016-09-22 21:27:15 +02:00			`.table-cell`
			`&.shot-status`
			`width: 5px`
			`height: 100%`
Use divs instead of table tags Tables are non-responsive by design and require more overrides to be cross-browser compatible 2016-09-22 12:31:39 +02:00			`.table-head`
			`.table-cell`
Tweaks to flash-on/off 2016-09-22 16:43:19 +02:00			`text-align: center`

Click on the whole cell to open task 2016-09-26 15:58:08 +02:00			`&.highlight .collapser`
			`color: $color-primary-dark`

Use divs instead of table tags Tables are non-responsive by design and require more overrides to be cross-browser compatible 2016-09-22 12:31:39 +02:00			`&.shot-thumbnail`
			`width: $shots-list-thumbnail-width`

			`&.task-type`
			`text-transform: capitalize`

Shot list: collapse columns by clicking on the title 2016-09-22 15:44:41 +02:00			`span.collapser`
			`cursor: pointer`
Tweaks to flash-on/off 2016-09-22 16:43:19 +02:00			`width: 100%`
			`display: inline-block`
			`padding: 5px`
Shot list: collapse columns by clicking on the title 2016-09-22 15:44:41 +02:00
Click on the whole cell to open task 2016-09-26 15:58:08 +02:00			`&:hover`
			`span.collapser`
			`color: $color-primary`

Use divs instead of table tags Tables are non-responsive by design and require more overrides to be cross-browser compatible 2016-09-22 12:31:39 +02:00			`.table-body`
			`display: table-row-group`
Shot status indicator and other minor tweaks 2016-09-22 21:27:15 +02:00
			`.table-row`
			`position: relative`

			`&.active`
Minor tweaks to active/in-edit shots 2016-11-04 12:48:01 +01:00			`background-color: $color-background-active`
Shot status indicator and other minor tweaks 2016-09-22 21:27:15 +02:00
Minor tweaks to active/in-edit shots 2016-11-04 12:48:01 +01:00			`.table-cell`
			`border-bottom-color: darken($color-background-active, 15%)`
Shot status indicator and other minor tweaks 2016-09-22 21:27:15 +02:00			`.table-cell:last-child`
			`box-shadow: inset -5px 0 0 $color-primary`

Style shots not in the edit 2016-11-04 11:42:34 +01:00			`&.not-in-edit`
Minor tweaks to active/in-edit shots 2016-11-04 12:48:01 +01:00			`+stripes(rgba($color-background, .1), rgba($color-background, .5), 90deg, 28px)`
Style shots not in the edit 2016-11-04 11:42:34 +01:00
			`.table-cell`
			`&.shot-name a`
			`color: $color-text-dark-secondary`

			`&.shot-status`
			`opacity: .2`

			`&.task-type .task-link`
			`&:before`
			`opacity: .3`
			`background: transparent`
			`border: 2px solid $color-text-dark-secondary`

			`&.shot-thumbnail img`
			`opacity: .5`

Minor tweaks to active/in-edit shots 2016-11-04 12:48:01 +01:00			`&.active`
			`+stripes(white, rgba($color-background-active, .8), 90deg, 28px)`
Style shots not in the edit 2016-11-04 11:42:34 +01:00
Minor tweaks to active/in-edit shots 2016-11-04 12:48:01 +01:00			`&:hover, &.active`
Style shots not in the edit 2016-11-04 11:42:34 +01:00			`.table-cell`
			`&.shot-thumbnail img`
			`opacity: 1`
			`&.task-type .task-link`
			`@include status-color-property(background-color, ':before', '')`

			`&:before`
			`opacity: 1`
			`border: none`

Minor style tweaks to shots list 2016-10-13 19:25:22 +02:00			`@include status-color-property(background-color, ' .shot-status', '')`
Shot status indicator and other minor tweaks 2016-09-22 21:27:15 +02:00
Use divs instead of table tags Tables are non-responsive by design and require more overrides to be cross-browser compatible 2016-09-22 12:31:39 +02:00			`.table-cell`
Tweaks to flash-on/off 2016-09-22 16:43:19 +02:00			`text-align: center`
Click on the whole cell to open task 2016-09-26 15:58:08 +02:00			`border-left: thin solid transparent`
			`border-right: thin solid transparent`

			`&.active`
			`background-color: $color-background`

			`&.highlight`
			`background-color: $color-background-light`

Use divs instead of table tags Tables are non-responsive by design and require more overrides to be cross-browser compatible 2016-09-22 12:31:39 +02:00			`&.shot-name`
Tweaks to flash-on/off 2016-09-22 16:43:19 +02:00			`text-align: left`
Click on the whole cell to open task 2016-09-26 15:58:08 +02:00			`position: relative`
			`height: 100%`
Shot status indicator and other minor tweaks 2016-09-22 21:27:15 +02:00			`a`
Fix alignment of tasks in shots 2016-10-12 16:36:08 +02:00			`display: flex`
			`padding: 5px 10px`
Shot status indicator and other minor tweaks 2016-09-22 21:27:15 +02:00			`color: $color-text-dark-primary`
Use divs instead of table tags Tables are non-responsive by design and require more overrides to be cross-browser compatible 2016-09-22 12:31:39 +02:00
Style when there are thumbnails available TODO: Once we have the user-space, we show or not .has-thumbnail 2016-11-03 17:51:20 +01:00			`span`
			`margin: auto 0`

Style shots not in the edit 2016-11-04 11:42:34 +01:00			`&.shot-thumbnail img`
			`transition: opacity 150ms ease-in-out`

Shot list: collapse columns by clicking on the title 2016-09-22 15:44:41 +02:00			`&.task-type`
Click on the whole cell to open task 2016-09-26 15:58:08 +02:00			`position: relative`
			`height: 100%`
			`overflow: hidden`
Fix unlikely case of many tasks per shot 2016-11-03 16:33:45 +01:00			`white-space: nowrap`
Use divs instead of table tags Tables are non-responsive by design and require more overrides to be cross-browser compatible 2016-09-22 12:31:39 +02:00
			`a`
Fix alignment of tasks in shots 2016-10-12 16:36:08 +02:00			`display: inline-block /* Each task next to each other */`
			`vertical-align: middle`
Click on the whole cell to open task 2016-09-26 15:58:08 +02:00			`height: 100%`
Fix alignment of tasks in shots 2016-10-12 16:36:08 +02:00			`min-height: 100%`
			`padding: 15px`
Tweaks to flash-on/off 2016-09-22 16:43:19 +02:00			`transition: all 150ms ease-in-out`
Fix alignment of tasks in shots 2016-10-12 16:36:08 +02:00			`position: relative`
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
Fix alignment of tasks in shots 2016-10-12 16:36:08 +02:00			`@include status-color-property(background-color, ':before', '')`
Click on the whole cell to open task 2016-09-26 15:58:08 +02:00
Accesibility tweaks 2016-11-03 17:51:33 +01:00			`&:focus`
			`outline: none`

			`&:before`
			`transform: translate(-50%, -50%) scale(1.5)`

Click on the whole cell to open task 2016-09-26 15:58:08 +02:00			`&:before`
			`display: block`
			`content: ''`
			`position: absolute`
			`width: 16px`
			`height: 16px`
			`border-radius: 50%`
			`border: 2px solid transparent`
Fix alignment of tasks in shots 2016-10-12 16:36:08 +02:00			`+position-center-translate`
Better highlighting of tasks, and fix when there are multiple tasks 2016-09-26 16:25:14 +02:00			`transition: all 150ms ease-in-out`
Tweaks to flash-on/off 2016-09-22 16:43:19 +02:00
Fix alignment of tasks in shots 2016-10-12 16:36:08 +02:00			`span`
			`display: block`
			`+position-center-translate`
			`z-index: 1`
			`font:`
			`weight: bold`
			`size: .8em`
			`text:`
			`align: center`
			`transform: capitalize`
			`color: white`

Shots view: set task as active when selecting it 2016-09-22 17:09:43 +02:00			`&.active`
Move flash-on to _base, since it's generic 2016-09-22 19:14:58 +02:00			`opacity: 1`
Shot list: Make shot active when making one of its tasks active 2016-09-29 15:50:27 +02:00
			`&:before`
Fix alignment of tasks in shots 2016-10-12 16:36:08 +02:00			`transform: translate(-50%, -50%) scale(1.3)`
Accesibility tweaks 2016-11-03 17:51:33 +01:00			`border: 2px solid white`
			`box-shadow: 0 0 5px 1px $color-background-dark, 1px 1px 0 rgba(black, .2)`
Fix alignment of tasks in shots 2016-10-12 16:36:08 +02:00			`&:hover`
			`border-color: $color-primary-light`
Shot status indicator and other minor tweaks 2016-09-22 21:27:15 +02:00
			`&.task-add`
			`width: auto`
			`border-radius: initial`
Copy to clipboard for shots 2016-09-23 18:07:11 +02:00			`opacity: 0`
Click on the whole cell to open task 2016-09-26 15:58:08 +02:00			`vertical-align: middle`
Shot list: Make shot active when making one of its tasks active 2016-09-29 15:50:27 +02:00			`padding: 5px`
fix alignment of add task button 2016-09-29 15:35:52 +02:00			`display: flex`
Center + Task label 2016-10-20 16:35:17 +02:00			`justify-content: center`
Shots view: set task as active when selecting it 2016-09-22 17:09:43 +02:00
Accesibility tweaks 2016-11-03 17:51:33 +01:00			`&:hover, &:focus`
Better highlighting of tasks, and fix when there are multiple tasks 2016-09-26 16:25:14 +02:00			`opacity: 1`
Use divs instead of table tags Tables are non-responsive by design and require more overrides to be cross-browser compatible 2016-09-22 12:31:39 +02:00
Better highlighting of tasks, and fix when there are multiple tasks 2016-09-26 16:25:14 +02:00			`&:hover`
			`&:before`
			`opacity: .8`
Fix alignment of tasks in shots 2016-10-12 16:36:08 +02:00			`transform: translate(-50%, -50%) scale(1.2)`
			`&.active:before`
Better highlighting of tasks, and fix when there are multiple tasks 2016-09-26 16:25:14 +02:00			`transform: translate(-50%, -50%) scale(1.3)`