mirror of
https://github.com/wekan/wekan.git
synced 2025-12-15 23:10:13 +01:00
9a45f3752f
We now replace native scrollbar by custom ones on the list card (which is required by the new ergonomics in the parent commit), but the "scrolling engine", is still native, we just hide the scrollbar and draw our own in HTML/CSS using the perfect-scrollbar package (from bower). This commit also implements component scrolling when certain actions are performed, eg scroll to the bottom when the new card composer is opened.
123 lines
2.3 KiB
Stylus
123 lines
2.3 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, 10%)
|
|
height: 100%
|
|
border-left: 1px solid darken(white, 20%)
|
|
padding: 0
|
|
|
|
&:first-child
|
|
margin-left: 5px
|
|
border-left: none
|
|
|
|
.card-detail + &
|
|
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
|
|
padding: 17px
|
|
|
|
.list-name-input
|
|
background: rgba(0, 0, 0, .05)
|
|
border-color: #aaa
|
|
box-shadow: inset 0 1px 8px rgba(0, 0, 0, .15)
|
|
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
|
|
|
|
input[type=submit]
|
|
margin-top: 0
|
|
min-height: 30px
|
|
height: 30px
|
|
|
|
.list-header
|
|
flex: 0 0 auto
|
|
margin: 20px 15px 4px
|
|
position: relative
|
|
min-height: 20px
|
|
|
|
.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
|
|
background-clip: content-box
|
|
background-origin: content-box
|
|
// padding: 6px 8px
|
|
position: absolute
|
|
top: 0
|
|
right: 0
|
|
color: #a6a6a6
|
|
|
|
.list-header-num-cards
|
|
color: #8c8c8c
|
|
margin: 0
|
|
|
|
.list-body
|
|
flex: 1
|
|
overflow-y: auto
|
|
padding: 5px 11px
|
|
|
|
.ps-scrollbar-y-rail
|
|
transform: translateX(2px)
|
|
|
|
.open-card-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: white
|
|
color: #222
|
|
box-shadow: 0 1px 2px rgba(0,0,0,.2)
|
|
|
|
&::selection
|
|
background: transparent
|
|
|
|
@keyframes fadeIn
|
|
from
|
|
opacity: 0
|
|
to
|
|
opacity: 1
|