wekan/client/components/lists/list.styl
Benjamin Tissoires 97d95b4bcb ui: lists: make sure all lists boxes are the same height
When `Show card count` is enabled, the lists with the card counts have
two lines of text while the lists without have only one.

This results in the box around the list headers are not of the same size
and this is visible when setting a color to the list.
2019-01-25 15:58:52 +01:00

285 lines
6 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
flex: 0 0 auto
padding: 20px 12px 4px
position: relative
min-height: 20px
&.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
list-header-color(background, color...)
background: background !important
if color
color: color !important //overwrite text for better visibility
.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