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

421 lines
7.5 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
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
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
Another attempt at fixing the background clipping
2016-10-20 19:21:58 +02:00
padding-left: 8px // 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
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
&.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
.col-splitter
flex: 0 0 auto
width: 8px
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
position: fixed
top: 0
bottom: 0
Fix background colors being clipped
2016-10-20 18:22:58 +02:00
z-index: 1
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
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
.input-transparent-group+.input-transparent-group
margin-left: 10px
Tasks Index for a Project Work in progress
2016-09-21 14:02:05 +02:00
.input-transparent-group
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
select.input-transparent
background-color: $color-background
option
background-color: white
Tasks Index for a Project Work in progress
2016-09-21 14:02:05 +02:00
Style activities on dashboard
2016-10-20 12:54:03 +02:00
input, input.form-control
background-color: transparent
Tasks Index for a Project Work in progress
2016-09-21 14:02:05 +02:00
.input-transparent
border: thin solid transparent
border-radius: 3px
padding: 5px
Use Select2 for assigning users to tasks
2016-09-21 16:43:51 +02:00
margin-top: 10px
margin-bottom: 10px
Tasks Index for a Project Work in progress
2016-09-21 14:02:05 +02:00
width: 100%
&:hover
border: thin solid $color-text-dark-hint
#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 */
Style modal dialog and status-debug classes
2016-10-13 19:24:53 +02:00
.modal-content
border: none
border-radius: 3px
box-shadow: 0 0 25px rgba(black, .25)
background-color: $color-background-light
.modal-header
border-top-left-radius: 3px
border-top-right-radius: 3px
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: $color-background-nav
.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
Reference in New Issue Copy Permalink