mirror of
https://github.com/wekan/wekan.git
synced 2025-12-15 23:10:13 +01:00
30d082e709
This allows to reduce the loading time of a big board. Note that there is an infinite scroll implementation in the mixins, but this doesn't fit well as the cards in the list can have arbitrary height. The idea to rely on the visibility of a spinner is based on http://www.meteorpedia.com/read/Infinite_Scrolling
294 lines
6.1 KiB
Stylus
294 lines
6.1 KiB
Stylus
@import 'nib'
|
|
|
|
.list
|
|
box-sizing: border-box
|
|
display: flex
|
|
flex-direction: column
|
|
flex: 0 0 270px
|
|
position: relative
|
|
// Even if this background color is the same as the body we can't leave it
|
|
// transparent, because that won't work during a list drag.
|
|
background: darken(white, 13%)
|
|
border-left: 1px solid darken(white, 20%)
|
|
padding: 0
|
|
float: left
|
|
|
|
&:first-child
|
|
margin-left: 5px
|
|
border-left: none
|
|
|
|
.card-details + &
|
|
border-left: none
|
|
|
|
&.ui-sortable-helper
|
|
box-shadow: -2px 2px 8px rgba(0, 0, 0, .3),
|
|
0 0 1px rgba(0, 0, 0, .5)
|
|
transform: rotate(4deg)
|
|
cursor: grabbing
|
|
|
|
.list-header.ui-sortable-handle
|
|
cursor: grabbing
|
|
|
|
&.placeholder
|
|
background-color: rgba(0, 0, 0, .2)
|
|
border-color: transparent
|
|
box-shadow: none
|
|
height: 100px
|
|
|
|
&.list-composer, & .list-composer
|
|
.open-list-composer
|
|
color: #8c8c8c
|
|
|
|
.list-name-input
|
|
background: white
|
|
margin: -3px 0 8px
|
|
|
|
.list-header-card-count
|
|
height: 35px
|
|
|
|
.list-header-add
|
|
flex: 0 0 auto
|
|
padding: 20px 12px 4px
|
|
position: relative
|
|
min-height: 20px
|
|
|
|
.list-header
|
|
flex: 0 0 auto
|
|
padding: 20px 12px 4px
|
|
position: relative
|
|
min-height: 20px
|
|
background-color: #e4e4e4;
|
|
border-bottom: 6px solid #e4e4e4;
|
|
|
|
|
|
&.ui-sortable-handle
|
|
cursor: grab
|
|
|
|
.list-header-left-icon
|
|
display: none
|
|
|
|
.list-header-name
|
|
display: inline
|
|
font-size: 16px
|
|
line-height: 17px
|
|
margin: 0
|
|
font-weight: bold
|
|
min-height: 9px
|
|
min-width: 30px
|
|
overflow: hidden
|
|
text-overflow: ellipsis
|
|
word-wrap: break-word
|
|
|
|
|
|
.list-header-watch-icon
|
|
padding-left: 10px
|
|
color: #a6a6a6
|
|
|
|
.list-header-menu
|
|
position: absolute
|
|
padding: 27px 19px
|
|
margin-top: 1px
|
|
top: -7px
|
|
right: -7px
|
|
|
|
.list-header-plus-icon
|
|
color: #a6a6a6
|
|
margin-right: 10px
|
|
|
|
.highlight
|
|
color: #ce1414
|
|
|
|
.list-body
|
|
flex: 1 1 auto
|
|
flex-direction: column
|
|
display: flex
|
|
overflow-y: auto
|
|
padding: 5px 11px
|
|
|
|
.minicards
|
|
flex-grow: 1
|
|
flex-shrink: 0
|
|
|
|
form
|
|
margin-bottom: 9px
|
|
|
|
.ps-scrollbar-y-rail
|
|
transform: translateX(2px)
|
|
|
|
.open-minicard-composer
|
|
border-radius: 2px
|
|
color: #8c8c8c
|
|
display: block
|
|
padding: 7px 10px
|
|
position: relative
|
|
text-decoration: none
|
|
animation: fadeIn 0.3s
|
|
|
|
i.fa
|
|
margin-right: 7px
|
|
|
|
&:hover
|
|
background: #fafafa
|
|
color: #222
|
|
box-shadow: 0 1px 2px rgba(0,0,0,.2)
|
|
|
|
#js-wip-limit-edit
|
|
padding-top: 2%
|
|
|
|
p
|
|
margin-bottom: 0
|
|
|
|
input
|
|
display: inline-block
|
|
|
|
.wip-limit-value
|
|
width: 20%
|
|
margin-right: 5%
|
|
|
|
.wip-limit-error
|
|
display: none
|
|
|
|
.soft-wip-limit
|
|
margin-right: 8px
|
|
|
|
div
|
|
float: left
|
|
|
|
@media screen and (max-width: 800px)
|
|
.mini-list
|
|
flex: 0 0 60px
|
|
height: 60px
|
|
width: 100%
|
|
border-left: 0px
|
|
border-bottom: 1px solid darken(white, 20%)
|
|
|
|
.list
|
|
display: block
|
|
width: 100%
|
|
border-left: 0px
|
|
|
|
&.ui-sortable-helper
|
|
flex: 0 0 60px
|
|
height: 60px
|
|
width: 100%
|
|
border-left: 0px
|
|
border-bottom: 1px solid darken(white, 20%)
|
|
|
|
.list-header.ui-sortable-handle
|
|
cursor: grabbing
|
|
|
|
&.placeholder
|
|
flex: 0 0 60px
|
|
height: 60px
|
|
width: 100%
|
|
border-left: 0px
|
|
border-bottom: 1px solid darken(white, 20%)
|
|
|
|
.list-header
|
|
|
|
.list-header-left-icon
|
|
display: inline
|
|
padding: 7px
|
|
padding-right: 27px
|
|
margin-top: 1px
|
|
top: -@padding
|
|
left: -@padding
|
|
|
|
.list-header-menu-icon
|
|
position: absolute
|
|
padding: 7px
|
|
top: -@padding
|
|
right: 17px
|
|
|
|
.link-board-wrapper
|
|
display: flex
|
|
align-items: baseline
|
|
|
|
.js-link-board
|
|
margin-left: 15px
|
|
|
|
.search-card-results
|
|
max-height: 250px
|
|
overflow: hidden
|
|
|
|
.sk-spinner-list
|
|
margin-top: unset !important
|
|
|
|
list-header-color(background, color...)
|
|
border-bottom: 6px solid background
|
|
|
|
.list-header-white
|
|
list-header-color(#ffffff, #4d4d4d) //Black text for better visibility
|
|
border: 1px solid #eee
|
|
|
|
.list-header-green
|
|
list-header-color(#3cb500, #ffffff) //White text for better visibility
|
|
|
|
.list-header-yellow
|
|
list-header-color(#fad900, #4d4d4d) //Black text for better visibility
|
|
|
|
.list-header-orange
|
|
list-header-color(#ff9f19, #4d4d4d) //Black text for better visibility
|
|
|
|
.list-header-red
|
|
list-header-color(#eb4646, #ffffff) //White text for better visibility
|
|
|
|
.list-header-purple
|
|
list-header-color(#a632db, #ffffff) //White text for better visibility
|
|
|
|
.list-header-blue
|
|
list-header-color(#0079bf, #ffffff) //White text for better visibility
|
|
|
|
.list-header-pink
|
|
list-header-color(#ff78cb, #4d4d4d) //Black text for better visibility
|
|
|
|
.list-header-sky
|
|
list-header-color(#00c2e0, #ffffff) //White text for better visibility
|
|
|
|
.list-header-black
|
|
list-header-color(#4d4d4d, #ffffff) //White text for better visibility
|
|
|
|
.list-header-lime
|
|
list-header-color(#51e898, #4d4d4d) //Black text for better visibility
|
|
|
|
.list-header-silver
|
|
list-header-color(unset, #4d4d4d) //Black text for better visibility
|
|
|
|
.list-header-peachpuff
|
|
list-header-color(#ffdab9, #4d4d4d) //Black text for better visibility
|
|
|
|
.list-header-crimson
|
|
list-header-color(#dc143c, #ffffff) //White text for better visibility
|
|
|
|
.list-header-plum
|
|
list-header-color(#dda0dd, #4d4d4d) //Black text for better visibility
|
|
|
|
.list-header-darkgreen
|
|
list-header-color(#006400, #ffffff) //White text for better visibility
|
|
|
|
.list-header-slateblue
|
|
list-header-color(#6a5acd, #ffffff) //White text for better visibility
|
|
|
|
.list-header-magenta
|
|
list-header-color(#ff00ff, #ffffff) //White text for better visibility
|
|
|
|
.list-header-gold
|
|
list-header-color(#ffd700, #4d4d4d) //Black text for better visibility
|
|
|
|
.list-header-navy
|
|
list-header-color(#000080, #ffffff) //White text for better visibility
|
|
|
|
.list-header-gray
|
|
list-header-color(#808080, #ffffff) //White text for better visibility
|
|
|
|
.list-header-saddlebrown
|
|
list-header-color(#8b4513, #ffffff) //White text for better visibility
|
|
|
|
.list-header-paleturquoise
|
|
list-header-color(#afeeee, #4d4d4d) //Black text for better visibility
|
|
|
|
.list-header-mistyrose
|
|
list-header-color(#ffe4e1, #4d4d4d) //Black text for better visibility
|
|
|
|
.list-header-indigo
|
|
list-header-color(#4b0082, #ffffff) //White text for better visibility
|