Home
Diffusion Attract (master) Browse

attract/src/styles/_app_base.sass
2f09c4f65094master

Last Change
Raw File

_app_base.sass
View Options

body
position: absolute // allow columns/errors to fill the whole page
top: 0
left: 0
right: 0
bottom: 0
&[data-context="task"]
overflow: hidden // columns scroll independently
nav.sidebar .navbar-item.tasks
+sidebar-button-active
&[data-context="shot"]
overflow: hidden // columns scroll independently
nav.sidebar .navbar-item.shots
+sidebar-button-active
&[data-context="asset"]
overflow: hidden // columns scroll independently
nav.sidebar .navbar-item.assets
+sidebar-button-active
&[data-context="dashboard"]
nav.sidebar .navbar-item.attract
+sidebar-button-active
#col_main
background-color: $color-background-light
.col_header
box-shadow: none
.input-group
width: 100%
display: flex
align-items: center
label
padding-right: 10px
min-width: 80px
white-space: nowrap
&.select_multiple
margin-bottom: 10px
.input-group
input, textarea, select
margin-top: 10px
margin-bottom: 10px
width: 100%
button
&#item-save
+button($color-success, 3px)
/* Attract specific table tweaks */
.item-list
overflow-x: auto
.table
background-color: white
.table-row:hover
background-color: $color-background-light
.table-cell
&.item-status
width: 5px
height: 100%
border-bottom: none
.table-head
.table-cell
text-align: center
&.highlight .collapser
color: $color-primary-dark
&.item-thumbnail
width: $items-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
.table-row
@include status-color-property(background-color, ' .item-status', '')
.table-cell
text-align: center
&.active
background-color: $color-background
&.highlight
background-color: rgba(white, .5)
&.task-type a:before
transform: translate(-50%, -50%) scale(1.2)
&.item-name
text-align: left
position: relative
height: 100%
a
display: flex
padding: 5px 10px
color: $color-text-dark-primary
span
margin: auto 0
line-height: 1.1em
&.item-thumbnail
border-left: none
border-bottom: none
img
transition: opacity 150ms ease-in-out
&.task-type
position: relative
height: 100%
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: background-color 250ms ease-in-out, border 150ms ease-in-out, box-shadow 500ms 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 0 1px rgba($color-primary, .2), 1px 1px 0 rgba(black, .2)
&:hover
border-color: $color-primary-light
&.flash-on
background: transparent !important
&:before
box-shadow: 0 0 25px 5px white
&.processing
background-image: none
&:before
+stripes-animate
+stripes(transparent, rgba($color-background-active, .6), -45deg, 15px)
animation-duration: 4s
&.active
background-image: none
&.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)
.item-list-header
a
color: $color-text-dark
+text-overflow-ellipsis
a.item-project
color: $color-text-dark-secondary
margin-right: 10px
/* Debug styles, such as status color legend on help */
.debug-info
padding-top: 10px
display: flex
flex-direction: column
.debug-info-toggle
width: 100%
color: $color-text-dark-hint
font-size: .9em
text-align: right
.status-debug-item
width: 100%
.status-debug-item-statuses
display: flex
align-items: center
justify-content: center
color: $color-text
text-shadow: 1px 1px 0 rgba(white, .3)
.light, .regular, .dark
flex: 1
min-height: 25px
display: flex
align-items: center
justify-content: center
.light
@include status-color-property(background-color, '', 'light')
.regular
flex: 3
@include status-color-property(background-color, '', '')
.dark
@include status-color-property(background-color, '', 'dark')
/* General style for activities in all places */
.d-activity
font-size: .9em
$activity-highlight-color: #00cc9f
ul
cursor: default
padding: 5px
color: $color-text-dark-primary
list-style: none
li
padding: 0 10px 7px 10px
position: relative
span.date
color: darken($activity-highlight-color, 5%)
/* Left Dot */
&:after
content: ''
display: block
position: absolute
top: 6px
left: -3px
width: 5px
height: 5px
border-radius: 50%
background-color: $color-background-light
border: thin solid $activity-highlight-color
transition: all 250ms ease-in-out
/* Left Line */
&:before
content: ''
display: block
position: absolute
top: 10px
left: -1px
width: 1px
height: 100%
background-color: $activity-highlight-color
transition: all 250ms ease-in-out
&:last-child
&:before
background-color: transparent
span.actor
padding: 0 5px
color: $color-text-dark
img.actor-avatar
width: 16px
height: 16px
border-radius: 50%
margin-right: 5px
position: relative
top: -2px
.attract-box
.item-id
padding: 8px
margin-left: 10px
width: 40px
border: thin solid transparent
background-color: white
color: $color-text-dark-secondary
box-shadow: none
border-color: $color-text-dark-hint
&:hover
color: $color-text-dark-primary
border-color: $color-text-dark-primary
#item-details
overflow-x: hidden
.item-details-empty
display: flex
align-items: center
justify-content: center
width: 100%
height: 100%
color: rgba($color-text-dark-hint, .5)
cursor: default
padding: 15px 10px
font:
size: 2em
weight: 100
#item-view-feed
padding: 10px
color: $color-text-dark-primary
pre
margin: 15px auto
#comments-container
margin-top: 0