wekan/client/components/lists/list.styl
Maxime Quandalle 691c3aff68 Improve the list menu
* Grow the click-able zone of the list menu
* Remove a dead link on the list menu
* Merge list menu files with header menu to be consistent with the
  board components internal organization

Closes #106
2015-08-28 06:22:35 +02:00

114 lines
2.2 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%)
height: 100%
border-left: 1px solid darken(white, 20%)
padding: 0
&:first-child
margin-left: 5px
border-left: none
.card-details + &
border-left: none
&.ui-sortable-helper
cursor: grabbing
box-shadow: -2px 2px 8px rgba(0, 0, 0, .3),
0 0 1px rgba(0, 0, 0, .5)
transform: rotate(4deg)
&.placeholder
background-color: rgba(0, 0, 0, .2)
border-color: transparent
box-shadow: none
height: 100px
&.list-composer, & list-composer
padding: 17px
form
margin-top: -5px
.list-name-input
background: rgba(255, 255, 255, .4)
border-color: #aaa
display: block
margin: 0
transition: margin 85ms ease-in,
background 85ms ease-in
width: 100%
.edit-controls
height: 32px
transition: margin 85ms ease-in,
height 85ms ease-in
overflow: hidden
margin: 4px 0 0
.list-header
flex: 0 0 auto
margin: 20px 12px 4px
position: relative
min-height: 20px
&.ui-sortable-handle
cursor: grab
.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-menu-icon
position: absolute
padding: 7px
top: -@padding
right: -@padding
.list-body
flex: 1
display: flex
overflow-y: auto
padding: 5px 11px
.minicards
flex: 1
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)