Home
Diffusion Attract (master) Browse

attract/src/styles/_app_base.sass
1f00c5570dbfmaster

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
background-color: $color-background-light
&[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
$splitter-width: 5px
#app-main
display: flex
align-items: stretch
position: relative
height: 100%
+media-xs
display: block
height: auto
#col_sidebar
width: $sidebar-width
min-width: $sidebar-width
#col_left, #col_main, #col_right
position: relative
flex: 0 0 auto
min-width: 150px
height: 100%
min-height: 100%
position: relative
+media-xs
height: auto
min-height: auto
margin: 0 auto
padding-left: $sidebar-width !important
#col_main
background-color: $color-background
width: 50% // gets overriden by JS, dragging the col-splitter
+media-xs
width: 100%
#col_right
flex: 1 1 auto
.col_header
position: relative
z-index: 1
display: flex
align-items: center
width: 100%
min-height: 50px
background-color: white
padding: 10px 15px
font-size: 1.2em
border-bottom: thin solid $color-background
box-shadow: 0 0 15px rgba(black, .2)
&.scrolled
box-shadow: 0 -2px 20px rgba(black, .2)
.header_text::first-letter
text-transform: capitalize
.col-list-item
display: flex
align-items: center
width: 100%
background-color: white
border-bottom: thin solid $color-background
&.empty
padding: 15px
justify-content: center
span
cursor: default
text-align: center
color: $color-text-dark-secondary
i
margin-right: 5px
display: inline-block
transform-origin: 50% 60%
&:hover span i
+animation-wiggle
.col-splitter
flex: 0 0 auto
width: $splitter-width
background-color: $color-background
border-left: thin solid $color-background-light
border-right: 2px solid $color-background-dark
min-height: 200px
cursor: col-resize
top: 0
bottom: 0
z-index: 1
+media-xs
display: none
visibility: hidden
::-webkit-scrollbar
width: 5px
height: 5px
::-webkit-scrollbar-track
background-color: $color-background
::-webkit-scrollbar-thumb
background-color: $color-text-dark-hint
.flyout.notifications
left: $sidebar-width + 5
top: initial
bottom: 40px
box-shadow: 1px 1px 0 rgba(black, .1), 0 5px 50px rgba(black, .25)
/* Sidebar */
nav.sidebar
position: fixed
z-index: 1
left: 0
width: $sidebar-width
height: 100%
background-color: $color-background-nav-dark
display: flex
flex-direction: column
.dropdown
min-width: $sidebar-width
.dropdown-menu
top: initial
bottom: 3px
left: $sidebar-width
box-shadow: 1px 1px 0 rgba(black, .1), 0 5px 50px rgba(black, .25)
min-width: 200px
li a
justify-content: flex-start
ul
width: 100%
margin: 0
padding: 0
&.bottom
margin-top: auto
li
display: block
a.navbar-item, button
display: flex
color: $color-text-light-hint
font-size: 1.5em
align-items: center
justify-content: center
padding: 10px 0
background: transparent
border: none
width: 100%
text-decoration: none
&:hover
color: $color-text-light-primary
&:active
outline: none
&.cloud
i
position: relative
left: -4px
a.dropdown-toggle
padding: 0
margin: 0
width: $sidebar-width
max-width: $sidebar-width
.special
top: 8px
left: 27px
#notifications-toggle
&.active .flyout-hat
display: none
#notifications-count
right: 5px
span
top: 1px
.input-group-flex
display: flex
.input-group
width: 100%
display: flex
align-items: center
label
padding-right: 10px
font-weight: normal
color: $color-text-dark-primary
min-width: 80px
&.select_multiple
margin-bottom: 10px
input, input.form-control
background-color: transparent
.input-group
input, textarea, select
border-radius: 0
input, textarea, select
border: thin solid transparent
border-bottom-color: $color-background-dark
padding: 5px
margin-top: 10px
margin-bottom: 10px
width: 100%
transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out
&:hover
border-bottom-color: $color-text-dark-secondary
&:focus
outline: 0
border-bottom-color: $color-primary
box-shadow: 0 1px 0 0 $color-primary
select
border-top-left-radius: 3px
border-top-right-radius: 3px
background-color: $color-background-light
option
background-color: white
button
&#item-save
+button($color-success, 3px)
textarea
resize: vertical
.input-group-separator
margin: 10px 0
border-top: thin solid $color-background
#status-bar
color: $color-text-dark-secondary
margin-left: auto
text-align: right
.table
display: table
width: 100%
position: relative
margin-bottom: initial // overrides BS
.table-row
display: table-row
.table-head
display: table-header-group
.table-cell
font-size: .9em
color: $color-text-dark-secondary
.table-body
display: table-row-group
.table-cell
display: table-cell
border-bottom: thin solid $color-background-dark
vertical-align: middle
span.hint
color: $color-text-dark-hint
.table-cell-spacer
background-color: $color-background-light
width: 6px
min-width: 4px
height: 100%
display: table-cell
border: 2px solid $color-background
border-top: none
border-bottom: none
cursor: e-resize
.table.table-hover
.table-row:hover
background-color: $color-background-light
/* Attract specific table tweaks */
.item-list
overflow-x: scroll
.table
background-color: white
.table-row:hover
background-color: $color-background-light
.table-cell
&.item-status
width: 5px
height: 100%
.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
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
@include status-color-property(background-color, ' .item-status', '')
.table-cell
text-align: center
border-left: thin solid transparent
border-right: thin solid transparent
&.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
&.item-thumbnail
border-left: none
border-bottom: none
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: background-color 150ms ease-in-out, border 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 0 1px rgba($color-primary, .2), 1px 1px 0 rgba(black, .2)
&:hover
border-color: $color-primary-light
&.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-left: 10px
/* Generic Statuses */
.processing
+stripes(rgba(black, .1), rgba(white, .1), -45deg, 25px)
+stripes-animate
animation-duration: 2s
.flash-on
background-color: lighten($color-success, 40%) !important
border-color: lighten($color-success, 40%) !important
color: darken($color-success, 10%) !important
text-shadow: 1px 1px 0 white
transition: all .1s ease-in
img
transition: all .1s ease-in
opacity: .8
&:before
background-color: lighten($color-success, 40%) !important
.flash-off
transition: all 1s ease-out
img
transition: all 1s ease-out
.btn:active
box-shadow: none
.bg-status
@include status-color-property(background-color, '', 'dark')
.fg-status
@include status-color-property(color, '', 'dark')
/* Modal Bootstrap overrides */
.modal-dialog
margin-top: 0
.modal-content
border: none
box-shadow: 0 0 25px rgba(black, .25)
background-color: $color-background-light
.modal-header
background-color: white
padding: 10px 10px 10px 15px
.title
font-size: 1.2em
.close
float: right
background: transparent
border: none
color: $color-text-dark-hint
&:hover
color: $color-primary
.modal-backdrop
background-color: transparent
.modal-help-panel
overflow: hidden
border-radius: 3px
width: 30%
background-color: white
box-shadow: 1px 2px 10px rgba(black, .1)
.title
display: block
padding: 10px
color: $color-text-dark-primary
/* 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')
.collapsing
transition: all 150ms ease-in-out
opacity: 0
.collapse
transition: all 250ms ease-in-out
&.in
opacity: 1
/* 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