archive/attract
0
0
Fork 0
Code Issues 7 Pull Requests Projects Releases Wiki Activity
Files
c02b959c3f4e5bd2cf87c93717e2282daa9095e0
attract/src/styles/_app_base.sass

539 lines
9.6 KiB
Sass
Raw Normal View History

Fix alignment of errors/columns height
2016-10-20 12:57:00 +02:00
body
position: absolute // allow columns/errors to fill the whole page
top: 0
left: 0
right: 0
bottom: 0
Fix background colors being clipped
2016-10-20 18:22:58 +02:00
background-color: $color-background-light
Fix alignment of errors/columns height
2016-10-20 12:57:00 +02:00
Style sidebar according to context
2016-11-01 16:16:04 +01:00
&[data-context="task"]
Hide scrollbar on main document when we're on shot/task context
2016-11-04 18:00:23 +01:00
overflow: hidden // columns scroll independently
Style sidebar according to context
2016-11-01 16:16:04 +01:00
nav.sidebar .navbar-item.tasks
Tweaks to style of active items
2016-11-01 16:53:44 +01:00
+sidebar-button-active
Style sidebar according to context
2016-11-01 16:16:04 +01:00
&[data-context="shot"]
Hide scrollbar on main document when we're on shot/task context
2016-11-04 18:00:23 +01:00
overflow: hidden // columns scroll independently
Style sidebar according to context
2016-11-01 16:16:04 +01:00
nav.sidebar .navbar-item.shots
Tweaks to style of active items
2016-11-01 16:53:44 +01:00
+sidebar-button-active
Style sidebar according to context
2016-11-01 16:16:04 +01:00
Styling tweaks for assets
2016-11-09 15:19:10 +01:00
&[data-context="asset"]
overflow: hidden // columns scroll independently
nav.sidebar .navbar-item.assets
+sidebar-button-active
Style sidebar according to context
2016-11-01 16:16:04 +01:00
&[data-context="dashboard"]
nav.sidebar .navbar-item.attract
Tweaks to style of active items
2016-11-01 16:53:44 +01:00
+sidebar-button-active
Style sidebar according to context
2016-11-01 16:16:04 +01:00
Shots/Tasks count on list
2016-11-04 16:29:37 +01:00
#col_main .col_header
box-shadow: none
Individual scroll for shot/tasks list and item details
2016-11-04 16:16:01 +01:00
$splitter-width: 6px
Tasks Index for a Project Work in progress
2016-09-21 14:02:05 +02:00
#app-main
display: flex
align-items: stretch
Another attempt at fixing the background clipping
2016-10-20 19:21:58 +02:00
position: relative
Fix error page alignment
2016-10-21 17:09:23 +02:00
height: 100%
Tasks Index for a Project Work in progress
2016-09-21 14:02:05 +02:00
Responsive tweaks
2016-10-24 15:55:47 +02:00
+media-xs
display: block
height: auto
Fix background colors being clipped
2016-10-20 18:22:58 +02:00
#col_sidebar
width: $sidebar-width
min-width: $sidebar-width
#col_left, #col_main, #col_right
position: relative
flex: 0 0 auto
min-width: 150px
Another attempt at fixing the background clipping
2016-10-20 19:21:58 +02:00
height: 100%
min-height: 100%
position: relative
Minor style tweaks to tasks/shots list
2016-11-03 16:07:55 +01:00
background-color: $color-background-light
Fix background colors being clipped
2016-10-20 18:22:58 +02:00
Responsive tweaks
2016-10-24 15:55:47 +02:00
+media-xs
height: auto
min-height: auto
margin: 0 auto
padding-left: $sidebar-width !important
Fix background colors being clipped
2016-10-20 18:22:58 +02:00
#col_main
width: 50% // gets overriden by JS, dragging the col-splitter
Responsive tweaks
2016-10-24 15:55:47 +02:00
+media-xs
width: 100%
Fix background colors being clipped
2016-10-20 18:22:58 +02:00
#col_right
flex: 1 1 auto
Individual scroll for shot/tasks list and item details
2016-11-04 16:16:01 +01:00
padding-left: $splitter-width // to compensate width of the splitter, which is positioned 'fixed'
Fix background colors being clipped
2016-10-20 18:22:58 +02:00
.col_header
position: relative
Individual scroll for shot/tasks list and item details
2016-11-04 16:16:01 +01:00
z-index: 1
Fix background colors being clipped
2016-10-20 18:22:58 +02:00
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
Individual scroll for shot/tasks list and item details
2016-11-04 16:16:01 +01:00
box-shadow: 0 0 15px rgba(black, .2)
Fix background colors being clipped
2016-10-20 18:22:58 +02:00
&.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
Utils animation
2016-11-04 12:37:43 +01:00
&.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
Fix background colors being clipped
2016-10-20 18:22:58 +02:00
.col-splitter
flex: 0 0 auto
Individual scroll for shot/tasks list and item details
2016-11-04 16:16:01 +01:00
width: $splitter-width
Fix background colors being clipped
2016-10-20 18:22:58 +02:00
background-color: $color-background
min-height: 200px
cursor: col-resize
Another attempt at fixing the background clipping
2016-10-20 19:21:58 +02:00
top: 0
bottom: 0
Fix background colors being clipped
2016-10-20 18:22:58 +02:00
z-index: 1
Hide column splitter on mobile
2016-11-03 18:40:25 +01:00
+media-xs
display: none
visibility: hidden
Individual scroll for shot/tasks list and item details
2016-11-04 16:16:01 +01:00
::-webkit-scrollbar
width: 5px
::-webkit-scrollbar-track
background-color: $color-background
::-webkit-scrollbar-thumb
background-color: $color-text-dark-hint
Split base.css to their own css
2016-10-18 18:22:44 +02:00
.flyout.notifications
left: $sidebar-width + 5
top: initial
bottom: 40px
box-shadow: 1px 1px 0 rgba(black, .1), 0 5px 50px rgba(black, .25)
Fix background colors being clipped
2016-10-20 18:22:58 +02:00
/* Sidebar */
Tasks Index for a Project Work in progress
2016-09-21 14:02:05 +02:00
nav.sidebar
position: fixed
Split base.css to their own css
2016-10-18 18:22:44 +02:00
z-index: 1
Tasks Index for a Project Work in progress
2016-09-21 14:02:05 +02:00
left: 0
width: $sidebar-width
height: 100%
Split base.css to their own css
2016-10-18 18:22:44 +02:00
background-color: $color-background-nav-dark
Style modal dialog and status-debug classes
2016-10-13 19:24:53 +02:00
display: flex
flex-direction: column
Split base.css to their own css
2016-10-18 18:22:44 +02:00
.dropdown
min-width: $sidebar-width
Fix alignment of login dropdown
2016-10-20 18:39:33 +02:00
.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
Split base.css to their own css
2016-10-18 18:22:44 +02:00
Style modal dialog and status-debug classes
2016-10-13 19:24:53 +02:00
ul
width: 100%
margin: 0
padding: 0
&.bottom
margin-top: auto
Tasks Index for a Project Work in progress
2016-09-21 14:02:05 +02:00
Style modal dialog and status-debug classes
2016-10-13 19:24:53 +02:00
li
display: block
Better text for Attract on non-logged in users
2016-10-21 20:44:59 +02:00
Minor alignment tweaks to sidebar
2016-10-20 17:12:33 +02:00
a.navbar-item, button
Tasks Index for a Project Work in progress
2016-09-21 14:02:05 +02:00
display: flex
color: $color-text-light-hint
font-size: 1.5em
align-items: center
justify-content: center
padding: 10px 0
Style modal dialog and status-debug classes
2016-10-13 19:24:53 +02:00
background: transparent
border: none
width: 100%
Style sidebar icons
2016-10-20 17:50:45 +02:00
text-decoration: none
Tasks Index for a Project Work in progress
2016-09-21 14:02:05 +02:00
&:hover
color: $color-text-light-primary
Style modal dialog and status-debug classes
2016-10-13 19:24:53 +02:00
&:active
outline: none
Tasks Index for a Project Work in progress
2016-09-21 14:02:05 +02:00
Cloud icon on sidebar
2016-11-01 17:29:51 +01:00
&.cloud
i
position: relative
left: -4px
Split base.css to their own css
2016-10-18 18:22:44 +02:00
a.dropdown-toggle
padding: 0
margin: 0
width: $sidebar-width
max-width: $sidebar-width
Minor alignment tweaks to sidebar
2016-10-20 17:12:33 +02:00
.special
top: 8px
Fix alignment of notifications count
2016-10-20 17:47:06 +02:00
left: 27px
Style sidebar icons
2016-10-20 17:50:45 +02:00
#notifications-toggle
&.active .flyout-hat
display: none
#notifications-count
right: 5px
span
top: 1px
Minor alignment tweaks to sidebar
2016-10-20 17:12:33 +02:00
Shot status indicator and other minor tweaks
2016-09-22 21:27:15 +02:00
.input-group-flex
display: flex
Display a bottom border on inputs, not completely transparent
2016-11-03 12:30:39 +01:00
.input-group
Tasks Index for a Project Work in progress
2016-09-21 14:02:05 +02:00
width: 100%
Use Select2 for assigning users to tasks
2016-09-21 16:43:51 +02:00
display: flex
align-items: center
label
padding-right: 10px
font-weight: normal
color: $color-text-dark-primary
Shot status indicator and other minor tweaks
2016-09-22 21:27:15 +02:00
min-width: 80px
Use Select2 for assigning users to tasks
2016-09-21 16:43:51 +02:00
&.select_multiple
margin-bottom: 10px
Style activities on dashboard
2016-10-20 12:54:03 +02:00
input, input.form-control
background-color: transparent
Display a bottom border on inputs, not completely transparent
2016-11-03 12:30:39 +01:00
.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%
Fix delay when resizing textareas
2016-11-04 13:06:06 +01:00
transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out
Display a bottom border on inputs, not completely transparent
2016-11-03 12:30:39 +01:00
&:hover
border-bottom-color: $color-text-dark-secondary
Tasks Index for a Project Work in progress
2016-09-21 14:02:05 +02:00
Display a bottom border on inputs, not completely transparent
2016-11-03 12:30:39 +01:00
&:focus
outline: 0
border-bottom-color: $color-primary
box-shadow: 0 1px 0 0 $color-primary
Tasks Index for a Project Work in progress
2016-09-21 14:02:05 +02:00
Display a bottom border on inputs, not completely transparent
2016-11-03 12:30:39 +01:00
select
Style save buttons on shots/tasks
2016-11-03 13:07:46 +01:00
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)
Use the new button mixin
2016-11-02 16:37:10 +01:00
Fix delay when resizing textareas
2016-11-04 13:06:06 +01:00
textarea
resize: vertical
Tasks Index for a Project Work in progress
2016-09-21 14:02:05 +02:00
#status-bar
color: $color-text-dark-secondary
margin-left: auto
Added 'type' to options when saving form, for status-bar details Also fixed the title of the header. It was removing the status-bar when setting "Shot details"
2016-09-22 17:46:17 +02:00
text-align: right
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
display: table
width: 100%
Shot list: collapse columns by clicking on the title
2016-09-22 15:44:41 +02:00
position: relative
Style task read-only details
2016-10-21 14:47:55 +02:00
margin-bottom: initial // overrides BS
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-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
Tweaks to flash-on/off
2016-09-22 16:43:19 +02:00
vertical-align: middle
Shot list: collapse columns by clicking on the title
2016-09-22 15:44:41 +02:00
Tweaks to read-only details on shots and tasks
2016-10-21 15:47:38 +02:00
span.hint
color: $color-text-dark-hint
Shot list: collapse columns by clicking on the title
2016-09-22 15:44:41 +02:00
.table-cell-spacer
background-color: $color-background-light
width: 6px
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
min-width: 4px
Shot list: collapse columns by clicking on the title
2016-09-22 15:44:41 +02:00
height: 100%
display: table-cell
border: 2px solid $color-background
border-top: none
border-bottom: none
cursor: e-resize
Tweaks to flash-on/off
2016-09-22 16:43:19 +02:00
Style task read-only details
2016-10-21 14:47:55 +02:00
.table.table-hover
.table-row:hover
background-color: $color-background-light
Style activities on dashboard
2016-10-20 12:54:03 +02:00
Move flash-on to _base, since it's generic
2016-09-22 19:14:58 +02:00
/* Generic Statuses */
Tweaks to flash-on/off
2016-09-22 16:43:19 +02:00
.processing
Shot status indicator and other minor tweaks
2016-09-22 21:27:15 +02:00
+stripes(rgba($color-background, .2), rgba($color-background, .5), -45deg, 25px)
Tweaks to flash-on/off
2016-09-22 16:43:19 +02:00
+stripes-animate
animation-duration: 2s
Move flash-on to _base, since it's generic
2016-09-22 19:14:58 +02:00
.flash-on
background-color: lighten($color-success, 50%) !important
border-color: lighten($color-success, 40%) !important
color: $color-success !important
Shot status indicator and other minor tweaks
2016-09-22 21:27:15 +02:00
text-shadow: 1px 1px 0 white
Move flash-on to _base, since it's generic
2016-09-22 19:14:58 +02:00
transition: all .1s ease-in
Shot status indicator and other minor tweaks
2016-09-22 21:27:15 +02:00
img
transition: all .1s ease-in
opacity: .8
Move flash-on to _base, since it's generic
2016-09-22 19:14:58 +02:00
.flash-off
Shot status indicator and other minor tweaks
2016-09-22 21:27:15 +02:00
transition: all 1s ease-out
img
transition: all 1s ease-out
Add icon to Save Changes
2016-09-23 18:07:20 +02:00
Use dropdown for copy to clipboard/delete tasks
2016-09-29 12:57:01 +02:00
.btn:active
box-shadow: none
Added shot summary per project on /attract
2016-10-05 14:42:01 +02:00
.bg-status
@include status-color-property(background-color, '', 'dark')
.fg-status
@include status-color-property(color, '', 'dark')
Style modal dialog and status-debug classes
2016-10-13 19:24:53 +02:00
Style activities on dashboard
2016-10-20 12:54:03 +02:00
/* Modal Bootstrap overrides */
Use transparent background for modal
2016-11-07 17:18:00 +01:00
.modal-dialog
margin-top: 0
Style modal dialog and status-debug classes
2016-10-13 19:24:53 +02:00
.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
Use transparent background for modal
2016-11-07 17:18:00 +01:00
background-color: transparent
Style modal dialog and status-debug classes
2016-10-13 19:24:53 +02:00
.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
Style activities on dashboard
2016-10-20 12:54:03 +02:00
/* Debug styles, such as status color legend on help */
Make debug info collapsable
2016-10-21 16:00:58 +02:00
.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
Style modal dialog and status-debug classes
2016-10-13 19:24:53 +02:00
.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')
Click on last update to get more info
2016-10-21 17:01:32 +02:00
.collapsing
transition: all 150ms ease-in-out
opacity: 0
.collapse
transition: all 250ms ease-in-out
&.in
opacity: 1
Move activities styles to base
2016-11-01 15:54:37 +01:00
/* 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
Move item-details style to base
2016-11-01 16:22:15 +01:00
.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
Individual scroll for shot/tasks list and item details
2016-11-04 16:16:01 +01:00
overflow-x: hidden
Move item-details style to base
2016-11-01 16:22:15 +01:00
.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
Reference in New Issue Copy Permalink